Initial support for managing token family key pattern (#194)

* Initial support for managing token family key pattern * remove debug log entry * lazy load crypto images * fix z-index issues * default image and fallback + token styling * Handle ETH multichain * handle ETH and other legacy keys as multichain if necessary * lint * mock unit tests for token family response * Support Base chain address record verification * handle legacy / mapped multichain display * sort versions in CryptoIcon UX
unstoppabledomains · Sep 5, 2024 · 32e66c8 · 32e66c8
1 parent d8c9e18
commit 32e66c8
Show file tree

Hide file tree

Showing 26 changed files with 658 additions and 956 deletions.
diff --git a/packages/config/src/env/default.ts b/packages/config/src/env/default.ts
@@ -60,7 +60,15 @@ export default function getDefaultConfig(): Config {
     UNSTOPPABLE_CONTRACT_ADDRESS: '0xa9a6a3626993d487d2dbda3173cf58ca1a9d9e9f',
     UNSTOPPABLE_METADATA_ENDPOINT: 'https://api.ud-staging.com/metadata',
     IPFS_BASE_URL: 'https://ipfs.io',
-    VERIFICATION_SUPPORTED: ['SOL', 'ETH', 'MATIC', 'FTM', 'AVAX', 'BTC'],
+    VERIFICATION_SUPPORTED: [
+      'SOL',
+      'ETH',
+      'BASE',
+      'MATIC',
+      'FTM',
+      'AVAX',
+      'BTC',
+    ],
     LOGIN_WITH_UNSTOPPABLE: {
       CLIENT_ID: '115148ec-364d-4e19-b7d8-2807e8f1b525',
       REDIRECT_URI:

diff --git a/packages/ui-components/src/actions/pav3Actions.ts b/packages/ui-components/src/actions/pav3Actions.ts
@@ -1,7 +1,7 @@
 import config from '@unstoppabledomains/config';
 
 import {fetchApi} from '../lib';
-import type {RecordUpdateResponse} from '../lib/types/pav3';
+import type {MappedResolverKey, RecordUpdateResponse} from '../lib/types/pav3';
 
 // confirmRecordUpdate submits a transaction signature to allow a domain record
 // update to be processed on the blockchain
@@ -38,6 +38,22 @@ export const confirmRecordUpdate = async (
   });
 };
 
+export const getAllResolverKeys = async (): Promise<MappedResolverKey[]> => {
+  const keys = await fetchApi<MappedResolverKey[]>(`/resolve/keys`, {
+    method: 'GET',
+    mode: 'cors',
+    host: config.PROFILE.HOST_URL,
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+  });
+  if (keys && Array.isArray(keys)) {
+    return keys;
+  }
+  return [];
+};
+
 // getRegistrationMessage retrieve a message that must be signed before on-chain
 // record operations can be initiated for the given domain. Returns undefined if
 // a message is not required.

diff --git a/packages/ui-components/src/components/CopyToClipboard.tsx b/packages/ui-components/src/components/CopyToClipboard.tsx
@@ -43,7 +43,6 @@ const CopyToClipboard = ({
         display="inline"
         aria-label={tooltip || t('common.copy')}
         onClick={handleCopyClick}
-        zIndex={10000}
       >
         {children}
       </Box>

diff --git a/packages/ui-components/src/components/CryptoAddresses/CryptoAddress.tsx b/packages/ui-components/src/components/CryptoAddresses/CryptoAddress.tsx
@@ -115,6 +115,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   menuActionIcon: {
     marginRight: theme.spacing(1),
+    height: '14px',
+    width: '14px',
   },
 }));
 
@@ -216,6 +218,7 @@ const CryptoAddress: React.FC<Props> = ({
       case 'ETH':
       case 'FTM':
       case 'AVAX':
+      case 'BASE':
         return isEthAddress(addr)
           ? `https://www.oklink.com/${symbol.toLowerCase()}/address/${addr}?channelId=uns001`
           : '';
@@ -254,10 +257,7 @@ const CryptoAddress: React.FC<Props> = ({
         placement="bottom"
         arrow
       >
-        <CryptoIcon
-          currency={currency}
-          classes={{root: classes.currencyIcon}}
-        />
+        <CryptoIcon currency={currency} className={classes.currencyIcon} />
       </Tooltip>
       {chain && <span className={classes.chain}>{chain}</span>}
       <Typography className={classes.address}>
@@ -331,46 +331,52 @@ const CryptoAddress: React.FC<Props> = ({
             anchorEl={anchorEl}
             open={Boolean(anchorEl)}
             onClose={handleClose}
+            transformOrigin={{horizontal: 'right', vertical: 'top'}}
+            anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
             classes={{list: classes.menuList}}
           >
-            {Object.keys(filteredVersions).map(version => (
-              <MenuItem className={classes.menuItem} onClick={handleClose}>
-                {getBlockScanUrl(currency, filteredVersions[version]) ? (
-                  <Box
-                    display="flex"
-                    onClick={() =>
-                      handleSingleAddressClick(filteredVersions[version])
-                    }
-                  >
-                    <LaunchOutlinedIcon
-                      titleAccess={t('profile.openAddress')}
-                      className={classes.menuActionIcon}
-                    />
-                    <Typography>{version}</Typography>
-                  </Box>
-                ) : (
-                  <CopyToClipboard
-                    key={`${currency}_${version}`}
-                    onCopy={
-                      showTooltip && isOwner
-                        ? undefined
-                        : handleCryptoAddressCopied
-                    }
-                    stringToCopy={
-                      showTooltip && isOwner ? '' : filteredVersions[version]
-                    }
-                  >
-                    <Box display="flex">
-                      <CopyContentIcon
-                        titleAccess={t('profile.copyAddress')}
+            {Object.keys(filteredVersions)
+              .sort((a, b) => a.localeCompare(b))
+              .map(version => (
+                <MenuItem className={classes.menuItem} onClick={handleClose}>
+                  {getBlockScanUrl(currency, filteredVersions[version]) ? (
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      onClick={() =>
+                        handleSingleAddressClick(filteredVersions[version])
+                      }
+                    >
+                      <LaunchOutlinedIcon
+                        titleAccess={t('profile.openAddress')}
                         className={classes.menuActionIcon}
                       />
-                      <Typography>{version}</Typography>
+                      <Typography variant="body2">{version}</Typography>
                     </Box>
-                  </CopyToClipboard>
-                )}
-              </MenuItem>
-            ))}
+                  ) : (
+                    <CopyToClipboard
+                      key={`${currency}_${version}`}
+                      onCopy={
+                        showTooltip && isOwner
+                          ? undefined
+                          : handleCryptoAddressCopied
+                      }
+                      stringToCopy={
+                        showTooltip && isOwner ? '' : filteredVersions[version]
+                      }
+                    >
+                      <Box display="flex">
+                        <CopyContentIcon
+                          titleAccess={t('profile.copyAddress')}
+                          className={classes.menuActionIcon}
+                        />
+                        <Typography variant="body2">{version}</Typography>
+                      </Box>
+                    </CopyToClipboard>
+                  )}
+                </MenuItem>
+              ))}
           </Menu>
         </>
       ) : isSingleAddressWithLink ? (

diff --git a/packages/ui-components/src/components/DropDownMenu.tsx b/packages/ui-components/src/components/DropDownMenu.tsx
@@ -37,6 +37,7 @@ const useStyles = makeStyles<{marginTop?: number}>()(
       position: 'absolute',
       top: `${marginTop || '44'}px`,
       right: '0px',
+      zIndex: 100,
     },
     container: {
       display: 'flex',