feat: opt in to asa (#70)

* refactor: add new type property to assets

* feat: add standard assets query and standard assets summary screen

* feat: filter out already added assets in the add asset search results

* feat: add errors and refactor request/response messaeg schema

* feat: allow searching by standard asset name and unit

* fix: endless search standard asset loop when there is a next token

* feat: add scolling pagination for adding assets

* feat: add thunk to send an opt-in transaction

* feat: add more asset information to standard asset summary

* feat: clear asset list when query is empty

* chore: squash

* chore: squash

src/extension/components/AssetsTab/AssetTabStandardAssetItem.tsx

@@ -34,9 +34,6 @@ import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryButtonTextColor from '@extension/hooks/usePrimaryButtonTextColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
-// selectors
-import { useSelectColorMode } from '@extension/selectors';
-
 // services
 import { AccountService } from '@extension/services';
 
@@ -59,8 +56,6 @@ const AssetTabStandardAssetItem: FC<IProps> = ({
   network,
   standardAsset,
 }: IProps) => {
-  // selectors
-  const colorMode: ColorMode = useSelectColorMode();
   // hooks
   const buttonHoverBackgroundColor: string = useButtonHoverBackgroundColor();
   const defaultTextColor: string = useDefaultTextColor();

src/extension/components/InfoIconTooltip/InfoIconTooltip.tsx

@@ -0,0 +1,34 @@
+import { Icon, Tooltip } from '@chakra-ui/react';
+import React, { FC } from 'react';
+import { IoInformationCircleOutline } from 'react-icons/io5';
+
+// hooks
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+
+interface IProps {
+  color?: string;
+  label: string;
+}
+
+const InfoIconTooltip: FC<IProps> = ({ color, label }: IProps) => {
+  // hooks
+  const defaultTextColor: string = useDefaultTextColor();
+
+  return (
+    <Tooltip aria-label={label} label={label}>
+      <span
+        style={{
+          height: '1em',
+          lineHeight: '1em',
+        }}
+      >
+        <Icon
+          as={IoInformationCircleOutline}
+          color={color || defaultTextColor}
+        />
+      </span>
+    </Tooltip>
+  );
+};
+
+export default InfoIconTooltip;

src/extension/components/InfoIconTooltip/index.ts

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

src/extension/constants/Limits.ts

@@ -1,2 +1,3 @@
 export const DEFAULT_TRANSACTION_INDEXER_LIMIT: number = 20;
 export const UPPER_TRANSACTION_INDEXER_LIMIT: number = 100;
+export const SEARCH_ASSET_INDEXER_LIMIT: number = 100;

src/extension/enums/AddAssetThunkEnum.ts

@@ -1,5 +1,7 @@
 enum AddAssetThunkEnum {
-  QueryById = 'addAsset/queryById',
+  AddStandardAsset = 'addAsset/addStandardAsset',
+  QueryArc200Asset = 'addAsset/queryArc200Asset',
+  QueryStandardAsset = 'addAsset/queryStandardAsset',
 }
 
 export default AddAssetThunkEnum;

src/extension/features/add-asset/slice.ts

@@ -13,42 +13,104 @@ import { StoreNameEnum } from '@extension/enums';
 import { BaseExtensionError } from '@extension/errors';
 
 // thunks
-import { queryByIdThunk } from './thunks';
+import {
+  addStandardAssetThunk,
+  queryArc200AssetThunk,
+  queryStandardAssetThunk,
+} from './thunks';
 
 // types
-import { IArc200Asset, IRejectedActionMeta } from '@extension/types';
-import { IAddAssetState, IQueryByIdResult } from './types';
+import {
+  IArc200Asset,
+  IRejectedActionMeta,
+  IStandardAsset,
+} from '@extension/types';
+import {
+  IAddAssetState,
+  IAssetsWithNextToken,
+  IQueryArc200AssetPayload,
+  IQueryStandardAssetPayload,
+} from './types';
 
 // utils
 import { getInitialState } from './utils';
 
 const slice = createSlice({
   extraReducers: (builder) => {
-    /** query by id **/
+    /** add standard asset **/
+    builder.addCase(
+      addStandardAssetThunk.fulfilled,
+      (state: IAddAssetState, action: PayloadAction<string | null>) => {
+        state.confirming = false;
+      }
+    );
+    builder.addCase(addStandardAssetThunk.pending, (state: IAddAssetState) => {
+      state.confirming = true;
+    });
+    builder.addCase(addStandardAssetThunk.rejected, (state: IAddAssetState) => {
+      state.confirming = false;
+    });
+    /** query arc200 asset **/
     builder.addCase(
-      queryByIdThunk.fulfilled,
-      (state: IAddAssetState, action: PayloadAction<IQueryByIdResult>) => {
-        state.arc200Assets = action.payload.arc200Assets;
+      queryArc200AssetThunk.fulfilled,
+      (
+        state: IAddAssetState,
+        action: PayloadAction<IAssetsWithNextToken<IArc200Asset>>
+      ) => {
+        state.arc200Assets = action.payload;
         state.fetching = false;
       }
     );
-    builder.addCase(queryByIdThunk.pending, (state: IAddAssetState) => {
+    builder.addCase(queryArc200AssetThunk.pending, (state: IAddAssetState) => {
       state.fetching = true;
     });
     builder.addCase(
-      queryByIdThunk.rejected,
+      queryArc200AssetThunk.rejected,
       (
         state: IAddAssetState,
         action: PayloadAction<
           BaseExtensionError,
           string,
-          IRejectedActionMeta,
+          IRejectedActionMeta<IQueryArc200AssetPayload>,
+          SerializedError
+        >
+      ) => {
+        // if it is an abort error, ignore as it is a new request
+        if (action.error.name !== 'AbortError') {
+          state.fetching = false;
+        }
+      }
+    );
+    /** query standard asset **/
+    builder.addCase(
+      queryStandardAssetThunk.fulfilled,
+      (
+        state: IAddAssetState,
+        action: PayloadAction<IAssetsWithNextToken<IStandardAsset>>
+      ) => {
+        state.standardAssets = action.payload;
+        state.fetching = false;
+      }
+    );
+    builder.addCase(
+      queryStandardAssetThunk.pending,
+      (state: IAddAssetState) => {
+        state.fetching = true;
+      }
+    );
+    builder.addCase(
+      queryStandardAssetThunk.rejected,
+      (
+        state: IAddAssetState,
+        action: PayloadAction<
+          BaseExtensionError,
+          string,
+          IRejectedActionMeta<IQueryStandardAssetPayload>,
           SerializedError
         >
       ) => {
         // if it is an abort error, ignore as it is a new request
         if (action.error.name !== 'AbortError') {
-          state.error = action.payload;
           state.fetching = false;
         }
       }
@@ -62,43 +124,39 @@ const slice = createSlice({
         items: [],
         next: null,
       };
+      state.standardAssets = {
+        items: [],
+        next: null,
+      };
     },
     reset: (state: Draft<IAddAssetState>) => {
       state.accountId = null;
       state.arc200Assets = {
         items: [],
         next: null,
       };
-      state.error = null;
       state.fetching = false;
-      state.selectedArc200Asset = null;
+      state.selectedAsset = null;
+      state.standardAssets = {
+        items: [],
+        next: null,
+      };
     },
     setAccountId: (
       state: Draft<IAddAssetState>,
       action: PayloadAction<string | null>
     ) => {
       state.accountId = action.payload;
     },
-    setError: (
-      state: Draft<IAddAssetState>,
-      action: PayloadAction<BaseExtensionError | null>
-    ) => {
-      state.error = action.payload;
-    },
-    setSelectedArc200Asset: (
+    setSelectedAsset: (
       state: Draft<IAddAssetState>,
-      action: PayloadAction<IArc200Asset | null>
+      action: PayloadAction<IArc200Asset | IStandardAsset | null>
     ) => {
-      state.selectedArc200Asset = action.payload;
+      state.selectedAsset = action.payload;
     },
   },
 });
 
 export const reducer: Reducer = slice.reducer;
-export const {
-  clearAssets,
-  reset,
-  setAccountId,
-  setError,
-  setSelectedArc200Asset,
-} = slice.actions;
+export const { clearAssets, reset, setAccountId, setSelectedAsset } =
+  slice.actions;