feat: add name services support and improve bookmarks flow (#189)

lifinance · Feb 15, 2024 · 46fba08 · 46fba08
1 parent 71f06f5
commit 46fba08
Show file tree

Hide file tree

Showing 36 changed files with 663 additions and 714 deletions.
diff --git a/package.json b/package.json
@@ -38,8 +38,8 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",

diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json
@@ -52,10 +52,10 @@
     "lifi"
   ],
   "dependencies": {
-    "@lifi/sdk": "^3.0.0-alpha.55",
+    "@lifi/sdk": "^3.0.0-alpha.56",
     "@solana/wallet-adapter-base": "^0.9.23",
     "react": "^18.2.0",
-    "wagmi": "2.5.5"
+    "wagmi": "2.5.7"
   },
   "devDependencies": {
     "cpy-cli": "^5.0.0",

diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -26,26 +26,26 @@
   "dependencies": {
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^3.0.0-alpha.55",
+    "@lifi/sdk": "^3.0.0-alpha.56",
     "@lifi/wallet-management": "^3.0.0-alpha.19",
     "@lifi/widget": "^3.0.0-alpha.28",
-    "@mui/icons-material": "^5.15.9",
+    "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.9",
+    "@mui/material": "^5.15.10",
     "@opensea/seaport-js": "2.0.8",
-    "@tanstack/react-query": "^5.20.1",
+    "@tanstack/react-query": "^5.20.5",
     "bignumber.js": "^9.1.2",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
-    "wagmi": "2.5.5"
+    "wagmi": "2.5.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "web-vitals": "^3.5.2"
   },
   "eslintConfig": {

diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json
@@ -24,32 +24,32 @@
   },
   "author": "Eugene Chybisov <[email protected]>",
   "dependencies": {
-    "@lifi/sdk": "^3.0.0-alpha.55",
+    "@lifi/sdk": "^3.0.0-alpha.56",
     "@lifi/wallet-management": "^3.0.0-alpha.19",
     "@lifi/widget": "^3.0.0-alpha.28",
-    "@mui/icons-material": "^5.15.9",
+    "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.9",
+    "@mui/material": "^5.15.10",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.90.0",
-    "@tanstack/react-query": "^5.20.1",
+    "@tanstack/react-query": "^5.20.5",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
-    "viem": "^2.7.8",
-    "wagmi": "2.5.5"
+    "viem": "^2.7.9",
+    "wagmi": "2.5.7"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^4.2.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "source-map-explorer": "^2.5.3",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "web-vitals": "^3.5.2"
   },
   "eslintConfig": {

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -56,16 +56,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@lifi/sdk": "^3.0.0-alpha.55",
+    "@lifi/sdk": "^3.0.0-alpha.56",
     "@lifi/wallet-management": "^3.0.0-alpha.19",
-    "@mui/icons-material": "^5.15.9",
+    "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.9",
+    "@mui/material": "^5.15.10",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.90.0",
-    "@tanstack/react-query": "^5.20.1",
+    "@tanstack/react-query": "^5.20.5",
     "@tanstack/react-virtual": "^3.0.4",
     "i18next": "^23.8.2",
     "microdiff": "^1.3.2",
@@ -77,8 +77,8 @@
     "react-router-dom": "^6.22.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.7.8",
-    "wagmi": "2.5.5",
+    "viem": "^2.7.9",
+    "wagmi": "2.5.7",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

diff --git a/packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx b/packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx
@@ -5,9 +5,9 @@ import { useProcessMessage } from '../../hooks/useProcessMessage.js';
 import { useRouteExecution } from '../../hooks/useRouteExecution.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { TokenAvatarGroup } from '../Avatar/Avatar.style.js';
+import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 import { StepTimer } from '../Step/StepTimer.js';
-import { TokenAvatar } from '../TokenAvatar/TokenAvatar.js';
-import { TokenAvatarGroup } from '../TokenAvatar/TokenAvatar.style.js';
 import { ListItem, ListItemButton } from './ActiveTransactions.style.js';
 
 export const ActiveTransactionItem: React.FC<{

diff --git a/packages/widget/src/components/AmountInput/AmountInputStartAdornment.tsx b/packages/widget/src/components/AmountInput/AmountInputStartAdornment.tsx
@@ -3,7 +3,8 @@ import { useToken } from '../../hooks/useToken.js';
 import type { FormTypeProps } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar/TokenAvatar.js';
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js';
+import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 
 export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
   formType,
@@ -20,6 +21,6 @@ export const AmountInputStartAdornment: React.FC<FormTypeProps> = ({
   return isSelected ? (
     <TokenAvatar token={token} chain={chain} />
   ) : (
-    <TokenAvatarDefault />
+    <AvatarBadgedDefault />
   );
 };
diff --git a/...s/widget/src/components/AccountAvatar.tsx → ...t/src/components/Avatar/AccountAvatar.tsx b/...s/widget/src/components/AccountAvatar.tsx → ...t/src/components/Avatar/AccountAvatar.tsx
@@ -1,17 +1,22 @@
 import { getConnectorIcon } from '@lifi/wallet-management';
 import { Wallet } from '@mui/icons-material';
 import { Avatar, Badge } from '@mui/material';
-import type { Account } from '../hooks/useAccount.js';
-import { useChain } from '../hooks/useChain.js';
-import { SmallAvatar } from './SmallAvatar.js';
-import { AvatarDefault } from './TokenAvatar/TokenAvatar.style.js';
+import type { Account } from '../../hooks/useAccount.js';
+import { useChain } from '../../hooks/useChain.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { AvatarDefault, AvatarDefaultBadge } from './Avatar.style.js';
 
 interface AccountAvatarProps {
   chainId?: number;
   account?: Account;
+  empty?: boolean;
 }
 
-export const AccountAvatar = ({ chainId, account }: AccountAvatarProps) => {
+export const AccountAvatar = ({
+  chainId,
+  account,
+  empty,
+}: AccountAvatarProps) => {
   const { chain } = useChain(chainId);
 
   const avatar = account ? (
@@ -24,25 +29,29 @@ export const AccountAvatar = ({ chainId, account }: AccountAvatarProps) => {
     >
       {account.connector?.name[0]}
     </Avatar>
+  ) : empty ? (
+    <AvatarDefault />
   ) : (
     <AvatarDefault>
       <Wallet sx={{ fontSize: 20 }} />
     </AvatarDefault>
   );
 
-  return chainId && chain?.logoURI ? (
+  return (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       badgeContent={
-        <SmallAvatar src={chain?.logoURI} alt={chain?.name}>
-          {chain?.name[0]}
-        </SmallAvatar>
+        chain ? (
+          <SmallAvatar src={chain.logoURI} alt={chain.name}>
+            {chain.name[0]}
+          </SmallAvatar>
+        ) : (
+          <AvatarDefaultBadge />
+        )
       }
     >
       {avatar}
     </Badge>
-  ) : (
-    avatar
   );
 };
diff --git a/...ponents/TokenAvatar/TokenAvatar.style.tsx → ...et/src/components/Avatar/Avatar.style.tsx b/...ponents/TokenAvatar/TokenAvatar.style.tsx → ...et/src/components/Avatar/Avatar.style.tsx
diff --git a/packages/widget/src/components/Avatar/Avatar.tsx b/packages/widget/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,34 @@
+import type { SxProps, Theme } from '@mui/material';
+import { Badge, Skeleton } from '@mui/material';
+import { SmallAvatarSkeleton } from '../SmallAvatar.js';
+import { AvatarDefault, AvatarDefaultBadge } from './Avatar.style.js';
+
+export const AvatarBadgedDefault: React.FC<{
+  sx?: SxProps<Theme>;
+}> = ({ sx }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<AvatarDefaultBadge />}
+      sx={sx}
+    >
+      <AvatarDefault />
+    </Badge>
+  );
+};
+
+export const AvatarBadgedSkeleton: React.FC<{
+  sx?: SxProps<Theme>;
+}> = ({ sx }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<SmallAvatarSkeleton />}
+      sx={sx}
+    >
+      <Skeleton width={40} height={40} variant="circular" />
+    </Badge>
+  );
+};
diff --git a/...rc/components/TokenAvatar/TokenAvatar.tsx → ...get/src/components/Avatar/TokenAvatar.tsx b/...rc/components/TokenAvatar/TokenAvatar.tsx → ...get/src/components/Avatar/TokenAvatar.tsx
@@ -1,10 +1,30 @@
 import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
-import { Avatar, Badge, Skeleton } from '@mui/material';
+import { Avatar, Badge } from '@mui/material';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
-import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar.js';
-import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style.js';
+import { SmallAvatar } from '../SmallAvatar.js';
+import { AvatarBadgedSkeleton } from './Avatar.js';
+import { AvatarDefaultBadge } from './Avatar.style.js';
+
+export const TokenAvatar: React.FC<{
+  token?: StaticToken;
+  chain?: Chain;
+  isLoading?: boolean;
+  sx?: SxProps<Theme>;
+}> = ({ token, chain, isLoading, sx }) => {
+  if (!chain || !token?.logoURI) {
+    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />;
+  }
+  return (
+    <TokenAvatarBase
+      token={token}
+      chain={chain}
+      isLoading={isLoading}
+      sx={sx}
+    />
+  );
+};
 
 export const TokenAvatarFallback: React.FC<{
   token?: StaticToken;
@@ -33,7 +53,7 @@ export const TokenAvatarBase: React.FC<{
   sx?: SxProps<Theme>;
 }> = ({ token, chain, isLoading, sx }) => {
   return isLoading ? (
-    <TokenAvatarSkeleton />
+    <AvatarBadgedSkeleton />
   ) : (
     <Badge
       overlap="circular"
@@ -55,52 +75,3 @@ export const TokenAvatarBase: React.FC<{
     </Badge>
   );
 };
-
-export const TokenAvatar: React.FC<{
-  token?: StaticToken;
-  chain?: Chain;
-  isLoading?: boolean;
-  sx?: SxProps<Theme>;
-}> = ({ token, chain, isLoading, sx }) => {
-  if (!chain || !token?.logoURI) {
-    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />;
-  }
-  return (
-    <TokenAvatarBase
-      token={token}
-      chain={chain}
-      isLoading={isLoading}
-      sx={sx}
-    />
-  );
-};
-
-export const TokenAvatarDefault: React.FC<{
-  sx?: SxProps<Theme>;
-}> = ({ sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefaultBadge />}
-      sx={sx}
-    >
-      <AvatarDefault />
-    </Badge>
-  );
-};
-
-export const TokenAvatarSkeleton: React.FC<{
-  sx?: SxProps<Theme>;
-}> = ({ sx }) => {
-  return (
-    <Badge
-      overlap="circular"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<SmallAvatarSkeleton />}
-      sx={sx}
-    >
-      <Skeleton width={40} height={40} variant="circular" />
-    </Badge>
-  );
-};
diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
@@ -9,13 +9,10 @@ import type { FormTypeProps } from '../../stores/form/types.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
+import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 import { Card } from '../Card/Card.js';
 import { CardTitle } from '../Card/CardTitle.js';
-import {
-  TokenAvatar,
-  TokenAvatarDefault,
-  TokenAvatarSkeleton,
-} from '../TokenAvatar/TokenAvatar.js';
 import { SelectTokenCardHeader } from './SelectTokenButton.style.js';
 
 export const SelectTokenButton: React.FC<
@@ -62,7 +59,7 @@ export const SelectTokenButton: React.FC<
       <CardTitle>{cardTitle}</CardTitle>
       {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
         <SelectTokenCardHeader
-          avatar={<TokenAvatarSkeleton />}
+          avatar={<AvatarBadgedSkeleton />}
           title={<Skeleton variant="text" width={64} height={24} />}
           subheader={<Skeleton variant="text" width={72} height={16} />}
           compact={compact}
@@ -73,7 +70,7 @@ export const SelectTokenButton: React.FC<
             isSelected ? (
               <TokenAvatar token={token} chain={chain} />
             ) : (
-              <TokenAvatarDefault />
+              <AvatarBadgedDefault />
             )
           }
           title={isSelected ? token.symbol : defaultPlaceholder}