diff --git a/package.json b/package.json index 0295e0de7..7690d46d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web3-onboard-monorepo", - "version": "2.4.0", + "version": "2.5.0", "private": true, "workspaces": [ "./packages/*" @@ -33,7 +33,10 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "GameStop", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", diff --git a/packages/coinbase/package.json b/packages/coinbase/package.json index 9ae48717a..9f84cb034 100644 --- a/packages/coinbase/package.json +++ b/packages/coinbase/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/coinbase", - "version": "2.0.8", + "version": "2.0.9", "description": "Coinbase SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -57,6 +59,6 @@ }, "dependencies": { "@coinbase/wallet-sdk": "^3.0.5", - "@web3-onboard/common": "^2.1.5" + "@web3-onboard/common": "^2.1.6" } } diff --git a/packages/common/package.json b/packages/common/package.json index d6e5dda7a..0878ce05c 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/common", - "version": "2.1.5", + "version": "2.1.6", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", diff --git a/packages/common/src/elements/TableHeader.svelte b/packages/common/src/elements/TableHeader.svelte index 7abd0e9c8..5cc436ba3 100644 --- a/packages/common/src/elements/TableHeader.svelte +++ b/packages/common/src/elements/TableHeader.svelte @@ -80,10 +80,7 @@ input[type='checkbox'] { -webkit-appearance: none; width: auto; - background: var( - --account-select-white, - var(--onboard-white, var(--white)) - ); + background: var(--account-select-white, var(--onboard-white, var(--white))); border: 1px solid var(--account-select-gray-300, var(--onboard-gray-300, var(--gray-300))); padding: 0.5em; @@ -144,6 +141,9 @@ --account-select-font-family-light, var(--font-family-light) ); + font-size: var(--account-select-font-size-7, var(--font-size-7)); + max-width: 15rem; + line-height: 1; } .table-controls { diff --git a/packages/common/src/views/AccountSelect.svelte b/packages/common/src/views/AccountSelect.svelte index 2cbf071bb..f0e70e15d 100644 --- a/packages/common/src/views/AccountSelect.svelte +++ b/packages/common/src/views/AccountSelect.svelte @@ -67,7 +67,17 @@ loadingAccounts = false } catch (err) { const { message } = err as { message: string } - errorFromScan = message || 'There was an error scanning for accounts' + + if ( + typeof message === 'string' && + message.includes('could not detect network') + ) { + errorFromScan = + 'There was an error detecting connected network from RPC endpoint' + } else { + errorFromScan = message || 'There was an error scanning for accounts' + } + loadingAccounts = false } } @@ -397,10 +407,7 @@ right: 0.2rem; width: 2.5rem; height: 2.5rem; - background: var( - --account-select-white, - var(--onboard-white, var(--white)) - ); + background: var(--account-select-white, var(--onboard-white, var(--white))); border-radius: 1rem; } diff --git a/packages/core/README.md b/packages/core/README.md index e02b9390d..fe658dee2 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -713,7 +713,7 @@ onboard.state.actions.updateAccountCenter({ ``` **`setPrimaryWallet`** -The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is to be set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in: +The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in: ```typescript // set the second wallet in the wallets array as the primary @@ -792,6 +792,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla. /* CUSTOMIZE ACCOUNT CENTER*/ --account-center-z-index + --account-center-position-top + --account-center-position-bottom + --account-center-position-right + --account-center-position-left --account-center-minimized-background --account-center-maximized-upper-background --account-center-maximized-network-section @@ -925,7 +929,12 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla. --account-select-modal-margin-4: 1rem; --account-select-modal-margin-5: 0.5rem; - /* notify STYLES */ + /* NOTIFY STYLES */ + /* Notify Positioning variables only take effect if Notify is Positioned separate of Account Center */ + --notify-onboard-container-position-top + --notify-onboard-container-position-bottom + --notify-onboard-container-position-right + --notify-onboard-container-position-left --notify-onboard-font-family-normal --notify-onboard-font-size-5 --notify-onboard-gray-300 diff --git a/packages/core/package.json b/packages/core/package.json index 3dac3a74e..983eee850 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.4.0", + "version": "2.5.0", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,10 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "GameStop", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -78,7 +81,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "bignumber.js": "^9.0.0", "bnc-sdk": "^4.4.1", "bowser": "^2.11.0", diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index b9a065755..1bb47bdbe 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -5,7 +5,8 @@ export let configuration: Configuration = { svelteInstance: null, appMetadata: null, apiKey: null, - device: getDevice() + device: getDevice(), + initialWalletInit: [] } export function updateConfiguration(update: Partial): void { diff --git a/packages/core/src/connect.ts b/packages/core/src/connect.ts index 7446d40df..af870690b 100644 --- a/packages/core/src/connect.ts +++ b/packages/core/src/connect.ts @@ -1,8 +1,11 @@ import { firstValueFrom } from 'rxjs' import { filter, withLatestFrom, pluck } from 'rxjs/operators' +import { configuration } from './configuration' import { state } from './store' +import { setWalletModules } from './store/actions' import { connectWallet$, wallets$ } from './streams' import type { ConnectOptions, ConnectOptionsString, WalletState } from './types' +import { wait } from './utils' import { validateConnectOptions } from './validation' async function connect( @@ -28,6 +31,16 @@ async function connect( autoSelect: { label: '', disableModals: false } } + // if auto selecting, wait until next event loop + if (autoSelect && (typeof autoSelect === 'string' || autoSelect.label)) { + await wait(50) + } + + // first time calling connect, so initialize and set wallet modules + if (!state.get().walletModules.length) { + setWalletModules(configuration.initialWalletInit) + } + connectWallet$.next({ autoSelect: typeof autoSelect === 'string' diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 902705f60..58cc463e0 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -17,12 +17,12 @@ import { configuration, updateConfiguration } from './configuration' import { addChains, - setWalletModules, updateAccountCenter, updateNotify, customNotification, setLocale, - setPrimaryWallet + setPrimaryWallet, + setWalletModules } from './store/actions' import updateBalances from './update-balances' @@ -61,7 +61,8 @@ export type { CustomNotification, Notification, Notify, - UpdateNotification + UpdateNotification, + PreflightNotificationsOptions } from './types' export type { EIP1193Provider } from '@web3-onboard/common' @@ -167,7 +168,6 @@ function init(options: InitOptions): OnboardAPI { if (!apiKey || !notifyUpdate.enabled) { notifyUpdate.enabled = false } - console.log(notifyUpdate) updateNotify(notifyUpdate) } } else { @@ -190,11 +190,10 @@ function init(options: InitOptions): OnboardAPI { updateConfiguration({ appMetadata, svelteInstance: app, - apiKey + apiKey, + initialWalletInit: wallets }) - setWalletModules(wallets) - return API } @@ -316,10 +315,13 @@ function mountApp() { ` - const containerElementQuery = state.get().accountCenter.containerElement || 'body' + const containerElementQuery = + state.get().accountCenter.containerElement || 'body' const containerElement = document.querySelector(containerElementQuery) if (!containerElement) { - throw new Error(`Element with query ${state.get().accountCenter} does not exist.`) + throw new Error( + `Element with query ${state.get().accountCenter} does not exist.` + ) } containerElement.appendChild(onboard) diff --git a/packages/core/src/preflight-notifications.ts b/packages/core/src/preflight-notifications.ts index 2e3ef041f..3fc6f59d6 100644 --- a/packages/core/src/preflight-notifications.ts +++ b/packages/core/src/preflight-notifications.ts @@ -63,8 +63,7 @@ export async function preflightNotifications( if (transactionCost.gt(new BigNumber(balance))) { const eventCode = 'nsfFail' - const newNotification = buildNotification(eventCode, id) - addNotification(newNotification) + addNotification(buildNotification(eventCode, id)) } } @@ -93,8 +92,7 @@ export async function preflightNotifications( }, reminderTimeout) const eventCode = 'txRequest' - const newNotification = buildNotification(eventCode, id) - addNotification(newNotification) + addNotification(buildNotification(eventCode, id)) // if not provided with sendTransaction function, // resolve with transaction hash(or void) so dev can initiate transaction @@ -112,8 +110,7 @@ export async function preflightNotifications( } const { eventCode, errorMsg } = extractMessageFromError(error as CatchError) - const newNotification = buildNotification(eventCode, id) - addNotification(newNotification) + addNotification(buildNotification(eventCode, id)) console.error(errorMsg) return } diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 729454b49..91f5c8f07 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -123,7 +123,6 @@ export function removeWallet(id: string): void { } export function setPrimaryWallet(wallet: WalletState, address?: string): void { - console.log({ address }) const error = validateWallet(wallet) || (address && validateString(address, 'address')) diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 313519286..d23557b8e 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -119,6 +119,7 @@ export type Configuration = { appMetadata: AppMetadata | null device: Device | DeviceNotBrowser apiKey: string + initialWalletInit: WalletInit[] } export type Locale = string @@ -213,14 +214,16 @@ export interface PreflightNotificationsOptions { estimateGas?: () => Promise gasPrice?: () => Promise balance?: string | number - txDetails?: { - value: string | number - to?: string - from?: string - } + txDetails?: TxDetails txApproveReminderTimeout?: number } +export interface TxDetails { + value: string | number + to?: string + from?: string +} + // ==== ACTIONS ==== // export type Action = | AddChainsAction diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index c7a96c457..4c59e3ea5 100644 --- a/packages/core/src/utils.ts +++ b/packages/core/src/utils.ts @@ -85,8 +85,8 @@ export function shortenEns(ens: string): string { export async function copyWalletAddress(text: string): Promise { try { - const copy = await navigator.clipboard.writeText(text); - return copy + const copy = await navigator.clipboard.writeText(text) + return copy } catch (err) { console.error('Failed to copy: ', err) } @@ -242,3 +242,6 @@ export const defaultNotifyEventStyles: Record = { eventIcon: info } } + +export const wait = (time: number) => + new Promise(resolve => setTimeout(resolve, time)) diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 709873e48..3baeaf9a9 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -24,11 +24,23 @@ .select('notifications') .pipe(startWith(state.get().notifications)) - const positioningDefaults = { - topLeft: 'top: 0; left: 0;', - topRight: 'top: 0; right: 0;', - bottomRight: 'bottom: 0; right: 0;', - bottomLeft: 'bottom: 0; left: 0;' + const accountCenterPositioning = 'account-center' + const notifyPositioning = 'notify-onboard-container' + const setPositioningDefaults = (targetComponentVariable: string) => { + return { + topLeft: ` + top: var(--${targetComponentVariable}-position-top, 0); + left: var(--${targetComponentVariable}-position-left, 0);`, + topRight: ` + top: var(--${targetComponentVariable}-position-top, 0); + right: var(--${targetComponentVariable}-position-right, 0);`, + bottomRight: ` + bottom: var(--${targetComponentVariable}-position-bottom, 0); + right: var(--${targetComponentVariable}-position-right, 0);`, + bottomLeft: ` + bottom: var(--${targetComponentVariable}-position-bottom, 0); + left: var(--${targetComponentVariable}-position-left, 0);` + } } $: sharedContainer = @@ -334,8 +346,9 @@ {#if displayAccountCenterNotifySameContainer}
- {#if notification.id && (!notification.id.includes('customNotification') && !notification.id.includes('preflight') )} + {#if notification.id && !notification.id.includes('customNotification') && !notification.id.includes('preflight')} {#if notification.link} + + + + +` \ No newline at end of file diff --git a/packages/injected/src/types.ts b/packages/injected/src/types.ts index 30db52e76..d075e6125 100644 --- a/packages/injected/src/types.ts +++ b/packages/injected/src/types.ts @@ -42,7 +42,8 @@ export enum ProviderIdentityFlag { Tally = 'isTally', BraveWallet = 'isBraveWallet', Rabby = 'isRabby', - MathWallet = 'isMathWallet' + MathWallet = 'isMathWallet', + GameStop = 'isGamestop' } export enum ProviderLabel { @@ -77,6 +78,7 @@ export enum ProviderLabel { Tally = 'Tally Wallet', Rabby = 'Rabby', MathWallet = 'MathWallet', + GameStop = 'GameStop Wallet' } export interface MeetOneProvider extends ExternalProvider { @@ -95,7 +97,8 @@ export enum InjectedNameSpace { Tally = 'tally', Web3 = 'web3', Arbitrum = 'arbitrum', - XFI = 'xfi' + XFI = 'xfi', + GameStop = 'gamestop' } export interface CustomWindow extends Window { @@ -107,6 +110,7 @@ export interface CustomWindow extends Window { xfi: { ethereum: InjectedProvider } + gamestop: InjectedProvider } export type InjectedProvider = ExternalProvider & diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts index 6e09882de..7be24561a 100644 --- a/packages/injected/src/wallets.ts +++ b/packages/injected/src/wallets.ts @@ -500,6 +500,18 @@ const mathwallet: InjectedWalletModule = { platforms: ['all'] } +const gamestop: InjectedWalletModule = { + label: ProviderLabel.GameStop, + injectedNamespace: InjectedNameSpace.GameStop, + checkProviderIdentity: ({ provider }) => + !!provider && !!provider[ProviderIdentityFlag.GameStop], + getIcon: async () => (await import('./icons/gamestop.js')).default, + getInterface: async () => ({ + provider: createEIP1193Provider(window.gamestop) + }), + platforms: ['desktop'] +} + const wallets = [ exodus, metamask, @@ -529,7 +541,8 @@ const wallets = [ tokenary, tally, rabby, - mathwallet + mathwallet, + gamestop ] export default wallets diff --git a/packages/keepkey/package.json b/packages/keepkey/package.json index 153430ddd..af108c770 100644 --- a/packages/keepkey/package.json +++ b/packages/keepkey/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keepkey", - "version": "2.1.5", + "version": "2.1.6", "description": "KeepKey hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -63,7 +63,7 @@ "@ethersproject/providers": "^5.5.0", "@shapeshiftoss/hdwallet-core": "^1.15.2", "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2", - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "ethereumjs-util": "^7.1.3" } } diff --git a/packages/keepkey/src/index.ts b/packages/keepkey/src/index.ts index 3101e8a96..0554e44bd 100644 --- a/packages/keepkey/src/index.ts +++ b/packages/keepkey/src/index.ts @@ -167,37 +167,43 @@ function keepkey(): WalletInit { asset: Asset provider: StaticJsonRpcProvider }) => { - let index = getAccountIdx(derivationPath) - let zeroBalanceAccounts = 0 - const accounts = [] - - // Iterates until a 0 balance account is found - // Then adds 4 more 0 balance accounts to the array - while (zeroBalanceAccounts < 5) { - const acc = await getAccount({ - accountIdx: index, - provider, - asset - }) + try { + let index = getAccountIdx(derivationPath) + let zeroBalanceAccounts = 0 + const accounts = [] + + // Iterates until a 0 balance account is found + // Then adds 4 more 0 balance accounts to the array + while (zeroBalanceAccounts < 5) { + const acc = await getAccount({ + accountIdx: index, + provider, + asset + }) + + if ( + acc && + acc.balance && + acc.balance.value && + acc.balance.value.isZero() + ) { + zeroBalanceAccounts++ + accounts.push(acc) + } else { + accounts.push(acc) + // Reset the number of 0 balance accounts + zeroBalanceAccounts = 0 + } - if ( - acc && - acc.balance && - acc.balance.value && - acc.balance.value.isZero() - ) { - zeroBalanceAccounts++ - accounts.push(acc) - } else { - accounts.push(acc) - // Reset the number of 0 balance accounts - zeroBalanceAccounts = 0 + index++ } - index++ + return accounts + } catch (error) { + throw new Error( + (error as { message: { message: string } }).message.message + ) } - - return accounts } let ethersProvider: StaticJsonRpcProvider const scanAccounts = async ({ diff --git a/packages/keystone/package.json b/packages/keystone/package.json index 8064fc6c5..13e728245 100644 --- a/packages/keystone/package.json +++ b/packages/keystone/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keystone", - "version": "2.1.6", + "version": "2.1.7", "description": "Keystone hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -57,6 +57,6 @@ "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", "@keystonehq/eth-keyring": "^0.14.0-alpha.10.3", - "@web3-onboard/common": "^2.1.5" + "@web3-onboard/common": "^2.1.6" } } diff --git a/packages/ledger/package.json b/packages/ledger/package.json index f1950f7ad..019f1c6d8 100644 --- a/packages/ledger/package.json +++ b/packages/ledger/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/ledger", - "version": "2.1.5", + "version": "2.1.6", "description": "Ledger hardare wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -63,7 +65,7 @@ "@ledgerhq/hw-transport-u2f": "^5.36.0-deprecated", "@ledgerhq/hw-transport-webusb": "^6.19.0", "@metamask/eth-sig-util": "^4.0.0", - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "buffer": "^6.0.3", "ethereumjs-util": "^7.1.3" } diff --git a/packages/magic/package.json b/packages/magic/package.json index 5ebb84225..7bf00f7e9 100644 --- a/packages/magic/package.json +++ b/packages/magic/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/magic", - "version": "2.0.8", + "version": "2.0.9", "description": "Magic SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -78,7 +80,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "joi": "^17.4.2", "magic-sdk": "^8.1.0", "rxjs": "^7.5.2" diff --git a/packages/mew/package.json b/packages/mew/package.json index b70a3447f..c9aca7f3a 100644 --- a/packages/mew/package.json +++ b/packages/mew/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/mew", - "version": "2.0.5", + "version": "2.0.6", "description": "MEW (My Ether Wallet) SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -59,7 +59,7 @@ "@myetherwallet/mewconnect-web-client": "^2.2.0-beta.14" }, "dependencies": { - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "rxjs": "^7.5.2" } } diff --git a/packages/portis/package.json b/packages/portis/package.json index fca893316..8460b2c40 100644 --- a/packages/portis/package.json +++ b/packages/portis/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/portis", - "version": "2.0.5", + "version": "2.0.6", "description": "Portis SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -57,6 +57,6 @@ }, "dependencies": { "@portis/web3": "^4.0.6", - "@web3-onboard/common": "^2.1.5" + "@web3-onboard/common": "^2.1.6" } } diff --git a/packages/react/README.md b/packages/react/README.md index 1edfe8e16..b3e61b95f 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -80,7 +80,8 @@ type UseConnectWallet = (): [ (options: ConnectOptions) => Promise, (wallet: DisconnectOptions) => Promise, (addresses?: string[]) => Promise, - (wallets: WalletInit[]) => void + (wallets: WalletInit[]) => void, + (wallet: WalletState, address?: string) => void ] type ConnectOptions = { @@ -110,8 +111,25 @@ const [ connect, // function to call to initiate user to connect wallet disconnect, // function to call with wallet to disconnect wallet updateBalances, // function to be called with an optional array of wallet addresses connected through Onboard to update balance or empty/no params to update all connected wallets - setWalletModules // function to be called with an array of wallet modules to conditionally allow connection of wallet types i.e. setWalletModules([ledger, trezor, injected]) + setWalletModules, // function to be called with an array of wallet modules to conditionally allow connection of wallet types i.e. setWalletModules([ledger, trezor, injected]) + setPrimaryWallet // function that can set the primary wallet and/or primary account within that wallet. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in ] = useConnectWallet() + + +``` +**`setPrimaryWallet`** +The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in: + +```typescript +// set the second wallet in the wallets array as the primary +setPrimaryWallet(wallets[1]) + +// set the second wallet in the wallets array as the primary wallet +// as well as setting the third account in that wallet as the primary account +setPrimaryWallet( + wallets[1], + wallets[1].accounts[2].address +) ``` ## `useSetChain` @@ -152,17 +170,17 @@ const [ This hook allows the dev to access all notifications if enabled, send custom notifications and update notify **note** requires an API key be added to the initialization, enabled by default if API key exists +For full Notification documentation please see [Notify section within the `@web3-onboard/core` docs](../core/README.md#options) ```typescript -import { useNotifications } from '@web3-onboard/react' - type UseNotifications = (): [ Notification[], (updatedNotification: CustomNotification) => { dismiss: () => void update: UpdateNotification }, - (update: Partial) => void + (update: Partial) => void, + (options: PreflightNotificationsOptions) => Promise ] type Notification = { @@ -209,11 +227,37 @@ type Notify = { transactionHandler: ( event: EthereumTransactionData ) => TransactionHandlerReturn + /** + * Position of notifications that defaults to the same position as the + * Account Center (if enabled) of the top right if AC is disabled + * and notifications are enabled (enabled by default with API key) + */ + position?: NotificationPosition +} + +type PreflightNotificationsOptions = { + sendTransaction?: () => Promise + estimateGas?: () => Promise + gasPrice?: () => Promise + balance?: string | number + txDetails?: TxDetails + txApproveReminderTimeout?: number +} +type TxDetails = { + value: string | number + to?: string + from?: string +} +``` + +```typescript +import { useNotifications } from '@web3-onboard/react' const [ notifications, // the list of all notifications that update when notifications are added, updated or removed customNotification, // a function that takes a customNotification object and allows custom notifications to be shown to the user, returns an update and dismiss callback - updateNotify // a function that takes a Notify object to allow updating of the properties + updateNotify, // a function that takes a Notify object to allow updating of the properties + preflightNotifications // a function that takes a PreflightNotificationsOption to create preflight notifications ] = useNotifications() // View notifications as they come in if you would like to handle them independent of the notification display @@ -221,6 +265,37 @@ useEffect(() => { console.log(notifications) }, [notifications]) +const sendTransactionWithPreFlightNotifications = async () => { + const balanceValue = Object.values(wallet.accounts[0].balance)[0] + + const signer = provider.getUncheckedSigner() + + const txDetails = { + to: toAddress, + value: 1000000000000000 + } + + const sendTransaction = () => { + return signer.sendTransaction(txDetails).then(tx => tx.hash) + } + + const gasPrice = () => provider.getGasPrice().then(res => res.toString()) + + const estimateGas = () => { + return provider.estimateGas(txDetails).then(res => res.toString()) + } + + const transactionHash = + await preflightNotifications({ + sendTransaction, + gasPrice, + estimateGas, + balance: balanceValue, + txDetails: txDetails + }) + console.log(transactionHash) +} + // Custom notification example + ``` ## `useWallets` diff --git a/packages/react/package.json b/packages/react/package.json index 13b7c88cc..6a3e1f839 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.2.3", + "version": "2.2.4", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,10 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "GameStop", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -59,8 +62,8 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.4.0", - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", + "@web3-onboard/core": "^2.5.0", "use-sync-external-store": "1.0.0" }, "peerDependencies": { diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 8de00de28..6f68c4e22 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -14,7 +14,8 @@ import type { CustomNotification, Notification, Notify, - UpdateNotification + UpdateNotification, + PreflightNotificationsOptions } from '@web3-onboard/core' import type { Chain, WalletInit } from '@web3-onboard/common' @@ -51,8 +52,8 @@ const useAppState: { return stateKey ? snapshot[stateKey] : snapshot }, [stateKey]) - const getServerSnapshot = () => get() || getSnapshot; - return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); + const getServerSnapshot = () => get() || getSnapshot + return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) } export const useConnectWallet = (): [ @@ -60,7 +61,8 @@ export const useConnectWallet = (): [ (options?: ConnectOptions) => Promise, (wallet: DisconnectOptions) => Promise, (addresses?: string[]) => Promise, - (wallets: WalletInit[]) => void + (wallets: WalletInit[]) => void, + (wallet: WalletState, address?: string) => void ] => { if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE) @@ -89,13 +91,15 @@ export const useConnectWallet = (): [ const updateBalances = web3Onboard.state.actions.updateBalances const setWalletModules = web3Onboard.state.actions.setWalletModules + const setPrimaryWallet = web3Onboard.state.actions.setPrimaryWallet return [ { wallet, connecting }, connect, disconnect, updateBalances, - setWalletModules + setWalletModules, + setPrimaryWallet ] } @@ -156,14 +160,22 @@ export const useNotifications = (): [ dismiss: () => void update: UpdateNotification }, - (update: Partial) => void + (update: Partial) => void, + (options: PreflightNotificationsOptions) => Promise ] => { if (!web3Onboard) throw new Error(HOOK_ERROR_MESSAGE) const customNotification = web3Onboard.state.actions.customNotification const updateNotify = web3Onboard.state.actions.updateNotify + const preflightNotifications = + web3Onboard.state.actions.preflightNotifications - return [useAppState('notifications'), customNotification, updateNotify] + return [ + useAppState('notifications'), + customNotification, + updateNotify, + preflightNotifications + ] } export const useSetLocale = (): ((locale: string) => void) => { diff --git a/packages/torus/package.json b/packages/torus/package.json index b2f0280ea..b266e7ed8 100644 --- a/packages/torus/package.json +++ b/packages/torus/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/torus", - "version": "2.0.6", + "version": "2.0.7", "description": "Torus SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -57,6 +57,6 @@ }, "dependencies": { "@toruslabs/torus-embed": "^1.18.3", - "@web3-onboard/common": "^2.1.5" + "@web3-onboard/common": "^2.1.6" } } diff --git a/packages/trezor/package.json b/packages/trezor/package.json index cf89125a6..8680bad9d 100644 --- a/packages/trezor/package.json +++ b/packages/trezor/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/trezor", - "version": "2.1.5", + "version": "2.1.6", "description": "Trezor hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -58,7 +60,7 @@ "dependencies": { "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "buffer": "^6.0.3", "eth-crypto": "^2.1.0", "ethereumjs-util": "^7.1.3", diff --git a/packages/vue/package.json b/packages/vue/package.json index 1bc40d00f..280194da7 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.1.3", + "version": "2.1.4", "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,10 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "GameStop", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -59,8 +62,8 @@ "dependencies": { "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", - "@web3-onboard/common": "^2.1.5", - "@web3-onboard/core": "^2.4.0", + "@web3-onboard/common": "^2.1.6", + "@web3-onboard/core": "^2.5.0", "vue-demi": "^0.12.4" }, "peerDependencies": { diff --git a/packages/walletconnect/package.json b/packages/walletconnect/package.json index f4d5d2084..71aa64cdc 100644 --- a/packages/walletconnect/package.json +++ b/packages/walletconnect/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/walletconnect", - "version": "2.0.6", + "version": "2.0.7", "description": "WalletConnect SDK module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -59,7 +61,7 @@ "@ethersproject/providers": "^5.5.0", "@walletconnect/client": "^1.7.1", "@walletconnect/qrcode-modal": "^1.7.1", - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "rxjs": "^7.5.2" } } diff --git a/packages/walletlink/package.json b/packages/walletlink/package.json index 36bdad19f..4094cc1d1 100644 --- a/packages/walletlink/package.json +++ b/packages/walletlink/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/walletlink", - "version": "2.0.5", + "version": "2.0.6", "description": "(DEPRECATED. Use @web3-onboard/coinbase instead) WalletLink SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -29,7 +29,9 @@ "Mempool", "pending", "confirmed", - "Injected Wallet" + "Injected Wallet", + "Crypto", + "Crypto Wallet" ], "repository": { "type": "git", @@ -56,7 +58,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "walletlink": "^2.5.0" } } diff --git a/packages/web3auth/package.json b/packages/web3auth/package.json index e79afc38c..975813955 100644 --- a/packages/web3auth/package.json +++ b/packages/web3auth/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/web3auth", - "version": "2.0.4", + "version": "2.0.5", "description": "Web3Auth SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", @@ -56,7 +56,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/common": "^2.1.5", + "@web3-onboard/common": "^2.1.6", "@web3auth/web3auth": "^1.0.0" } } diff --git a/yarn.lock b/yarn.lock index 5bf6f3a00..b5be41b09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2455,15 +2455,6 @@ dependencies: "@walletconnect/window-getters" "^1.0.0" -"@web3-onboard/injected-wallets@^2.0.12": - version "2.0.12" - resolved "https://registry.yarnpkg.com/@web3-onboard/injected-wallets/-/injected-wallets-2.0.12.tgz#593cf6ec0fe1e2f57233e10795136cfd681c9bd5" - integrity sha512-viZebgwenIKRN/1q0A6Yq0euYxGmP7sPCPwjKQoTFQPcwKuR+kPkfLw1MnPkntxpC7Cyc5dS4/LsOqeEfSPFbQ== - dependencies: - "@web3-onboard/common" "^2.1.4" - joi "^17.4.2" - lodash.uniqby "^4.7.0" - "@web3auth/base-plugin@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@web3auth/base-plugin/-/base-plugin-1.0.1.tgz#1e2a87acf745299fdff6f92e6c46ee9bc38aa670"