Skip to content

Commit 7ffc348

Browse files
noisekitnoisekit
authored
Update assets domain (#110)
* Update assets domain * Update Base icon * Simplify TokenIcon * @snx-v3/TokenIcon
1 parent 45948eb commit 7ffc348

File tree

23 files changed

+86
-54
lines changed

23 files changed

+86
-54
lines changed

‎liquidity/components/icons/BaseIcon/icon.svg

+3-2
Loading

‎liquidity/lib/TokenIcon/TokenIcon.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Image, type ImageProps } from '@chakra-ui/react';
2+
3+
export function TokenIcon({
4+
symbol,
5+
width = 30,
6+
height = 30,
7+
...props
8+
}: ImageProps & {
9+
symbol?: string;
10+
width?: number;
11+
height?: number;
12+
}) {
13+
const src = `https://assets.synthetix.io/synths/${symbol ? symbol.toUpperCase() : 'UNKNOWN'}.svg`;
14+
return (
15+
<Image
16+
src={src}
17+
fallbackSrc="https://assets.synthetix.io/collateral/UNKNOWN.svg"
18+
alt={symbol}
19+
style={{ width, height }}
20+
{...props}
21+
/>
22+
);
23+
}
24+
25+
export const SynthIcon = ({
26+
symbol,
27+
width = 30,
28+
height = 30,
29+
...props
30+
}: ImageProps & {
31+
symbol?: string;
32+
width?: number;
33+
height?: number;
34+
}) => {
35+
const src = `https://assets.synthetix.io/synths/${symbol ?? 'UNKNOWN'}.svg`;
36+
return (
37+
<Image
38+
src={src}
39+
fallbackSrc="https://assets.synthetix.io/collateral/UNKNOWN.svg"
40+
alt={symbol}
41+
style={{ width, height }}
42+
{...props}
43+
/>
44+
);
45+
};

‎liquidity/lib/TokenIcon/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './TokenIcon';

‎liquidity/lib/TokenIcon/package.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "@snx-v3/TokenIcon",
3+
"private": true,
4+
"main": "index.ts",
5+
"version": "0.0.1",
6+
"dependencies": {
7+
"@chakra-ui/react": "^2.8.2"
8+
}
9+
}

‎liquidity/ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@snx-v3/NumberInput": "workspace:*",
2626
"@snx-v3/RepayModal": "workspace:*",
2727
"@snx-v3/TermsModal": "workspace:*",
28+
"@snx-v3/TokenIcon": "workspace:*",
2829
"@snx-v3/Tooltip": "workspace:*",
2930
"@snx-v3/UndelegateModal": "workspace:*",
3031
"@snx-v3/WithdrawIncrease": "workspace:*",

‎liquidity/ui/src/components/Claim/Claim.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { BorderBox } from '@snx-v3/BorderBox';
44
import { ZEROWEI } from '@snx-v3/constants';
55
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
66
import { NumberInput } from '@snx-v3/NumberInput';
7+
import { TokenIcon } from '@snx-v3/TokenIcon';
78
import { useNetwork } from '@snx-v3/useBlockchain';
89
import { useCollateralType } from '@snx-v3/useCollateralTypes';
910
import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition';
@@ -13,7 +14,6 @@ import { useTokenPrice } from '@snx-v3/useTokenPrice';
1314
import { validatePosition } from '@snx-v3/validatePosition';
1415
import { wei } from '@synthetixio/wei';
1516
import { useContext, useMemo } from 'react';
16-
import { TokenIcon } from '../TokenIcon/TokenIcon';
1717

