Add support for overriding social text and links from .env

oasisprotocol · Feb 11, 2024 · 2b28f6c · 2b28f6c
1 parent 8162404
commit 2b28f6c
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 38 deletions.
diff --git a/.env b/.env
@@ -9,3 +9,10 @@ REACT_APP_TESTNET_API=https://testnet.nexus.oasis.io/v1/
 # REACT_APP_NO_BUILD_BANNERS=true
 # REACT_APP_TITLE=Magic Explorer
 # REACT_APP_DESC=The official explorer for my cool project
+# REACT_APP_SOCIAL_HEADER=Check us out
+# REACT_APP_SOCIAL_DESCRIPTION=You can learn more about us here
+# REACT_APP_SOCIAL_TELEGRAM=https://t.me/DrDrMcHonkHonk
+# REACT_APP_SOCIAL_TWITTER=https://twitter.com/TheBabylonBee/
+# REACT_APP_SOCIAL_DISCORD=https://disboard.org/server/645341027053600768
+# REACT_APP_SOCIAL_YOUTUBE=https://www.youtube.com/@orf
+# REACT_APP_SOCIAL_REDDIT=https://www.reddit.com/r/relationship_advice/
diff --git a/src/app/components/Social/index.tsx b/src/app/components/Social/index.tsx
@@ -67,10 +67,10 @@ export const Social: FC = () => {
     >
       <Grid xs={12} md={4}>
         <Typography sx={{ fontSize: 18, fontWeight: 700, mb: 3 }} color={COLORS.white}>
-          {t('social.header')}
+          {process.env.REACT_APP_SOCIAL_HEADER ?? t('social.header')}
         </Typography>
         <Typography color={COLORS.white} sx={{ maxWidth: 230 }}>
-          {t('social.description')}
+          {process.env.REACT_APP_SOCIAL_DESCRIPTION ?? t('social.description')}
         </Typography>
       </Grid>
       <Grid xs={12} md={8}>
@@ -84,31 +84,46 @@ export const Social: FC = () => {
             height: '100%',
           }}
         >
-          <SocialLink
-            isMobile={isMobile}
-            label={t('social.telegram')}
-            href={socialMedia.telegram}
-            img={telegram}
-          />
-          <SocialLink
-            isMobile={isMobile}
-            label={t('social.twitter')}
-            href={socialMedia.twitter}
-            img={twitter}
-          />
-          <SocialLink
-            isMobile={isMobile}
-            label={t('social.discord')}
-            href={socialMedia.discord}
-            img={discord}
-          />
-          <SocialLink
-            isMobile={isMobile}
-            label={t('social.youtube')}
-            href={socialMedia.youtube}
-            img={youtube}
-          />
-          <SocialLink isMobile={isMobile} label={t('social.reddit')} href={socialMedia.reddit} img={reddit} />
+          {socialMedia.telegram && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.telegram')}
+              href={socialMedia.telegram}
+              img={telegram}
+            />
+          )}
+          {socialMedia.twitter && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.twitter')}
+              href={socialMedia.twitter}
+              img={twitter}
+            />
+          )}
+          {socialMedia.discord && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.discord')}
+              href={socialMedia.discord}
+              img={discord}
+            />
+          )}
+          {socialMedia.youtube && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.youtube')}
+              href={socialMedia.youtube}
+              img={youtube}
+            />
+          )}
+          {socialMedia.reddit && (
+            <SocialLink
+              isMobile={isMobile}
+              label={t('social.reddit')}
+              href={socialMedia.reddit}
+              img={reddit}
+            />
+          )}
         </Box>
       </Grid>
     </Grid>

diff --git a/src/app/utils/__tests__/externalLinks.test.ts b/src/app/utils/__tests__/externalLinks.test.ts
@@ -24,10 +24,12 @@ onlyRunOnCI('externalLinks', () => {
   })
 
   describe('should be reachable', () => {
+    const { reddit, twitter } = externalLinksModule.socialMedia
     for (const [linksGroupName, linksGroup] of Object.entries(externalLinksModule)) {
       for (const [linkName, url] of Object.entries(linksGroup)) {
-        if (url.startsWith(externalLinksModule.socialMedia.reddit)) continue // Reddit often returns 504
-        if (url.startsWith(externalLinksModule.socialMedia.twitter)) continue // redirect loop
+        if (!url || typeof url !== 'string') continue
+        if (!!reddit && url.startsWith(reddit)) continue // Reddit often returns 504
+        if (!!twitter && url.startsWith(twitter)) continue // redirect loop
         if (url.startsWith(externalLinksModule.referrals.coinGecko)) continue // CoinGecko has CloudFlare DDOS protection
         if (url.startsWith(externalLinksModule.github.commit)) continue // We store only partial url in constants
         if (url.startsWith(externalLinksModule.github.releaseTag)) continue // We store only partial url in constants

diff --git a/src/app/utils/externalLinks.ts b/src/app/utils/externalLinks.ts
@@ -1,14 +1,32 @@
 import { Layer } from '../../oasis-nexus/api'
 
-export const socialMedia = {
-  telegram: 'https://t.me/oasisprotocolcommunity',
-  twitter: 'https://twitter.com/oasisprotocol',
-  discord: 'https://oasis.io/discord',
-  // This API link is for testing if invite is still valid.
-  isDiscordStillValid: 'https://oasis.io/discord/invite-api-check',
-  youtube: 'https://www.youtube.com/channel/UC35UFPcZ2F1wjPxhPrSsESQ',
-  reddit: 'https://www.reddit.com/r/oasisnetwork/',
-}
+const customTelegram = process.env.REACT_APP_SOCIAL_TELEGRAM
+const customTwitter = process.env.REACT_APP_SOCIAL_TWITTER
+const customDiscord = process.env.REACT_APP_SOCIAL_DISCORD
+const customYouTube = process.env.REACT_APP_SOCIAL_YOUTUBE
+const customReddit = process.env.REACT_APP_SOCIAL_REDDIT
+
+const hasCustomSocialLinks =
+  !!customTelegram || !!customTwitter || !!customDiscord || !!customYouTube || !customReddit
+
+export const socialMedia = hasCustomSocialLinks
+  ? {
+      telegram: customTelegram,
+      twitter: customTwitter,
+      discord: customDiscord,
+      isDiscordStillValid: true,
+      youtube: customYouTube,
+      reddit: customReddit,
+    }
+  : {
+      telegram: 'https://t.me/oasisprotocolcommunity',
+      twitter: 'https://twitter.com/oasisprotocol',
+      discord: 'https://oasis.io/discord',
+      // This API link is for testing if invite is still valid.
+      isDiscordStillValid: 'https://oasis.io/discord/invite-api-check',
+      youtube: 'https://www.youtube.com/channel/UC35UFPcZ2F1wjPxhPrSsESQ',
+      reddit: 'https://www.reddit.com/r/oasisnetwork/',
+    }
 
 const docsUrl = 'https://docs.oasis.io/'
 const consensusDocsUrl = `${docsUrl}core/consensus/`