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",
"@tippyjs/react": "^4.2.6",
"@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",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
@ -67,7 +68,6 @@
"swr": "^1.3.0",
"urql": "^3.0.3",
"web3": "^1.8.1",
"web3modal": "^1.9.10",
"yup": "^0.32.11"
},
"devDependencies": {

64
src/@context/Web3.tsx
View File

@ -8,9 +8,8 @@ import React, {
useCallback
} from 'react'
import Web3 from 'web3'
import Web3Modal, { getProviderInfo, IProviderInfo } from 'web3modal'
import { Web3Modal } from '@web3modal/standalone'
import { infuraProjectId as infuraId } from '../../app.config'
import WalletConnectProvider from '@walletconnect/web3-provider'
import { LoggerInstance } from '@oceanprotocol/lib'
import { isBrowser } from '@utils/index'
import { getEnsProfile } from '@utils/ens'
@ -29,7 +28,7 @@ interface Web3ProviderValue {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
web3Provider: any
web3Modal: Web3Modal
web3ProviderInfo: IProviderInfo
// web3ProviderInfo: IProviderInfo
accountId: string
accountEns: string
accountEnsAvatar: string
@ -47,34 +46,28 @@ interface Web3ProviderValue {
logout: () => Promise<void>
}
const web3ModalTheme = {
background: 'var(--background-body)',
main: 'var(--font-color-heading)',
secondary: 'var(--brand-grey-light)',
border: 'var(--border-color)',
hover: 'var(--background-highlight)'
}
// const web3ModalTheme = {
// background: 'var(--background-body)',
// main: 'var(--font-color-heading)',
// secondary: 'var(--brand-grey-light)',
// border: 'var(--border-color)',
// hover: 'var(--background-highlight)'
// }
const providerOptions = isBrowser
? {
walletconnect: {
package: WalletConnectProvider,
options: {
infuraId,
rpc: {
137: 'https://polygon-rpc.com',
80001: 'https://rpc-mumbai.matic.today'
}
}
}
}
: {}
export const web3ModalOpts = {
cacheProvider: true,
providerOptions,
theme: web3ModalTheme
}
// const providerOptions = isBrowser
// ? {
// walletconnect: {
// package: WalletConnectProvider,
// options: {
// infuraId,
// rpc: {
// 137: 'https://polygon-rpc.com',
// 80001: 'https://rpc-mumbai.matic.today'
// }
// }
// }
// }
// : {}
const refreshInterval = 20000 // 20 sec.
@ -118,7 +111,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
setWeb3Loading(true)
LoggerInstance.log('[web3] Connecting Web3...')
const provider = await web3Modal?.connect()
const provider = await web3Modal?.openModal()
setWeb3Provider(provider)
const web3 = new Web3(provider)
@ -237,7 +230,14 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
async function init() {
// 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)
LoggerInstance.log(
'[web3] Web3Modal instance created.',