Skip to content

Commit

Permalink
chore: upgrade onboard (safe-global#2018)
Browse files Browse the repository at this point in the history
* chore: upgrade onboard

* fix: logo, remove TODO + error expection

* fix: update packages + logo dimensions

* fix: Ledger connection + remove workaround

---------

Co-authored-by: katspaugh <[email protected]>
  • Loading branch information
iamacook and katspaugh authored Jun 16, 2023
1 parent 626442d commit 6a68059
Show file tree
Hide file tree
Showing 11 changed files with 1,454 additions and 334 deletions.
10 changes: 1 addition & 9 deletions jest.setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,7 @@ jest.mock('@web3-onboard/keystone/dist/index', () => jest.fn())
jest.mock('@web3-onboard/ledger', () => jest.fn())
jest.mock('@web3-onboard/trezor', () => jest.fn())
jest.mock('@web3-onboard/walletconnect', () => jest.fn())
jest.mock('@web3-onboard/tallyho', () => jest.fn())

jest.mock('@web3-onboard/injected-wallets/dist/icons/metamask', () => '')
jest.mock('@web3-onboard/coinbase/dist/icon', () => '')
jest.mock('@web3-onboard/keystone/dist/icon', () => '')
jest.mock('@web3-onboard/walletconnect/dist/icon', () => '')
jest.mock('@web3-onboard/trezor/dist/icon', () => '')
jest.mock('@web3-onboard/ledger/dist/icon', () => '')
jest.mock('@web3-onboard/tallyho/dist/icon', () => '')
jest.mock('@web3-onboard/taho', () => jest.fn())

const mockOnboardState = {
chains: [],
Expand Down
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@
"@sentry/react": "^7.28.1",
"@sentry/tracing": "^7.28.1",
"@truffle/hdwallet-provider": "^2.1.4",
"@web3-onboard/coinbase": "^2.1.3",
"@web3-onboard/core": "2.8.5",
"@web3-onboard/injected-wallets": "^2.3.0",
"@web3-onboard/keystone": "^2.3.2",
"@web3-onboard/ledger": "^2.3.2",
"@web3-onboard/tallyho": "^2.0.1",
"@web3-onboard/trezor": "^2.3.2",
"@web3-onboard/walletconnect": "^2.1.3",
"@web3-onboard/coinbase": "^2.2.4",
"@web3-onboard/core": "2.20.1",
"@web3-onboard/injected-wallets": "^2.10.0",
"@web3-onboard/keystone": "^2.3.7",
"@web3-onboard/ledger": "^2.4.6",
"@web3-onboard/taho": "^2.0.4",
"@web3-onboard/trezor": "^2.4.2",
"@web3-onboard/walletconnect": "^2.3.9",
"classnames": "^2.3.1",
"date-fns": "^2.29.2",
"ethereum-blockies-base64": "^1.0.2",
Expand Down
2 changes: 1 addition & 1 deletion src/components/licenses/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -553,7 +553,7 @@ const SafeLicenses = () => {
</TableCell>
</TableRow>
<TableRow>
<TableCell>@web3-onboard/tallyho</TableCell>
<TableCell>@web3-onboard/taho</TableCell>
<TableCell>
<ExternalLink href="https://github.com/blocknative/web3-onboard/blob/main/LICENSE">
https://github.com/blocknative/web3-onboard/blob/main/LICENSE
Expand Down
2 changes: 1 addition & 1 deletion src/config/securityHeaders.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { CYPRESS_MNEMONIC, IS_PRODUCTION } from '@/config/constants'
export const ContentSecurityPolicy = `
default-src 'self';
connect-src 'self' *;
script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' https://*.getbeamer.com https://www.googletagmanager.com https://*.ingest.sentry.io https://sentry.io ${
script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com 'unsafe-inline' https://*.getbeamer.com https://www.googletagmanager.com https://*.ingest.sentry.io https://sentry.io https://cdn.jsdelivr.net/npm/@ledgerhq/connect-kit@1 ${
!IS_PRODUCTION || /* TODO: remove after moving cypress to görli and testing in staging again!! */ CYPRESS_MNEMONIC
? "'unsafe-eval'"
: ''
Expand Down
4 changes: 2 additions & 2 deletions src/hooks/wallets/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const enum WALLET_KEYS {
PAIRING = 'PAIRING',
TREZOR = 'TREZOR',
WALLETCONNECT = 'WALLETCONNECT',
TALLYHO = 'TALLYHO',
TAHO = 'TAHO',
}

export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
Expand All @@ -17,5 +17,5 @@ export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
[WALLET_KEYS.PAIRING]: 'safeMobile',
[WALLET_KEYS.TREZOR]: 'trezor',
[WALLET_KEYS.WALLETCONNECT]: 'walletConnect',
[WALLET_KEYS.TALLYHO]: 'tally',
[WALLET_KEYS.TAHO]: 'tally',
}
23 changes: 0 additions & 23 deletions src/hooks/wallets/useOnboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,31 +145,8 @@ export const connectWallet = async (
return wallets
}

// A workaround for an onboard "feature" that shows a defunct account select popup
// See https://github.com/blocknative/web3-onboard/issues/888
const closeAccountSelectionModal = () => {
const maxTries = 100
const modalText = 'Please switch the active account'
let tries = 0

const timer = setInterval(() => {
const onboardModal = document.querySelector('onboard-v2')?.shadowRoot
const isActionRequired = onboardModal?.textContent?.includes(modalText)

if (isActionRequired) {
// Dismiss the modal
;(onboardModal?.querySelector('.background') as HTMLElement)?.click()
tries = maxTries
}

tries += 1
if (tries >= maxTries) clearInterval(timer)
}, 100)
}

export const switchWallet = (onboard: OnboardAPI) => {
connectWallet(onboard)
closeAccountSelectionModal()
}

// Disable/enable wallets according to chain and cache the last used wallet
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/wallets/wallets.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import keystoneModule from '@web3-onboard/keystone/dist/index'
import ledgerModule from '@web3-onboard/ledger'
import trezorModule from '@web3-onboard/trezor'
import walletConnect from '@web3-onboard/walletconnect'
import tallyhoModule from '@web3-onboard/tallyho'
import tahoModule from '@web3-onboard/taho'

import pairingModule from '@/services/pairing/module'
import e2eWalletModule from '@/tests/e2e-wallet'
Expand All @@ -17,11 +17,11 @@ import { CGW_NAMES, WALLET_KEYS } from './consts'
const WALLET_MODULES: { [key in WALLET_KEYS]: () => WalletInit } = {
[WALLET_KEYS.INJECTED]: injectedWalletModule,
[WALLET_KEYS.PAIRING]: pairingModule,
[WALLET_KEYS.WALLETCONNECT]: () => walletConnect({ bridge: WC_BRIDGE }),
[WALLET_KEYS.WALLETCONNECT]: () => walletConnect({ version: 1, bridge: WC_BRIDGE }),
[WALLET_KEYS.LEDGER]: ledgerModule,
[WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
[WALLET_KEYS.KEYSTONE]: keystoneModule,
[WALLET_KEYS.TALLYHO]: tallyhoModule,
[WALLET_KEYS.TAHO]: tahoModule,
[WALLET_KEYS.COINBASE]: () =>
coinbaseModule({ darkMode: !!window?.matchMedia('(prefers-color-scheme: dark)')?.matches }),
}
Expand Down
10 changes: 8 additions & 2 deletions src/services/onboard.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// TODO: Upgrade onboard/core once https://github.com/blocknative/web3-onboard/issues/1385 is fixed
import Onboard, { type EIP1193Provider, type OnboardAPI } from '@web3-onboard/core'
import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
import { hexValue } from '@ethersproject/bytes'
Expand Down Expand Up @@ -41,12 +40,19 @@ export const createOnboard = (chainConfigs: ChainInfo[], rpcConfig: EnvState['rp
desktop: { enabled: false },
},

notify: {
enabled: false,
},

appMetadata: {
name: 'Safe{Wallet}',
icon: '/images/safe-logo-green.png',
// Both heights need be set to correctly size the image in the connecting screen/modal
icon: '<svg height="100%"><image href="/images/safe-logo-green.png" height="100%" /></svg>',
description: 'Please select a wallet to connect to Safe{Wallet}',
recommendedInjectedWallets: getRecommendedInjectedWallets(),
},

// TODO: Investigate using `autoConnectLastWallet` instead of our `lastWalletStorage`
})

return onboard
Expand Down
2 changes: 0 additions & 2 deletions src/services/pairing/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ const pairingModule = (): WalletInit => {
this.disconnected$ = new Subject()
this.providers = {}

// @ts-expect-error - `payload` type (`ISessionStatus`) is not correctly `pipe`ed
fromEvent(this.connector, ProviderEvents.WC_SESSION_UPDATE, (error, payload) => {
if (error) {
throw error
Expand All @@ -94,7 +93,6 @@ const pairingModule = (): WalletInit => {
error: console.warn,
})

// @ts-expect-error - `this.connector` does not satisfy the event target type
fromEvent(this.connector, ProviderEvents.DISCONNECT, (error, payload) => {
if (error) {
throw error
Expand Down
80 changes: 48 additions & 32 deletions src/styles/onboard.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
:root {
--w3o-background-color: var(--color-background-paper);
--w3o-foreground-color: var(--color-border-light);
--w3o-text-color: var(--color-text-primary);
--w3o-border-color: var(--color-border-light);
--w3o-action-color: var(--color-primary-main);
--w3o-border-radius: 6px;
--w3o-font-family: DM Sans, sans-serif;

--onboard-border-radius-1: var(--w3o-border-radius);
--onboard-border-radius-2: var(--w3o-border-radius);
--onboard-border-radius-3: var(--w3o-border-radius);

/* Palette */
--onboard-white: var(--color-background-paper);
--onboard-black: var(--color-text-primary);

--onboard-primary-1: var(--color-secondary-main);
--onboard-primary-100: var(--color-secondary-background);
--onboard-primary-200: var(--color-primary-light);
--onboard-primary-300: var(--color-primary-light);
--onboard-primary-400: var(--color-primary-light);
--onboard-primary-500: var(--color-primary-main);
--onboard-primary-600: var(--color-primary-main);
Expand Down Expand Up @@ -32,47 +46,44 @@
--onboard-warning-600: var(--color-error-main);
--onboard-warning-700: var(--color-error-dark);

/* var(--color-backdrop-main) + opacity */
/* Connect modal */
--onboard-modal-z-index: 1301;

--onboard-modal-backdrop: rgba(99, 102, 105, 0.75);

--account-select-modal-white: var(--color-background-paper);
--account-select-modal-black: var(--color-primary-main);
--account-select-modal-primary-100: var(--color-secondary-background);
--account-select-modal-primary-200: var(--color-background-light);
--account-select-modal-primary-300: var(--color-secondary-background);
--account-select-modal-primary-500: var(--color-secondary-background);
--account-select-modal-primary-600: var(--color-secondary-light);
--onboard-modal-border-radius: var(--w3o-border-radius);

--account-select-primary-300: var(--color-primary-main);
--account-select-primary-500: var(--color-primary-main);
--onboard-connect-sidebar-progress-background: var(--color-border-main);

--onboard-link-color: var(--color-primary-main);

--onboard-connect-sidebar-color: var(--color-text-primary);
--onboard-wallet-button-color: var(--color-text-primary);
--onboard-wallet-app-icon-border-color: var(--color-border-light);
--onboard-wallet-app-icon-background-white: #fff;
--onboard-wallet-app-icon-background-transparent: #fff;
--onboard-wallet-app-icon-background-light-gray: rgba(255, 255, 255, 0.5);
--onboard-wallet-button-border-color: var(--color-border-light);
--onboard-wallet-button-border-radius: 8px;

--onboard-wallet-button-border-radius: var(--w3o-border-radius);
--onboard-wallet-button-background-hover: var(--color-background-light);
--onboard-wallet-button-background-active: var(--color-background-light);
/* Needs to be brighter than var(--color-primary-main) to compensate for shadow blur */
--onboard-wallet-button-box-shadow-hover: 0 0 2px #00fd00;

/* Fonts */
--onboard-font-family-normal: DM Sans, sans-serif;
--onboard-font-family-semibold: DM Sans, sans-serif;
--onboard-font-family-light: DM Sans, sans-serif;
--account-select-modal-font-family-normal: DM Sans, sans-serif;
--account-select-modal-font-family-light: DM Sans, sans-serif;

--onboard-modal-border-radius: 8px;
--onboard-border-radius-1: 8px;
--onboard-border-radius-2: 8px;
--onboard-border-radius-3: 8px;

/* Z-index */
--onboard-modal-z-index: 1301;

/* Account select (modal) */

--account-select-white: var(--onboard-white);
--account-select-black: var(--onboard-black);

--account-select-primary-100: var(--onboard-primary-100);
--account-select-primary-200: var(--onboard-primary-200);
--account-select-primary-300: var(--onboard-primary-300);
--account-select-primary-500: var(--onboard-primary-500);
--account-select-primary-600: var(--onboard-primary-600);

--account-select-gray-100: var(--onboard-gray-100);
--account-select-gray-200: var(--onboard-gray-200);
--account-select-gray-300: var(--onboard-gray-300);
--account-select-gray-500: var(--onboard-gray-500);
--account-select-gray-700: var(--onboard-gray-700);

--account-select-danger-500: var(--onboard-danger-500);

--onboard-account-select-modal-z-index: 1301;
}

Expand All @@ -93,3 +104,8 @@
#kv_sdk_container + .ReactModalPortal > div {
z-index: 1301 !important;
}

/* Ledger modal */
.ledger-ck-modal > div#ModalWrapper {
z-index: 9999999 !important;
}
Loading

0 comments on commit 6a68059

Please sign in to comment.