Merge pull request #225 from alephium/use-unchained-logo-url-bridge-t…

…oken Use `unchainedLogoURI` When Overlay Chain Logo
alephium · Nov 5, 2024 · b30d421 · b30d421
2 parents 2f3a0dc + d339340
commit b30d421
Show file tree

Hide file tree

Showing 21 changed files with 99 additions and 66 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "0.9.10",
+  "version": "0.9.11",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.10",
+  "version": "0.9.11",
   "private": true,
   "name": "alephium-browser-extension-wallet",
   "repository": "github:alephium/extension-wallet",

diff --git a/packages/dapp/package.json b/packages/dapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alephium/dapp",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/packages/extension/manifest/v2.json b/packages/extension/manifest/v2.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "name": "Alephium Extension Wallet",
   "description": "Alephium's official extension wallet with powerful features and a clean UI.",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "manifest_version": 2,
   "browser_action": {
     "default_icon": {

diff --git a/packages/extension/manifest/v3.json b/packages/extension/manifest/v3.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "name": "Alephium Extension Wallet",
   "description": "Alephium's official extension wallet with powerful features and a clean UI.",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "manifest_version": 3,
   "action": {
     "default_icon": {

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@alephium/extension",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
     "@alephium/get-extension-wallet": "^1.7.3",
     "@alephium/ledger-app": "0.6.0",
-    "@alephium/token-list": "0.0.19",
-    "@alephium/web3": "^1.8.3",
-    "@alephium/web3-test": "^1.8.3",
-    "@alephium/web3-wallet": "^1.8.3",
+    "@alephium/token-list": "0.0.20",
+    "@alephium/web3": "^1.8.5",
+    "@alephium/web3-test": "^1.8.5",
+    "@alephium/web3-wallet": "^1.8.5",
     "@ledgerhq/hw-transport-webusb": "6.29.0",
     "@ledgerhq/hw-transport-webhid": "6.29.0",
     "@playwright/test": "^1.23.0",
@@ -81,8 +81,8 @@
     "push-release-branch": "git push --set-upstream origin release/v$npm_package_version --follow-tags"
   },
   "dependencies": {
-    "@argent/stack-router": "^0.9.10",
-    "@argent/ui": "^0.9.10",
+    "@argent/stack-router": "^0.9.11",
+    "@argent/ui": "^0.9.11",
     "@chakra-ui/icons": "^2.0.15",
     "@chakra-ui/react": "2.5.1",
     "@extend-chrome/messages": "^1.2.2",

diff --git a/packages/extension/src/shared/token/storage.ts b/packages/extension/src/shared/token/storage.ts
@@ -35,7 +35,8 @@ export const tokenSchema: yup.Schema<Token> = baseTokenSchema
     showAlways: yup.boolean(),
     description: yup.string(),
     verified: yup.boolean(),
-    originChain: yup.string()
+    originChain: yup.string(),
+    unchainedLogoURI: yup.string().url()
   })
 
 export async function addToken(token: Token, verified: boolean) {

diff --git a/packages/extension/src/shared/token/type.ts b/packages/extension/src/shared/token/type.ts
@@ -23,6 +23,7 @@ export interface Token extends Required<RequestToken> {
   showAlways?: boolean
   verified?: boolean
   originChain?: string
+  unchainedLogoURI?: string
 }
 
 export interface TokenListTokens {

diff --git a/packages/extension/src/ui/features/accountActivity/ui/SwapTransactionIcon.tsx b/packages/extension/src/ui/features/accountActivity/ui/SwapTransactionIcon.tsx
@@ -28,8 +28,9 @@ export const SwapTransactionIcon: FC<SwapTransactionIconProps> = ({
       {fromToken && (
         <TokenIcon
           name={fromToken?.name || "?"}
-          url={fromToken?.logoURI}
+          logoURI={fromToken?.logoURI}
           originChain={fromToken?.originChain}
+          unchainedLogoURI={fromToken?.unchainedLogoURI}
           size={fromIconSize}
           position={"absolute"}
           left={0}
@@ -39,8 +40,9 @@ export const SwapTransactionIcon: FC<SwapTransactionIconProps> = ({
       )}
       <TokenIcon
         name={toToken?.name || "?"}
-        url={toToken?.logoURI}
+        logoURI={toToken?.logoURI}
         originChain={toToken?.originChain}
+        unchainedLogoURI={toToken?.unchainedLogoURI}
         size={toIconSize}
         position={"absolute"}
         right={0}

diff --git a/packages/extension/src/ui/features/accountActivity/ui/TransactionIcon.tsx b/packages/extension/src/ui/features/accountActivity/ui/TransactionIcon.tsx
@@ -80,7 +80,7 @@ export const TransactionIcon: FC<TransactionIconProps> = ({
     const { token } = transaction
     if (token) {
       const src = getTokenIconUrl({
-        url: token.logoURI,
+        logoURI: token.logoURI,
         name: token.name,
       })
       badgeComponent = <Image src={src} />
@@ -89,7 +89,7 @@ export const TransactionIcon: FC<TransactionIconProps> = ({
     const { toToken } = transaction
     if (toToken) {
       const src = getTokenIconUrl({
-        url: toToken.logoURI,
+        logoURI: toToken.logoURI,
         name: toToken.name,
       })
       badgeComponent = <Image src={src} />

diff --git a/packages/extension/src/ui/features/accountTokens/HideTokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/HideTokenScreen.tsx
@@ -49,7 +49,7 @@ export const HideTokenScreen: FC = () => {
     return <Navigate to={routes.accountTokens()} />
   }
 
-  const { name, logoURI, originChain } = toTokenView(token)
+  const { name, logoURI, originChain, unchainedLogoURI } = toTokenView(token)
 
   const handleSubmit = () => {
     try {
@@ -68,7 +68,7 @@ export const HideTokenScreen: FC = () => {
       onSubmit={handleSubmit}
     >
       <TokenTitle>
-        <TokenIcon url={logoURI} name={name} size={12} verified={token.verified} originChain={originChain} />
+        <TokenIcon logoURI={logoURI} name={name} size={12} verified={token.verified} originChain={originChain} unchainedLogoURI={unchainedLogoURI} />
         <TokenName>{name}</TokenName>
       </TokenTitle>
       {error && <FormError>{error}</FormError>}

diff --git a/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx
@@ -394,7 +394,7 @@ export const SendTokenScreen: FC = () => {
   if (!tokenWithBalance) {
     return <Navigate to={routes.accounts()} />
   }
-  const { id, name, symbol, balance, decimals, logoURI, verified, originChain } = toTokenView(tokenWithBalance)
+  const { id, name, symbol, balance, decimals, logoURI, verified, originChain, unchainedLogoURI } = toTokenView(tokenWithBalance)
 
   const handleMaxClick = () => {
     setMaxClicked(true)
@@ -505,7 +505,7 @@ export const SendTokenScreen: FC = () => {
                   style={{ padding: "17px 16px 17px 57px" }}
                 >
                   <InputGroupBefore>
-                    <TokenIcon name={name} url={logoURI} size={8} verified={verified} originChain={originChain} />
+                    <TokenIcon name={name} logoURI={logoURI} size={8} verified={verified} originChain={originChain} unchainedLogoURI={unchainedLogoURI} />
                   </InputGroupBefore>
                   <InputGroupAfter>
                     {inputAmount ? (

diff --git a/packages/extension/src/ui/features/accountTokens/TokenIcon.tsx b/packages/extension/src/ui/features/accountTokens/TokenIcon.tsx
@@ -10,40 +10,43 @@ export interface TokenIconProps
   extends Pick<ComponentProps<typeof Circle>, "size">,
   ComponentProps<typeof Image> {
   name: string
-  url?: string
+  logoURI?: string
   verified?: boolean
   originChain?: string
+  unchainedLogoURI?: string
 }
 
 export const getTokenIconUrl = ({
-  url,
+  logoURI,
   name,
-}: Pick<TokenIconProps, "url" | "name">) => {
-  if (url && url.length) {
-    return url
+}: Pick<TokenIconProps, "logoURI" | "name">) => {
+  if (logoURI && logoURI.length) {
+    return logoURI
   }
   const background = getColor(name)
   return generateAvatarImage(name, { background })
 }
 
-export const TokenIcon: FC<TokenIconProps> = ({ name, url, size, verified, originChain, ...rest }) => {
-  const src = getTokenIconUrl({ url, name })
+export const TokenIcon: FC<TokenIconProps> = ({ name, logoURI, size, verified, originChain, unchainedLogoURI, ...rest }) => {
+  const overlayChainLogo = originChain && verified && unchainedLogoURI
 
   const originChainIcon = () => {
-    if (!originChain || !verified) {
+    if (!overlayChainLogo) {
       return undefined
     }
 
     switch (originChain.toLowerCase()) {
       case 'bsc':
         return <BSCIcon />
-      case 'ethereum':
+      case 'eth':
         return <EthereumIcon />
       default:
         return undefined
     }
   }
 
+  const src = getTokenIconUrl({ logoURI: overlayChainLogo ? unchainedLogoURI : logoURI, name })
+
   return (
     <Circle
       size={size}
@@ -75,7 +78,7 @@ export const TokenIcon: FC<TokenIconProps> = ({ name, url, size, verified, origi
           </Circle>
         </Tooltip>
       )}
-      {(originChain && verified) && (
+      {overlayChainLogo && (
         <Circle
           overflow={"hidden"}
           position={"absolute"}

diff --git a/packages/extension/src/ui/features/accountTokens/TokenListItem.tsx b/packages/extension/src/ui/features/accountTokens/TokenListItem.tsx
@@ -37,13 +37,13 @@ export const TokenListItem: FC<TokenListItemProps> = ({
   errorMessage,
   ...rest
 }) => {
-  const { name, logoURI, symbol, verified, originChain } = toTokenView(token)
+  const { name, logoURI, symbol, verified, originChain, unchainedLogoURI } = toTokenView(token)
   const displayBalance = prettifyTokenBalance(token)
   const displayCurrencyValue = prettifyCurrencyValue(currencyValue)
   const isNoCurrencyVariant = variant === "no-currency"
   return (
     <CustomButtonCell {...rest}>
-      <TokenIcon size={8} url={logoURI} name={name} verified={verified} originChain={originChain} />
+      <TokenIcon size={8} logoURI={logoURI} name={name} verified={verified} originChain={originChain} unchainedLogoURI={unchainedLogoURI} />
       <Flex
         flexGrow={1}
         alignItems="center"

diff --git a/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx
@@ -77,9 +77,9 @@ const TokenBalanceContainer = styled(RowCentered)`
   align-items: baseline;
 `
 
-const tokenIcon = (name: string, size: number, logoURI?: string, verified?: boolean, originChain?: string) => {
+const tokenIcon = (name: string, size: number, logoURI?: string, verified?: boolean, originChain?: string, unchainedLogoURI?: string) => {
   return logoURI ? (
-    <TokenIcon name={name} url={logoURI} size={size} verified={verified} originChain={originChain} />
+    <TokenIcon name={name} logoURI={logoURI} size={size} verified={verified} originChain={originChain} unchainedLogoURI={unchainedLogoURI} />
   ) : (
     <Ghost size={size * 0.7} />
   )
@@ -101,7 +101,7 @@ export const TokenScreen: FC = () => {
     return <Navigate to={routes.accounts()} />
   }
 
-  const { id, name, symbol, logoURI, verified, originChain } = toTokenView(token)
+  const { id, name, symbol, logoURI, verified, originChain, unchainedLogoURI } = toTokenView(token)
   const displayBalance = prettifyTokenBalance(token, false)
   const isLoading = isValidating || tokenDetailsIsInitialising
 
@@ -114,7 +114,7 @@ export const TokenScreen: FC = () => {
       <TokenScreenWrapper>
         <TokenHeader hasCurrencyValue={!!currencyValue}>
           <ColumnCenter>
-            {tokenIcon(name, 12, logoURI, verified, originChain)}
+            {tokenIcon(name, 12, logoURI, verified, originChain, unchainedLogoURI)}
             <TokenBalanceContainer>
               <LoadingPulse
                 isLoading={isLoading}

diff --git a/packages/extension/src/ui/features/accountTokens/tokens.service.ts b/packages/extension/src/ui/features/accountTokens/tokens.service.ts
@@ -13,6 +13,7 @@ export interface TokenView {
   showAlways?: boolean
   verified?: boolean
   originChain?: string
+  unchainedLogoURI?: string
 }
 
 const formatTokenBalanceToCharLength =

diff --git a/packages/extension/src/ui/features/accounts/PrettyAccountAddress.tsx b/packages/extension/src/ui/features/accounts/PrettyAccountAddress.tsx
@@ -107,7 +107,7 @@ export const PrettyAccountAddress: FC<PrettyAccountAddressProps> = ({
   return (
     <Flex alignItems={"center"} gap={2}>
       {icon && accountName && (
-        <TokenIcon url={accountImageUrl} name={accountAddress} size={size} verified={true} />
+        <TokenIcon logoURI={accountImageUrl} name={accountAddress} size={size} verified={true} />
       )}
       {bold ? (
         <P4 fontWeight="bold" color="white">

diff --git a/packages/stack-router/package.json b/packages/stack-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/stack-router",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "license": "MIT",
   "private": true,
   "files": [
@@ -32,7 +32,7 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@argent/ui": "^0.9.10",
+    "@argent/ui": "^0.9.11",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@argent-x/storybook",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "private": true,
   "devDependencies": {
-    "@alephium/extension": "^0.9.10",
-    "@argent/ui": "^0.9.10",
+    "@alephium/extension": "^0.9.11",
+    "@argent/ui": "^0.9.11",
     "@babel/core": "^7.18.5",
     "@chakra-ui/storybook-addon": "^4.0.12",
     "@storybook/addon-actions": "^6.5.9",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/ui",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "license": "MIT",
   "private": true,
   "files": [