Skip to content

Commit

Permalink
Merge pull request #224 from alephium/display-overlay-origin-chain-lo…
Browse files Browse the repository at this point in the history
…go-for-tokens

Overlay Origin Chain Logo For Bridged Tokens
  • Loading branch information
h0ngcha0 authored Nov 5, 2024
2 parents 11791e0 + 5802934 commit 2f3a0dc
Show file tree
Hide file tree
Showing 11 changed files with 97 additions and 13 deletions.
3 changes: 2 additions & 1 deletion packages/extension/src/shared/token/storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const tokenSchema: yup.Schema<Token> = baseTokenSchema
logoURI: yup.string().url(),
showAlways: yup.boolean(),
description: yup.string(),
verified: yup.boolean()
verified: yup.boolean(),
originChain: yup.string()
})

export async function addToken(token: Token, verified: boolean) {
Expand Down
1 change: 1 addition & 0 deletions packages/extension/src/shared/token/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface Token extends Required<RequestToken> {
logoURI?: string
showAlways?: boolean
verified?: boolean
originChain?: string
}

export interface TokenListTokens {
Expand Down
30 changes: 30 additions & 0 deletions packages/extension/src/ui/components/Icons/BSCIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { FC } from "react"

export const BSCIcon: FC = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2496 2496"
xmlSpace="preserve"
>
<g>
<path
style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#F0B90B" }}
d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248 S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"
/>
<path
style={{ fill: "#FFFFFF" }}
d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3 l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4 L1084.3,821.4z"/>
<path
style={{ fill: "#FFFFFF" }}
d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6 l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918 L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578 L1809.2,1578z"/>
<polygon
style={{ fill: "#FFFFFF" }}
points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6"
/>
<path
style={{ fill: "#FFFFFF" }}
d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4 L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6 l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"
/>
</g>
</svg>
)
20 changes: 20 additions & 0 deletions packages/extension/src/ui/components/Icons/EthereumIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { FC } from "react"

export const EthereumIcon: FC = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
<g fill="none" fillRule="evenodd">
<circle cx="16" cy="16" r="16" fill="#627EEA" />
<g fill="#FFF" fillRule="nonzero">
<path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
<path d="M16.498 4L9 16.22l7.498-3.35z" />
<path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z" />
<path d="M16.498 27.995v-6.028L9 17.616z" />
<path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z" />
<path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
</g>
</g>
</svg>
)
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const SwapTransactionIcon: FC<SwapTransactionIconProps> = ({
<TokenIcon
name={fromToken?.name || "?"}
url={fromToken?.logoURI}
originChain={fromToken?.originChain}
size={fromIconSize}
position={"absolute"}
left={0}
Expand All @@ -39,6 +40,7 @@ export const SwapTransactionIcon: FC<SwapTransactionIconProps> = ({
<TokenIcon
name={toToken?.name || "?"}
url={toToken?.logoURI}
originChain={toToken?.originChain}
size={toIconSize}
position={"absolute"}
right={0}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const HideTokenScreen: FC = () => {
return <Navigate to={routes.accountTokens()} />
}

const { name, logoURI } = toTokenView(token)
const { name, logoURI, originChain } = toTokenView(token)

const handleSubmit = () => {
try {
Expand All @@ -68,7 +68,7 @@ export const HideTokenScreen: FC = () => {
onSubmit={handleSubmit}
>
<TokenTitle>
<TokenIcon url={logoURI} name={name} size={12} verified={token.verified} />
<TokenIcon url={logoURI} name={name} size={12} verified={token.verified} originChain={originChain} />
<TokenName>{name}</TokenName>
</TokenTitle>
{error && <FormError>{error}</FormError>}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@ export const SendTokenScreen: FC = () => {
if (!tokenWithBalance) {
return <Navigate to={routes.accounts()} />
}
const { id, name, symbol, balance, decimals, logoURI, verified } = toTokenView(tokenWithBalance)
const { id, name, symbol, balance, decimals, logoURI, verified, originChain } = toTokenView(tokenWithBalance)

const handleMaxClick = () => {
setMaxClicked(true)
Expand Down Expand Up @@ -505,7 +505,7 @@ export const SendTokenScreen: FC = () => {
style={{ padding: "17px 16px 17px 57px" }}
>
<InputGroupBefore>
<TokenIcon name={name} url={logoURI} size={8} verified={verified} />
<TokenIcon name={name} url={logoURI} size={8} verified={verified} originChain={originChain} />
</InputGroupBefore>
<InputGroupAfter>
{inputAmount ? (
Expand Down
33 changes: 31 additions & 2 deletions packages/extension/src/ui/features/accountTokens/TokenIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { ComponentProps, FC } from "react"
import { generateAvatarImage } from "../../../shared/avatarImage"
import { WarningIconRounded } from "../../components/Icons/WarningIconRounded"
import { getColor } from "../accounts/accounts.service"

import { BSCIcon } from "../../components/Icons/BSCIcon"
import { EthereumIcon } from "../../components/Icons/EthereumIcon"
export interface TokenIconProps
extends Pick<ComponentProps<typeof Circle>, "size">,
ComponentProps<typeof Image> {
name: string
url?: string
verified?: boolean
originChain?: string
}

export const getTokenIconUrl = ({
Expand All @@ -24,8 +26,24 @@ export const getTokenIconUrl = ({
return generateAvatarImage(name, { background })
}

export const TokenIcon: FC<TokenIconProps> = ({ name, url, size, verified, ...rest }) => {
export const TokenIcon: FC<TokenIconProps> = ({ name, url, size, verified, originChain, ...rest }) => {
const src = getTokenIconUrl({ url, name })

const originChainIcon = () => {
if (!originChain || !verified) {
return undefined
}

switch (originChain.toLowerCase()) {
case 'bsc':
return <BSCIcon />
case 'ethereum':
return <EthereumIcon />
default:
return undefined
}
}

return (
<Circle
size={size}
Expand Down Expand Up @@ -57,6 +75,17 @@ export const TokenIcon: FC<TokenIconProps> = ({ name, url, size, verified, ...re
</Circle>
</Tooltip>
)}
{(originChain && verified) && (
<Circle
overflow={"hidden"}
position={"absolute"}
right={-1}
top={-1}
size={Math.min(32, Math.round((size as number * 12) / 24))}
>
{originChainIcon()}
</Circle>
)}
</Circle>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ export const TokenListItem: FC<TokenListItemProps> = ({
errorMessage,
...rest
}) => {
const { name, logoURI, symbol, verified } = toTokenView(token)
const { name, logoURI, symbol, verified, originChain } = 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} />
<TokenIcon size={8} url={logoURI} name={name} verified={verified} originChain={originChain} />
<Flex
flexGrow={1}
alignItems="center"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ const TokenBalanceContainer = styled(RowCentered)`
align-items: baseline;
`

const tokenIcon = (name: string, size: number, logoURI?: string, verified?: boolean) => {
const tokenIcon = (name: string, size: number, logoURI?: string, verified?: boolean, originChain?: string) => {
return logoURI ? (
<TokenIcon name={name} url={logoURI} size={size} verified={verified} />
<TokenIcon name={name} url={logoURI} size={size} verified={verified} originChain={originChain} />
) : (
<Ghost size={size * 0.7} />
)
Expand All @@ -101,7 +101,7 @@ export const TokenScreen: FC = () => {
return <Navigate to={routes.accounts()} />
}

const { id, name, symbol, logoURI, verified } = toTokenView(token)
const { id, name, symbol, logoURI, verified, originChain } = toTokenView(token)
const displayBalance = prettifyTokenBalance(token, false)
const isLoading = isValidating || tokenDetailsIsInitialising

Expand All @@ -114,7 +114,7 @@ export const TokenScreen: FC = () => {
<TokenScreenWrapper>
<TokenHeader hasCurrencyValue={!!currencyValue}>
<ColumnCenter>
{tokenIcon(name, 12, logoURI, verified)}
{tokenIcon(name, 12, logoURI, verified, originChain)}
<TokenBalanceContainer>
<LoadingPulse
isLoading={isLoading}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface TokenView {
logoURI?: string
showAlways?: boolean
verified?: boolean
originChain?: string
}

const formatTokenBalanceToCharLength =
Expand Down

0 comments on commit 2f3a0dc

Please sign in to comment.