add AssetSelector (#472)

src/lib/token/AssetSelector.stories.tsx

@@ -0,0 +1,57 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+import { AssetSelector } from './AssetSelector';
+import { Asset } from './models/AssetModel';
+import { mainnet } from 'viem/chains';
+
+export default {
+  title: 'Lib/Token',
+  component: AssetSelector,
+};
+
+const assets = [
+  {
+    name: 'Dummy asset',
+    address: 'ASBLBLABLA...BLA',
+    symbol: 'DAS',
+    decimals: 18,
+    balance: undefined,
+    isDefault: true,
+    dollarValue: undefined,
+    originChainId: 0,
+  } as Asset,
+  {
+    name: 'PUR token',
+    address: 'ASBLBLABLA...BLA',
+    symbol: 'PUR',
+    decimals: 18,
+    balance: undefined,
+    isDefault: true,
+    dollarValue: undefined,
+    originChainId: 0,
+  } as Asset,
+  {
+    name: 'PUR token',
+    address: 'ASBLBLABLA...BLA',
+    symbol: 'WETH',
+    decimals: 18,
+    balance: '1001000000000000000000',
+    isDefault: true,
+    dollarValue: undefined,
+    originChainId: mainnet.id,
+  } as Asset,
+];
+
+const selectedAsset = undefined;
+
+export const _ConnectMassaWallet = {
+  render: () => (
+    <AssetSelector
+      selectedAsset={selectedAsset}
+      assets={assets}
+      setSelectedAsset={console.log}
+      isAssetsLoading={false}
+    />
+  ),
+};

src/lib/token/AssetSelector.tsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+
+import { Dropdown, getAssetIcons, IOption } from '../../components';
+
+import Intl from './i18n';
+import { formatAmount } from '../util/parseAmount';
+import { Asset } from './models/AssetModel';
+
+interface AssetSelectorProps {
+  selectedAsset: Asset | undefined;
+  setSelectedAsset: (asset: Asset) => void;
+  selectSymbol?: string;
+  assets: Asset[] | undefined;
+  isAssetsLoading: boolean;
+}
+
+export function AssetSelector(props: AssetSelectorProps) {
+  const {
+    selectedAsset,
+    setSelectedAsset,
+    selectSymbol,
+    assets,
+    isAssetsLoading,
+  } = props;
+
+  useEffect(() => {
+    if (selectSymbol) {
+      const selectedAsset = assets?.find(
+        (asset) => asset.symbol === selectSymbol,
+      );
+      if (selectedAsset) setSelectedAsset(selectedAsset);
+    }
+    if (!selectedAsset && assets && assets?.length > 0) {
+      setSelectedAsset(assets?.[0]);
+    }
+  }, [assets, setSelectedAsset, selectedAsset, selectSymbol]);
+
+  let options: IOption[] = [];
+
+  if (assets) {
+    options = assets.map((asset) => {
+      const formattedBalance = formatAmount(
+        asset.balance || '',
+        asset.decimals,
+      ).full;
+      return {
+        itemPreview: asset.symbol,
+        item: (
+          <div>
+            <p>{asset.symbol}</p>
+            {asset.balance !== undefined && (
+              <p className="mas-caption">
+                {Intl.t('balance')} {formattedBalance}
+              </p>
+            )}
+          </div>
+        ),
+        icon: getAssetIcons(asset.symbol, asset.originChainId, false, 28),
+        onClick: () => setSelectedAsset(asset),
+      };
+    });
+  }
+
+  const selectedAssetKey: number = selectedAsset
+    ? assets?.indexOf(selectedAsset) || 0
+    : 0;
+
+  return (
+    <Dropdown
+      select={selectedAssetKey}
+      readOnly={isAssetsLoading}
+      size="md"
+      options={options}
+      className="pb-3.5"
+      fullWidth={false}
+    />
+  );
+}

src/lib/token/i18n/en_US.json

@@ -0,0 +1,3 @@
+{
+  "balance": "Balance"
+}

src/lib/token/i18n/index.ts

@@ -0,0 +1,7 @@
+import I18n from '../../i18n/i18n';
+import enUs from './en_US.json';
+
+const Intl = new I18n({ EN_us: enUs });
+Object.freeze(Intl);
+
+export default Intl;

src/lib/token/models/AssetModel.ts

@@ -0,0 +1,10 @@
+export interface Asset {
+  name: string;
+  address?: string;
+  symbol: string;
+  decimals: number;
+  balance?: string;
+  isDefault: boolean;
+  dollarValue?: string;
+  originChainId?: number;
+}