feat: using SNS and ENS names

package.json

@@ -6,6 +6,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@bigmi/react": "^0.0.4",
+    "@bonfida/sns-react": "^3.1.2",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

src/components/Menus/WalletMenu/WalletCard.tsx

@@ -10,7 +10,6 @@ import { useUserTracking } from '@/hooks/userTracking/useUserTracking';
 import { useMenuStore } from '@/stores/menu';
 import { usePortfolioStore } from '@/stores/portfolio';
 import { openInNewTab } from '@/utils/openInNewTab';
-import { walletDigest } from '@/utils/walletDigest';
 import type { Account } from '@lifi/wallet-management';
 import {
   getConnectorIcon,
@@ -25,6 +24,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ButtonSecondary } from 'src/components/Button';
 import { JUMPER_SCAN_PATH } from 'src/const/urls';
+import { useWalletLabel } from 'src/hooks/useWalletLabel';
 import {
   Button,
   WalletAvatar,
@@ -45,6 +45,7 @@ export const WalletCard = ({ account }: WalletCardProps) => {
   const { checkMultisigEnvironment } = useMultisig();
   const [isMultisigEnvironment, setIsMultisigEnvironment] = useState(false);
   const router = useRouter();
+  const label = useWalletLabel(account.address);
   const activeChain = useMemo(
     () => chains?.find((chainEl) => chainEl.id === account.chainId),
     [chains, account.chainId],
@@ -165,7 +166,7 @@ export const WalletCard = ({ account }: WalletCardProps) => {
           })}
         >
           <Typography variant="bodySmallStrong" sx={{ fontSize: '16px' }}>
-            {walletDigest(account.address)}
+            {label}
           </Typography>
         </Button>
         <Stack direction="row" alignItems="flex-end" spacing={1}>

src/components/Navbar/WalletButton.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useChains } from '@/hooks/useChains';
 import { useMenuStore } from '@/stores/menu';
-import { walletDigest } from '@/utils/walletDigest';
 import type { Chain } from '@lifi/sdk';
 import {
   getConnectorIcon,
@@ -16,10 +15,10 @@ import { useTranslation } from 'react-i18next';
 import { JUMPER_LOYALTY_PATH, JUMPER_SCAN_PATH } from 'src/const/urls';
 import useImageStatus from 'src/hooks/useImageStatus';
 import { useLoyaltyPass } from 'src/hooks/useLoyaltyPass';
+import { useWalletLabel } from 'src/hooks/useWalletLabel';
 import { numberWithCommas } from 'src/utils/formatNumbers';
 import { JUMPER_WASH_PATH } from '../../const/urls';
 import { XPIcon } from '../illustrations/XPIcon';
-import { PromoLabel } from '../PromoLabel.style';
 import {
   ConnectButton,
   ConnectButtonLabel,
@@ -48,9 +47,7 @@ export const WalletButtons = () => {
     (state) => state,
   );
 
-  const _walletDigest = useMemo(() => {
-    return walletDigest(account?.address);
-  }, [account?.address]);
+  const label = useWalletLabel(account?.address);
 
   const activeChain = useMemo(
     () => chains?.find((chainEl: Chain) => chainEl.id === account?.chainId),
@@ -137,9 +134,7 @@ export const WalletButtons = () => {
                 />
               </WalletMgmtBadge>
             ) : null}
-            <WalletLabel variant={'bodyMediumStrong'}>
-              {_walletDigest}
-            </WalletLabel>
+            <WalletLabel variant={'bodyMediumStrong'}>{label}</WalletLabel>
           </WalletMenuButton>
         </Stack>
       )}

src/components/ProfilePage/AddressCard/AddressCard.tsx

@@ -6,10 +6,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useImageStatus from 'src/hooks/useImageStatus';
 import { useMercleNft } from 'src/hooks/useMercleNft';
