-
- {a.symbol}{' '}
- ({truncateByChars(a.source.contractAddress)})
-
+
+
+
+ {a.symbol}{' '}
+
+ ({truncateByChars(a.source.contractAddress)})
+
+
+
diff --git a/libs/ui-toolkit/src/components/index.ts b/libs/ui-toolkit/src/components/index.ts
index 96fe2b9b8..622132b01 100644
--- a/libs/ui-toolkit/src/components/index.ts
+++ b/libs/ui-toolkit/src/components/index.ts
@@ -46,6 +46,7 @@ export * from './theme-switcher';
export * from './thumbs';
export * from './tiny-scroll';
export * from './toast';
+export * from './token-icons';
export * from './toggle';
export * from './tooltip';
export * from './traffic-light';
diff --git a/libs/ui-toolkit/src/components/token-icons/ethereum.tsx b/libs/ui-toolkit/src/components/token-icons/ethereum.tsx
new file mode 100644
index 000000000..e03b4c272
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/ethereum.tsx
@@ -0,0 +1,45 @@
+export const Ethereum = ({ size = 16 }: { size?: number }) => {
+ return (
+
+ );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/index.ts b/libs/ui-toolkit/src/components/token-icons/index.ts
new file mode 100644
index 000000000..0cd366ff0
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/index.ts
@@ -0,0 +1 @@
+export * from './token-icon';
diff --git a/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx b/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx
new file mode 100644
index 000000000..94488b8c3
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/token-icon-record.tsx
@@ -0,0 +1,11 @@
+import { Vega } from './vega';
+import { USDC } from './usdc';
+
+export const TokenIconMap: Record<
+ string,
+ ({ size }: { size: number }) => JSX.Element
+> = {
+ '0xdf1B0F223cb8c7aB3Ef8469e529fe81E73089BD9': Vega, // testnet vega
+ '0x62720E92FB7d77699A5D3754c429a3116900a84b': Vega, // stagnet vega
+ '0x40ff2D218740EF033b43B8Ce0342aEBC81934554': USDC, // stagnet usdc
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/token-icon.tsx b/libs/ui-toolkit/src/components/token-icons/token-icon.tsx
new file mode 100644
index 000000000..eef9ec689
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/token-icon.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { TokenIconMap } from './token-icon-record';
+
+interface TokenIconProps {
+ address: string;
+ size?: number;
+}
+
+export const TokenIcon = ({ address, size = 28 }: TokenIconProps) => {
+ const Element = TokenIconMap[address];
+ return (
+
+ {Element ? (
+
+ ) : (
+
+
+ ERC
+
+ 20
+
+
+ )}
+
+ );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/usdc.tsx b/libs/ui-toolkit/src/components/token-icons/usdc.tsx
new file mode 100644
index 000000000..0e391e47c
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/usdc.tsx
@@ -0,0 +1,18 @@
+export const USDC = ({ size = 16 }: { size?: number }) => {
+ return (
+
+ );
+};
diff --git a/libs/ui-toolkit/src/components/token-icons/vega.tsx b/libs/ui-toolkit/src/components/token-icons/vega.tsx
new file mode 100644
index 000000000..f350cb9ec
--- /dev/null
+++ b/libs/ui-toolkit/src/components/token-icons/vega.tsx
@@ -0,0 +1,43 @@
+export const Vega = ({ size = 16 }: { size?: number }) => {
+ return (
+
+ );
+};