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

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

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -55,7 +55,7 @@
     "@safe-global/protocol-kit": "^4.1.3",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-client-gateway-sdk": "v1.60.1",
-    "@safe-global/safe-gateway-typescript-sdk": "3.22.6-beta.0",
+    "@safe-global/safe-gateway-typescript-sdk": "3.22.6",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

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>
         )}

diff --git a/yarn.lock b/yarn.lock
@@ -7523,10 +7523,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@safe-global/safe-gateway-typescript-sdk@npm:3.22.6-beta.0":
-  version: 3.22.6-beta.0
-  resolution: "@safe-global/safe-gateway-typescript-sdk@npm:3.22.6-beta.0"
-  checksum: 10/9a4d0a1ac5d4e82a7e53904f7a8b7d955624e910f3eb041e1c99d09673c71dd9f8252bd33d1708470b1ecf1c80feeeb3d6f33e72e68ee2f4ba248e7ebbd4e80d
+"@safe-global/safe-gateway-typescript-sdk@npm:3.22.6":
+  version: 3.22.6
+  resolution: "@safe-global/safe-gateway-typescript-sdk@npm:3.22.6"
+  checksum: 10/021f605143d507b1fc9b9be34a1a0f96aecd268d5349428e92bf636b64c9123dd992e27ce95c6c47a092a80f95a3fb1756a651322eda497d1ef867a62a8710da
   languageName: node
   linkType: hard
 
@@ -7613,7 +7613,7 @@ __metadata:
     "@safe-global/safe-apps-sdk": "npm:^9.1.0"
     "@safe-global/safe-client-gateway-sdk": "npm:v1.60.1"
     "@safe-global/safe-core-sdk-types": "npm:^5.0.1"
-    "@safe-global/safe-gateway-typescript-sdk": "npm:3.22.6-beta.0"
+    "@safe-global/safe-gateway-typescript-sdk": "npm:3.22.6"
     "@safe-global/safe-modules-deployments": "npm:^2.2.1"
     "@sentry/react": "npm:^7.91.0"
     "@sentry/types": "npm:^7.74.0"