Add option for Safe Apps to include Telegram ID as a social media link

safe-global · Jan 13, 2025 · 5955296 · 5955296
1 parent 6d697ad
commit 5955296
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/apps/web/src/components/safe-apps/SafeAppSocialLinksCard/SafeAppSocialLinksCard.test.tsx b/apps/web/src/components/safe-apps/SafeAppSocialLinksCard/SafeAppSocialLinksCard.test.tsx
@@ -40,7 +40,17 @@ const githubSocialProfileMock = {
   url: 'http://tx-builder-github',
 }
 
-const socialProfilesMock = [discordSocialProfileMock, twitterSocialProfileMock, githubSocialProfileMock]
+const telegramSocialProfileMock = {
+  platform: SafeAppSocialPlatforms.TELEGRAM,
+  url: 'http://tx-builder-telegram',
+}
+
+const socialProfilesMock = [
+  discordSocialProfileMock,
+  twitterSocialProfileMock,
+  githubSocialProfileMock,
+  telegramSocialProfileMock,
+]
 
 describe('SafeAppSocialLinksCard', () => {
   it('renders nothing if no social link is present in the safe app data', async () => {
@@ -76,6 +86,7 @@ describe('SafeAppSocialLinksCard', () => {
       expect(screen.getByLabelText('Discord link')).toBeInTheDocument()
       expect(screen.getByLabelText('Twitter link')).toBeInTheDocument()
       expect(screen.getByLabelText('Github link')).toBeInTheDocument()
+      expect(screen.getByLabelText('Telegram link')).toBeInTheDocument()
     })
   })
 
@@ -93,6 +104,7 @@ describe('SafeAppSocialLinksCard', () => {
       expect(screen.getByLabelText('Discord link')).toBeInTheDocument()
       expect(screen.getByLabelText('Twitter link')).toBeInTheDocument()
       expect(screen.getByLabelText('Github link')).toBeInTheDocument()
+      expect(screen.getByLabelText('Telegram link')).toBeInTheDocument()
     })
   })
 
@@ -109,6 +121,7 @@ describe('SafeAppSocialLinksCard', () => {
       expect(screen.queryByLabelText('Discord link')).toBeInTheDocument()
       expect(screen.queryByLabelText('Twitter link')).not.toBeInTheDocument()
       expect(screen.queryByLabelText('Github link')).not.toBeInTheDocument()
+      expect(screen.queryByLabelText('Telegram link')).not.toBeInTheDocument()
     })
   })
 })
diff --git a/apps/web/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx b/apps/web/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
@@ -7,6 +7,7 @@ import Divider from '@mui/material/Divider'
 import { default as MuiLink } from '@mui/material/Link'
 import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'
 import GitHubIcon from '@mui/icons-material/GitHub'
+import TelegramIcon from '@mui/icons-material/Telegram'
 import TwitterIcon from '@mui/icons-material/Twitter'
 import { SafeAppSocialPlatforms } from '@safe-global/safe-gateway-typescript-sdk'
 import type { SafeAppData, SafeAppSocialProfile } from '@safe-global/safe-gateway-typescript-sdk'
@@ -30,6 +31,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
   const discordSocialLink = getSocialProfile(socialProfiles, SafeAppSocialPlatforms.DISCORD)
   const twitterSocialLink = getSocialProfile(socialProfiles, SafeAppSocialPlatforms.TWITTER)
   const githubSocialLink = getSocialProfile(socialProfiles, SafeAppSocialPlatforms.GITHUB)
+  const telegramSocialLink = getSocialProfile(socialProfiles, SafeAppSocialPlatforms.TELEGRAM)
 
   return (
     <Card className={css.container}>
@@ -80,6 +82,18 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
                   <GitHubIcon color="border" />
                 </IconButton>
               )}
+
+              {telegramSocialLink && (
+                <IconButton
+                  aria-label="Telegram link"
+                  component="a"
+                  href={telegramSocialLink.url}
+                  target="_blank"
+                  style={{ height: '40px', width: '40px' }}
+                >
+                  <TelegramIcon color="border" />
+                </IconButton>
+              )}
             </Box>
           </div>
         )}