Skip to content

Commit 7a505db

Browse files
lnbc1QWFyb24lnbc1QWFyb24
authored
[fix] - Gnosis Safe (#859)
* Checks for iframe, fixes import, fixes request acc * Scroll to top of modal and render html message * Scroll to top of modal functionality * Add gnosis to demo * Increment package versions * Increment demo package version
1 parent be9e6a6 commit 7a505db

File tree

7 files changed

+107
-76
lines changed

7 files changed

+107
-76
lines changed

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.0.4",
3+
"version": "2.0.5",
44
"scripts": {
55
"build": "rollup -c",
66
"dev": "rollup -c -w",

‎packages/core/src/views/connect/Index.svelte

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
11
<script lang="ts">
22
import { ProviderRpcErrorCode, WalletModule } from '@web3-onboard/common'
3-
import { _ } from 'svelte-i18n'
43
import { BigNumber } from 'ethers'
54
import EventEmitter from 'eventemitter3'
6-
5+
import { _ } from 'svelte-i18n'
6+
import en from '../../i18n/en.json'
7+
import { selectAccounts } from '../../provider'
8+
import { state } from '../../store'
9+
import { addWallet } from '../../store/actions'
10+
import { connectWallet$, internalState$ } from '../../streams'
711
import type {
8-
WalletWithLoadingIcon,
9-
WalletWithLoadedIcon,
1012
i18n,
11-
WalletState
13+
WalletState,
14+
WalletWithLoadedIcon,
15+
WalletWithLoadingIcon
1216
} from '../../types'
13-
17+
import CloseButton from '../shared/CloseButton.svelte'
1418
import Modal from '../shared/Modal.svelte'
15-
import SelectingWallet from './SelectingWallet.svelte'
16-
import InstallWallet from './InstallWallet.svelte'
17-
import ConnectingWallet from './ConnectingWallet.svelte'
19+
import Agreement from './Agreement.svelte'
1820
import ConnectedWallet from './ConnectedWallet.svelte'
19-
import CloseButton from '../shared/CloseButton.svelte'
21+
import ConnectingWallet from './ConnectingWallet.svelte'
22+
import InstallWallet from './InstallWallet.svelte'
23+
import SelectingWallet from './SelectingWallet.svelte'
2024
import Sidebar from './Sidebar.svelte'
21-
import Agreement from './Agreement.svelte'
22-
23-
import { connectWallet$, internalState$ } from '../../streams'
24-
25-
import { state } from '../../store'
26-
import { addWallet } from '../../store/actions'
27-
import en from '../../i18n/en.json'
28-
import { selectAccounts } from '../../provider'
2925
3026
export let autoSelect: string
3127
@@ -38,6 +34,7 @@
3834
let agreed: boolean
3935
4036
let windowWidth: number
37+
let scrollContainer: HTMLElement
4138
4239
const walletToAutoSelect =
4340
autoSelect &&
@@ -145,6 +142,10 @@
145142
function setStep(update: keyof i18n['connect']) {
146143
step = update
147144
}
145+
146+
function scrollToTop() {
147+
scrollContainer && scrollContainer.scrollTo(0, 0)
148+
}
148149
</script>
149150

150151
<style>
@@ -244,13 +245,13 @@
244245
</div>
245246
</div>
246247

247-
<div class="scroll-container">
248+
<div class="scroll-container" bind:this={scrollContainer}>
248249
{#if step === 'selectingWallet'}
249250
{#if wallets.length}
250251
<Agreement bind:agreed />
251252

252253
<div class:disabled={!agreed}>
253-
<SelectingWallet {selectWallet} {wallets} />
254+
<SelectingWallet {selectWallet} {wallets} {scrollToTop} />
254255
</div>
255256
{:else}
256257
<InstallWallet />

‎packages/core/src/views/connect/SelectingWallet.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
2-
import type { WalletWithLoadedIcon, WalletWithLoadingIcon } from '../../types'
32
import { state } from '../../store'
4-
import WalletButton from './WalletButton.svelte'
3+
import type { WalletWithLoadedIcon, WalletWithLoadingIcon } from '../../types'
54
import Warning from '../shared/Warning.svelte'
5+
import WalletButton from './WalletButton.svelte'
66
77
export let wallets: WalletWithLoadingIcon[]
88
export let selectWallet: (wallet: WalletWithLoadedIcon) => Promise<void>
9+
export let scrollToTop: () => void
910
1011
let connecting: string // the wallet label that is connecting
1112
let errorMessage: string
@@ -27,6 +28,7 @@
2728
} catch (error) {
2829
const { message } = error as { message: string }
2930
errorMessage = message
31+
scrollToTop()
3032
} finally {
3133
connecting = ''
3234
}
@@ -63,7 +65,7 @@
6365
<div class="outer-container">
6466
{#if errorMessage}
6567
<div class="warning-container">
66-
<Warning>{errorMessage}</Warning>
68+
<Warning>{@html errorMessage}</Warning>
6769
</div>
6870
{/if}
6971

‎packages/demo/package.json

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "demo",
3-
"version": "2.0.0-alpha",
3+
"version": "2.0.1",
44
"devDependencies": {
55
"assert": "^2.0.0",
66
"buffer": "^6.0.3",
@@ -22,17 +22,18 @@
2222
"webpack-dev-server": "4.7.4"
2323
},
2424
"dependencies": {
25-
"@web3-onboard/core": "^2.0.0-alpha.4",
26-
"@web3-onboard/fortmatic": "^2.0.0-alpha.4",
27-
"@web3-onboard/injected-wallets": "^2.0.0-alpha.4",
28-
"@web3-onboard/keepkey": "^2.0.0-alpha.4",
29-
"@web3-onboard/keystone": "^2.0.0-alpha.4",
30-
"@web3-onboard/ledger": "^2.0.0-alpha.4",
31-
"@web3-onboard/portis": "^2.0.0-alpha.4",
32-
"@web3-onboard/torus": "^2.0.0-alpha.4",
33-
"@web3-onboard/trezor": "^2.0.0-alpha.4",
34-
"@web3-onboard/walletconnect": "^2.0.0-alpha.4",
35-
"@web3-onboard/walletlink": "^2.0.0-alpha.4",
25+
"@web3-onboard/core": "^2.0.4",
26+
"@web3-onboard/fortmatic": "^2.0.0",
27+
"@web3-onboard/gnosis": "^2.0.0",
28+
"@web3-onboard/injected-wallets": "^2.0.0",
29+
"@web3-onboard/keepkey": "^2.0.0",
30+
"@web3-onboard/keystone": "^2.0.0",
31+
"@web3-onboard/ledger": "^2.0.0",
32+
"@web3-onboard/portis": "^2.0.0",
33+
"@web3-onboard/torus": "^2.0.0",
34+
"@web3-onboard/trezor": "^2.0.0",
35+
"@web3-onboard/walletconnect": "^2.0.0",
36+
"@web3-onboard/walletlink": "^2.0.0",
3637
"vconsole": "^3.9.5"
3738
},
3839
"license": "MIT",

‎packages/demo/src/App.svelte

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script>
2-
import { share } from 'rxjs/operators'
32
import Onboard from '@web3-onboard/core'
3+
import fortmaticModule from '@web3-onboard/fortmatic'
4+
import gnosisModule from '@web3-onboard/gnosis'
45
import injectedModule from '@web3-onboard/injected-wallets'
5-
6-
import trezorModule from '@web3-onboard/trezor'
6+
import keepkeyModule from '@web3-onboard/keepkey'
7+
import keystoneModule from '@web3-onboard/keystone'
78
import ledgerModule from '@web3-onboard/ledger'
8-
import walletConnectModule from '@web3-onboard/walletconnect'
9-
import walletLinkModule from '@web3-onboard/walletlink'
109
import portisModule from '@web3-onboard/portis'
11-
import fortmaticModule from '@web3-onboard/fortmatic'
1210
import torusModule from '@web3-onboard/torus'
13-
import keepkeyModule from '@web3-onboard/keepkey'
14-
import keystoneModule from '@web3-onboard/keystone'
11+
import trezorModule from '@web3-onboard/trezor'
12+
import walletConnectModule from '@web3-onboard/walletconnect'
13+
import walletLinkModule from '@web3-onboard/walletlink'
14+
import { verifyMessage, verifyTypedData } from 'ethers/lib/utils'
15+
import { share } from 'rxjs/operators'
16+
import VConsole from 'vconsole'
1517
import blocknativeIcon from './blocknative-icon'
1618
import blocknativeLogo from './blocknative-logo'
17-
import VConsole from 'vconsole'
18-
import { verifyTypedData, verifyMessage } from 'ethers/lib/utils'
1919
2020
const toHex = text =>
2121
text
@@ -71,6 +71,7 @@
7171
const ledger = ledgerModule()
7272
const keepkey = keepkeyModule()
7373
const keystone = keystoneModule()
74+
const gnosis = gnosisModule()
7475
7576
const trezorOptions = {
7677
email: 'test@test.com',
@@ -89,7 +90,8 @@
8990
injected,
9091
fortmatic,
9192
portis,
92-
torus
93+
torus,
94+
gnosis
9395
],
9496
chains: [
9597
{

‎packages/gnosis/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/gnosis",
3-
"version": "2.0.0",
3+
"version": "2.0.1",
44
"description": "Gnosis module for web3-onboard",
55
"module": "dist/index.js",
66
"browser": "dist/index.js",

‎packages/gnosis/src/index.ts

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WalletInit } from '@web3-onboard/common'
1+
import { WalletInit } from '@web3-onboard/common'
22

33
type GnosisOptions = {
44
whitelistedDomains: RegExp[]
@@ -8,38 +8,63 @@ function gnosis(options?: GnosisOptions): WalletInit {
88
const { whitelistedDomains = [/gnosis-safe.io/] } = options || {}
99

1010
return () => {
11-
return {
12-
label: 'Gnosis Safe',
13-
getIcon: async () => (await import('./icon.js')).default,
14-
getInterface: async () => {
15-
const { default: SafeAppsSDK } = await import(
16-
'@gnosis.pm/safe-apps-sdk'
17-
)
18-
19-
const { SafeAppProvider } = await import(
20-
'@gnosis.pm/safe-apps-provider'
21-
)
22-
23-
const opts = {
24-
whitelistedDomains
25-
}
11+
const loadedInIframe = window.self !== window.top
12+
13+
return loadedInIframe
14+
? {
15+
label: 'Gnosis Safe',
16+
getIcon: async () => (await import('./icon.js')).default,
17+
getInterface: async () => {
18+
const { default: SafeAppsSDK } = await import(
19+
'@gnosis.pm/safe-apps-sdk'
20+
)
21+
22+
const { SafeAppProvider } = await import(
23+
'@gnosis.pm/safe-apps-provider'
24+
)
25+
26+
const { createEIP1193Provider } = await import(
27+
'@web3-onboard/common'
28+
)
29+
30+
const SafeAppProviderConstructor =
31+
// @ts-ignore
32+
SafeAppsSDK.default || SafeAppsSDK
33+
34+
const opts = {
35+
whitelistedDomains
36+
}
37+
38+
const appsSdk = new SafeAppProviderConstructor(opts)
39+
40+
const safe = await Promise.race([
41+
appsSdk.safe.getInfo(),
42+
new Promise(resolve => setTimeout(resolve, 200))
43+
])
2644

27-
const appsSdk = new SafeAppsSDK(opts)
45+
if (!safe) {
46+
throw new Error(
47+
`App must be loaded in a Safe App context, head to <a href="https://gnosis-safe.io/app">the Gnosis Safe App<a/> and open this website as an app.`
48+
)
49+
}
2850

29-
const safe = await appsSdk.safe.getInfo()
51+
const provider = new SafeAppProvider(
52+
safe,
53+
// @ts-ignore
54+
appsSdk
55+
)
3056

31-
const provider = new SafeAppProvider(
32-
safe,
33-
// @ts-ignore
34-
appsSdk
35-
)
57+
const patchedProvider = createEIP1193Provider(provider, {
58+
eth_requestAccounts: () => Promise.resolve([safe.safeAddress])
59+
})
3660

37-
return {
38-
provider,
39-
instance: appsSdk
61+
return {
62+
provider: patchedProvider,
63+
instance: appsSdk
64+
}
65+
}
4066
}
41-
}
42-
}
67+
: []
4368
}
4469
}
4570

0 commit comments

Comments
 (0)