From fd7e367380549e14dc1a54552ec9226ece543649 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 20 Jun 2022 15:02:07 -0600 Subject: [PATCH 1/7] Update react package version --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index e5ca4fb03..570ecba0d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.2.0-alpha.2", + "version": "2.2.0-alpha.3", "description": "Collection of React Hooks for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", From dfa0627a553361f20aa15c044c39073591bea466 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Fri, 24 Jun 2022 12:20:57 -0600 Subject: [PATCH 2/7] Setup and progress on decoupling - working with init functionality --- packages/core/src/constants.ts | 3 +- packages/core/src/index.ts | 41 ++++++++++++++++++++++++++-- packages/core/src/store/actions.ts | 10 ++++--- packages/core/src/types.ts | 33 ++++++++++++++++------ packages/core/src/validation.ts | 35 ++++++++++++++++++------ packages/core/src/views/Index.svelte | 8 +++--- 6 files changed, 101 insertions(+), 29 deletions(-) diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index 32bed8402..4c37bda6a 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -13,7 +13,8 @@ export const APP_INITIAL_STATE: AppState = { }, notify: { enabled: true, - transactionHandler: () => {} + transactionHandler: () => {}, + position: 'topRight' }, notifications: [], locale: '' diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 100433ff0..6f811c0d4 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -4,7 +4,7 @@ import disconnectWallet from './disconnect' import setChain from './chain' import { state } from './store' import { reset$ } from './streams' -import { validateInitOptions } from './validation' +import { validateInitOptions, validateNotifyOptions } from './validation' import initI18N from './i18n' import App from './views/Index.svelte' import type { InitOptions, OnboardAPI } from './types' @@ -22,7 +22,7 @@ import { import updateBalances from './updateBalances' -const API = { +const API: OnboardAPI = { connectWallet, disconnectWallet, setChain, @@ -104,7 +104,42 @@ function init(options: InitOptions): OnboardAPI { // update notify if (typeof notify !== undefined) { - updateNotify(notify) + const error = validateNotifyOptions(notify) + + if (error) { + throw error + } + + if ( + (!notify.desktop || (notify.desktop && !notify.desktop.position)) && + accountCenter && + accountCenter.desktop && + accountCenter.desktop.position + ) { + notify.desktop.position = accountCenter.desktop.position + } + if ( + (!notify.mobile || (notify.mobile && !notify.mobile.position)) && + accountCenter && + accountCenter.mobile && + accountCenter.mobile.position + ) { + notify.mobile.position = accountCenter.mobile.position + } + let notifyUpdate + if (device.type === 'mobile' && notify.mobile) { + notifyUpdate = { + ...APP_INITIAL_STATE.notify, + ...notify.mobile + } + } else if (notify.desktop) { + notifyUpdate = { + ...APP_INITIAL_STATE.notify, + ...notify.desktop + } + } + console.log(notifyUpdate) + updateNotify(notifyUpdate) } if (svelteInstance) { diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index d7f9061d7..b2e36670b 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -24,7 +24,8 @@ import type { UpdateAllWalletsAction, CustomNotification, UpdateNotification, - CustomNotificationUpdate + CustomNotificationUpdate, + Notify } from '../types' import { @@ -37,7 +38,8 @@ import { validateString, validateWallet, validateWalletInit, - validateUpdateBalances + validateUpdateBalances, + validateNotify } from '../validation' import { @@ -156,8 +158,8 @@ export function updateAccountCenter( dispatch(action as UpdateAccountCenterAction) } -export function updateNotify(update: Partial): void { - const error = validateNotifyOptions(update) +export function updateNotify(update: Partial): void { + const error = validateNotify(update) if (error) { throw error diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 46ab2f973..0de1bda86 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -63,7 +63,7 @@ export interface OnboardAPI { interface ExposedActions { setWalletModules: (wallets: WalletInit[]) => void setLocale: (locale: string) => void - updateNotify: (update: Partial) => void + updateNotify: (update: Partial) => void customNotification: ( updatedNotification: CustomNotification ) => { @@ -141,7 +141,7 @@ export interface AppState { wallets: WalletState[] accountCenter: AccountCenter locale: Locale - notify: NotifyOptions + notify: Notify notifications: Notification[] } @@ -156,11 +156,15 @@ export type Locale = string export type i18nOptions = Record export type i18n = typeof en -export type AccountCenterPosition = - | 'topRight' - | 'bottomRight' - | 'bottomLeft' - | 'topLeft' +export type CommonPositions = +| 'topRight' +| 'bottomRight' +| 'bottomLeft' +| 'topLeft' + +export type AccountCenterPosition = CommonPositions + +export type NotificationPosition = CommonPositions export type AccountCenter = { enabled: boolean @@ -174,7 +178,7 @@ export type AccountCenterOptions = { mobile: Omit } -export type NotifyOptions = { +export type Notify = { /** * Defines whether whether to subscribe to transaction events or not * default: true @@ -189,6 +193,17 @@ export type NotifyOptions = { 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 +} + +export type NotifyOptions = { + desktop: Notify + mobile: Notify } export type Notification = { @@ -279,7 +294,7 @@ export type SetLocaleAction = { export type UpdateNotifyAction = { type: 'update_notify' - payload: Partial + payload: Partial } export type AddNotificationAction = { diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index a31081cf5..954230f04 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -17,7 +17,8 @@ import type { NotifyOptions, Notification, CustomNotification, - CustomNotificationUpdate + CustomNotificationUpdate, + Notify } from './types' const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/) @@ -128,7 +129,7 @@ const walletInit = Joi.array().items(Joi.function()).required() const locale = Joi.string() -const accountCenterPosition = Joi.string().valid( +const commonPositions = Joi.string().valid( 'topRight', 'bottomRight', 'bottomLeft', @@ -137,7 +138,21 @@ const accountCenterPosition = Joi.string().valid( const notify = Joi.object({ transactionHandler: Joi.function(), - enabled: Joi.boolean() + enabled: Joi.boolean(), + position: commonPositions +}) + +const notifyOptions = Joi.object({ + desktop: Joi.object({ + transactionHandler: Joi.function(), + enabled: Joi.boolean(), + position: commonPositions + }), + mobile: Joi.object({ + transactionHandler: Joi.function(), + enabled: Joi.boolean(), + position: commonPositions + }) }) const initOptions = Joi.object({ @@ -150,15 +165,15 @@ const initOptions = Joi.object({ desktop: Joi.object({ enabled: Joi.boolean(), minimal: Joi.boolean(), - position: accountCenterPosition + position: commonPositions }), mobile: Joi.object({ enabled: Joi.boolean(), minimal: Joi.boolean(), - position: accountCenterPosition + position: commonPositions }) }), - notify + notify: notifyOptions }) const connectOptions = Joi.object({ @@ -183,7 +198,7 @@ const setChainOptions = Joi.object({ const accountCenter = Joi.object({ enabled: Joi.boolean(), - position: accountCenterPosition, + position: commonPositions, expanded: Joi.boolean(), minimal: Joi.boolean() }) @@ -287,10 +302,14 @@ export function validateLocale(data: string): ValidateReturn { return validate(locale, data) } +export function validateNotify(data: Partial): ValidateReturn { + return validate(notify, data) +} + export function validateNotifyOptions( data: Partial ): ValidateReturn { - return validate(notify, data) + return validate(notifyOptions, data) } export function validateTransactionHandlerReturn( diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index c92b75ea9..346c11bf0 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -291,8 +291,8 @@ ? 'padding-top:0;' : ''} " > - {#if $notify$.enabled && $accountCenter$.position.includes('bottom')} - + {#if $notify$.enabled && $notify$.position.includes('bottom') && (($accountCenter$ && $accountCenter$.position === $notify$.position || !$accountCenter$))} + {/if}
- {#if $notify$.enabled && $accountCenter$.position.includes('top')} - + {#if $notify$.enabled && $notify$.position.includes('top') && (($accountCenter$ && $accountCenter$.position === $notify$.position || !$accountCenter$))} + {/if}
{/if} From 7121f58f0eb5e198c3e5791f322a62a707067365 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Fri, 24 Jun 2022 13:18:27 -0600 Subject: [PATCH 3/7] working with cleanup --- packages/core/src/views/Index.svelte | 51 +++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 8 deletions(-) diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 346c11bf0..bbe6b8dcc 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -18,7 +18,7 @@ .select('notify') .pipe(startWith(state.get().notify), shareReplay(1)) - const accountCenterPositions = { + const positioningDefaults = { topLeft: 'top: 0; left: 0;', topRight: 'top: 0; right: 0;', bottomRight: 'bottom: 0; right: 0;', @@ -281,19 +281,46 @@ {/if} -{#if ($notify$.enabled || $accountCenter$.enabled) && $wallets$.length} +{#if $notify$.enabled && $accountCenter$.enabled && $wallets$.length}
- {#if $notify$.enabled && $notify$.position.includes('bottom') && (($accountCenter$ && $accountCenter$.position === $notify$.position || !$accountCenter$))} + {#if $notify$.position.includes('bottom') && $accountCenter$.position === $notify$.position} {/if} +
+ +
+ {#if $notify$.position.includes('top') && $accountCenter$.position === $notify$.position} + + {/if} +
+{:else if $accountCenter$.enabled && (!$notify$.enabled || $accountCenter$.position !== $notify$.position) && $wallets$.length} +
{/if}
- - {#if $notify$.enabled && $notify$.position.includes('top') && (($accountCenter$ && $accountCenter$.position === $notify$.position || !$accountCenter$))} - - {/if} +
+{:else if $notify$.enabled && (!$accountCenter$.enabled || $accountCenter$.position !== $notify$.position) && $wallets$.length} +
+
{/if} From a3e52f92ebc547d06f69a62e514b0b2cff2bca83 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Fri, 24 Jun 2022 13:55:03 -0600 Subject: [PATCH 4/7] Update docs to handle new positioning and types --- packages/core/README.md | 46 ++++++++++++---- packages/core/src/index.ts | 81 +++++++++++++++------------- packages/core/src/store/actions.ts | 2 - packages/core/src/types.ts | 2 +- packages/core/src/views/Index.svelte | 7 +-- packages/react/README.md | 6 +-- packages/react/src/index.ts | 4 +- 7 files changed, 92 insertions(+), 56 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 6f29c395e..5a194b29b 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -147,7 +147,12 @@ unsubscribe() ``` ```typescript + export type NotifyOptions = { + desktop: Notify + mobile: Notify +} +export type Notify = { enabled: boolean // default: true /** * Callback that receives all transaction events @@ -158,8 +163,15 @@ export type NotifyOptions = { transactionHandler?: ( event: EthereumTransactionData ) => TransactionHandlerReturn + position: CommonPositions } +export type CommonPositions = +| 'topRight' +| 'bottomRight' +| 'bottomLeft' +| 'topLeft' + export type TransactionHandlerReturn = CustomNotification | boolean | void export type CustomNotification = Partial> @@ -285,15 +297,31 @@ const onboard = Onboard({ }, apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx' notify: { - enabled: true, - transactionHandler: transaction => { - console.log({ transaction }) - if (transaction.eventCode === 'txPool') { - return { - type: 'success', - message: 'Your transaction from #1 DApp is in the mempool', + desktop: { + enabled: true, + transactionHandler: transaction => { + console.log({ transaction }) + if (transaction.eventCode === 'txPool') { + return { + type: 'success', + message: 'Your transaction from #1 DApp is in the mempool', + } } - } + }, + position: 'bottomLeft' + }, + mobile: { + enabled: true, + transactionHandler: transaction => { + console.log({ transaction }) + if (transaction.eventCode === 'txPool') { + return { + type: 'success', + message: 'Your transaction from #1 DApp is in the mempool', + } + } + }, + position: 'topRight' } }, accountCenter: { @@ -420,7 +448,7 @@ type AppState = { accountCenter: AccountCenter walletModules: WalletModule[] locale: Locale - notify: NotifyOptions + notify: Notify notifications: Notification[] } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6f811c0d4..bc40c6646 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -4,10 +4,10 @@ import disconnectWallet from './disconnect' import setChain from './chain' import { state } from './store' import { reset$ } from './streams' -import { validateInitOptions, validateNotifyOptions } from './validation' +import { validateInitOptions, validateNotify, validateNotifyOptions } from './validation' import initI18N from './i18n' import App from './views/Index.svelte' -import type { InitOptions, OnboardAPI } from './types' +import type { InitOptions, OnboardAPI, Notify } from './types' import { APP_INITIAL_STATE } from './constants' import { configuration, updateConfiguration } from './configuration' @@ -51,7 +51,7 @@ export type { AppState, CustomNotification, Notification, - NotifyOptions, + Notify, UpdateNotification } from './types' @@ -104,42 +104,51 @@ function init(options: InitOptions): OnboardAPI { // update notify if (typeof notify !== undefined) { - const error = validateNotifyOptions(notify) - - if (error) { - throw error - } - - if ( - (!notify.desktop || (notify.desktop && !notify.desktop.position)) && - accountCenter && - accountCenter.desktop && - accountCenter.desktop.position - ) { - notify.desktop.position = accountCenter.desktop.position - } - if ( - (!notify.mobile || (notify.mobile && !notify.mobile.position)) && - accountCenter && - accountCenter.mobile && - accountCenter.mobile.position - ) { - notify.mobile.position = accountCenter.mobile.position - } - let notifyUpdate - if (device.type === 'mobile' && notify.mobile) { - notifyUpdate = { - ...APP_INITIAL_STATE.notify, - ...notify.mobile + if ('desktop' in notify || 'mobile' in notify) { + const error = validateNotifyOptions(notify) + + if (error) { + throw error } - } else if (notify.desktop) { - notifyUpdate = { - ...APP_INITIAL_STATE.notify, - ...notify.desktop + + if ( + (!notify.desktop || (notify.desktop && !notify.desktop.position)) && + accountCenter && + accountCenter.desktop && + accountCenter.desktop.position + ) { + notify.desktop.position = accountCenter.desktop.position + } + if ( + (!notify.mobile || (notify.mobile && !notify.mobile.position)) && + accountCenter && + accountCenter.mobile && + accountCenter.mobile.position + ) { + notify.mobile.position = accountCenter.mobile.position + } + let notifyUpdate: Partial + if (device.type === 'mobile' && notify.mobile) { + notifyUpdate = { + ...APP_INITIAL_STATE.notify, + ...notify.mobile + } + } else if (notify.desktop) { + notifyUpdate = { + ...APP_INITIAL_STATE.notify, + ...notify.desktop + } + } + console.log(notifyUpdate) + updateNotify(notifyUpdate) + } else { + const error = validateNotify(notify as Notify) + + if (error) { + throw error } + updateNotify(notify as Notify) } - console.log(notifyUpdate) - updateNotify(notifyUpdate) } if (svelteInstance) { diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index b2e36670b..af1304ac6 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -16,7 +16,6 @@ import type { UpdateAccountCenterAction, UpdateWalletAction, WalletState, - NotifyOptions, UpdateNotifyAction, Notification, AddNotificationAction, @@ -34,7 +33,6 @@ import { validateNotification, validateCustomNotification, validateCustomNotificationUpdate, - validateNotifyOptions, validateString, validateWallet, validateWalletInit, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 0de1bda86..14724a3dd 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -46,7 +46,7 @@ export interface InitOptions { /** * Transaction notification options */ - notify?: Partial + notify?: Partial | Partial } export interface OnboardAPI { diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index bbe6b8dcc..550198dda 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -17,7 +17,6 @@ const notify$ = state .select('notify') .pipe(startWith(state.get().notify), shareReplay(1)) - const positioningDefaults = { topLeft: 'top: 0; left: 0;', topRight: 'top: 0; right: 0;', @@ -311,7 +310,8 @@ {/if} -{:else if $accountCenter$.enabled && (!$notify$.enabled || $accountCenter$.position !== $notify$.position) && $wallets$.length} +{/if} +{#if $accountCenter$.enabled && (!$notify$.enabled || $accountCenter$.position !== $notify$.position) && $wallets$.length}
{ - console.log({ transaction }) - // if (transaction.eventCode === 'txConfirmed') { - // return { - // type: 'error', - // message: 'Your in the pool, hope you brought a towel!', - // autoDismiss: 0, - // id: '123', - // key: '321', - // onClick: () => - // window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`) - // } - // } - // if (transaction.eventCode === 'txPool') { - // return { - // type: 'hint', - // message: 'Your in the pool, hope you brought a towel!', - // autoDismiss: 0, - // link: `https://ropsten.etherscan.io/tx/${transaction.hash}` - // } - // } + desktop: { + enabled: true, + transactionHandler: transaction => { + console.log({ transaction }) + // if (transaction.eventCode === 'txConfirmed') { + // return { + // type: 'error', + // message: 'Your in the pool, hope you brought a towel!', + // autoDismiss: 0, + // id: '123', + // key: '321', + // onClick: () => + // window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`) + // } + // } + // if (transaction.eventCode === 'txPool') { + // return { + // type: 'hint', + // message: 'Your in the pool, hope you brought a towel!', + // autoDismiss: 0, + // link: `https://ropsten.etherscan.io/tx/${transaction.hash}` + // } + // } + }, + position: 'topRight' + }, + mobile: { + enabled: true, + transactionHandler: transaction => { + console.log({ transaction }) + // if (transaction.eventCode === 'txConfirmed') { + // return { + // type: 'error', + // message: 'Your in the pool, hope you brought a towel!', + // autoDismiss: 0, + // id: '123', + // key: '321', + // onClick: () => + // window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`) + // } + // } + // if (transaction.eventCode === 'txPool') { + // return { + // type: 'hint', + // message: 'Your in the pool, hope you brought a towel!', + // autoDismiss: 0, + // link: `https://ropsten.etherscan.io/tx/${transaction.hash}` + // } + // } + }, + position: 'bottomRight' } }, // Sign up for your free api key at www.Blocknative.com @@ -227,7 +256,7 @@ } let toAddress - const sendTransaction = async (provider) => { + const sendTransaction = async provider => { const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') const signer = ethersProvider.getSigner() @@ -464,9 +493,7 @@ placeholder="0x..." bind:value={toAddress} /> -
diff --git a/packages/react/package.json b/packages/react/package.json index e6f5f18b5..aa7c4c805 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.2.1-alpha.3", + "version": "2.2.1-alpha.4", "description": "Collection of React Hooks for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -23,7 +23,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.3.1-alpha.3", + "@web3-onboard/core": "^2.3.1-alpha.4", "@web3-onboard/common": "^2.1.3-alpha.1", "use-sync-external-store": "1.0.0" }, diff --git a/packages/vue/package.json b/packages/vue/package.json index 2b37f5d97..393951a16 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.1.1-alpha.2", + "version": "2.1.1-alpha.3", "description": "Vue Composable for web3-onboard", "module": "dist/index.js", "browser": "dist/index.js", @@ -24,7 +24,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.1.3-alpha.1", - "@web3-onboard/core": "^2.3.1-alpha.3", + "@web3-onboard/core": "^2.3.1-alpha.4", "vue-demi": "^0.12.4" }, "peerDependencies": { From 32a4ec08c9fe818f282c6864a835c610a9a28757 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Fri, 24 Jun 2022 14:18:00 -0600 Subject: [PATCH 6/7] fix validation --- packages/core/src/index.ts | 1 - packages/core/src/validation.ts | 2 +- packages/demo/src/App.svelte | 27 +-------------------------- 3 files changed, 2 insertions(+), 28 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index bc40c6646..cbd7a22ff 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -139,7 +139,6 @@ function init(options: InitOptions): OnboardAPI { ...notify.desktop } } - console.log(notifyUpdate) updateNotify(notifyUpdate) } else { const error = validateNotify(notify as Notify) diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 954230f04..3051bc89a 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -173,7 +173,7 @@ const initOptions = Joi.object({ position: commonPositions }) }), - notify: notifyOptions + notify: [notifyOptions, notify] }) const connectOptions = Joi.object({ diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 2c313af2b..43ada5350 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -208,32 +208,7 @@ }, position: 'topRight' }, - mobile: { - enabled: true, - transactionHandler: transaction => { - console.log({ transaction }) - // if (transaction.eventCode === 'txConfirmed') { - // return { - // type: 'error', - // message: 'Your in the pool, hope you brought a towel!', - // autoDismiss: 0, - // id: '123', - // key: '321', - // onClick: () => - // window.open(`https://rinkeby.etherscan.io/tx/${transaction.hash}`) - // } - // } - // if (transaction.eventCode === 'txPool') { - // return { - // type: 'hint', - // message: 'Your in the pool, hope you brought a towel!', - // autoDismiss: 0, - // link: `https://ropsten.etherscan.io/tx/${transaction.hash}` - // } - // } - }, - position: 'bottomRight' - } + }, // Sign up for your free api key at www.Blocknative.com apiKey: 'xxxxxx-bf21-42ec-a093-9d37e426xxxx' From 1c462f3257be3a82eb59c96cd970d88250bd2ad6 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 27 Jun 2022 13:57:09 -0600 Subject: [PATCH 7/7] Update container height on mobile, validation DRY --- packages/core/src/validation.ts | 12 ++---------- packages/core/src/views/Index.svelte | 14 +++++++------- packages/core/src/views/notify/Index.svelte | 12 +++++++++++- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 3051bc89a..bbdf8f134 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -143,16 +143,8 @@ const notify = Joi.object({ }) const notifyOptions = Joi.object({ - desktop: Joi.object({ - transactionHandler: Joi.function(), - enabled: Joi.boolean(), - position: commonPositions - }), - mobile: Joi.object({ - transactionHandler: Joi.function(), - enabled: Joi.boolean(), - position: commonPositions - }) + desktop: notify, + mobile: notify }) const initOptions = Joi.object({ diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 550198dda..adcb618dc 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -290,8 +290,8 @@ ? 'padding-top:0;' : ''} " > - {#if $notify$.position.includes('bottom') && $accountCenter$.position === $notify$.position} - + {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)} + {/if}
- {#if $notify$.position.includes('top') && $accountCenter$.position === $notify$.position} - + {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)} + {/if} {/if} -{#if $accountCenter$.enabled && (!$notify$.enabled || $accountCenter$.position !== $notify$.position) && $wallets$.length} +{#if $accountCenter$.enabled && (!$notify$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile')) && $wallets$.length}
- +
{/if} diff --git a/packages/core/src/views/notify/Index.svelte b/packages/core/src/views/notify/Index.svelte index 272722e02..5e5f31213 100644 --- a/packages/core/src/views/notify/Index.svelte +++ b/packages/core/src/views/notify/Index.svelte @@ -6,12 +6,16 @@ import { state } from '../../store' import { shareReplay, startWith } from 'rxjs/operators' import Notification from './Notification.svelte' + import { configuration } from '../../configuration' + + const { device } = configuration const accountCenter$ = state .select('accountCenter') .pipe(startWith(state.get().accountCenter), shareReplay(1)) export let position: string + export let sharedContainer: boolean let x: number let y: number @@ -116,7 +120,13 @@ style={`${ position.includes('top') ? 'justify-content:flex-start;' : '' }; max-height: calc(100vh - ${ - !$accountCenter$.expanded ? '82px' : '412px' + $accountCenter$.expanded + ? '412px' + : sharedContainer && device.type !== 'mobile' + ? '82px' + : !sharedContainer && device.type === 'mobile' + ? '108px' + : '24px' })`} > {#each $notifications$ as notification (notification.key)}