From 66dfee9225091f16a3c17b32d1dab7528425445a Mon Sep 17 00:00:00 2001
From: Ezra Sowden-Guzman <ezratic@gmail.com>
Date: Wed, 27 Dec 2023 19:29:10 -0500
Subject: [PATCH] fix walletbalancerow tests

---
 src/App.vue                                   |   1 -
 .../pages/evm/wallet/WalletBalanceRow.spec.ts | 767 +++++++-------
 .../WalletBalanceRow.spec.ts.snap             | 939 ++++++++++++++++++
 3 files changed, 1321 insertions(+), 386 deletions(-)
 create mode 100644 test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletBalanceRow.spec.ts.snap

diff --git a/src/App.vue b/src/App.vue
index e1547eaa5..5950ecb07 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { getAntelope, useChainStore } from 'src/antelope';
-import { ComplexMessage } from 'src/antelope/config';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import { TELOS_CHAIN_IDS } from 'src/antelope/chains/chain-constants';
 import packageInfo from '../package.json';
diff --git a/test/jest/__tests__/pages/evm/wallet/WalletBalanceRow.spec.ts b/test/jest/__tests__/pages/evm/wallet/WalletBalanceRow.spec.ts
index a03acd947..874758a77 100644
--- a/test/jest/__tests__/pages/evm/wallet/WalletBalanceRow.spec.ts
+++ b/test/jest/__tests__/pages/evm/wallet/WalletBalanceRow.spec.ts
@@ -1,388 +1,385 @@
-// https://github.com/telosnetwork/telos-wallet/issues/660
+import { shallowMount } from '@vue/test-utils';
+import { ethers } from 'ethers';
+import {
+    MarketSourceInfo,
+    NativeCurrencyAddress,
+    TokenBalance,
+    TokenClass,
+    TokenMarketData,
+    TokenSourceInfo,
+} from 'src/antelope/types';
+
+const fakeBuyMoreLink = 'fake';
+const fakeStlosContractAddress = '0x'.concat('9'.repeat(40));
+const fakeWtlosContractAddress = '0x'.concat('8'.repeat(40));
+const fakeTokenContractAddress = '0x'.concat('7'.repeat(40));
+
+const fakeStakedToken = new TokenClass({
+    name: 'Staked TLOS',
+    symbol: 'STLOS',
+    network: 'NETWORK',
+    decimals: 18,
+    address: fakeStlosContractAddress,
+    logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+} as TokenSourceInfo);
+
+
+const fakeWrappedToken = new TokenClass({
+    name: 'Wrapped TLOS',
+    symbol: 'WTLOS',
+    network: 'NETWORK',
+    decimals: 18,
+    address: fakeWtlosContractAddress,
+    logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+} as TokenSourceInfo);
+
+import WalletBalanceRow from 'pages/evm/wallet/WalletBalanceRow.vue';
+import { stubWithSlot } from 'test/jest/testing-helpers';
+
+jest.mock('src/antelope', () => ({
+    useChainStore: () => ({
+        currentChain: {
+            settings: {
+                getBuyMoreOfTokenLink: () => fakeBuyMoreLink,
+                getStakedSystemToken: () => fakeStakedToken,
+                getWrappedSystemToken: () => fakeWrappedToken,
+                getExplorerUrl: () => 'fake-url',
+            },
+        },
+    }),
+    useUserStore: () => ({
+        fiatLocale: 'en-US',
+        fiatCurrency: 'USD',
+    }),
+    useEVMStore: () => ({
+        isMetamaskSupported: false,
+    }),
+}));
+
+describe('WalletBalanceRow.vue', () => {
+    const stubs = {
+        'ToolTip': stubWithSlot('ToolTip'),
+        'q-menu': stubWithSlot('q-menu'),
+        'q-btn': stubWithSlot('q-btn'),
+    };
+
+    const directives = {
+        'close-popup': ()  => '',
+    };
+
+    const qScreenMock = (isMobile: boolean) => ({
+        $q: {
+            screen: {
+                lt: {
+                    sm: isMobile,
+                },
+            },
+        },
+    });
 
-describe('temporary', () => {
-    it('should prevent jest from thowing a "Your test suite must contain at least one test" error', () => {
-        expect(true).toBe(true);
+    const createTokenBalance = (_token: Partial<TokenSourceInfo>, price?: string): TokenBalance => {
+        const token = new TokenClass(_token as TokenSourceInfo);
+        const market = new TokenMarketData({ price } as MarketSourceInfo);
+        if (price) {
+            token.market = market;
+        }
+        const balanceBn = ethers.utils.parseUnits(_token.fullBalance || '0', token.decimals);
+        const balance = new TokenBalance(token, balanceBn);
+        return balance;
+    };
+
+    it('should have the correct name', () => {
+        expect(WalletBalanceRow.name).toBe('WalletBalanceRow');
+    });
+
+    it('should render correctly on desktop devices (Staked TLOS 1)', () => {
+        const wrapper = shallowMount(WalletBalanceRow, {
+            global: {
+                stubs,
+                directives,
+                mocks: {
+                    ...qScreenMock(false),
+                },
+            },
+            props: {
+                balance: createTokenBalance({
+                    address: fakeStlosContractAddress,
+                    symbol: 'STLOS',
+                    name: 'Staked TLOS',
+                    logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+                    decimals: 18,
+                    balance: '3642.0243',
+                    fullBalance: '3642.024318091460206147',
+                },
+                '0.19',
+                ),
+            },
+        });
+        expect(wrapper.element).toMatchSnapshot();
     });
-});
 
-// import { shallowMount } from '@vue/test-utils';
-// import { ethers } from 'ethers';
-// import { MarketSourceInfo, NativeCurrencyAddress, TokenBalance, TokenClass, TokenMarketData, TokenSourceInfo } from 'src/antelope/types';
-
-// const fakeBuyMoreLink = 'fake';
-// const fakeStlosContractAddress = '0x'.concat('9'.repeat(40));
-// const fakeWtlosContractAddress = '0x'.concat('8'.repeat(40));
-// const fakeTokenContractAddress = '0x'.concat('7'.repeat(40));
-
-// const fakeStakedToken = new TokenClass({
-//     name: 'Staked TLOS',
-//     symbol: 'STLOS',
-//     network: 'NETWORK',
-//     decimals: 18,
-//     address: fakeStlosContractAddress,
-//     logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-// } as TokenSourceInfo);
-
-
-// const fakeWrappedToken = new TokenClass({
-//     name: 'Wrapped TLOS',
-//     symbol: 'WTLOS',
-//     network: 'NETWORK',
-//     decimals: 18,
-//     address: fakeWtlosContractAddress,
-//     logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-// } as TokenSourceInfo);
-
-// const storeMock = {
-//     useChainStore: () => ({
-//         currentChain: {
-//             settings: {
-//                 getBuyMoreOfTokenLink: () => fakeBuyMoreLink,
-//                 getStakedSystemToken: () => fakeStakedToken,
-//                 getWrappedSystemToken: () => fakeWrappedToken,
-//                 getExplorerUrl: () => 'fake-url',
-//             },
-//         },
-//     }),
-//     useUserStore: () => ({
-//         fiatLocale: 'en-US',
-//         fiatCurrency: 'USD',
-//     }),
-//     useEVMStore: () => ({
-//         isMetamaskSupported: false,
-//     }),
-// };
-
-// import WalletBalanceRow from 'pages/evm/wallet/WalletBalanceRow.vue';
-// import { stubWithSlot } from 'test/jest/testing-helpers';
-
-// jest.mock('src/antelope', () => storeMock);
-
-// describe('WalletBalanceRow.vue', () => {
-//     const stubs = {
-//         'ToolTip': stubWithSlot('ToolTip'),
-//         'q-menu': stubWithSlot('q-menu'),
-//         'q-btn': stubWithSlot('q-btn'),
-//     };
-
-//     const directives = {
-//         'close-popup': ()  => '',
-//     };
-
-//     const qScreenMock = (isMobile: boolean) => ({
-//         $q: {
-//             screen: {
-//                 lt: {
-//                     sm: isMobile,
-//                 },
-//             },
-//         },
-//     });
-
-//     const createTokenBalance = (_token: Partial<TokenSourceInfo>, price?: string): TokenBalance => {
-//         const token = new TokenClass(_token as TokenSourceInfo);
-//         const market = new TokenMarketData({ price } as MarketSourceInfo);
-//         if (price) {
-//             token.market = market;
-//         }
-//         const balanceBn = ethers.utils.parseUnits(_token.fullBalance || '0', token.decimals);
-//         const balance = new TokenBalance(token, balanceBn);
-//         return balance;
-//     };
-
-//     it('should have the correct name', () => {
-//         expect(WalletBalanceRow.name).toBe('WalletBalanceRow');
-//     });
-
-//     it('should render correctly on desktop devices (Staked TLOS 1)', () => {
-//         const wrapper = shallowMount(WalletBalanceRow, {
-//             global: {
-//                 stubs,
-//                 directives,
-//                 mocks: {
-//                     ...qScreenMock(false),
-//                 },
-//             },
-//             props: {
-//                 balance: createTokenBalance({
-//                     address: fakeStlosContractAddress,
-//                     symbol: 'STLOS',
-//                     name: 'Staked TLOS',
-//                     logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-//                     decimals: 18,
-//                     balance: '3642.0243',
-//                     fullBalance: '3642.024318091460206147',
-//                 },
-//                 '0.19',
-//                 ),
-//             },
-//         });
-//         expect(wrapper.element).toMatchSnapshot();
-//     });
-
-//     it('should render correctly on mobile devices (Staked TLOS 2)', () => {
-//         const wrapper = shallowMount(WalletBalanceRow, {
-//             global: {
-//                 stubs,
-//                 directives,
-//                 mocks: {
-//                     ...qScreenMock(true),
-//                 },
-//             },
-//             props: {
-//                 balance: createTokenBalance({
-//                     address: fakeStlosContractAddress,
-//                     symbol: 'STLOS',
-//                     name: 'Staked TLOS',
-//                     logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-//                     decimals: 18,
-//                     balance: '3642.0243',
-//                     fullBalance: '3642.024318091460206147',
-//                 },
-//                 '0.19',
-//                 ),
-//             },
-//         });
-//         expect(wrapper.element).toMatchSnapshot();
-//     });
-
-//     describe('should render the right overflow items when the token is', () => {
-//         const routerMock = {
-//             push: jest.fn(),
-//         };
-
-//         const originalWindowOpen = window.open;
-
-//         beforeAll(() => {
-//             window.open = jest.fn();
-//         });
-
-//         beforeEach(() => {
-//             jest.clearAllMocks();
-//         });
-
-//         afterAll(() => {
-//             window.open = originalWindowOpen;
-//         });
-
-//         test('TLOS', async () => {
-//             const wrapper = shallowMount(WalletBalanceRow, {
-//                 global: {
-//                     stubs,
-//                     directives,
-//                     mocks: {
-//                         $router: routerMock,
-//                         ...qScreenMock(true),
-//                     },
-//                 },
-//                 props: {
-//                     balance: createTokenBalance({
-//                         symbol: 'TLOS',
-//                         name: 'Telos',
-//                         logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-//                         decimals: 18,
-//                         balance: '3642.0243',
-//                         fullBalance: '3642.024318091460206147',
-//                         address: NativeCurrencyAddress,
-//                     },
-//                     '0.19',
-//                     ),
-//                 },
-//             });
-
-//             // snapshot contains c-wallet-balance-row__overflow-li for stake, buy, wrap, send
-//             expect(wrapper.element).toMatchSnapshot();
-
-//             const [
-//                 // stakeLink,
-//                 buyLink,
-//                 // wrapLink,
-//                 sendLink,
-//             ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
-
-//             // await stakeLink.trigger('click');
-//             await buyLink.trigger('click');
-//             // await wrapLink.trigger('click');
-//             await sendLink.trigger('click');
-
-//             expect(window.open).toHaveBeenCalledTimes(1);
-//             // expect(routerMock.push).toHaveBeenCalledTimes(3);
-//             expect(routerMock.push).toHaveBeenCalledTimes(1);
-
-//             // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//             //     name: 'evm-staking',
-//             // }));
-
-//             // expect(routerMock.push.mock.calls[1][0]).toEqual(expect.objectContaining({
-//             //     name: 'evm-wrap',
-//             // }));
-
-//             expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//                 name: 'evm-send',
-//                 query: { },
-//             }));
-
-//             expect(window.open).toHaveBeenCalledWith(fakeBuyMoreLink, '_blank');
-//         });
-
-//         test('STLOS', async () => {
-//             const wrapper = shallowMount(WalletBalanceRow, {
-//                 global: {
-//                     stubs,
-//                     directives,
-//                     mocks: {
-//                         $router: routerMock,
-//                         ...qScreenMock(true),
-//                     },
-//                 },
-//                 props: {
-//                     balance: createTokenBalance({
-//                         ... fakeStakedToken.sourceInfo,
-//                         balance: '3642.0243',
-//                         fullBalance: '3642.024318091460206147',
-//                     }),
-//                 },
-//             });
-
-//             // snapshot contains c-wallet-balance-row__overflow-li for unstake, contract, send
-//             expect(wrapper.element).toMatchSnapshot();
-
-//             const [
-//                 // stakeLink,
-//                 contractLink,
-//                 sendLink,
-//             ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
-
-//             // await stakeLink.trigger('click');
-//             await contractLink.trigger('click');
-//             await sendLink.trigger('click');
-
-//             expect(window.open).toHaveBeenCalledTimes(1);
-//             // expect(routerMock.push).toHaveBeenCalledTimes(2);
-//             expect(routerMock.push).toHaveBeenCalledTimes(1);
-
-//             // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//             //     name: 'evm-staking',
-//             // }));
-
-//             expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//                 name: 'evm-send',
-//                 query: {
-//                     token: fakeStlosContractAddress,
-//                 },
-//             }));
-
-//             expect(window.open).toHaveBeenCalledWith(
-//                 `fake-url/address/${fakeStlosContractAddress}`,
-//                 '_blank',
-//             );
-//         });
-
-//         test('WTLOS', async () => {
-//             const wrapper = shallowMount(WalletBalanceRow, {
-//                 global: {
-//                     stubs,
-//                     directives,
-//                     mocks: {
-//                         $router: routerMock,
-//                         ...qScreenMock(true),
-//                     },
-//                 },
-//                 props: {
-//                     balance: createTokenBalance({
-//                         ... fakeWrappedToken.sourceInfo,
-//                         balance: '3642.0243',
-//                         fullBalance: '3642.024318091460206147',
-//                     },
-//                     '0.19',
-//                     ),
-//                 },
-//             });
-
-//             // snapshot contains c-wallet-balance-row__overflow-li for unwrap, contract, send
-//             expect(wrapper.element).toMatchSnapshot();
-
-//             const [
-//                 // unwrapLink,
-//                 contractLink,
-//                 sendLink,
-//             ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
-
-//             // await unwrapLink.trigger('click');
-//             await contractLink.trigger('click');
-//             await sendLink.trigger('click');
-
-//             expect(window.open).toHaveBeenCalledTimes(1);
-//             // expect(routerMock.push).toHaveBeenCalledTimes(2);
-//             expect(routerMock.push).toHaveBeenCalledTimes(1);
-
-//             // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//             //     name: 'evm-wrap',
-//             //     query: { tab: 'unwrap' },
-//             // }));
-
-//             expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//                 name: 'evm-send',
-//                 query: {
-//                     token: fakeWtlosContractAddress,
-//                 },
-//             }));
-
-//             expect(window.open).toHaveBeenCalledWith(
-//                 `fake-url/address/${fakeWtlosContractAddress}`,
-//                 '_blank',
-//             );
-//         });
-
-//         test('not a system token', async () => {
-//             const wrapper = shallowMount(WalletBalanceRow, {
-//                 global: {
-//                     stubs,
-//                     directives,
-//                     mocks: {
-//                         $router: routerMock,
-//                         ...qScreenMock(true),
-//                     },
-//                 },
-//                 props: {
-//                     balance: createTokenBalance({
-//                         address: fakeTokenContractAddress,
-//                         symbol: 'SHIB',
-//                         name: 'Shiba',
-//                         logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
-//                         decimals: 18,
-//                         balance: '3642.0243',
-//                         fullBalance: '3642.024318091460206147',
-//                     }),
-//                 },
-//             });
-
-//             // snapshot contains c-wallet-balance-row__overflow-li for contract, send
-//             expect(wrapper.element).toMatchSnapshot();
-
-//             const [
-//                 contractLink,
-//                 sendLink,
-//             ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
-
-//             await contractLink.trigger('click');
-//             await sendLink.trigger('click');
-
-//             expect(window.open).toHaveBeenCalledTimes(1);
-//             expect(routerMock.push).toHaveBeenCalledTimes(1);
-
-//             expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
-//                 name: 'evm-send',
-//                 query: {
-//                     token: fakeTokenContractAddress,
-//                 },
-//             }));
-
-//             expect(window.open).toHaveBeenCalledWith(
-//                 `fake-url/address/${fakeTokenContractAddress}`,
-//                 '_blank',
-//             );
-//         });
-//     });
-// });
+    it('should render correctly on mobile devices (Staked TLOS 2)', () => {
+        const wrapper = shallowMount(WalletBalanceRow, {
+            global: {
+                stubs,
+                directives,
+                mocks: {
+                    ...qScreenMock(true),
+                },
+            },
+            props: {
+                balance: createTokenBalance({
+                    address: fakeStlosContractAddress,
+                    symbol: 'STLOS',
+                    name: 'Staked TLOS',
+                    logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+                    decimals: 18,
+                    balance: '3642.0243',
+                    fullBalance: '3642.024318091460206147',
+                },
+                '0.19',
+                ),
+            },
+        });
+        expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('should render the right overflow items when the token is', () => {
+        const routerMock = {
+            push: jest.fn(),
+        };
+
+        const originalWindowOpen = window.open;
+
+        beforeAll(() => {
+            window.open = jest.fn();
+        });
+
+        beforeEach(() => {
+            jest.clearAllMocks();
+        });
+
+        afterAll(() => {
+            window.open = originalWindowOpen;
+        });
+
+        test('TLOS', async () => {
+            const wrapper = shallowMount(WalletBalanceRow, {
+                global: {
+                    stubs,
+                    directives,
+                    mocks: {
+                        $router: routerMock,
+                        ...qScreenMock(true),
+                    },
+                },
+                props: {
+                    balance: createTokenBalance({
+                        symbol: 'TLOS',
+                        name: 'Telos',
+                        logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+                        decimals: 18,
+                        balance: '3642.0243',
+                        fullBalance: '3642.024318091460206147',
+                        address: NativeCurrencyAddress,
+                    },
+                    '0.19',
+                    ),
+                },
+            });
+
+            // snapshot contains c-wallet-balance-row__overflow-li for stake, buy, wrap, send
+            expect(wrapper.element).toMatchSnapshot();
+
+            const [
+                // stakeLink,
+                buyLink,
+                // wrapLink,
+                sendLink,
+            ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
+
+            // await stakeLink.trigger('click');
+            await buyLink.trigger('click');
+            // await wrapLink.trigger('click');
+            await sendLink.trigger('click');
+
+            expect(window.open).toHaveBeenCalledTimes(1);
+            // expect(routerMock.push).toHaveBeenCalledTimes(3);
+            expect(routerMock.push).toHaveBeenCalledTimes(1);
+
+            // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+            //     name: 'evm-staking',
+            // }));
+
+            // expect(routerMock.push.mock.calls[1][0]).toEqual(expect.objectContaining({
+            //     name: 'evm-wrap',
+            // }));
+
+            expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+                name: 'evm-send',
+                query: { },
+            }));
+
+            expect(window.open).toHaveBeenCalledWith(fakeBuyMoreLink, '_blank');
+        });
+
+        test('STLOS', async () => {
+            const wrapper = shallowMount(WalletBalanceRow, {
+                global: {
+                    stubs,
+                    directives,
+                    mocks: {
+                        $router: routerMock,
+                        ...qScreenMock(true),
+                    },
+                },
+                props: {
+                    balance: createTokenBalance({
+                        ... fakeStakedToken.sourceInfo,
+                        balance: '3642.0243',
+                        fullBalance: '3642.024318091460206147',
+                    }),
+                },
+            });
+
+            // snapshot contains c-wallet-balance-row__overflow-li for unstake, contract, send
+            expect(wrapper.element).toMatchSnapshot();
+
+            const [
+                // stakeLink,
+                contractLink,
+                sendLink,
+            ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
+
+            // await stakeLink.trigger('click');
+            await contractLink.trigger('click');
+            await sendLink.trigger('click');
+
+            expect(window.open).toHaveBeenCalledTimes(1);
+            // expect(routerMock.push).toHaveBeenCalledTimes(2);
+            expect(routerMock.push).toHaveBeenCalledTimes(1);
+
+            // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+            //     name: 'evm-staking',
+            // }));
+
+            expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+                name: 'evm-send',
+                query: {
+                    token: fakeStlosContractAddress,
+                },
+            }));
+
+            expect(window.open).toHaveBeenCalledWith(
+                `fake-url/address/${fakeStlosContractAddress}`,
+                '_blank',
+            );
+        });
+
+        test('WTLOS', async () => {
+            const wrapper = shallowMount(WalletBalanceRow, {
+                global: {
+                    stubs,
+                    directives,
+                    mocks: {
+                        $router: routerMock,
+                        ...qScreenMock(true),
+                    },
+                },
+                props: {
+                    balance: createTokenBalance({
+                        ... fakeWrappedToken.sourceInfo,
+                        balance: '3642.0243',
+                        fullBalance: '3642.024318091460206147',
+                    },
+                    '0.19',
+                    ),
+                },
+            });
+
+            // snapshot contains c-wallet-balance-row__overflow-li for unwrap, contract, send
+            expect(wrapper.element).toMatchSnapshot();
+
+            const [
+                // unwrapLink,
+                contractLink,
+                sendLink,
+            ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
+
+            // await unwrapLink.trigger('click');
+            await contractLink.trigger('click');
+            await sendLink.trigger('click');
+
+            expect(window.open).toHaveBeenCalledTimes(1);
+            // expect(routerMock.push).toHaveBeenCalledTimes(2);
+            expect(routerMock.push).toHaveBeenCalledTimes(1);
+
+            // expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+            //     name: 'evm-wrap',
+            //     query: { tab: 'unwrap' },
+            // }));
+
+            expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+                name: 'evm-send',
+                query: {
+                    token: fakeWtlosContractAddress,
+                },
+            }));
+
+            expect(window.open).toHaveBeenCalledWith(
+                `fake-url/address/${fakeWtlosContractAddress}`,
+                '_blank',
+            );
+        });
+
+        test('not a system token', async () => {
+            const wrapper = shallowMount(WalletBalanceRow, {
+                global: {
+                    stubs,
+                    directives,
+                    mocks: {
+                        $router: routerMock,
+                        ...qScreenMock(true),
+                    },
+                },
+                props: {
+                    balance: createTokenBalance({
+                        address: fakeTokenContractAddress,
+                        symbol: 'SHIB',
+                        name: 'Shiba',
+                        logoURI: 'https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png',
+                        decimals: 18,
+                        balance: '3642.0243',
+                        fullBalance: '3642.024318091460206147',
+                    }),
+                },
+            });
+
+            // snapshot contains c-wallet-balance-row__overflow-li for contract, send
+            expect(wrapper.element).toMatchSnapshot();
+
+            const [
+                contractLink,
+                sendLink,
+            ] = wrapper.findAll('.c-wallet-balance-row__overflow-li');
+
+            await contractLink.trigger('click');
+            await sendLink.trigger('click');
+
+            expect(window.open).toHaveBeenCalledTimes(1);
+            expect(routerMock.push).toHaveBeenCalledTimes(1);
+
+            expect(routerMock.push.mock.calls[0][0]).toEqual(expect.objectContaining({
+                name: 'evm-send',
+                query: {
+                    token: fakeTokenContractAddress,
+                },
+            }));
+
+            expect(window.open).toHaveBeenCalledWith(
+                `fake-url/address/${fakeTokenContractAddress}`,
+                '_blank',
+            );
+        });
+    });
+});
diff --git a/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletBalanceRow.spec.ts.snap b/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletBalanceRow.spec.ts.snap
new file mode 100644
index 000000000..e8d6c9bd1
--- /dev/null
+++ b/test/jest/__tests__/pages/evm/wallet/__snapshots__/WalletBalanceRow.spec.ts.snap
@@ -0,0 +1,939 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WalletBalanceRow.vue should render correctly on desktop devices (Staked TLOS 1) 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Staked TLOS
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      >
+        $0.1900
+      </span>
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        
+        $691.98
+        
+        <!--v-if-->
+      </div>
+      <span
+        class="c-wallet-balance-row__secondary-amount"
+      >
+        
+        3,642.0243 STLOS
+        
+      </span>
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              global.contract
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon c-wallet-balance-row__overflow-icon--stroke"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.add_to_metamask
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`WalletBalanceRow.vue should render correctly on mobile devices (Staked TLOS 2) 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Staked TLOS
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      >
+        $0.1900
+      </span>
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        
+        $691.98
+        
+        <!--v-if-->
+      </div>
+      <span
+        class="c-wallet-balance-row__secondary-amount"
+      >
+        <tooltip-stub
+          hide-icon="true"
+          text="3,642.0243 STLOS"
+        >
+          
+          3.64K STLOS
+          
+        </tooltip-stub>
+      </span>
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              global.contract
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon c-wallet-balance-row__overflow-icon--stroke"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.add_to_metamask
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`WalletBalanceRow.vue should render the right overflow items when the token is STLOS 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Staked TLOS
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      />
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        <tooltip-stub
+          hide-icon="true"
+          text="3,642.0243 STLOS"
+        >
+          
+          3.64K
+          
+        </tooltip-stub>
+        <tooltip-stub
+          icon="info"
+          warnings="evm_wallet.no_fiat_value"
+        >
+          
+          
+        </tooltip-stub>
+      </div>
+      <!--v-if-->
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              global.contract
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon c-wallet-balance-row__overflow-icon--stroke"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.add_to_metamask
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`WalletBalanceRow.vue should render the right overflow items when the token is TLOS 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Telos
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      >
+        $0.1900
+      </span>
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        
+        $691.98
+        
+        <!--v-if-->
+      </div>
+      <span
+        class="c-wallet-balance-row__secondary-amount"
+      >
+        <tooltip-stub
+          hide-icon="true"
+          text="3,642.0243 TLOS"
+        >
+          
+          3.64K TLOS
+          
+        </tooltip-stub>
+      </span>
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              evm_wallet.buy
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.wrap
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`WalletBalanceRow.vue should render the right overflow items when the token is WTLOS 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Wrapped TLOS
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      >
+        $0.1900
+      </span>
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        
+        $691.98
+        
+        <!--v-if-->
+      </div>
+      <span
+        class="c-wallet-balance-row__secondary-amount"
+      >
+        <tooltip-stub
+          hide-icon="true"
+          text="3,642.0243 WTLOS"
+        >
+          
+          3.64K WTLOS
+          
+        </tooltip-stub>
+      </span>
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              global.contract
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.unwrap
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-3"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon c-wallet-balance-row__overflow-icon--stroke"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-3"
+            >
+              evm_wallet.add_to_metamask
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`WalletBalanceRow.vue should render the right overflow items when the token is not a system token 1`] = `
+<div
+  class="c-wallet-balance-row"
+>
+  <div
+    class="c-wallet-balance-row__left-container"
+  >
+    <img
+      alt="evm_wallet.token_logo_alt"
+      aria-hidden="true"
+      class="c-wallet-balance-row__logo"
+      height="40"
+      src="https://raw.githubusercontent.com/telosnetwork/teloscan/master/public/stlos-logo.png"
+      width="40"
+    />
+    <div>
+      <span
+        class="c-wallet-balance-row__token_name"
+      >
+        Shiba
+      </span>
+      <br />
+      <span
+        class="o-text--small"
+      />
+    </div>
+  </div>
+  <div
+    class="c-wallet-balance-row__right-container"
+  >
+    <div
+      class="c-wallet-balance-row__balance-container"
+    >
+      <div
+        class="c-wallet-balance-row__primary-amount"
+      >
+        <tooltip-stub
+          hide-icon="true"
+          text="3,642.0243 SHIB"
+        >
+          
+          3.64K
+          
+        </tooltip-stub>
+        <tooltip-stub
+          icon="info"
+          warnings="evm_wallet.no_fiat_value"
+        >
+          
+          
+        </tooltip-stub>
+      </div>
+      <!--v-if-->
+    </div>
+    <q-btn-stub
+      aria-label="evm_wallet.balance_row_actions_aria"
+      class="c-wallet-balance-row__overflow"
+      dense=""
+      flat=""
+      icon="more_vert"
+      no-icon-animation=""
+    >
+      
+      <q-menu-stub
+        anchor="bottom end"
+        offset="0,16"
+        self="top right"
+      >
+        
+        <ul
+          class="c-wallet-balance-row__overflow-ul"
+        >
+          
+          <li
+            aria-labelledby="overflow-text-0"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-0"
+            >
+              global.contract
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-1"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-1"
+            >
+              evm_wallet.send
+            </span>
+          </li>
+          <li
+            aria-labelledby="overflow-text-2"
+            class="c-wallet-balance-row__overflow-li"
+            tabindex="0"
+          >
+            <div
+              class="c-wallet-balance-row__overflow-icon-wrapper"
+            >
+              <inline-svg-stub
+                aria-hidden="true"
+                class="c-wallet-balance-row__overflow-icon c-wallet-balance-row__overflow-icon--stroke"
+                keepduringloading="true"
+                src=""
+                transformsource="[Function]"
+              />
+            </div>
+            <span
+              class="c-wallet-balance-row__overflow-text"
+              id="overflow-text-2"
+            >
+              evm_wallet.add_to_metamask
+            </span>
+          </li>
+          
+        </ul>
+        
+      </q-menu-stub>
+      
+    </q-btn-stub>
+  </div>
+</div>
+`;