-import { getAddressLabel } from 'src/utils/getAddressLabel';
-import type { Address } from 'viem';
-import { useEnsName } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
+import { useWalletLabel } from 'src/hooks/useWalletLabel';
 import { AddressMenu } from '../AddressMenu/AddressMenu';
 import {
   AddressBox,
@@ -34,14 +31,10 @@ export const AddressCard = ({ address }: AddressBoxProps) => {
 
   const [openAddressMenu, setOpenAddressMenu] = useState(false);
   const { imageLink } = useMercleNft({ userAddress: address });
-  const { data: ensName, isSuccess } = useEnsName({
-    address: address as Address | undefined,
-    chainId: mainnet.id,
-  });
   const imgLink = useImageStatus(address);
   const { setSnackbarState } = useMenuStore((state) => state);
   const { openWalletMenu } = useWalletMenu();
-
+  const label = useWalletLabel(address);
   const handleCopyButton = (textToCopy?: string) => {
     if (!textToCopy) {
       return;
@@ -59,12 +52,6 @@ export const AddressCard = ({ address }: AddressBoxProps) => {
     setOpenAddressMenu(true);
   };
 
-  const addressLabel = getAddressLabel({
-    isSuccess,
-    ensName,
-    address,
-  });
-
   return (
     <AddressBoxContainer>
       <PassImageBox>
@@ -89,7 +76,7 @@ export const AddressCard = ({ address }: AddressBoxProps) => {
             onClick={() => handleCopyButton(address)}
           >
             <AddressButtonLabel variant="bodyMediumStrong">
-              {addressLabel}
+              {label}
             </AddressButtonLabel>
           </AddressButton>
         ) : (

src/hooks/useENSSNS.ts

@@ -0,0 +1,50 @@
+import { useReverseLookup } from '@bonfida/sns-react';
+import { useConnection } from '@solana/wallet-adapter-react';
+import { PublicKey } from '@solana/web3.js';
+import type { Address, GetEnsNameReturnType } from 'viem';
+import { useEnsName } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+export interface UseENSSNSType {
+  name?: GetEnsNameReturnType;
+  isSuccess: boolean;
+}
+
+export const useENSSNS = (address: string | undefined): UseENSSNSType => {
+  // SNS:
+  // https://www.youtube.com/watch?v=MWz-Vt1SoFE
+  // https://www.npmjs.com/package/@bonfida/sns-react
+
+  // const wallet = useWallet();
+  const { connection } = useConnection();
+  // google: 4SthxbjwRJGW4uugoA111j6NKjBye1pZb16y4PHZ3TZC
+  // https://sns-sdk-proxy.bonfida.workers.dev/reverse-lookup/4SthxbjwRJGW4uugoA111j6NKjBye1pZb16y4PHZ3TZC
+
+  // alex: 4g91FFE76SzjTvx4bUcNUUFXWw9wYLwcKbaEayVg9bgC
+  // https://sns-sdk-proxy.bonfida.workers.dev/reverse-lookup/4g91FFE76SzjTvx4bUcNUUFXWw9wYLwcKbaEayVg9bgC
+
+  // returns null !!!
+  const { result } = useReverseLookup(
+    connection,
+    new PublicKey('4SthxbjwRJGW4uugoA111j6NKjBye1pZb16y4PHZ3TZC'),
+  );
+
+  // console.log('REVERSE:', result);
+
+  // const primaryDomain = usePrimaryDomain(
+  //   connection,
+  //   new PublicKey('HKKp49qGWXd639QsuH7JiLijfVW5UtCVY4s1n2HANwEA'),
+  // );
+  // console.log('testing sns...', primaryDomain?.result);
+
+  // ENS:
+  const { data: ensName, isSuccess } = useEnsName({
+    address: address as Address | undefined,
+    chainId: mainnet.id,
+  });
+
+  if (!ensName) {
+    return { name: address, isSuccess: false };
+  }
+
+  return { name: ensName, isSuccess };
+};

src/hooks/useWalletLabel.ts

@@ -0,0 +1,13 @@
+import { getAddressLabel } from 'src/utils/getAddressLabel';
+import { useENSSNS } from './useENSSNS';
+
+export const useWalletLabel = (address?: string) => {
+  const { name, isSuccess } = useENSSNS(address);
+  const addressLabel = getAddressLabel({
+    isSuccess,
+    ensName: name,
+    address,
+  });
+
+  return addressLabel;
+};