feat: add arc200 asset (#63)

* refactor: rename assets to standard assets * refactor: use standard assets in the asset holdings in accounts * feat: add arc200 asset holdings to the account information * feat: add asa badge to standard assets and move to separate components * feat: add arc200 featire to redux store * feat: add arc200 asset tab item * feat: add add asset button to open an add asset modal * feat: add add assets feature to the redux store * build(deps): update algosdk package to 2.7.0 * feat: add query to fetch arc200 assets in a search * chore: squash * feat: abort query request when new request is made * feat: add arc200 add asset summary page * feat: add feature to add arc200 asset to the account holdings * feat: update arc200 asset information when updating the accounts
kibis-is · Dec 22, 2023 · 46a2dbd · 46a2dbd
1 parent 9b49382
commit 46a2dbd
Show file tree

Hide file tree

Showing 176 changed files with 3,808 additions and 1,009 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   ],
   "private": true,
   "engines": {
-    "node": ">=15.0.0"
+    "node": ">=20.9.0"
   },
   "scripts": {
     "analyze:chrome": "yarn build:chrome --analyze",
@@ -116,7 +116,8 @@
     "@walletconnect/core": "^2.8.0",
     "@walletconnect/utils": "^2.8.0",
     "@walletconnect/web3wallet": "^1.8.0",
-    "algosdk": "^2.1.0",
+    "algosdk": "^2.7.0",
+    "arc200js": "^2.3.1",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
     "chakra-ui-steps": "2.0.4",

diff --git a/src/extension/apps/background/App.tsx b/src/extension/apps/background/App.tsx
@@ -9,12 +9,13 @@ import Root from './Root';
 
 // features
 import { reducer as accountsReducer } from '@extension/features/accounts';
-import { reducer as assetsReducer } from '@extension/features/assets';
+import { reducer as arc200AssetsReducer } from '@extension/features/arc200-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';
 import { reducer as sessionsReducer } from '@extension/features/sessions';
 import { reducer as settingsReducer } from '@extension/features/settings';
+import { reducer as standardAssetsReducer } from '@extension/features/standard-assets';
 import { reducer as systemReducer } from '@extension/features/system';
 
 // types
@@ -27,12 +28,13 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
   const store: Store<IBackgroundRootState> = makeStore<IBackgroundRootState>(
     combineReducers({
       accounts: accountsReducer,
-      assets: assetsReducer,
+      arc200Assets: arc200AssetsReducer,
       events: eventsReducer,
       messages: messagesReducer,
       networks: networksReducer,
       sessions: sessionsReducer,
       settings: settingsReducer,
+      standardAssets: standardAssetsReducer,
       system: systemReducer,
     })
   );

diff --git a/src/extension/apps/main/App.tsx b/src/extension/apps/main/App.tsx
@@ -17,14 +17,16 @@ import {
 
 // features
 import { reducer as accountsReducer } from '@extension/features/accounts';
-import { reducer as assetsReducer } from '@extension/features/assets';
+import { reducer as addAssetReducer } from '@extension/features/add-asset';
+import { reducer as arc200AssetsReducer } from '@extension/features/arc200-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';
 import { reducer as notificationsReducer } from '@extension/features/notifications';
 import { reducer as sendAssetsReducer } from '@extension/features/send-assets';
 import { reducer as sessionsReducer } from '@extension/features/sessions';
 import { reducer as settingsReducer } from '@extension/features/settings';
+import { reducer as standardAssetsReducer } from '@extension/features/standard-assets';
 import {
   reducer as systemReducer,
   setSideBar,
@@ -86,14 +88,16 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
   const store: Store<IMainRootState> = makeStore<IMainRootState>(
     combineReducers({
       accounts: accountsReducer,
-      assets: assetsReducer,
+      addAsset: addAssetReducer,
+      arc200Assets: arc200AssetsReducer,
       events: eventsReducer,
       messages: messagesReducer,
       networks: networksReducer,
       notifications: notificationsReducer,
       sendAssets: sendAssetsReducer,
       sessions: sessionsReducer,
       settings: settingsReducer,
+      standardAssets: standardAssetsReducer,
       system: systemReducer,
     })
   );

diff --git a/src/extension/apps/main/Root.tsx b/src/extension/apps/main/Root.tsx
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import { NavigateFunction, Outlet, useNavigate } from 'react-router-dom';
 
 // components
+import AddAssetModal from '@extension/components/AddAssetModal';
 import ConfirmModal from '@extension/components/ConfirmModal';
 import EnableModal from '@extension/components/EnableModal';
 import ErrorModal from '@extension/components/ErrorModal';
@@ -13,14 +14,12 @@ import SignTxnsModal from '@extension/components/SignTxnsModal';
 import WalletConnectModal from '@extension/components/WalletConnectModal';
 
 // features
+import { reset as resetAddAsset } from '@extension/features/add-asset';
 import {
   fetchAccountsFromStorageThunk,
   startPollingForAccountsThunk,
 } from '@extension/features/accounts';
-import {
-  fetchAssetsThunk,
-  updateAssetInformationThunk,
-} from '@extension/features/assets';
+import { fetchArc200AssetsFromStorageThunk } from '@extension/features/arc200-assets';
 import {
   setEnableRequest,
   setSignBytesRequest,
@@ -37,41 +36,32 @@ import {
   initializeWalletConnectThunk,
 } from '@extension/features/sessions';
 import { fetchSettings } from '@extension/features/settings';
+import { fetchStandardAssetsFromStorageThunk } from '@extension/features/standard-assets';
 import { setConfirm, setError, setNavigate } from '@extension/features/system';
 
 // hooks
 import useOnMainAppMessage from '@extension/hooks/useOnMainAppMessage';
 import useOnNetworkConnectivity from '@extension/hooks/useOnNetworkConnectivity';
+import useOnNewAssets from '@extension/hooks/useOnNewAssets';
 import useNotifications from '@extension/hooks/useNotifications';
 
 // selectors
 import {
   useSelectAccounts,
-  useSelectAssets,
   useSelectSelectedNetwork,
 } from '@extension/selectors';
 
 // types
-import {
-  IAccount,
-  IAccountInformation,
-  IAppThunkDispatch,
-  IAsset,
-  IAssetHolding,
-  INetwork,
-} from '@extension/types';
-
-// utils
-import { convertGenesisHashToHex } from '@extension/utils';
+import { IAccount, IAppThunkDispatch, INetwork } from '@extension/types';
 
 const Root: FC = () => {
   const dispatch: IAppThunkDispatch = useDispatch<IAppThunkDispatch>();
   const navigate: NavigateFunction = useNavigate();
-  // hooks
+  // selectors
   const accounts: IAccount[] = useSelectAccounts();
-  const assets: Record<string, IAsset[]> | null = useSelectAssets();
   const selectedNetwork: INetwork | null = useSelectSelectedNetwork();
   // handlers
+  const handleAddAssetClose = () => dispatch(resetAddAsset());
   const handleConfirmClose = () => dispatch(setConfirm(null));
   const handleEnableModalClose = () => dispatch(setEnableRequest(null));
   const handleErrorModalClose = () => dispatch(setError(null));
@@ -86,7 +76,8 @@ const Root: FC = () => {
     dispatch(setNavigate(navigate));
     dispatch(fetchSettings());
     dispatch(fetchSessionsThunk());
-    dispatch(fetchAssetsThunk());
+    dispatch(fetchStandardAssetsFromStorageThunk());
+    dispatch(fetchArc200AssetsFromStorageThunk());
     dispatch(initializeWalletConnectThunk());
     dispatch(startPollingForAccountsThunk());
     dispatch(startPollingForTransactionsParamsThunk());
@@ -108,39 +99,7 @@ const Root: FC = () => {
       dispatch(fetchTransactionParamsFromStorageThunk());
     }
   }, [selectedNetwork]);
-  // whenever the accounts are updated, check if any new assets exist in the account
-  useEffect(() => {
-    if (accounts.length > 0 && assets && selectedNetwork) {
-      accounts.forEach((account) => {
-        const encodedGenesisHash: string = convertGenesisHashToHex(
-          selectedNetwork.genesisHash
-        ).toUpperCase();
-        const accountInformation: IAccountInformation | null =
-          account.networkInformation[encodedGenesisHash] || null;
-        let newAssets: IAssetHolding[];
-
-        if (accountInformation) {
-          // filter out any new assets
-          newAssets = accountInformation.assetHoldings.filter(
-            (assetHolding) =>
-              !assets[encodedGenesisHash].some(
-                (value) => value.id === assetHolding.id
-              )
-          );
-
-          // if we have any new assets, update the information
-          if (newAssets.length > 0) {
-            dispatch(
-              updateAssetInformationThunk({
-                ids: newAssets.map((value) => value.id),
-                network: selectedNetwork,
-              })
-            );
-          }
-        }
-      });
-    }
-  }, [accounts]);
+  useOnNewAssets(); // handle new assets added
   useNotifications(); // handle notifications
   useOnNetworkConnectivity(); // listen to network connectivity
   useOnMainAppMessage(); // handle incoming messages
@@ -152,6 +111,7 @@ const Root: FC = () => {
       <EnableModal onClose={handleEnableModalClose} />
       <SignTxnsModal onClose={handleSignTxnsModalClose} />
       <SignBytesModal onClose={handleSignBytesModalClose} />
+      <AddAssetModal onClose={handleAddAssetClose} />
       <SendAssetModal onClose={handleSendAssetModalClose} />
       <WalletConnectModal onClose={handleWalletConnectModalClose} />
       <MainLayout>