diff --git a/src/components/Icon/Token/Dai.tsx b/src/components/Icon/Token/Dai.tsx new file mode 100644 index 0000000..0319423 --- /dev/null +++ b/src/components/Icon/Token/Dai.tsx @@ -0,0 +1,42 @@ +export default function Dai({ size = 45 }: { size?: number }) { + return ( + + + + + + + + + ) +} diff --git a/src/components/Icon/Token/Eth.tsx b/src/components/Icon/Token/Eth.tsx new file mode 100644 index 0000000..cb0a790 --- /dev/null +++ b/src/components/Icon/Token/Eth.tsx @@ -0,0 +1,22 @@ +export default function Eth({ size = 45 }: { size?: number }) { + return ( + + + + + + + + + ) +} diff --git a/src/components/Icon/Token/Mana.tsx b/src/components/Icon/Token/Mana.tsx new file mode 100644 index 0000000..94dd6bb --- /dev/null +++ b/src/components/Icon/Token/Mana.tsx @@ -0,0 +1,137 @@ +export default function Mana({ size = 45 }: { size?: number }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/Icon/Token/Matic.tsx b/src/components/Icon/Token/Matic.tsx new file mode 100644 index 0000000..31de694 --- /dev/null +++ b/src/components/Icon/Token/Matic.tsx @@ -0,0 +1,27 @@ +export default function Matic({ size = 45 }: { size?: number }) { + return ( + + + + + + + + + ) +} diff --git a/src/components/Icon/Token/Usdc.tsx b/src/components/Icon/Token/Usdc.tsx new file mode 100644 index 0000000..4bde4ec --- /dev/null +++ b/src/components/Icon/Token/Usdc.tsx @@ -0,0 +1,37 @@ +export default function Usdc({ size = 45 }: { size?: number }) { + return ( + + + + + + + + ) +} diff --git a/src/components/Icon/Token/Usdt.tsx b/src/components/Icon/Token/Usdt.tsx new file mode 100644 index 0000000..7b73c30 --- /dev/null +++ b/src/components/Icon/Token/Usdt.tsx @@ -0,0 +1,32 @@ +export default function Usdt({ size = 45 }: { size?: number }) { + return ( + + + + + ) +} diff --git a/src/components/Icon/Token/Weth.tsx b/src/components/Icon/Token/Weth.tsx new file mode 100644 index 0000000..09ffa8d --- /dev/null +++ b/src/components/Icon/Token/Weth.tsx @@ -0,0 +1,53 @@ +export default function Weth({ size = 45 }: { size?: number }) { + return ( + + {'weth'} + + + + + + + + + + + ) +} diff --git a/src/components/Icon/Token/index.tsx b/src/components/Icon/Token/index.tsx new file mode 100644 index 0000000..6404022 --- /dev/null +++ b/src/components/Icon/Token/index.tsx @@ -0,0 +1,8 @@ +// src/Icon/Token/index.ts +export { default as Dai } from './Dai' +export { default as Eth } from './Eth' +export { default as Mana } from './Mana' +export { default as Matic } from './Matic' +export { default as Usdc } from './Usdc' +export { default as Usdt } from './Usdt' +export { default as Weth } from './Weth' diff --git a/src/components/Token/TokenBalanceCard.tsx b/src/components/Token/TokenBalanceCard.tsx index b42ec81..4b90376 100644 --- a/src/components/Token/TokenBalanceCard.tsx +++ b/src/components/Token/TokenBalanceCard.tsx @@ -4,6 +4,7 @@ import { Header } from 'decentraland-ui/dist/components/Header/Header' import useFormatMessage from '../../hooks/useFormatMessage' import { AggregatedTokenBalance } from '../../types/transparency' +import { Dai, Eth, Mana, Matic, Usdc, Usdt, Weth } from '../Icon/Token' import './TokenBalanceCard.css' import TokensPerWalletPopup from './TokensPerWalletPopup' @@ -12,6 +13,25 @@ export type TokenBalanceCardProps = React.HTMLAttributes & { aggregatedTokenBalance: AggregatedTokenBalance } +function getIcon(tokenSymbol: string) { + switch (tokenSymbol) { + case 'mana': + return + case 'dai': + return + case 'eth': + return + case 'matic': + return + case 'usdc': + return + case 'usdt': + return + case 'weth': + return + } +} + export default function TokenBalanceCard({ aggregatedTokenBalance }: TokenBalanceCardProps) { const t = useFormatMessage() const [openPopup, setOpenPopup] = useState(false) @@ -27,7 +47,7 @@ export default function TokenBalanceCard({ aggregatedTokenBalance }: TokenBalanc return (
{/* TODO: Lib doesn't work with Vite. Get icons directly from repo as svgs */} - {/* */} + {getIcon(aggregatedTokenBalance.tokenTotal.symbol.toLowerCase())}