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

wagmi + ethers + web3modal setup

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-01-18 16:11:18 +00:00
parent f0889e5edc
commit 9a4de0cab9
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 5121 additions and 1658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@ -1,4 +1,5 @@
#NEXT_PUBLIC_INFURA_PROJECT_ID="xxx"
#NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="xxx"
#NEXT_PUBLIC_MARKET_FEE_ADDRESS="0xxx"
#NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
#NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE="1"

6474
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -31,13 +31,15 @@
"@oceanprotocol/use-dark-mode": "^2.4.3",
"@tippyjs/react": "^4.2.6",
"@urql/exchange-refocus": "^1.0.0",
"@walletconnect/web3-provider": "^1.8.0",
"@web3modal/ethereum": "^2.0.0-rc.3",
"@web3modal/react": "^2.0.0-rc.3",
"axios": "^1.2.0",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
"decimal.js": "^10.4.2",
"dom-confetti": "^0.2.2",
"dotenv": "^16.0.3",
"ethers": "^5.7.2",
"filesize": "^10.0.5",
"formik": "^2.2.9",
"gray-matter": "^4.0.3",
@ -66,8 +68,8 @@
"slugify": "^1.6.5",
"swr": "^1.3.0",
"urql": "^3.0.3",
"wagmi": "^0.10.11",
"web3": "^1.8.1",
"web3modal": "^1.9.10",
"yup": "^0.32.11"
},
"devDependencies": {

222
src/@context/Web3.tsx
View File

@ -8,11 +8,11 @@ import React, {
useCallback
} from 'react'
import Web3 from 'web3'
import Web3Modal, { getProviderInfo, IProviderInfo } from 'web3modal'
import { infuraProjectId as infuraId } from '../../app.config'
import WalletConnectProvider from '@walletconnect/web3-provider'
// import Web3Modal, { getProviderInfo, IProviderInfo } from 'web3modal'
// import { infuraProjectId as infuraId } from '../../app.config'
// import WalletConnectProvider from '@walletconnect/web3-provider'
import { LoggerInstance } from '@oceanprotocol/lib'
import { isBrowser } from '@utils/index'
// import { isBrowser } from '@utils/index'
import { getEnsProfile } from '@utils/ens'
import useNetworkMetadata, {
getNetworkDataById,
@ -27,9 +27,9 @@ import { getOpcsApprovedTokens } from '@utils/subgraph'
interface Web3ProviderValue {
web3: Web3
// eslint-disable-next-line @typescript-eslint/no-explicit-any
web3Provider: any
web3Modal: Web3Modal
web3ProviderInfo: IProviderInfo
// web3Provider: any
// web3Modal: Web3Modal
// web3ProviderInfo: IProviderInfo
accountId: string
accountEns: string
accountEnsAvatar: string
@ -43,38 +43,38 @@ interface Web3ProviderValue {
web3Loading: boolean
isSupportedOceanNetwork: boolean
approvedBaseTokens: TokenInfo[]
connect: () => Promise<void>
logout: () => Promise<void>
// connect: () => Promise<void>
// 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'
}
}
}
}
: {}
// 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
}
// export const web3ModalOpts = {
// cacheProvider: true,
// providerOptions,
// theme: web3ModalTheme
// }
const refreshInterval = 20000 // 20 sec.
@ -88,8 +88,8 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [web3Provider, setWeb3Provider] = useState<any>()
const [web3Modal, setWeb3Modal] = useState<Web3Modal>()
const [web3ProviderInfo, setWeb3ProviderInfo] = useState<IProviderInfo>()
// const [web3Modal, setWeb3Modal] = useState<Web3Modal>()
// const [web3ProviderInfo, setWeb3ProviderInfo] = useState<IProviderInfo>()
const [networkId, setNetworkId] = useState<number>()
const [chainId, setChainId] = useState<number>()
const [networkDisplayName, setNetworkDisplayName] = useState<string>()
@ -109,39 +109,39 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
// -----------------------------------
// Helper: connect to web3
// -----------------------------------
const connect = useCallback(async () => {
if (!web3Modal) {
setWeb3Loading(false)
return
}
try {
setWeb3Loading(true)
LoggerInstance.log('[web3] Connecting Web3...')
// const connect = useCallback(async () => {
// if (!web3Modal) {
// setWeb3Loading(false)
// return
// }
// try {
// setWeb3Loading(true)
// LoggerInstance.log('[web3] Connecting Web3...')
const provider = await web3Modal?.connect()
setWeb3Provider(provider)
// const provider = await web3Modal?.connect()
// setWeb3Provider(provider)
const web3 = new Web3(provider)
setWeb3(web3)
LoggerInstance.log('[web3] Web3 created.', web3)
// const web3 = new Web3(provider)
// setWeb3(web3)
// LoggerInstance.log('[web3] Web3 created.', web3)
const networkId = await web3.eth.net.getId()
setNetworkId(networkId)
LoggerInstance.log('[web3] network id ', networkId)
// const networkId = await web3.eth.net.getId()
// setNetworkId(networkId)
// LoggerInstance.log('[web3] network id ', networkId)
const chainId = await web3.eth.getChainId()
setChainId(chainId)
LoggerInstance.log('[web3] chain id ', chainId)
// const chainId = await web3.eth.getChainId()
// setChainId(chainId)
// LoggerInstance.log('[web3] chain id ', chainId)
const accountId = (await web3.eth.getAccounts())[0]
setAccountId(accountId)
LoggerInstance.log('[web3] account id', accountId)
} catch (error) {
LoggerInstance.error('[web3] Error: ', error.message)
} finally {
setWeb3Loading(false)
}
}, [web3Modal])
// const accountId = (await web3.eth.getAccounts())[0]
// setAccountId(accountId)
// LoggerInstance.log('[web3] account id', accountId)
// } catch (error) {
// LoggerInstance.error('[web3] Error: ', error.message)
// } finally {
// setWeb3Loading(false)
// }
// }, [web3Modal])
// -----------------------------------
// Helper: Get approved base tokens list
@ -229,39 +229,39 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
// -----------------------------------
// Create initial Web3Modal instance
// -----------------------------------
useEffect(() => {
if (web3Modal) {
setWeb3Loading(false)
return
}
// useEffect(() => {
// if (web3Modal) {
// setWeb3Loading(false)
// return
// }
async function init() {
// note: needs artificial await here so the log message is reached and output
const web3ModalInstance = await new Web3Modal(web3ModalOpts)
setWeb3Modal(web3ModalInstance)
LoggerInstance.log(
'[web3] Web3Modal instance created.',
web3ModalInstance
)
}
init()
}, [connect, web3Modal])
// async function init() {
// // note: needs artificial await here so the log message is reached and output
// const web3ModalInstance = await new Web3Modal(web3ModalOpts)
// setWeb3Modal(web3ModalInstance)
// LoggerInstance.log(
// '[web3] Web3Modal instance created.',
// web3ModalInstance
// )
// }
// init()
// }, [connect, web3Modal])
// -----------------------------------
// Reconnect automatically for returning users
// -----------------------------------
useEffect(() => {
if (!web3Modal?.cachedProvider) return
// useEffect(() => {
// if (!web3Modal?.cachedProvider) return
async function connectCached() {
LoggerInstance.log(
'[web3] Connecting to cached provider: ',
web3Modal.cachedProvider
)
await connect()
}
connectCached()
}, [connect, web3Modal])
// async function connectCached() {
// LoggerInstance.log(
// '[web3] Connecting to cached provider: ',
// web3Modal.cachedProvider
// )
// await connect()
// }
// connectCached()
// }, [connect, web3Modal])
// -----------------------------------
// Get and set approved base tokens list
@ -336,25 +336,25 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
// -----------------------------------
// Workaround cause getInjectedProviderName() always returns `MetaMask`
// https://github.com/oceanprotocol/market/issues/332
useEffect(() => {
if (!web3Provider) return
// useEffect(() => {
// if (!web3Provider) return
const providerInfo = getProviderInfo(web3Provider)
setWeb3ProviderInfo(providerInfo)
}, [web3Provider])
// const providerInfo = getProviderInfo(web3Provider)
// setWeb3ProviderInfo(providerInfo)
// }, [web3Provider])
// -----------------------------------
// Logout helper
// -----------------------------------
async function logout() {
/* eslint-disable @typescript-eslint/no-explicit-any */
if ((web3?.currentProvider as any)?.close) {
await (web3.currentProvider as any).close()
}
/* eslint-enable @typescript-eslint/no-explicit-any */
// async function logout() {
// /* eslint-disable @typescript-eslint/no-explicit-any */
// if ((web3?.currentProvider as any)?.close) {
// await (web3.currentProvider as any).close()
// }
// /* eslint-enable @typescript-eslint/no-explicit-any */
await web3Modal.clearCachedProvider()
}
// await web3Modal.clearCachedProvider()
// }
// -----------------------------------
// Get valid Networks and set isSupportedOceanNetwork
// -----------------------------------
@ -408,9 +408,9 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
<Web3Context.Provider
value={{
web3,
web3Provider,
web3Modal,
web3ProviderInfo,
// web3Provider,
// web3Modal,
// web3ProviderInfo,
accountId,
accountEns,
accountEnsAvatar,
@ -423,9 +423,9 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
isTestnet,
web3Loading,
isSupportedOceanNetwork,
approvedBaseTokens,
connect,
logout
approvedBaseTokens
// connect,
// logout
}}
>
{children}

