feat: display arc-0072 nft asset (#198)

* feat: add utility function to check for a zero address

* feat: implement parsing of address types in logs

* feat: add arc-0072 contract sdk

* feat: add arc-0072 asset types and asset holding types

* feat: add arc-0072 asset information

* feat: fetch arc-0072 assets from account information

* feat: add nft list to nft tab

* feat: add nft page

* feat: rename explorer to block explorer

* feat: add nft explorer to network config

* feat: add preferred nft explorer settings option

* feat: add nft explorer to image

* feat: add total supply to items on NFT page

* refactor: rename arc-0200 assets feature

src/common/utils/createAlgodClient/createAlgodClient.ts

@@ -5,7 +5,7 @@ import type { IBaseOptions } from '@common/types';
 import type { INetwork, INode } from '@extension/types';
 
 // utils
-import getRandomNode from '../getRandomNode';
+import getRandomItem from '@common/utils/getRandomItem';
 
 /**
  * Gets a random algod node from the given network.
@@ -18,7 +18,7 @@ export default function createAlgodClient(
   { logger }: IBaseOptions = { logger: undefined }
 ): Algodv2 {
   const _functionName: string = 'createAlgodClient';
-  const algod: INode = getRandomNode(network.algods);
+  const algod: INode = getRandomItem<INode>(network.algods);
 
   logger?.debug(
     `${_functionName}: selected algod node "${algod.canonicalName}"`

src/common/utils/getIndexerClient/getIndexerClient.ts

@@ -5,7 +5,7 @@ import { IBaseOptions } from '@common/types';
 import { INetwork, INode } from '@extension/types';
 
 // utils
-import getRandomNode from '../getRandomNode';
+import getRandomItem from '@common/utils/getRandomItem';
 
 /**
  * Gets a random indexer node from the given network.
@@ -17,7 +17,7 @@ export default function getIndexerClient(
   network: INetwork,
   { logger }: IBaseOptions = { logger: undefined }
 ): Indexer {
-  const indexer: INode = getRandomNode(network.indexers);
+  const indexer: INode = getRandomItem<INode>(network.indexers);
 
   logger &&
     logger.debug(

src/common/utils/getRandomItem/getRandomItem.ts

@@ -0,0 +1,8 @@
+/**
+ * Convenience function that randomly picks an item from a list.
+ * @param {Item[]} list - a list of items.
+ * @returns {Item} a random item from the list.
+ */
+export default function getRandomItem<Item>(list: Item[]): Item {
+  return list[Math.floor(Math.random() * list.length)];
+}

src/common/utils/getRandomItem/index.ts

@@ -0,0 +1 @@
+export { default } from './getRandomItem';

src/extension/apps/background/App.tsx

@@ -9,7 +9,7 @@ import Root from './Root';
 
 // features
 import { reducer as accountsReducer } from '@extension/features/accounts';
-import { reducer as arc200AssetsReducer } from '@extension/features/arc200-assets';
+import { reducer as arc200AssetsReducer } from '@extension/features/arc0200-assets';
 import { reducer as eventsReducer } from '@extension/features/events';
 import { reducer as messagesReducer } from '@extension/features/messages';
 import { reducer as networksReducer } from '@extension/features/networks';
@@ -28,7 +28,7 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
   const store: Store<IBackgroundRootState> = makeStore<IBackgroundRootState>(
     combineReducers({
       accounts: accountsReducer,
-      arc200Assets: arc200AssetsReducer,
+      arc0200Assets: arc200AssetsReducer,
       events: eventsReducer,
       messages: messagesReducer,
       networks: networksReducer,

src/extension/apps/main/App.tsx

@@ -18,6 +18,7 @@ import {
   ACCOUNTS_ROUTE,
   ADD_ACCOUNT_ROUTE,
   ASSETS_ROUTE,
+  NFTS_ROUTE,
   SETTINGS_ROUTE,
   PASSWORD_LOCK_ROUTE,
   TRANSACTIONS_ROUTE,
@@ -26,7 +27,8 @@ import {
 // features
 import { reducer as accountsReducer } from '@extension/features/accounts';
 import { reducer as addAssetReducer } from '@extension/features/add-asset';
-import { reducer as arc200AssetsReducer } from '@extension/features/arc200-assets';
+import { reducer as arc0072AssetsReducer } from '@extension/features/arc0072-assets';
+import { reducer as arc200AssetsReducer } from '@extension/features/arc0200-assets';
 import { reducer as eventsReducer } from '@extension/features/events';
 import { reducer as messagesReducer } from '@extension/features/messages';
 import { reducer as networksReducer } from '@extension/features/networks';
@@ -48,6 +50,7 @@ import {
 import AccountPage from '@extension/pages/AccountPage';
 import AssetPage from '@extension/pages/AssetPage';
 import LoadingPage from '@extension/pages/LoadingPage';
+import NFTPage from '@extension/pages/NFTPage';
 import PasswordLockPage from '@extension/pages/PasswordLockPage';
 import TransactionPage from '@extension/pages/TransactionPage';
 
@@ -107,6 +110,15 @@ const createRouter = ({ dispatch, getState }: Store<IMainRootState>) => {
               },
               path: `${ASSETS_ROUTE}/:assetId`,
             },
+            {
+              element: <NFTPage />,
+              loader: () => {
+                dispatch(setSideBar(true));
+
+                return null;
+              },
+              path: `${NFTS_ROUTE}/:appId/:tokenId`,
+            },
             {
               element: <SettingsRouter />,
               loader: () => {
@@ -164,7 +176,8 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
     combineReducers({
       accounts: accountsReducer,
       addAsset: addAssetReducer,
-      arc200Assets: arc200AssetsReducer,
+      arc0072Assets: arc0072AssetsReducer,
+      arc0200Assets: arc200AssetsReducer,
       events: eventsReducer,
       messages: messagesReducer,
       networks: networksReducer,

src/extension/apps/main/Root.tsx

@@ -19,7 +19,8 @@ import {
   fetchAccountsFromStorageThunk,
   startPollingForAccountsThunk,
 } from '@extension/features/accounts';
-import { fetchARC0200AssetsFromStorageThunk } from '@extension/features/arc200-assets';
+import { fetchARC0072AssetsFromStorageThunk } from '@extension/features/arc0072-assets';
+import { fetchARC0200AssetsFromStorageThunk } from '@extension/features/arc0200-assets';
 import {
   setEnableRequest,
   setSignBytesRequest,
@@ -99,6 +100,7 @@ const Root: FC = () => {
     dispatch(fetchSettingsFromStorageThunk());
     dispatch(fetchSessionsThunk());
     dispatch(fetchStandardAssetsFromStorageThunk());
+    dispatch(fetchARC0072AssetsFromStorageThunk());
     dispatch(fetchARC0200AssetsFromStorageThunk());
     dispatch(initializeWalletConnectThunk());
     dispatch(startPollingForAccountsThunk());

src/extension/apps/registration/App.tsx

@@ -16,7 +16,7 @@ import {
 } from '@extension/constants';
 
 // features
-import { reducer as arc200AssetsReducer } from '@extension/features/arc200-assets';
+import { reducer as arc200AssetsReducer } from '@extension/features/arc0200-assets';
 import { reducer as networksReducer } from '@extension/features/networks';
 import { reducer as notificationsReducer } from '@extension/features/notifications';
 import { reducer as settingsReducer } from '@extension/features/settings';
@@ -66,7 +66,7 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
   const store: Store<IRegistrationRootState> =
     makeStore<IRegistrationRootState>(
       combineReducers({
-        arc200Assets: arc200AssetsReducer,
+        arc0200Assets: arc200AssetsReducer,
         networks: networksReducer,
         notifications: notificationsReducer,
         settings: settingsReducer,

src/extension/apps/registration/Root.tsx

@@ -7,7 +7,7 @@ import { Outlet } from 'react-router-dom';
 import { BODY_BACKGROUND_COLOR } from '@extension/constants';
 
 // features
-import { fetchARC0200AssetsFromStorageThunk } from '@extension/features/arc200-assets';
+import { fetchARC0200AssetsFromStorageThunk } from '@extension/features/arc0200-assets';
 import { fetchSettingsFromStorageThunk } from '@extension/features/settings';
 
 // types

src/extension/components/AssetAvatar/AssetAvatar.tsx

@@ -1,5 +1,5 @@
 import { Avatar, AvatarBadge, AvatarProps, Icon } from '@chakra-ui/react';
-import React, { FC, ReactElement } from 'react';
+import React, { FC } from 'react';
 import { IoCheckmarkOutline } from 'react-icons/io5';
 
 // enums
@@ -9,18 +9,9 @@ import { AssetTypeEnum } from '@extension/enums';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 
 // types
-import { IAssetTypes, INativeCurrency } from '@extension/types';
+import type { IProps } from './types';
 
-interface IProps extends AvatarProps {
-  asset: IAssetTypes | INativeCurrency;
-  fallbackIcon?: ReactElement;
-}
-
-const AssetAvatar: FC<IProps> = ({
-  asset,
-  fallbackIcon,
-  ...avatarProps
-}: IProps) => {
+const AssetAvatar: FC<IProps> = ({ asset, fallbackIcon, ...avatarProps }) => {
   // hooks
   const primaryColor: string = usePrimaryColor();
   // misc

src/extension/components/AssetAvatar/types/IProps.ts

@@ -0,0 +1,12 @@
+import { AvatarProps } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+
+// types
+import type { IAssetTypes, INativeCurrency } from '@extension/types';
+
+interface IProps extends AvatarProps {
+  asset: IAssetTypes | INativeCurrency;
+  fallbackIcon?: ReactElement;
+}
+
+export default IProps;

src/extension/components/AssetAvatar/types/index.ts

@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';

src/extension/components/AssetBadge/AssetBadge.tsx

@@ -1,4 +1,4 @@
-import { ColorMode, HStack, Tag, TagLabel } from '@chakra-ui/react';
+import { ColorMode, Tag, TagLabel } from '@chakra-ui/react';
 import React, { FC } from 'react';
 
 // enums
@@ -7,24 +7,32 @@ import { AssetTypeEnum } from '@extension/enums';
 // selectors
 import { useSelectColorMode } from '@extension/selectors';
 
-interface IProps {
-  size?: string;
-  type: AssetTypeEnum;
-}
+// types
+import type { IProps } from './types';
 
 const AssetBadge: FC<IProps> = ({ size = 'sm', type }: IProps) => {
   // hooks
   const colorMode: ColorMode = useSelectColorMode();
 
   switch (type) {
+    case AssetTypeEnum.ARC0072:
+      return (
+        <Tag
+          colorScheme="orange"
+          size={size}
+          variant={colorMode === 'dark' ? 'solid' : 'subtle'}
+        >
+          <TagLabel>ARC0072</TagLabel>
+        </Tag>
+      );
     case AssetTypeEnum.ARC0200:
       return (
         <Tag
           colorScheme="green"
           size={size}
           variant={colorMode === 'dark' ? 'solid' : 'subtle'}
         >
-          <TagLabel>ARC200</TagLabel>
+          <TagLabel>ARC0200</TagLabel>
         </Tag>
       );
     case AssetTypeEnum.Native:

src/extension/components/AssetBadge/types/IProps.ts

@@ -0,0 +1,9 @@
+// enums
+import { AssetTypeEnum } from '@extension/enums';
+
+interface IProps {
+  size?: string;
+  type: AssetTypeEnum;
+}
+
+export default IProps;

src/extension/components/AssetBadge/types/index.ts

@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';

src/extension/components/AssetsTab/AssetTabLoadingItem.tsx → src/extension/components/AssetTabLoadingItem/AssetTabLoadingItem.tsx

@@ -32,11 +32,13 @@ const AssetTabLoadingItem: FC = () => {
     >
       <HStack m={0} p={0} spacing={DEFAULT_GAP / 3} w="full">
         <SkeletonCircle size="9" />
+
         <Skeleton flexGrow={1}>
           <Text color={defaultTextColor} fontSize="sm">
             {faker.company.bsBuzz()}
           </Text>
         </Skeleton>
+
         <Skeleton>
           <Text color={defaultTextColor} fontSize="sm">
             {faker.random.numeric(3)}

src/extension/components/AssetTabLoadingItem/index.ts

@@ -0,0 +1 @@
+export { default } from './AssetTabLoadingItem';