Revert "Revert "Support send of arbitrary ERC-20 tokens""

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/config",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": true,
   "description": "Configuration variables for Unstoppable Domains environments",
   "homepage": "https://github.com/unstoppabledomains/domain-profiles#readme",

packages/config/src/env/default.ts

@@ -20,8 +20,8 @@ export default function getDefaultConfig(): Config {
         CHAIN_ID: 5,
         NETWORK_NAME: 'goerli', // testnet
         JSON_RPC_API_URL: `https://goerli.infura.io/v3/a58ebb0c76a64c149e35145f85f82382`,
-        BLOCK_EXPLORER_NAME: 'etherscan',
-        BLOCK_EXPLORER_BASE_URL: 'https://goerli.etherscan.io',
+        BLOCK_EXPLORER_NAME: 'oklink',
+        BLOCK_EXPLORER_BASE_URL: 'https://www.oklink.com/sepolia-test',
         BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/sepolia-test/tx/',
         DISABLE_CONTRACTS_CACHE: true,
         PROXY_READER_ADDRESS: '0xFc5f608149f4D9e2Ed0733efFe9DD57ee24BCF68',
@@ -33,21 +33,40 @@ export default function getDefaultConfig(): Config {
         NETWORK_NAME: 'amoy', // testnet
         JSON_RPC_API_URL:
           'https://polygon-amoy.infura.io/v3/a58ebb0c76a64c149e35145f85f82382',
-        BLOCK_EXPLORER_NAME: 'polygonscan',
-        BLOCK_EXPLORER_BASE_URL: 'https://amoy.polygonscan.com',
+        BLOCK_EXPLORER_NAME: 'oklink',
+        BLOCK_EXPLORER_BASE_URL: 'https://www.oklink.com/amoy',
         BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/amoy/tx/',
         DISABLE_CONTRACTS_CACHE: true,
         PROXY_READER_ADDRESS: '0x332A8191905fA8E6eeA7350B5799F225B8ed30a9',
         OPEN_SEA_BASE_URL: 'https://testnets.opensea.io/assets/amoy/',
       },
       BASE: {
+        CHAIN_ID: 8453,
+        NETWORK_NAME: 'base',
+        JSON_RPC_API_URL:
+          'https://base-mainnet.infura.io/v3/a58ebb0c76a64c149e35145f85f82382',
         BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/base/tx/',
+        BLOCK_EXPLORER_NAME: 'oklink',
+        BLOCK_EXPLORER_BASE_URL: 'https://www.oklink.com/base',
+        DISABLE_CONTRACTS_CACHE: true,
       },
       BTC: {
+        CHAIN_ID: 0,
+        NETWORK_NAME: 'bitcoin',
+        JSON_RPC_API_URL: '',
         BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/btc/tx/',
+        BLOCK_EXPLORER_NAME: 'oklink',
+        BLOCK_EXPLORER_BASE_URL: 'https://www.oklink.com/btc',
+        DISABLE_CONTRACTS_CACHE: true,
       },
       SOL: {
+        CHAIN_ID: 0,
+        NETWORK_NAME: 'solana',
+        JSON_RPC_API_URL: '',
         BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/sol/tx/',
+        BLOCK_EXPLORER_NAME: 'oklink',
+        BLOCK_EXPLORER_BASE_URL: 'https://www.oklink.com/sol',
+        DISABLE_CONTRACTS_CACHE: true,
       },
     },
     UD_LOGO_URL:
