Merge pull request #11315 from hicommonwealth/israel.11298.add-warcas…

…t-icon added warpcast icon and updated COmmuntiy Home
hicommonwealth · Mar 6, 2025 · dbf6e47 · dbf6e47
2 parents e6e0cd2 + a6e44bb
commit dbf6e47
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 3 deletions.
diff --git a/packages/commonwealth/client/scripts/helpers/link.ts b/packages/commonwealth/client/scripts/helpers/link.ts
@@ -9,6 +9,7 @@ export type LinkType =
   | 'tiktok'
   | 'github'
   | 'matrix'
+  | 'warpcast'
   | '';
 
 export const getLinkType = (link: string): LinkType => {
@@ -23,6 +24,7 @@ export const getLinkType = (link: string): LinkType => {
     return 'x (twitter)';
   if (link.includes('github.com')) return 'github';
   if (link.includes('matrix.to')) return 'matrix';
+  if (link.includes('warpcast.com')) return 'warpcast';
   return '';
 };
 
@@ -34,6 +36,7 @@ export type CategorizedSocialLinks = {
   twitters: string[];
   elements: string[];
   slacks: string[];
+  warpcasts: string[];
   remainingLinks: string[];
 };
 
@@ -48,6 +51,7 @@ export const categorizeSocialLinks = (
     twitters: [],
     elements: [],
     slacks: [],
+    warpcasts: [],
     remainingLinks: [],
   };
 
@@ -75,6 +79,9 @@ export const categorizeSocialLinks = (
       case 'matrix':
         categorized.elements.push(link);
         break;
+      case 'warpcast':
+        categorized.warpcasts.push(link);
+        break;
       default:
         categorized.remainingLinks.push(link);
     }

diff --git a/packages/commonwealth/client/scripts/views/components/AuthButton/constants.ts b/packages/commonwealth/client/scripts/views/components/AuthButton/constants.ts
@@ -166,4 +166,39 @@ export const AUTH_TYPES: AuthTypesList = {
     },
     label: 'Farcaster',
   },
+  telegram: {
+    icon: {
+      name: 'telegram',
+      isCustom: false,
+    },
+    label: 'Telegram',
+  },
+  tiktok: {
+    icon: {
+      name: 'tiktok',
+      isCustom: false,
+    },
+    label: 'TikTok',
+  },
+  warpcast: {
+    icon: {
+      name: 'warpcast',
+      isCustom: false,
+    },
+    label: 'Warpcast',
+  },
+  element: {
+    icon: {
+      name: 'element',
+      isCustom: false,
+    },
+    label: 'Element',
+  },
+  website: {
+    icon: {
+      name: 'website',
+      isCustom: false,
+    },
+    label: 'Website',
+  },
 };
diff --git a/packages/commonwealth/client/scripts/views/components/AuthButton/types.ts b/packages/commonwealth/client/scripts/views/components/AuthButton/types.ts
@@ -11,7 +11,12 @@ export type AuthSSOs =
   | 'apple'
   | 'email'
   | 'farcaster'
-  | 'SMS';
+  | 'SMS'
+  | 'telegram'
+  | 'tiktok'
+  | 'warpcast'
+  | 'element'
+  | 'website';
 export type CosmosWallets = 'keplr' | 'leap';
 export type SubstrateWallets = 'polkadot';
 export type SolanaWallets = 'phantom';

