mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
web3modal standalone WIP
This commit is contained in:
parent
6a1a6a7644
commit
4a7454def4
2
package-lock.json
generated
2
package-lock.json
generated
@ -83442,4 +83442,4 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -31,7 +31,8 @@
|
|||||||
"@oceanprotocol/use-dark-mode": "^2.4.3",
|
"@oceanprotocol/use-dark-mode": "^2.4.3",
|
||||||
"@tippyjs/react": "^4.2.6",
|
"@tippyjs/react": "^4.2.6",
|
||||||
"@urql/exchange-refocus": "^1.0.0",
|
"@urql/exchange-refocus": "^1.0.0",
|
||||||
"@walletconnect/web3-provider": "^1.8.0",
|
"@walletconnect/sign-client": "^2.1.4",
|
||||||
|
"@web3modal/standalone": "^2.0.0-beta.8",
|
||||||
"axios": "^1.2.0",
|
"axios": "^1.2.0",
|
||||||
"classnames": "^2.3.2",
|
"classnames": "^2.3.2",
|
||||||
"date-fns": "^2.29.3",
|
"date-fns": "^2.29.3",
|
||||||
@ -67,7 +68,6 @@
|
|||||||
"swr": "^1.3.0",
|
"swr": "^1.3.0",
|
||||||
"urql": "^3.0.3",
|
"urql": "^3.0.3",
|
||||||
"web3": "^1.8.1",
|
"web3": "^1.8.1",
|
||||||
"web3modal": "^1.9.10",
|
|
||||||
"yup": "^0.32.11"
|
"yup": "^0.32.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -8,9 +8,8 @@ import React, {
|
|||||||
useCallback
|
useCallback
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import Web3 from 'web3'
|
import Web3 from 'web3'
|
||||||
import Web3Modal, { getProviderInfo, IProviderInfo } from 'web3modal'
|
import { Web3Modal } from '@web3modal/standalone'
|
||||||
import { infuraProjectId as infuraId } from '../../app.config'
|
import { infuraProjectId as infuraId } from '../../app.config'
|
||||||
import WalletConnectProvider from '@walletconnect/web3-provider'
|
|
||||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||||
import { isBrowser } from '@utils/index'
|
import { isBrowser } from '@utils/index'
|
||||||
import { getEnsProfile } from '@utils/ens'
|
import { getEnsProfile } from '@utils/ens'
|
||||||
@ -29,7 +28,7 @@ interface Web3ProviderValue {
|
|||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
web3Provider: any
|
web3Provider: any
|
||||||
web3Modal: Web3Modal
|
web3Modal: Web3Modal
|
||||||
web3ProviderInfo: IProviderInfo
|
// web3ProviderInfo: IProviderInfo
|
||||||
accountId: string
|
accountId: string
|
||||||
accountEns: string
|
accountEns: string
|
||||||
accountEnsAvatar: string
|
accountEnsAvatar: string
|
||||||
@ -47,34 +46,28 @@ interface Web3ProviderValue {
|
|||||||
logout: () => Promise<void>
|
logout: () => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
const web3ModalTheme = {
|
// const web3ModalTheme = {
|
||||||
background: 'var(--background-body)',
|
// background: 'var(--background-body)',
|
||||||
main: 'var(--font-color-heading)',
|
// main: 'var(--font-color-heading)',
|
||||||
secondary: 'var(--brand-grey-light)',
|
// secondary: 'var(--brand-grey-light)',
|
||||||
border: 'var(--border-color)',
|
// border: 'var(--border-color)',
|
||||||
hover: 'var(--background-highlight)'
|
// hover: 'var(--background-highlight)'
|
||||||
}
|
// }
|
||||||
|
|
||||||
const providerOptions = isBrowser
|
// const providerOptions = isBrowser
|
||||||
? {
|
// ? {
|
||||||
walletconnect: {
|
// walletconnect: {
|
||||||
package: WalletConnectProvider,
|
// package: WalletConnectProvider,
|
||||||
options: {
|
// options: {
|
||||||
infuraId,
|
// infuraId,
|
||||||
rpc: {
|
// rpc: {
|
||||||
137: 'https://polygon-rpc.com',
|
// 137: 'https://polygon-rpc.com',
|
||||||
80001: 'https://rpc-mumbai.matic.today'
|
// 80001: 'https://rpc-mumbai.matic.today'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
: {}
|
// : {}
|
||||||
|
|
||||||
export const web3ModalOpts = {
|
|
||||||
cacheProvider: true,
|
|
||||||
providerOptions,
|
|
||||||
theme: web3ModalTheme
|
|
||||||
}
|
|
||||||
|
|
||||||
const refreshInterval = 20000 // 20 sec.
|
const refreshInterval = 20000 // 20 sec.
|
||||||
|
|
||||||
@ -118,7 +111,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
|
|||||||
setWeb3Loading(true)
|
setWeb3Loading(true)
|
||||||
LoggerInstance.log('[web3] Connecting Web3...')
|
LoggerInstance.log('[web3] Connecting Web3...')
|
||||||
|
|
||||||
const provider = await web3Modal?.connect()
|
const provider = await web3Modal?.openModal()
|
||||||
setWeb3Provider(provider)
|
setWeb3Provider(provider)
|
||||||
|
|
||||||
const web3 = new Web3(provider)
|
const web3 = new Web3(provider)
|
||||||
@ -237,7 +230,14 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
|
|||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
// note: needs artificial await here so the log message is reached and output
|
// note: needs artificial await here so the log message is reached and output
|
||||||
const web3ModalInstance = await new Web3Modal(web3ModalOpts)
|
const web3Modal = new Web3Modal({
|
||||||
|
projectId: '<YOUR_PROJECT_ID>',
|
||||||
|
standaloneChains: ['eip155:1'],
|
||||||
|
theme: web3ModalTheme
|
||||||
|
})
|
||||||
|
const signClient = await SignClient.init({
|
||||||
|
projectId: '<YOUR_PROJECT_ID>'
|
||||||
|
})
|
||||||
setWeb3Modal(web3ModalInstance)
|
setWeb3Modal(web3ModalInstance)
|
||||||
LoggerInstance.log(
|
LoggerInstance.log(
|
||||||
'[web3] Web3Modal instance created.',
|
'[web3] Web3Modal instance created.',
|
||||||
|
Loading…
Reference in New Issue
Block a user