feat: add WalletSocialLinks component

Author: nhsz

src/components/FindWallet/WalletTable/WalletMoreInfo.tsx

@@ -1,23 +1,11 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { FaDiscord, FaGlobe, FaTwitter } from "react-icons/fa"
-import {
-  Box,
-  Flex,
-  Heading,
-  Icon,
-  SimpleGrid,
-  Stack,
-  Text,
-} from "@chakra-ui/react"
+import { Box, Flex, SimpleGrid } from "@chakra-ui/react"
 
-import { DropdownOption, Lang, WalletFilter } from "@/lib/types"
-
-import InlineLink, { LinkProps } from "@/components/Link"
-
-import { getLocaleFormattedDate } from "@/lib/utils/time"
+import { DropdownOption, WalletFilter } from "@/lib/types"
 
 import { WalletMoreInfoCategory } from "./WalletMoreInfoCategory"
+import { WalletSocialLinks } from "./WalletSocialLinks"
 
 type WalletMoreInfoProps = {
   wallet: Record<string, any>
@@ -27,21 +15,6 @@ type WalletMoreInfoProps = {
   hasAllLabels: boolean
 }
 
-const SocialLink = (props: LinkProps) => (
-  <InlineLink
-    display="flex"
-    height={8}
-    alignItems="center"
-    verticalAlign="middle"
-    transform="scale(1)"
-    transition="transform 0.1s"
-    _hover={{
-      transform: "scale(1.15)",
-    }}
-    {...props}
-  />
-)
-
 export const WalletMoreInfo = ({
   wallet,
   filters,
@@ -81,12 +54,6 @@ export const WalletMoreInfo = ({
     },
   ]
 
-  // Format last updated date with current locale
-  const walletLastUpdated = getLocaleFormattedDate(
-    locale as Lang,
-    wallet.last_updated
-  )
-
   return (
     <Box mt={4} w="full">
       <SimpleGrid
@@ -124,79 +91,7 @@ export const WalletMoreInfo = ({
           </Flex>
 
           {/* Links section */}
-          <Stack
-            as={Text}
-            fontSize="sm"
-            justifyContent="space-between"
-            wrap="wrap"
-            alignItems="flex-start"
-            mt={6}
-            mb={8}
-            spacing={4}
-          >
-            {/* Social icons */}
-            <Heading
-              as="h4"
-              lineHeight={1.4}
-              fontSize="md"
-              fontWeight="bold"
-              ms={{ lg: 2 }}
-              my={-3.5}
-            >
-              {t("page-find-wallet-social-links")}
-            </Heading>
-
-            <Flex ms={{ lg: 2 }} gap="0.8rem">
-              <SocialLink
-                to={wallet.url}
-                hideArrow
-                customEventOptions={{
-                  eventCategory: "WalletExternalLinkList",
-                  eventAction: `Go to wallet`,
-                  eventName: `Website: ${wallet.name} ${idx}`,
-                  eventValue: JSON.stringify(filters),
-                }}
-              >
-                <Icon as={FaGlobe} fontSize="2xl" />
-              </SocialLink>
-
-              {wallet.discord && (
-                <SocialLink
-                  to={wallet.discord}
-                  hideArrow
-                  customEventOptions={{
-                    eventCategory: "WalletExternalLinkList",
-                    eventAction: `Go to wallet`,
-                    eventName: `Discord: ${wallet.name} ${idx}`,
-                    eventValue: JSON.stringify(filters),
-                  }}
-                >
-                  <Icon as={FaDiscord} color="#7289da" fontSize="2xl" />
-                </SocialLink>
-              )}
-
-              {wallet.twitter && (
-                <SocialLink
-                  to={wallet.twitter}
-                  hideArrow
-                  customEventOptions={{
-                    eventCategory: "WalletExternalLinkList",
-                    eventAction: `Go to wallet`,
-                    eventName: `Twitter: ${wallet.name} ${idx}`,
-                    eventValue: JSON.stringify(filters),
-                  }}
-                >
-                  <Icon as={FaTwitter} color="#1da1f2" fontSize="2xl" />
-                </SocialLink>
-              )}
-            </Flex>
-
-            <Text as="i">
-              {`${wallet.name} ${t(
-                "page-find-wallet-info-updated-on"
-              )} ${walletLastUpdated}`}
-            </Text>
-          </Stack>
+          <WalletSocialLinks wallet={wallet} idx={idx} filters={filters} />
         </Box>
       </SimpleGrid>
     </Box>

src/components/FindWallet/WalletTable/WalletSocialLinks.tsx

@@ -0,0 +1,122 @@
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import { FaDiscord, FaGlobe, FaTwitter } from "react-icons/fa"
+import { Flex, Heading, Icon, Stack, Text } from "@chakra-ui/react"
+
+import { Lang, WalletFilter } from "@/lib/types"
+
+import InlineLink, { LinkProps } from "@/components/Link"
+
+import { getLocaleFormattedDate } from "@/lib/utils/time"
+
+type WalletSocialLinksProps = {
+  wallet: Record<string, any>
+  idx: number
+  filters: WalletFilter
+}
+
+const SocialLink = (props: LinkProps) => (
+  <InlineLink
+    display="flex"
+    height={8}
+    alignItems="center"
+    verticalAlign="middle"
+    transform="scale(1)"
+    transition="transform 0.1s"
+    _hover={{
+      transform: "scale(1.15)",
+    }}
+    {...props}
+  />
+)
+
+export const WalletSocialLinks = ({
+  wallet,
+  idx,
+  filters,
+}: WalletSocialLinksProps) => {
+  const { t } = useTranslation("page-wallets-find-wallet")
+  const { locale } = useRouter()
+
+  // Format last updated date with current locale
+  const walletLastUpdated = getLocaleFormattedDate(
+    locale as Lang,
+    wallet.last_updated
+  )
+
+  return (
+    <Stack
+      as={Text}
+      fontSize="sm"
+      justifyContent="space-between"
+      wrap="wrap"
+      alignItems="flex-start"
+      mt={6}
+      mb={8}
+      spacing={4}
+    >
+      {/* Social icons */}
+      <Heading
+        as="h4"
+        lineHeight={1.4}
+        fontSize="md"
+        fontWeight="bold"
+        ms={{ lg: 2 }}
+        my={-3.5}
+      >
+        {t("page-find-wallet-social-links")}
+      </Heading>
+
+      <Flex ms={{ lg: 2 }} gap="0.8rem">
+        <SocialLink
+          to={wallet.url}
+          hideArrow
+          customEventOptions={{
+            eventCategory: "WalletExternalLinkList",
+            eventAction: `Go to wallet`,
+            eventName: `Website: ${wallet.name} ${idx}`,
+            eventValue: JSON.stringify(filters),
+          }}
+        >
+          <Icon as={FaGlobe} fontSize="2xl" />
+        </SocialLink>
+
+        {wallet.discord && (
+          <SocialLink
+            to={wallet.discord}
+            hideArrow
+            customEventOptions={{
+              eventCategory: "WalletExternalLinkList",
+              eventAction: `Go to wallet`,
+              eventName: `Discord: ${wallet.name} ${idx}`,
+              eventValue: JSON.stringify(filters),
+            }}
+          >
+            <Icon as={FaDiscord} color="#7289da" fontSize="2xl" />
+          </SocialLink>
+        )}
+
+        {wallet.twitter && (
+          <SocialLink
+            to={wallet.twitter}
+            hideArrow
+            customEventOptions={{
+              eventCategory: "WalletExternalLinkList",
+              eventAction: `Go to wallet`,
+              eventName: `Twitter: ${wallet.name} ${idx}`,
+              eventValue: JSON.stringify(filters),
+            }}
+          >
+            <Icon as={FaTwitter} color="#1da1f2" fontSize="2xl" />
+          </SocialLink>
+        )}
+      </Flex>
+
+      <Text as="i">
+        {`${wallet.name} ${t(
+          "page-find-wallet-info-updated-on"
+        )} ${walletLastUpdated}`}
+      </Text>
+    </Stack>
+  )
+}