Skip to content

Commit

Permalink
feat(bridge-ui): add token to wallet (#13902)
Browse files Browse the repository at this point in the history
  • Loading branch information
cyberhorsey committed Jun 6, 2023
1 parent 2b21f59 commit 683b19c
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 3 deletions.
42 changes: 42 additions & 0 deletions packages/bridge-ui/src/components/AddTokenToWallet.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script lang="ts">
import { UserRejectedRequestError } from '@wagmi/core';

Check warning on line 2 in packages/bridge-ui/src/components/AddTokenToWallet.svelte

View workflow job for this annotation

GitHub Actions / build

'UserRejectedRequestError' is defined but never used
import { L1_CHAIN_ID } from '../constants/envVars';
import type { Token } from '../domain/token';
import { token } from '../store/token';
import MetaMask from './icons/MetaMask.svelte';
import { errorToast, warningToast } from './NotificationToast.svelte';
async function addTokenToWallet(customToken: Token) {
if (!customToken) {
errorToast('Token not selected.');
return;
}
try {
await window.ethereum.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20',
options: {
address: customToken.addresses[L1_CHAIN_ID],
symbol: customToken.symbol,
decimals: customToken.decimals,
image: customToken.logoUrl,
},
},
});
} catch (e) {
if (e.code === 4001 || e?.data?.originalError?.code === 4001) {
warningToast('Adding token has been rejected.');
} else {
errorToast('Failed to add token to wallet');
}
}
}
</script>

<span

Check warning on line 39 in packages/bridge-ui/src/components/AddTokenToWallet.svelte

View workflow job for this annotation

GitHub Actions / build

A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event
class="inline-block cursor-pointer align-middle"
on:click={() => addTokenToWallet($token)}>
<MetaMask width={16} /></span>
14 changes: 12 additions & 2 deletions packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
import { getLogger } from '../../utils/logger';
import { truncateString } from '../../utils/truncateString';
import { tokenVaults } from '../../vault/tokenVaults';
import AddTokenToWallet from '../AddTokenToWallet.svelte';
import {
errorToast,
successToast,
Expand Down Expand Up @@ -61,8 +62,7 @@
let feeMethod: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
let feeAmount: string = '0';
// TODO: too much going on here. We need to extract
// logic and unit test the hell out of all this.
let showAddToWallet: boolean = false;
async function updateTokenBalance(signer: Signer, token: Token) {
if (signer && token) {
Expand Down Expand Up @@ -513,6 +513,10 @@
amount = target.value;
}
function toggleShowAddTokenToWallet(token: Token) {
showAddToWallet = token.symbol !== 'ETH';
}
$: updateTokenBalance($signer, $token).finally(() => {
computingTokenBalance = false;
});
Expand All @@ -539,6 +543,8 @@
});
$: amountEntered = Boolean(amount);
$: toggleShowAddTokenToWallet($token);
</script>

<div class="space-y-6 md:space-y-4">
Expand All @@ -561,6 +567,10 @@
on:click={useFullAmount}>
{$_('bridgeForm.maxLabel')}
</button>

{#if showAddToWallet}
<AddTokenToWallet />
{/if}
</div>
{/if}
</label>
Expand Down
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/constants/__mocks__/envVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,12 @@ export const TEST_ERC20 = [
address: '0x959922bE3CAee4b8Cd9a407cc3ac1C251C2007B1',
symbol: 'BLL',
name: 'Bull Token',
logoUrl: 'https://internet.com/bll',
},
{
address: '0x0B306BF915C4d645ff596e518fAf3F9669b97016',
symbol: 'HORSE',
name: 'Horse Token',
logoUrl: 'https://internet.com/horse',
},
];
1 change: 1 addition & 0 deletions packages/bridge-ui/src/constants/envVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,5 @@ export const TEST_ERC20: {
address: Address;
symbol: string;
name: string;
logoUrl?: string;
}[] = JSON.parse(import.meta.env?.VITE_TEST_ERC20);
5 changes: 4 additions & 1 deletion packages/bridge-ui/src/token/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export const TKOToken: Token = {
},
decimals: 18,
symbol: 'TKO',
logoUrl:
'https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/testnet-token-images/ttko.svg',
logoComponent: Tko,
};

Expand All @@ -35,7 +37,7 @@ const symbolToLogoComponent = {
};

export const testERC20Tokens: Token[] = TEST_ERC20.map(
({ name, address, symbol }) => ({
({ name, address, symbol, logoUrl }) => ({
name,
symbol,

Expand All @@ -45,6 +47,7 @@ export const testERC20Tokens: Token[] = TEST_ERC20.map(
},
decimals: 18,
logoComponent: symbolToLogoComponent[symbol] || Unknown,
logoUrl: logoUrl,
}),
);

Expand Down

0 comments on commit 683b19c

Please sign in to comment.