diff --git a/...ges/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts b/...ges/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icon_lookup.ts
@@ -130,6 +130,7 @@ export const iconLookup = {
   image: withPhosphorIcon(Image),
   clipboard: withPhosphorIcon(Clipboard),
   cloudArrowUp: withPhosphorIcon(CloudArrowUp),
+  element: Icons.CWElement,
   archiveTrayFilled: Icons.CWArchiveTrayFilled,
   arrowDownBlue500: Icons.CWArrowDownBlue500,
   arrowFatUp: Icons.CWArrowFatUp,
@@ -211,7 +212,6 @@ export const iconLookup = {
   dotsHorizontal: Icons.CWDotsHorizontal,
   downvote: withPhosphorIcon(ArrowFatDown),
   edgeware: Icons.CWEdgeware,
-  element: Icons.CWElement,
   envelope: Icons.CWEnvelope,
   ethereum: Icons.CWEthereum,
   etherscan: Icons.CWEtherscan,
@@ -321,6 +321,7 @@ export const iconLookup = {
   kanban: withPhosphorIcon(Kanban),
   xTwitter: withPhosphorIcon(XLogo),
   discordLogo: withPhosphorIcon(DiscordLogo),
+  warpcast: Icons.CWWarpcast,
 };
 
 export const customIconLookup = {

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icons.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_icons/cw_icons.tsx
@@ -1367,6 +1367,42 @@ export const CWDiscord = (props: IconProps) => {
   );
 };
 
+// eslint-disable-next-line react/no-multi-comp
+export const CWWarpcast = (props: IconProps) => {
+  const {
+    className,
+    componentType,
+    disabled,
+    iconButtonTheme,
+    iconSize,
+    selected,
+    ...otherProps
+  } = props;
+  return (
+    <svg
+      className={getClasses<IconStyleProps>(
+        { className, disabled, iconButtonTheme, iconSize, selected },
+        componentType,
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      style={{ fill: 'white' }}
+      {...otherProps}
+    >
+      <path
+        d="M24.0698 31.9902H7.92028C3.55304 31.9902 0 28.4374 0 24.07V7.92064C0 3.5533 3.55304 0.000244141 7.92028 0.000244141H24.0698C28.4371 0.000244141 31.9901 3.5533 31.9901 7.92064V24.07C31.9901 28.4374 28.4371 31.9902 24.0698 31.9902Z"
+        fill="#472A91"
+      />
+      <path
+        d="M20.9908 10.124L19.4134 16.048L17.8309 10.124H14.1891L12.5915 16.0916L10.999 10.124H6.85114L10.7055 23.2219H14.2839L15.9951 17.1397L17.7062 23.2219H21.2924L25.1382 10.124H20.9908Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
 // eslint-disable-next-line react/no-multi-comp
 export const CWDiscordLogin = (props: IconProps) => {
   const {

diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/external_links_module.tsx b/packages/commonwealth/client/scripts/views/components/sidebar/external_links_module.tsx
@@ -25,6 +25,7 @@ export const ExternalLinksModule = () => {
     telegrams,
     tiktoks,
     twitters,
+    warpcasts,
   } = categorizeSocialLinks(
     (community.social_links || [])
       .filter((link) => link)
@@ -81,6 +82,14 @@ export const ExternalLinksModule = () => {
           onClick={() => window.open(link)}
         />
       ))}
+      {warpcasts.map((link) => (
+        <CWIcon
+          key={link}
+          iconName="warpcast"
+          className="warpcast-link"
+          onClick={() => window.open(link)}
+        />
+      ))}
       {[...remainingLinks, ...slacks].map((link) => (
         <CWIcon
           key={link}

diff --git a/packages/commonwealth/client/scripts/views/components/social_accounts.tsx b/packages/commonwealth/client/scripts/views/components/social_accounts.tsx
@@ -30,6 +30,8 @@ export const SocialAccounts = (props: SocialAccountsProps) => {
           return <SocialAccount link={social} iconName="github" key={i} />;
         } else if (social.includes('tiktok')) {
           return <SocialAccount link={social} iconName="tiktok" key={i} />;
+        } else if (social.includes('warpcast')) {
+          return <SocialAccount link={social} iconName="warpcast" key={i} />;
         } else {
           return <SocialAccount link={social} iconName="website" key={i} />;
         }

diff --git a/...nwealth/client/scripts/views/pages/CommunityHome/TokenDetails/SocialLinks/SocialLinks.tsx b/...nwealth/client/scripts/views/pages/CommunityHome/TokenDetails/SocialLinks/SocialLinks.tsx
@@ -13,7 +13,17 @@ const SocialLinks = () => {
 
   if (!app.chain || !community) return;
 
-  const { discords, githubs, twitters } = categorizeSocialLinks(
+  const {
+    discords,
+    githubs,
+    twitters,
+    telegrams,
+    warpcasts,
+    remainingLinks,
+    tiktoks,
+    elements,
+    slacks,
+  } = categorizeSocialLinks(
     (community.social_links || [])
       .filter((link) => link)
       .map((link) => link || ''),
@@ -45,6 +55,46 @@ const SocialLinks = () => {
           onClick={() => window.open(link)}
         />
       ))}
+      {telegrams.map((link) => (
+        <AuthButton
+          className="autoWidth"
+          key={link}
+          type="telegram"
+          onClick={() => window.open(link)}
+        />
+      ))}
+      {warpcasts.map((link) => (
+        <AuthButton
+          className="autoWidth"
+          key={link}
+          type="warpcast"
+          onClick={() => window.open(link)}
+        />
+      ))}
+      {tiktoks.map((link) => (
+        <AuthButton
+          className="autoWidth"
+          key={link}
+          type="tiktok"
+          onClick={() => window.open(link)}
+        />
+      ))}
+      {elements.map((link) => (
+        <AuthButton
+          className="autoWidth"
+          key={link}
+          type="element"
+          onClick={() => window.open(link)}
+        />
+      ))}
+      {[...remainingLinks, ...slacks].map((link) => (
+        <AuthButton
+          className="autoWidth"
+          key={link}
+          type="website"
+          onClick={() => window.open(link)}
+        />
+      ))}
     </div>
   );
 };