Skip to content

Commit

Permalink
feat(bridge-ui-v2): upgrade walletconnect from v2 to v3 (#14999)
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaodino committed Oct 26, 2023
1 parent 02664a7 commit dd76ddc
Show file tree
Hide file tree
Showing 9 changed files with 3,508 additions and 3,810 deletions.
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/__mocks__/@wagmi/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ export const configureChains = vi.fn(() => {
return { publicClient: 'mockPublicClient' };
});

export const createConfig = vi.fn(() => {
export const defaultWagmiConfig = vi.fn(() => {
return 'mockWagmiConfig';
});
10 changes: 5 additions & 5 deletions packages/bridge-ui-v2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@vitest/coverage-v8": "^0.33.0",
"@wagmi/cli": "^1.0.1",
"abitype": "^0.8.7",
"ajv": "^8.6.4",
"autoprefixer": "^10.4.14",
"daisyui": "3.1.7",
"dotenv": "^16.3.1",
Expand All @@ -40,7 +41,6 @@
"eslint-plugin-svelte": "^2.26.0",
"ethereum-address": "^0.0.4",
"jsdom": "^22.1.0",
"ajv": "^8.6.4",
"lokijs": "^1.5.12",
"postcss": "^8.4.24",
"prettier": "^3.0.0",
Expand All @@ -58,15 +58,15 @@
},
"type": "module",
"dependencies": {
"@wagmi/core": "^1.3.6",
"@web3modal/ethereum": "^2.6.2",
"@web3modal/html": "^2.6.2",
"@wagmi/core": "^1.4.4",
"@web3modal/wagmi": "^3.1.0",
"@zerodevx/svelte-toast": "^0.9.5",
"axios": "^1.4.0",
"buffer": "^6.0.3",
"debug": "^4.3.4",
"events": "^3.3.0",
"svelte-i18n": "^3.6.0",
"viem": "^1.4.1"
"viem": "^1.16.6",
"wagmi": "^1.4.4"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,32 @@
function connectWallet() {
if (web3modalOpen) return;
web3modal.openModal();
web3modal.open();
}
function onWeb3Modal(state: { open: boolean }) {
web3modalOpen = state.open;
}
onMount(() => {
unsubscribeWeb3Modal = web3modal.subscribeModal(onWeb3Modal);
unsubscribeWeb3Modal = web3modal.subscribeState(onWeb3Modal);
});
onDestroy(unsubscribeWeb3Modal);
</script>

{#if connected}
<Button class="hidden sm:flex pl-[10px] pr-[15px] h-[40px] mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
<Button class="hidden sm:flex pl-[14px] pr-[20px] h-[38px] mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
<span class="body-regular f-items-center">
<svelte:component this={EthIcon} size={24} />
<svelte:component this={EthIcon} size={20} />
{#if $ethBalance >= 0}
<span class="ml-[6px]">{renderEthBalance($ethBalance)}</span>
{:else}
<Spinner /> <span>Fetching balance...</span>
{/if}
</span>
</Button>
<w3m-core-button class="h-[40px]" balance="hide" />
<w3m-button class="h-[38px]" balance="hide" />
{:else}
<Button class="px-[20px] py-2 rounded-full w-[215px]" type="neutral" loading={web3modalOpen} on:click={connectWallet}>
<span class="body-regular f-items-center space-x-2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { Icon } from '$components/Icon';
import { web3modal } from '$libs/connect';
let theme: 'dark' | 'light' = (localStorage.getItem('theme') as 'dark' | 'light') || 'dark';
$: isDarkTheme = theme === 'dark';
Expand All @@ -11,6 +12,7 @@
theme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
web3modal.setThemeMode(theme);
}
onMount(() => {
Expand Down
90 changes: 42 additions & 48 deletions packages/bridge-ui-v2/src/libs/connect/web3modal.ts
Original file line number Diff line number Diff line change
@@ -1,57 +1,51 @@
import { EthereumClient } from '@web3modal/ethereum';
import { Web3Modal } from '@web3modal/html';
import { createWeb3Modal } from '@web3modal/wagmi';

import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
import { chains, getChainImages } from '$libs/chain';
import { wagmiConfig } from '$libs/wagmi';

const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;

const ethereumClient = new EthereumClient(wagmiConfig, chains);

const chainImages = getChainImages();

export const web3modal = new Web3Modal(
{
projectId,
chainImages,
// TODO: can we bring these vars into Tailwind theme?
themeVariables: {
'--w3m-font-family': '"Public Sans", sans-serif',
'--w3m-font-feature-settings': 'normal',
'--w3m-button-border-radius': '9999px',

// Body small regular
'--w3m-text-small-regular-size': '14px',
'--w3m-text-small-regular-weight': '400',
'--w3m-text-small-regular-line-height': '20px',

// Body regular
'--w3m-text-medium-regular-size': '16px',
'--w3m-text-medium-regular-weight': '400',
'--w3m-text-medium-regular-line-height': '24px',
'--w3m-text-medium-regular-letter-spacing': 'normal',

// Title body bold
'--w3m-text-big-bold-size': '18px',
'--w3m-text-big-bold-weight': '700',
'--w3m-text-big-bold-line-height': '24px',

'--w3m-background-color': 'var(--primary-brand)',
'--w3m-overlay-background-color': 'var(--overlay-background)',
'--w3m-background-border-radius': '20px',
'--w3m-container-border-radius': '0',

// Unofficial variables
// @ts-ignore
'--w3m-color-fg-1': 'var(--primary-content)',
'--w3m-color-bg-1': 'var(--primary-background)',
'--w3m-color-bg-2': 'var(--neutral-background)',
'--w3m-color-overlay': 'none',
'--w3m-accent-color': 'var(--neutral-background)',
'--w3m-accent-fill-color': 'var(--dark-background)',
},
themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
export const web3modal = createWeb3Modal({
wagmiConfig,
projectId,
chains,
chainImages,
themeVariables: {
'--w3m-font-family': '"Public Sans", sans-serif',
'--w3m-accent': 'var(--primary-brand)',

// Body small regular
// @ts-ignore
'--w3m-text-small-regular-line-height': '20px',

// Body regular
// @ts-ignore
'--w3m-text-medium-regular-size': '16px',
'--w3m-text-medium-regular-weight': '400',
'--w3m-text-medium-regular-line-height': '24px',
'--w3m-text-medium-regular-letter-spacing': 'normal',

// Title body bold
// @ts-ignore
'--w3m-text-big-bold-size': '18px',
'--w3m-text-big-bold-weight': '700',
'--w3m-text-big-bold-line-height': '24px',

// @ts-ignore
'--w3m-background-color': 'var(--primary-brand)',
'--w3m-overlay-background-color': 'var(--overlay-background)',
'--w3m-background-border-radius': '20px',
'--w3m-container-border-radius': '0',

// Unofficial variables
// @ts-ignore
'--w3m-color-fg-1': 'var(--primary-content)',
'--w3m-color-bg-1': 'var(--primary-background)',
'--w3m-color-bg-2': 'var(--neutral-background)',
'--w3m-color-overlay': 'none',
'--w3m-accent-fill-color': 'var(--dark-background)',
},
ethereumClient,
);
themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { RelayerAPIService } from './RelayerAPIService';
vi.mock('axios');

vi.mock('@wagmi/core');
vi.mock('@web3modal/wagmi');

vi.mock('$libs/chain', () => {
return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { mergeAndCaptureOutdatedTransactions } from '$libs/util/mergeTransaction

function setupMocks() {
vi.mock('@wagmi/core');
vi.mock('@web3modal/wagmi');

vi.mock('$libs/chain', () => {
return {
Expand Down
13 changes: 5 additions & 8 deletions packages/bridge-ui-v2/src/libs/wagmi/client.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { configureChains, createConfig } from '@wagmi/core';
import { w3mConnectors, w3mProvider } from '@web3modal/ethereum';
import { configureChains } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { defaultWagmiConfig, walletConnectProvider } from '@web3modal/wagmi';

import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
import { chains } from '$libs/chain';

const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;

export const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const { publicClient } = configureChains(chains, [walletConnectProvider({ projectId }), publicProvider()]);

export const wagmiConfig = createConfig({
autoConnect: true,
connectors: w3mConnectors({ projectId, chains }),
publicClient,
});
export const wagmiConfig = defaultWagmiConfig({ chains, projectId });
Loading

1 comment on commit dd76ddc

@vercel
Copy link

@vercel vercel bot commented on dd76ddc Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bridge-ui-v2-internal – ./packages/bridge-ui-v2

bridge-ui-v2-internal-git-main-taikoxyz.vercel.app
bridge-ui-v2-internal.vercel.app
bridge-ui-v2-internal-taikoxyz.vercel.app

Please sign in to comment.