oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

web3modal standalone WIP

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-01-18 15:33:53 +00:00
parent 6a1a6a7644
commit 4a7454def4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -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": {

64
src/@context/Web3.tsx
View File

@ -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.',