27
src/@utils/web3.ts
View File

@ -4,6 +4,33 @@ import Web3 from 'web3'
import { getOceanConfig } from './ocean'
import { AbiItem } from 'web3-utils/types'
import {
EthereumClient,
modalConnectors,
walletConnectProvider
} from '@web3modal/ethereum'
import { configureChains, createClient } from 'wagmi'
import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
export const chains = [mainnet, polygon, bsc, goerli, polygonMumbai]
// Wagmi client
export const { provider } = configureChains(chains, [
walletConnectProvider({
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
})
])
export const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({ appName: 'Ocean Market', chains }),
provider
})
// Web3Modal Ethereum Client
export const ethereumClient = new EthereumClient(wagmiClient, chains)
export function accountTruncate(account: string): string {
if (!account || account === '') return
const middle = account.substring(6, 38)

15
src/pages/_app.tsx
View File

@ -1,23 +1,27 @@
// import App from "next/app";
import React, { ReactElement } from 'react'
import type { AppProps /*, AppContext */ } from 'next/app'
import Web3Provider from '@context/Web3'
import { UserPreferencesProvider } from '@context/UserPreferences'
import PricesProvider from '@context/Prices'
import UrqlProvider from '@context/UrqlProvider'
import ConsentProvider from '@context/CookieConsent'
import App from '../../src/components/App'
import '@oceanprotocol/typographies/css/ocean-typo.css'
import '../stylesGlobal/styles.css'
import Decimal from 'decimal.js'
import MarketMetadataProvider from '@context/MarketMetadata'
import { WagmiConfig } from 'wagmi'
import { Web3Modal } from '@web3modal/react'
import { wagmiClient, ethereumClient } from '@utils/web3'
import Web3Provider from '@context/Web3'
function MyApp({ Component, pageProps }: AppProps): ReactElement {
Decimal.set({ rounding: 1 })
return (
<>
<MarketMetadataProvider>
<Web3Provider>
<WagmiConfig client={wagmiClient}>
<UrqlProvider>
<UserPreferencesProvider>
<PricesProvider>
@ -29,8 +33,15 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
</PricesProvider>
</UserPreferencesProvider>
</UrqlProvider>
</WagmiConfig>
</Web3Provider>
</MarketMetadataProvider>
<Web3Modal
projectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
ethereumClient={ethereumClient}
/>
</>
)
}