feat: nfd domains support (#143)

next.config.js

@@ -23,6 +23,8 @@ const nextConfig = {
       'dweb.link',
       'cloudflare-ipfs.com',
       'ipfs-gateway.cloud',
+      '*.nf.domains',
+      'images.nf.domains',
 
       'images.unsplash.com',
       'vitals.vercel-insights.com',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "algoworld-swapper",
   "description": "Free and trustless ASA swapper, powered by Algorand ⚡️",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": true,
   "author": "AlgoWorld <[email protected]>",
   "license": "GPL-3.0",

src/components/Headers/NavBar.tsx

@@ -24,7 +24,6 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
 import Container from '@mui/material/Container';
-import AccountBalanceWalletOutlined from '@mui/icons-material/AccountBalanceWalletOutlined';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
@@ -78,6 +77,8 @@ import {
 import { IpfsGateway } from '@/models/Gateway';
 import ValueSelect from '../Select/ValueSelect';
 import { useWallet } from '@txnlab/use-wallet';
+import { useAsync } from 'react-use';
+import getNFDsForAddress from '@/utils/api/accounts/getNFDsForAddress';
 
 type PageConfiguration = {
   title: string;
@@ -111,6 +112,7 @@ const NavBar = () => {
   };
 
   const { providers, activeAddress } = useWallet();
+
   const activeProvider = React.useMemo(() => {
     return providers?.find((p) => p.isActive);
   }, [providers]);
@@ -123,6 +125,26 @@ const NavBar = () => {
     chain: selectedChain,
   } = useAppSelector((state) => state.application);
 
+  const nfdState = useAsync(async () => {
+    if (!activeAddress) {
+      return;
+    }
+    const nfd = await getNFDsForAddress(activeAddress, selectedChain);
+    return nfd;
+  }, [activeAddress, selectedChain]);
+
+  const nfd = React.useMemo(() => {
+    if (nfdState.loading || nfdState.error) {
+      return null;
+    }
+
+    return nfdState.value;
+  }, [nfdState.error, nfdState.loading, nfdState.value]);
+
+  const nfdAvatar = React.useMemo(() => {
+    return nfd?.properties?.userDefined?.avatar;
+  }, [nfd]);
+
   const isWalletPopupOpen = useAppSelector(
     (state) => state.application.isWalletPopupOpen,
   );
@@ -436,15 +458,30 @@ const NavBar = () => {
                           onClick={handleOpenUserMenu}
                           sx={{ p: 0, borderRadius: 1 }}
                         >
-                          <AccountBalanceWalletOutlined sx={{ pr: 0.5 }} />
-                          <Typography variant="h6">
-                            {`${activeAddress?.slice(
-                              0,
-                              4,
-                            )}...${activeAddress?.slice(
-                              activeAddress.length - 4,
-                              activeAddress.length,
-                            )} `}
+                          {/* <AccountBalanceWalletOutlined sx={{ pr: 0.5 }} /> */}
+                          {nfd && nfdAvatar && (
+                            <div
+                              style={{
+                                borderRadius: `50%`,
+                                overflow: `hidden`,
+                                width: `40px`,
+                                height: `40px`,
+                              }}
+                            >
+                              <Image
+                                src={nfdAvatar}
+                                alt="nfd-profile"
+                                width={40}
+                                height={40}
+                                placeholder="blur"
+                                blurDataURL={nfdAvatar}
+                              />
+                            </div>
+                          )}
+                          <Typography sx={{ pl: nfd ? 1 : 0 }} variant="h6">
+                            {`${
+                              nfd ? nfd.name : ellipseAddress(activeAddress, 4)
+                            }`}
                           </Typography>
                         </IconButton>
                       </Tooltip>

src/utils/api/accounts/getNFDsForAddress.test.ts

@@ -0,0 +1,60 @@
+import { ChainType } from '@/models/Chain';
+import axios from 'axios';
+import getNFDsForAddress from './getNFDsForAddress';
+
+jest.mock(`axios`);
+
+describe(`getNFDsForAddress`, () => {
+  it(`should return the NFD for the given address on mainnet`, async () => {
+    const address = `tnaq9cjf54ct59bmua78iuv6gtpjtdunc78q8jebwgmxyacb`;
+    const chain = ChainType.MainNet;
+    const nfd = { name: `test-nfd` };
+    const response = { data: [nfd] };
+
+    (axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValue(
+      response,
+    );
+
+    const result = await getNFDsForAddress(address, chain);
+    expect(result).toEqual(nfd);
+  });
+
+  it(`should return the NFD for the given address on testnet`, async () => {
+    const address = `tnaq9cjf54ct59bmua78iuv6gtpjtdunc78q8jebwgmxyacb`;
+    const chain = ChainType.TestNet;
+    const nfd = { name: `test-nfd` };
+    const response = { data: [nfd] };
+
+    (axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValue(
+      response,
+    );
+
+    const result = await getNFDsForAddress(address, chain);
+    expect(result).toEqual(nfd);
+  });
+
+  it(`should return null if the NFD is not found`, async () => {
+    const address = `tnaq9cjf54ct59bmua78iuv6gtpjtdunc78q8jebwgmxyacb`;
+    const chain = ChainType.MainNet;
+    const response = { data: [] };
+
+    (axios.get as jest.MockedFunction<typeof axios.get>).mockResolvedValue(
+      response,
+    );
+
+    const result = await getNFDsForAddress(address, chain);
+    expect(result).toBeNull();
+  });
+
+  it(`should return null if the request fails`, async () => {
+    const address = `tnaq9cjf54ct59bmua78iuv6gtpjtdunc78q8jebwgmxyacb`;
+    const chain = ChainType.MainNet;
+
+    (axios.get as jest.MockedFunction<typeof axios.get>).mockRejectedValue(
+      new Error(`Request failed`),
+    );
+
+    const result = await getNFDsForAddress(address, chain);
+    expect(result).toBeNull();
+  });
+});

src/utils/api/accounts/getNFDsForAddress.ts

@@ -0,0 +1,24 @@
+import { ChainType } from '@/models/Chain';
+import axios from 'axios';
+
+const NFD_MAINNET = `https://api.nf.domains`;
+const NFD_TESTNET = `https://api.testnet.nf.domains`;
+
+const getNFDsForAddress = async (address: string, chain: ChainType) => {
+  try {
+    const url = `${
+      chain === ChainType.MainNet ? NFD_MAINNET : NFD_TESTNET
+    }/nfd`;
+    const response = await axios.get(url, {
+      params: {
+        owner: address,
+      },
+    });
+    return response.data.length > 0 ? response.data[0] : null;
+  } catch (error) {
+    // handle error
+    return null;
+  }
+};
+
+export default getNFDsForAddress;