1818
export function Claim() {
1919
const { network } = useNetwork();

‎liquidity/ui/src/components/ClosePosition/ClosePosition.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { BorderBox } from '@snx-v3/BorderBox';
1414
import { ZEROWEI } from '@snx-v3/constants';
1515
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
1616
import { NumberInput } from '@snx-v3/NumberInput';
17+
import { TokenIcon } from '@snx-v3/TokenIcon';
1718
import { useNetwork } from '@snx-v3/useBlockchain';
1819
import { useClosePosition } from '@snx-v3/useClosePosition';
1920
import { useCollateralType } from '@snx-v3/useCollateralTypes';
@@ -23,7 +24,6 @@ import { useSystemToken } from '@snx-v3/useSystemToken';
2324
import { useTokenBalance } from '@snx-v3/useTokenBalance';
2425
import { useTokenPrice } from '@snx-v3/useTokenPrice';
2526
import React from 'react';
26-
import { TokenIcon } from '../TokenIcon/TokenIcon';
2727
import { ClosePositionOneStep } from './ClosePositionOneStep';
2828
import { ClosePositionTransactions } from './ClosePositionTransactions';
2929

‎liquidity/ui/src/components/Deposit/Deposit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { currency } from '@snx-v3/format';
1616
import { formatNumber } from '@snx-v3/formatters';
1717
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
1818
import { NumberInput } from '@snx-v3/NumberInput';
19+
import { TokenIcon } from '@snx-v3/TokenIcon';
1920
import { useNetwork } from '@snx-v3/useBlockchain';
2021
import { useCollateralType } from '@snx-v3/useCollateralTypes';
2122
import { useEthBalance } from '@snx-v3/useEthBalance';
@@ -33,7 +34,6 @@ import { Wei, wei } from '@synthetixio/wei';
3334
import React from 'react';
3435
import { CollateralAlert } from '../CollateralAlert/CollateralAlert';
3536
import { CRatioChangeStat } from '../CRatioBar/CRatioChangeStat';
36-
import { TokenIcon } from '../TokenIcon/TokenIcon';
3737
import { TransactionSummary } from '../TransactionSummary/TransactionSummary';
3838

3939
export function Deposit() {

‎liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { ZEROWEI } from '@snx-v3/constants';
1919
import { formatNumber } from '@snx-v3/formatters';
2020
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
2121
import { NumberInput } from '@snx-v3/NumberInput';
22+
import { TokenIcon } from '@snx-v3/TokenIcon';
2223
import { MAINNET, SEPOLIA, useNetwork } from '@snx-v3/useBlockchain';
2324
import { useCollateralType } from '@snx-v3/useCollateralTypes';
2425
import { useEthBalance } from '@snx-v3/useEthBalance';
@@ -34,7 +35,6 @@ import { useUSDC } from '@snx-v3/useUSDC';
3435
import { WithdrawIncrease } from '@snx-v3/WithdrawIncrease';
3536
import React from 'react';
3637
import { MigrationBanner } from '../Migration/MigrationBanner';
37-
import { TokenIcon } from '../TokenIcon/TokenIcon';
3838

3939
export function InitialDeposit({
4040
submit,

‎liquidity/ui/src/components/Manage/PositionTitle.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { ArrowUpIcon } from '@chakra-ui/icons';
22
import { Flex, Heading, Link, Text } from '@chakra-ui/react';
33
import { formatNumberToUsd } from '@snx-v3/formatters';
4+
import { TokenIcon } from '@snx-v3/TokenIcon';
45
import { NetworkIcon, useNetwork } from '@snx-v3/useBlockchain';
56
import { useCollateralType } from '@snx-v3/useCollateralTypes';
67
import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
78
import { useVaultsData } from '@snx-v3/useVaultsData';
89
import React from 'react';
9-
import { TokenIcon } from '../TokenIcon/TokenIcon';
10+
1011
// import { useApr } from '@snx-v3/useApr';
1112

1213
function getStatsUrl(chainId?: number) {

‎liquidity/ui/src/components/MigrateUSD/MigrateUSDButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Button } from '@chakra-ui/react';
2+
import { TokenIcon } from '@snx-v3/TokenIcon';
23
import { Network, useNetwork, useWallet } from '@snx-v3/useBlockchain';
34
import { type DashboardPageSchemaType, useParams } from '@snx-v3/useParams';
45
import { useEffect, useState } from 'react';
5-
import { TokenIcon } from '../TokenIcon/TokenIcon';
66
import { MigrateUSDModal } from './MigrateUSDModal';
77

88
export function MigrateUSDButton({ network }: { network: Network }) {

‎liquidity/ui/src/components/MigrateUSD/StepIntro.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ import { Amount } from '@snx-v3/Amount';
1212
import { BorderBox } from '@snx-v3/BorderBox';
1313
import { ZEROWEI } from '@snx-v3/constants';
1414
import { NumberInput } from '@snx-v3/NumberInput';
15+
import { TokenIcon } from '@snx-v3/TokenIcon';
1516
import { Network } from '@snx-v3/useBlockchain';
1617
import { useTokenBalance } from '@snx-v3/useTokenBalance';
1718
import { useUSDProxy } from '@snx-v3/useUSDProxy';
1819
import { useV2sUSD } from '@snx-v3/useV2sUSD';
1920
import Wei from '@synthetixio/wei';
2021
import React, { useEffect, useState } from 'react';
21-
import { TokenIcon } from '../TokenIcon/TokenIcon';
2222

2323
export const StepIntro = ({
2424
onClose,

‎liquidity/ui/src/components/Pools/CollateralFilter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Button, Flex } from '@chakra-ui/react';
2+
import { TokenIcon } from '@snx-v3/TokenIcon';
23
import { Dispatch } from 'react';
3-
import { TokenIcon } from '../TokenIcon/TokenIcon';
44
import { PoolsFilterAction } from './PoolsList';
55

66
const supportedCollateralTypes = ['WETH', 'SNX', 'USDC', 'ARB', 'wstETH'];

‎liquidity/ui/src/components/Pools/PoolRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Button, Fade, Flex, Link, Text } from '@chakra-ui/react';
22
import { ZEROWEI } from '@snx-v3/constants';
33
import { formatApr, formatNumber, formatNumberToUsd } from '@snx-v3/formatters';
44
import { Sparkles } from '@snx-v3/icons';
5+
import { TokenIcon } from '@snx-v3/TokenIcon';
56
import { Tooltip } from '@snx-v3/Tooltip';
67
import { useStataUSDCApr } from '@snx-v3/useApr/useStataUSDCApr';
78
import { Network, NetworkIcon, useNetwork, useWallet } from '@snx-v3/useBlockchain';
@@ -15,7 +16,6 @@ import { useUSDC } from '@snx-v3/useUSDC';
1516
import { wei } from '@synthetixio/wei';
1617
import { ethers } from 'ethers';
1718
import React from 'react';
18-
import { TokenIcon } from '../TokenIcon/TokenIcon';
1919
import { Specifics } from './Specifics';
2020

2121
interface CollateralTypeWithDeposited extends CollateralType {

‎liquidity/ui/src/components/Positions/PositionsRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { TimeIcon } from '@chakra-ui/icons';
22
import { Box, Button, Collapse, Fade, Flex, Link, Td, Text, Tooltip } from '@chakra-ui/react';
33
import { Amount } from '@snx-v3/Amount';
44
import { DebtAmount, PnlAmount } from '@snx-v3/DebtAmount';
5+
import { TokenIcon } from '@snx-v3/TokenIcon';
56
import { useStataUSDCApr } from '@snx-v3/useApr/useStataUSDCApr';
67
import { useNetwork } from '@snx-v3/useBlockchain';
78
import { useIsSynthStataUSDC } from '@snx-v3/useIsSynthStataUSDC';
@@ -10,7 +11,6 @@ import { makeSearch, useParams } from '@snx-v3/useParams';
1011
import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer';
1112
import { CRatioAmount } from '../CRatioBar/CRatioAmount';
1213
import { CRatioBadge } from '../CRatioBar/CRatioBadge';
13-
import { TokenIcon } from '../TokenIcon/TokenIcon';
1414

1515
export function PositionRow({
1616
liquidityPosition,

‎liquidity/ui/src/components/Positions/PositionsRowLoading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Badge, Button, Flex, Td, Text, Tr } from '@chakra-ui/react';
2+
import { TokenIcon } from '@snx-v3/TokenIcon';
23
import { SynthCircle, SynthSkeleton } from '../SynthSkeleton/SynthSkeleton';
3-
import { TokenIcon } from '../TokenIcon/TokenIcon';
44

55
export function PositionsRowLoading() {
66
return (

‎liquidity/ui/src/components/Repay/Repay.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { BorderBox } from '@snx-v3/BorderBox';
44
import { ZEROWEI } from '@snx-v3/constants';
55
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
66
import { NumberInput } from '@snx-v3/NumberInput';
7+
import { TokenIcon } from '@snx-v3/TokenIcon';
78
import { useCollateralType } from '@snx-v3/useCollateralTypes';
89
import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition';
910
import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
1011
import { useSystemToken } from '@snx-v3/useSystemToken';
1112
import { useTokenBalance } from '@snx-v3/useTokenBalance';
1213
import { wei } from '@synthetixio/wei';
1314
import { useContext } from 'react';
14-
import { TokenIcon } from '../TokenIcon/TokenIcon';
1515

1616
export function Repay() {
1717
const [params] = useParams<PositionPageSchemaType>();

‎liquidity/ui/src/components/Rewards/RewardsRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Fade, Flex, Td, Text, Tr } from '@chakra-ui/react';
22
import { Amount } from '@snx-v3/Amount';
3+
import { TokenIcon } from '@snx-v3/TokenIcon';
34
import Wei from '@synthetixio/wei';
45
import React from 'react';
5-
import { TokenIcon } from '../TokenIcon/TokenIcon';
66

77
export function RewardsRow({
88
displaySymbol,

‎liquidity/ui/src/components/Synths/SynthRow.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Fade, Flex, Td, Text } from '@chakra-ui/react';
22
import { Amount } from '@snx-v3/Amount';
3+
import { SynthIcon } from '@snx-v3/TokenIcon';
34
import Wei from '@synthetixio/wei';
45
import React from 'react';
5-
import { TokenIcon } from '../TokenIcon/TokenIcon';
66

77
export function SynthRow({
88
symbol,
@@ -18,7 +18,7 @@ export function SynthRow({
1818
<Td border="none">
1919
<Fade in>
2020
<Flex alignItems="center" textDecoration="none" _hover={{ textDecoration: 'none' }}>
21-
<TokenIcon height={30} width={30} symbol={symbol} />
21+
<SynthIcon height={30} width={30} symbol={symbol} />
2222
<Flex flexDirection="column" ml={3}>
2323
<Text
2424
color="white"

‎liquidity/ui/src/components/TokenIcon/TokenIcon.tsx

-35
This file was deleted.

‎liquidity/ui/src/components/Undelegate/Undelegate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ZEROWEI } from '@snx-v3/constants';
1616
import { currency } from '@snx-v3/format';
1717
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
1818
import { NumberInput } from '@snx-v3/NumberInput';
19+
import { TokenIcon } from '@snx-v3/TokenIcon';
1920
import { useNetwork } from '@snx-v3/useBlockchain';
2021
import { useCollateralType } from '@snx-v3/useCollateralTypes';
2122
import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition';
@@ -26,7 +27,6 @@ import { validatePosition } from '@snx-v3/validatePosition';
2627
import Wei, { wei } from '@synthetixio/wei';
2728
import React from 'react';
2829
import { CRatioChangeStat } from '../CRatioBar/CRatioChangeStat';
29-
import { TokenIcon } from '../TokenIcon/TokenIcon';
3030
import { TransactionSummary } from '../TransactionSummary/TransactionSummary';
3131

3232
export function Undelegate() {

‎liquidity/ui/src/components/Withdraw/Withdraw.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { BorderBox } from '@snx-v3/BorderBox';
44
import { ZEROWEI } from '@snx-v3/constants';
55
import { ManagePositionContext } from '@snx-v3/ManagePositionContext';
66
import { NumberInput } from '@snx-v3/NumberInput';
7+
import { TokenIcon } from '@snx-v3/TokenIcon';
78
import { useAccountCollateralUnlockDate } from '@snx-v3/useAccountCollateralUnlockDate';
89
import { useNetwork } from '@snx-v3/useBlockchain';
910
import { useCollateralType } from '@snx-v3/useCollateralTypes';
@@ -12,7 +13,6 @@ import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
1213
import { useSystemToken } from '@snx-v3/useSystemToken';
1314
import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer';
1415
import React from 'react';
15-
import { TokenIcon } from '../TokenIcon/TokenIcon';
1616

1717
export function Withdraw({ isDebtWithdrawal = false }: { isDebtWithdrawal?: boolean }) {
1818
const [params] = useParams<PositionPageSchemaType>();

‎yarn.lock

+9
Original file line numberDiff line numberDiff line change
@@ -4834,6 +4834,14 @@ __metadata:
48344834
languageName: unknown
48354835
linkType: soft
48364836

4837+
"@snx-v3/TokenIcon@workspace:*, @snx-v3/TokenIcon@workspace:liquidity/lib/TokenIcon":
4838+
version: 0.0.0-use.local
4839+
resolution: "@snx-v3/TokenIcon@workspace:liquidity/lib/TokenIcon"
4840+
dependencies:
4841+
"@chakra-ui/react": "npm:^2.8.2"
4842+
languageName: unknown
4843+
linkType: soft
4844+
48374845
"@snx-v3/Tooltip@workspace:*, @snx-v3/Tooltip@workspace:liquidity/components/Tooltip":
48384846
version: 0.0.0-use.local
48394847
resolution: "@snx-v3/Tooltip@workspace:liquidity/components/Tooltip"
@@ -5063,6 +5071,7 @@ __metadata:
50635071
"@snx-v3/NumberInput": "workspace:*"
50645072
"@snx-v3/RepayModal": "workspace:*"
50655073
"@snx-v3/TermsModal": "workspace:*"
5074+
"@snx-v3/TokenIcon": "workspace:*"
50665075
"@snx-v3/Tooltip": "workspace:*"
50675076
"@snx-v3/UndelegateModal": "workspace:*"
50685077
"@snx-v3/WithdrawIncrease": "workspace:*"

0 commit comments

Comments
 (0)