Config updates required to support swap in browser extension (#227)

* update config for sepolia support * fix resolution and blockscan URL corner cases * remove clutter from wallet menu
unstoppabledomains · Nov 5, 2024 · 45edb10 · 45edb10
1 parent 46c317b
commit 45edb10
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 115 deletions.
diff --git a/packages/config/package.json b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/config",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "private": true,
   "description": "Configuration variables for Unstoppable Domains environments",
   "homepage": "https://github.com/unstoppabledomains/domain-profiles#readme",

diff --git a/packages/config/src/env/production.ts b/packages/config/src/env/production.ts
@@ -22,6 +22,7 @@ export default function getProductionConfig(): ConfigOverride {
         JSON_RPC_API_URL:
           'https://mainnet.infura.io/v3/467fd78247874d7e87d34c04fdd09bbb',
         BLOCK_EXPLORER_BASE_URL: 'https://etherscan.io',
+        BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/eth/tx/',
         PROXY_READER_ADDRESS: '0xc3C2BAB5e3e52DBF311b2aAcEf2e40344f19494E',
         OPEN_SEA_BASE_URL: 'https://opensea.io/assets/',
         ENS_CONTRACT_ADDRESS: '0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85',
@@ -32,6 +33,7 @@ export default function getProductionConfig(): ConfigOverride {
         JSON_RPC_API_URL:
           'https://polygon-mainnet.infura.io/v3/467fd78247874d7e87d34c04fdd09bbb',
         BLOCK_EXPLORER_BASE_URL: 'https://polygonscan.com',
+        BLOCK_EXPLORER_TX_URL: 'https://www.oklink.com/polygon/tx/',
         PROXY_READER_ADDRESS: '0xA3f32c8cd786dc089Bd1fC175F2707223aeE5d00',
         OPEN_SEA_BASE_URL: 'https://opensea.io/assets/matic/',
       },

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/ui-components",
-  "version": "0.0.51-browser-extension.8",
+  "version": "0.0.51-browser-extension.10",
   "private": true,
   "description": "An open and reusable suite of Unstoppable Domains management components",
   "keywords": [

diff --git a/packages/ui-components/src/components/Manage/common/verification/types.ts b/packages/ui-components/src/components/Manage/common/verification/types.ts
@@ -1,3 +1,4 @@
+import {notifyEvent} from '../../../../lib';
 import type {MappedResolverKey} from '../../../../lib/types/pav3';
 import {getMappedResolverKey} from '../../../../lib/types/resolverKeys';
 import type {Web3Dependencies} from '../../../../lib/types/web3';
@@ -91,7 +92,37 @@ export const getBlockchainSymbol = (
 export const getRecordKeys = (
   symbol: string,
   mappedResolverKeys: MappedResolverKey[],
+  records?: Record<string, string>,
 ): string[] => {
+  // scan available records if provided
+  if (records) {
+    for (const recordKey of Object.keys(records)) {
+      // find possible resolver key associated with record
+      const mappedKey = getMappedResolverKey(
+        recordKey,
+        mappedResolverKeys as MappedResolverKey[],
+      );
+      if (!mappedKey) {
+        continue;
+      }
+
+      // look for potential matches of requested symbol
+      for (const shortName of [symbol, getBlockchainDisplaySymbol(symbol)]) {
+        if (mappedKey.shortName.toLowerCase() === shortName.toLowerCase()) {
+          notifyEvent('resolved record key', 'info', 'Wallet', 'Resolution', {
+            meta: {
+              symbol,
+              recordKey,
+              recordValue: records[recordKey],
+            },
+          });
+          return [recordKey];
+        }
+      }
+    }
+  }
+
+  // fallback to a key based search
   const mappedKey = getMappedResolverKey(symbol, mappedResolverKeys);
   if (!mappedKey) {
     return [];

diff --git a/packages/ui-components/src/components/Wallet/AddressInput.tsx b/packages/ui-components/src/components/Wallet/AddressInput.tsx
@@ -98,6 +98,7 @@ const AddressInput: React.FC<Props> = ({
     addressOrDomain: string,
     symbol: string,
   ): Promise<string> => {
+    // resolve keys are required to continue
     if (!mappedResolverKeys) {
       return '';
     }
@@ -108,20 +109,39 @@ const AddressInput: React.FC<Props> = ({
       DomainFieldTypes.CryptoVerifications,
     ]);
 
-    // determine if the onchain key for requested symbol is present
-    const recordKeys = getRecordKeys(symbol, mappedResolverKeys);
-    return profileData?.records
+    // profile records are required to continue
+    if (!profileData?.records) {
+      return '';
+    }
+
+    // scan available domain records and look for matching resolver keys
+    const recordKeys = getRecordKeys(
+      symbol,
+      mappedResolverKeys,
+      profileData.records,
+    );
+
+    // retrieve the record value
+    const recordValue = profileData?.records
       ? recordKeys.map(k => profileData.records![k]).find(k => k) || ''
       : '';
+
+    //validate the record value
+    if (!validateAddress(recordValue, profileData.records)) {
+      return '';
+    }
+
+    // return the validated record value
+    return recordValue;
   };
 
-  const validateAddress = (value: string) => {
+  const validateAddress = (value: string, records?: Record<string, string>) => {
     if (!mappedResolverKeys) {
       return false;
     }
     const validationSymbols = [asset.ticker, asset.symbol];
     for (const symbol of validationSymbols) {
-      const recordKeys = getRecordKeys(symbol, mappedResolverKeys);
+      const recordKeys = getRecordKeys(symbol, mappedResolverKeys, records);
       if (recordKeys.length === 0) {
         continue;
       }
@@ -133,7 +153,7 @@ const AddressInput: React.FC<Props> = ({
       onAddressChange(isValid ? value : '');
       setError(!isValid);
       if (isValid) {
-        return isValid;
+        return true;
       }
     }
     return false;
@@ -197,7 +217,7 @@ const AddressInput: React.FC<Props> = ({
           (await resolveDomain(addressOrDomain, asset.ticker)) ||
           (await resolveDomain(addressOrDomain, asset.symbol));
         setIsLoading(false);
-        if (!resolvedAddress || !validateAddress(resolvedAddress)) {
+        if (!resolvedAddress) {
           if (isEmailValid(addressOrDomain) && createWalletEnabled) {
             // set an empty resolution address, which will indicate that a new
             // wallet should be created for the validated identity

diff --git a/packages/ui-components/src/components/Wallet/Header.tsx b/packages/ui-components/src/components/Wallet/Header.tsx
@@ -11,25 +11,21 @@ import {styled, useTheme} from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import {useSnackbar} from 'notistack';
 import QueryString from 'qs';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 
 import config from '@unstoppabledomains/config';
 import IconPlate from '@unstoppabledomains/ui-kit/icons/IconPlate';
 import UnstoppableWalletIcon from '@unstoppabledomains/ui-kit/icons/UnstoppableWalletIcon';
 import {makeStyles} from '@unstoppabledomains/ui-kit/styles';
 
-import {getOwnerDomains} from '../../actions';
-import {useUnstoppableMessaging, useWeb3Context} from '../../hooks';
+import {useUnstoppableMessaging} from '../../hooks';
 import {isChromeStorageSupported} from '../../hooks/useChromeStorage';
 import {useTranslationContext} from '../../lib';
-import {notifyEvent} from '../../lib/error';
 import {UnstoppableMessaging} from '../Chat';
-import {DomainListModal} from '../Domain';
 import DropDownMenu from '../DropDownMenu';
 import Link from '../Link';
 import {DomainProfileModal} from '../Manage';
 import Modal from '../Modal';
-import ReceiveDomainModal from './ReceiveDomainModal';
 import RecoverySetupModal from './RecoverySetupModal';
 import type {WalletMode} from './index';
 
@@ -207,7 +203,6 @@ export const Header: React.FC<Props> = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const {classes, cx} = useStyles({isMobile});
-  const {setWeb3Deps} = useWeb3Context();
   const [t] = useTranslationContext();
   const {setOpenChat, isChatReady} = useUnstoppableMessaging();
   const {enqueueSnackbar} = useSnackbar();
@@ -217,17 +212,8 @@ export const Header: React.FC<Props> = ({
 
   // Modal states
   const [isRecoveryModalOpen, setIsRecoveryModalOpen] = useState(false);
-  const [isDomainAddModalOpen, setIsDomainAddModalOpen] = useState(false);
-  const [isDomainListModalOpen, setIsDomainListModalOpen] = useState(false);
-  const [domainToManage, setDomainToManage] = useState<string>();
-  const [isDomains, setIsDomains] = useState(false);
 
-  // load wallet domains when an address is provided
-  useEffect(() => {
-    if (!isDomains) {
-      void handleRetrieveOwnerDomains();
-    }
-  }, [address]);
+  const [domainToManage, setDomainToManage] = useState<string>();
 
   const handleOptionsClick = () => {
     setIsMenuOpen(prev => !prev && !isMenuOpen);
@@ -240,26 +226,11 @@ export const Header: React.FC<Props> = ({
     setIsMenuOpen(false);
   };
 
-  const handleDomainsClick = () => {
-    setIsDomainListModalOpen(true);
-    setIsMenuOpen(false);
-  };
-
-  const handleDomainClick = (v: string) => {
-    handleDomainsClose();
-    setDomainToManage(v);
-  };
-
   const handleRecoveryKitClicked = () => {
     setIsRecoveryModalOpen(true);
     setIsMenuOpen(false);
   };
 
-  const handleGetDomainClick = () => {
-    setIsDomainAddModalOpen(true);
-    setIsMenuOpen(false);
-  };
-
   const handleMessagingClicked = () => {
     if (onMessagesClick) {
       onMessagesClick();
@@ -269,10 +240,6 @@ export const Header: React.FC<Props> = ({
     setIsMenuOpen(false);
   };
 
-  const handleDomainsClose = () => {
-    setIsDomainListModalOpen(false);
-  };
-
   const handleUpdateSuccess = () => {
     enqueueSnackbar(t('manage.updatedDomainSuccess'), {variant: 'success'});
   };
@@ -291,35 +258,6 @@ export const Header: React.FC<Props> = ({
     )}`;
   };
 
-  const handleRetrieveOwnerDomains = async (cursor?: number | string) => {
-    const retData: {domains: string[]; cursor?: string} = {
-      domains: [],
-      cursor: undefined,
-    };
-    try {
-      // load domains that are contained by this Unstoppable Wallet instance
-      const domainData = await getOwnerDomains(
-        address,
-        cursor as string,
-        true,
-        true,
-      );
-      if (domainData) {
-        retData.domains = domainData.data.map(f => f.domain);
-        retData.cursor = domainData.meta.pagination.cursor;
-        if (retData.domains.length > 0) {
-          // set a flag that other domains exist in portfolio
-          setIsDomains(true);
-        }
-      }
-    } catch (e) {
-      notifyEvent(e, 'error', 'Profile', 'Fetch', {
-        msg: 'error retrieving owner domains',
-      });
-    }
-    return retData;
-  };
-
   return mode === 'basic' ? (
     <Box className={classes.root}>
       <Box className={classes.iconContainer}>
@@ -459,28 +397,13 @@ export const Header: React.FC<Props> = ({
           onMessagingClicked={
             showMessages && isChatReady ? handleMessagingClicked : undefined
           }
-          onGetDomainClicked={!isDomains ? handleGetDomainClick : undefined}
-          onDomainsClicked={isDomains ? handleDomainsClick : undefined}
           onSettingsClicked={onSettingsClick}
           onRecoveryLinkClicked={handleRecoveryKitClicked}
           onLogout={handleLogout}
           onDisconnect={onDisconnect ? handleDisconnect : undefined}
           onHideMenu={() => setIsMenuOpen(false)}
         />
       )}
-      {isDomainListModalOpen && (
-        <DomainListModal
-          id="domainMenuList"
-          title={t('manage.otherDomains')}
-          subtitle={t('manage.otherDomainsDescription')}
-          retrieveDomains={handleRetrieveOwnerDomains}
-          open={isDomainListModalOpen}
-          fullScreen={fullScreenModals}
-          setWeb3Deps={setWeb3Deps}
-          onClose={handleDomainsClose}
-          onClick={handleDomainClick}
-        />
-      )}
       {domainToManage && (
         <DomainProfileModal
           domain={domainToManage}
@@ -491,17 +414,6 @@ export const Header: React.FC<Props> = ({
           onUpdate={handleUpdateSuccess}
         />
       )}
-      {isDomainAddModalOpen && (
-        <Modal
-          title={t('wallet.addDomain')}
-          open={isDomainAddModalOpen}
-          fullScreen={fullScreenModals}
-          titleStyle={classes.modalTitleStyle}
-          onClose={() => setIsDomainAddModalOpen(false)}
-        >
-          <ReceiveDomainModal />
-        </Modal>
-      )}
       {isRecoveryModalOpen && (
         <Modal
           title={t('wallet.recoveryKit')}

diff --git a/packages/ui-components/src/components/Wallet/SendConfirm.tsx b/packages/ui-components/src/components/Wallet/SendConfirm.tsx
@@ -156,9 +156,7 @@ export const SendConfirm: React.FC<Props> = ({
                   `${round(
                     parseFloat(gasFee),
                     maxDisplayLength,
-                  )} ${getBlockchainDisplaySymbol(
-                    getBlockchainSymbol(asset.blockchainAsset.blockchain.id),
-                  )}`
+                  )} ${getBlockchainDisplaySymbol(gasSymbol)}`
                 )}
               </Typography>
             </Box>

diff --git a/packages/ui-components/src/hooks/useSubmitTransaction.ts b/packages/ui-components/src/hooks/useSubmitTransaction.ts
@@ -8,10 +8,7 @@ import {
   getOperationStatus,
   getTransferOperationResponse,
 } from '../actions/fireBlocksActions';
-import {
-  getBlockchainSymbol,
-  getRecordKeys,
-} from '../components/Manage/common/verification/types';
+import {getRecordKeys} from '../components/Manage/common/verification/types';
 import type {TokenEntry} from '../components/Wallet/Token';
 import {TokenType} from '../lib';
 import {notifyEvent} from '../lib/error';
@@ -97,21 +94,20 @@ export const useSubmitTransaction = ({
         const records = await onInvitation(recipientAddress);
         const resolvedAddress =
           records && Object.keys(records).length > 0
-            ? getRecordKeys(asset.blockchainAsset.symbol, mappedResolverKeys)
+            ? getRecordKeys(
+                asset.blockchainAsset.symbol,
+                mappedResolverKeys,
+                records,
+              )
                 .map(k => records[k])
                 .find(k => k) ||
               getRecordKeys(
                 asset.blockchainAsset.blockchain.id,
                 mappedResolverKeys,
+                records,
               )
                 .map(k => records[k])
-                .find(k => k) ||
-              (getBlockchainSymbol(asset.blockchainAsset.blockchain.id) ===
-              'BASE'
-                ? getRecordKeys('MATIC', mappedResolverKeys)
-                    .map(k => records[k])
-                    .find(k => k)
-                : undefined)
+                .find(k => k)
             : undefined;
         if (!resolvedAddress) {
           throw new Error('Wallet not created');