@@ -99,23 +118,9 @@ export default function getDefaultConfig(): Config {
       LANDING_PAGE_URL: 'https://unstoppabledomains.com/products/wallet',
       CHAINS: {
         BUY: ['BTC/BTC', 'MATIC/MATIC', 'SOL/SOL', 'ETH/ETH'],
-        RECEIVE: [
-          'BTC/BTC',
-          'MATIC/MATIC',
-          'MATIC/USDC',
-          'SOL/SOL',
-          'BASE/ETH',
-          'ETH/ETH',
-        ],
-        SEND: [
-          'BTC/BTC',
-          'MATIC/MATIC',
-          'MATIC/USDC',
-          'SOL/SOL',
-          'BASE/ETH',
-          'ETH/ETH',
-        ],
-        DOMAINS: ['ETH', 'MATIC'],
+        RECEIVE: ['BTC/BTC', 'MATIC/MATIC', 'SOL/SOL', 'BASE/ETH', 'ETH/ETH'],
+        SEND: ['BTC/BTC', 'MATIC/MATIC', 'SOL/SOL', 'BASE/ETH', 'ETH/ETH'],
+        DOMAINS: ['ETH', 'MATIC', 'BASE'],
       },
       MOBILE: {
         ANDROID_URL:

packages/config/src/env/types.ts

@@ -44,13 +44,18 @@ export type MaticBlockchainConfig = BaseBlockchainConfig & {
     | 'https://www.oklink.com/polygon/tx/';
 };
 
-export type BitcoinBlockchainConfig = {
+export type BitcoinBlockchainConfig = BaseBlockchainConfig & {
+  CHAIN_ID: 0;
   BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/btc/tx/';
 };
-export type SolanaBlockchainConfig = {
+
+export type SolanaBlockchainConfig = BaseBlockchainConfig & {
+  CHAIN_ID: 0;
   BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/sol/tx/';
 };
-export type BaseChainBlockchainConfig = {
+
+export type BaseChainBlockchainConfig = BaseBlockchainConfig & {
+  CHAIN_ID: 8453;
   BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/base/tx/';
 };
 

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/ui-components",
-  "version": "0.0.51-browser-extension.6",
+  "version": "0.0.51-browser-extension.8",
   "private": true,
   "description": "An open and reusable suite of Unstoppable Domains management components",
   "keywords": [
@@ -63,6 +63,7 @@
     "@xmtp/content-type-text": "^1.0.0",
     "@xmtp/proto": "^3.62.1",
     "@xmtp/xmtp-js": "12.1.0",
+    "abitype": "^1.0.6",
     "bip322-js": "^1.1.0",
     "bitcoin-address-validation": "^2.2.3",
     "bluebird": "^3.7.2",

packages/ui-components/src/components/Wallet/AddressInput.tsx

@@ -123,11 +123,11 @@ const AddressInput: React.FC<Props> = ({
     for (const symbol of validationSymbols) {
       const recordKeys = getRecordKeys(symbol, mappedResolverKeys);
       if (recordKeys.length === 0) {
-        return false;
+        continue;
       }
       const mappedKey = getMappedResolverKey(recordKeys[0], mappedResolverKeys);
       if (!mappedKey) {
-        return false;
+        continue;
       }
       const isValid = isValidMappedResolverKeyValue(value, mappedKey);
       onAddressChange(isValid ? value : '');

packages/ui-components/src/components/Wallet/Buy.tsx

@@ -113,7 +113,7 @@ const Buy: React.FC<Props> = ({isSellEnabled, onCancelClick, wallets}) => {
             ? 'wallet.selectAssetToBuySell'
             : 'wallet.selectAssetToBuy',
         )}
-        supportedTokenList={config.WALLETS.CHAINS.BUY}
+        supportedAssetList={config.WALLETS.CHAINS.BUY}
       />
     </Box>
   );

packages/ui-components/src/components/Wallet/Receive.tsx

@@ -33,6 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
       marginRight: theme.spacing(-1),
     },
     height: '100%',
+    justifyContent: 'space-between',
   },
   selectAssetContainer: {
     display: 'flex',
@@ -59,37 +60,41 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '60px',
     borderRadius: '50%',
     overflow: 'hidden',
-    marginTop: theme.spacing(1),
   },
   contentWrapper: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     minHeight: '250px',
+    width: '100%',
   },
   receiveAssetContainer: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    marginTop: theme.spacing(3),
   },
   receiveContentContainer: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    width: '100%',
   },
   copyButton: {},
   addressWrapper: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    width: '100%',
   },
   captionContainer: {
     display: 'flex',
     backgroundColor: '#EEF0F3',
     padding: 10,
     borderRadius: 9,
   },
+  input: {
+    fontSize: '12px',
+  },
   infoIcon: {
     fontSize: 15,
   },
@@ -137,7 +142,7 @@ const Receive: React.FC<Props> = ({onCancelClick, wallets}) => {
           wallets={wallets}
           onCancelClick={handleBackClick}
           label={t('wallet.selectAssetToReceive')}
-          supportedTokenList={config.WALLETS.CHAINS.RECEIVE}
+          supportedAssetList={config.WALLETS.CHAINS.RECEIVE}
         />
       </Box>
     );
@@ -171,7 +176,7 @@ const Receive: React.FC<Props> = ({onCancelClick, wallets}) => {
           </Box>
           <QRCode
             value={`${asset.walletName}:${asset.walletAddress}`}
-            size={110}
+            size={125}
             logoOpacity={0.5}
             logoHeight={60}
             logoWidth={60}
@@ -190,6 +195,7 @@ const Receive: React.FC<Props> = ({onCancelClick, wallets}) => {
               stacked={true}
               disabled
               multiline
+              classes={{input: classes.input}}
               endAdornment={
                 <Button
                   onClick={handleCopyClick}
@@ -199,40 +205,40 @@ const Receive: React.FC<Props> = ({onCancelClick, wallets}) => {
                 </Button>
               }
             />
-            <Box mt={3} className={classes.captionContainer}>
-              <Box mr={1}>
-                <InfoIcon className={classes.infoIcon} color="error" />
-              </Box>
-              <Typography variant="caption" color="error" component="div">
-                <Markdown>
-                  {t(
-                    config.WALLETS.CHAINS.DOMAINS.map(s =>
-                      s.toLowerCase(),
-                    ).includes(asset.symbol.toLowerCase())
-                      ? 'wallet.receiveAddressCaptionWithDomains'
-                      : 'wallet.receiveAddressCaption',
-                    {
-                      symbol: getBlockchainDisplaySymbol(asset.ticker),
-                      blockchain: asset.walletName,
-                    },
-                  )}
-                </Markdown>{' '}
-                {t('wallet.sendingForOtherNetworksAndTokens', {
-                  symbol: getBlockchainDisplaySymbol(asset.ticker),
-                  blockchain: asset.walletName,
-                })}{' '}
-                <Link
-                  href={config.WALLETS.LANDING_PAGE_URL}
-                  target="_blank"
-                  className={classes.learnMoreLink}
-                >
-                  <Typography variant={'caption'}>Learn More</Typography>
-                </Link>
-              </Typography>
-            </Box>
           </Box>
         </Box>
       </Box>
+      <Box mb={1} className={classes.captionContainer}>
+        <Box mr={1}>
+          <InfoIcon className={classes.infoIcon} color="error" />
+        </Box>
+        <Typography variant="caption" color="error" component="div">
+          <Markdown>
+            {t(
+              config.WALLETS.CHAINS.DOMAINS.map(s => s.toLowerCase()).includes(
+                asset.symbol.toLowerCase(),
+              )
+                ? 'wallet.receiveAddressCaptionWithDomains'
+                : 'wallet.receiveAddressCaption',
+              {
+                symbol: getBlockchainDisplaySymbol(asset.ticker),
+                blockchain: asset.walletName,
+              },
+            )}
+          </Markdown>{' '}
+          {t('wallet.sendingForOtherNetworksAndTokens', {
+            symbol: getBlockchainDisplaySymbol(asset.ticker),
+            blockchain: asset.walletName,
+          })}{' '}
+          <Link
+            href={config.WALLETS.LANDING_PAGE_URL}
+            target="_blank"
+            className={classes.learnMoreLink}
+          >
+            <Typography variant={'caption'}>Learn More</Typography>
+          </Link>
+        </Typography>
+      </Box>
     </Box>
   );
 };

packages/ui-components/src/components/Wallet/SelectAsset.tsx

@@ -6,7 +6,7 @@ import type {ImmutableArray} from '@unstoppabledomains/config/build/src/env/type
 import {makeStyles} from '@unstoppabledomains/ui-kit/styles';
 
 import type {SerializedWalletBalance} from '../../lib';
-import {TokenType, WalletPaletteOwner, useTranslationContext} from '../../lib';
+import {TokenType, WalletPaletteOwner} from '../../lib';
 import {filterWallets} from '../../lib/wallet/filter';
 import FundWalletModal from './FundWalletModal';
 import {TitleWithBackButton} from './TitleWithBackButton';
@@ -56,7 +56,8 @@ type Props = {
   requireBalance?: boolean;
   onClickReceive?: () => void;
   onClickBuy?: () => void;
-  supportedTokenList: ImmutableArray<string>;
+  supportedAssetList: ImmutableArray<string>;
+  supportErc20?: boolean;
 };
 
 export const SelectAsset: React.FC<Props> = ({
@@ -69,11 +70,11 @@ export const SelectAsset: React.FC<Props> = ({
   requireBalance,
   onClickReceive,
   onClickBuy,
-  supportedTokenList,
+  supportedAssetList,
+  supportErc20,
 }) => {
   const {classes} = useStyles();
-  const [t] = useTranslationContext();
-  const wallets = filterWallets(initialWallets, supportedTokenList);
+  const wallets = filterWallets(initialWallets, supportedAssetList);
 
   const serializeNativeTokens = (wallet: SerializedWalletBalance) => {
     if (
@@ -111,7 +112,8 @@ export const SelectAsset: React.FC<Props> = ({
     ...(wallets || []).flatMap(wallet =>
       (wallet?.tokens || []).map(walletToken => {
         return {
-          type: 'Token' as never,
+          address: walletToken.address,
+          type: walletToken.type,
           name: walletToken.name,
           value: walletToken.value?.walletUsdAmt || 0,
           balance: walletToken.balanceAmt || 0,
@@ -134,10 +136,12 @@ export const SelectAsset: React.FC<Props> = ({
   ];
   const filteredTokens: TokenEntry[] = allTokens
     .filter(token => !requireBalance || token.balance > 0)
-    .filter(token =>
-      supportedTokenList.includes(
-        `${token.symbol.toUpperCase()}/${token.ticker.toUpperCase()}`,
-      ),
+    .filter(
+      token =>
+        (token.type === TokenType.Erc20 && supportErc20) ||
+        supportedAssetList.includes(
+          `${token.symbol.toUpperCase()}/${token.ticker.toUpperCase()}`,
+        ),
     )
     .sort((a, b) => b.value - a.value || b.balance - a.balance);