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

switch to ConnectKit

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-02-06 17:01:22 +00:00
parent b292ef664b
commit 6c84a19570
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 626 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

797
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -31,10 +31,9 @@
"@oceanprotocol/use-dark-mode": "^2.4.3",
"@tippyjs/react": "^4.2.6",
"@urql/exchange-refocus": "^1.0.0",
"@web3modal/ethereum": "^2.1.1",
"@web3modal/react": "^2.1.1",
"axios": "^1.2.0",
"classnames": "^2.3.2",
"connectkit": "^1.1.3",
"date-fns": "^2.29.3",
"decimal.js": "^10.4.2",
"dom-confetti": "^0.2.2",
@ -68,7 +67,7 @@
"slugify": "^1.6.5",
"swr": "^1.3.0",
"urql": "^3.0.3",
"wagmi": "^0.11.4",
"wagmi": "^0.10.5",
"yup": "^0.32.11"
},
"devDependencies": {

39
src/@utils/wallet.ts
View File

@ -1,41 +1,18 @@
import { LoggerInstance } from '@oceanprotocol/lib'
import {
EthereumClient,
modalConnectors,
walletConnectProvider
} from '@web3modal/ethereum'
import { configureChains, createClient, erc20ABI } from 'wagmi'
import { createClient, erc20ABI } from 'wagmi'
import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import { infuraProvider } from 'wagmi/providers/infura'
import { ethers } from 'ethers'
import { formatEther } from 'ethers/lib/utils'
import { getDefaultClient } from 'connectkit'
// Wagmi client
export const { chains, provider } = configureChains(
[mainnet, polygon, bsc, goerli, polygonMumbai],
[
walletConnectProvider({
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
}),
infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID }),
publicProvider()
]
)
export const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({
export const wagmiClient = createClient(
getDefaultClient({
appName: 'Ocean Market',
version: '2',
projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
chains
}),
provider
})
// Web3Modal Ethereum Client
export const ethereumClient = new EthereumClient(wagmiClient, chains)
infuraId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID,
chains: [mainnet, polygon, bsc, goerli, polygonMumbai]
})
)
export function accountTruncate(account: string): string {
if (!account || account === '') return

9
src/components/Header/Wallet/Account.tsx
View File

@ -4,26 +4,25 @@ import { accountTruncate } from '@utils/wallet'
// import Loader from '@shared/atoms/Loader'
import styles from './Account.module.css'
import Avatar from '@shared/atoms/Avatar'
import { useAccount, useProvider, useEnsName, useEnsAvatar } from 'wagmi'
import { useWeb3Modal } from '@web3modal/react'
import { useAccount, useEnsName, useEnsAvatar } from 'wagmi'
import { useModal } from 'connectkit'
// Forward ref for Tippy.js
// eslint-disable-next-line
const Account = React.forwardRef((props, ref: any) => {
// const provider = useProvider()
const { address: accountId } = useAccount()
const { data: accountEns } = useEnsName({ address: accountId, chainId: 1 })
const { data: accountEnsAvatar } = useEnsAvatar({
address: accountId,
chainId: 1
})
const { open } = useWeb3Modal()
const { setOpen } = useModal()
async function handleActivation(e: FormEvent<HTMLButtonElement>) {
// prevent accidentially submitting a form the button might be in
e.preventDefault()
await open()
setOpen(true)
}
// return

11
src/components/Header/Wallet/Details.tsx
View File

@ -5,18 +5,17 @@ import Button from '@shared/atoms/Button'
import AddToken from '@shared/AddToken'
import Conversion from '@shared/Price/Conversion'
import { getOceanConfig } from '@utils/ocean'
import { useNetwork, useProvider, useDisconnect, useAccount } from 'wagmi'
import { useNetwork, useDisconnect, useAccount } from 'wagmi'
import { useModal } from 'connectkit'
import styles from './Details.module.css'
import useBalance from '@hooks/useBalance'
import { useWeb3Modal } from '@web3modal/react'
import useNetworkMetadata from '@hooks/useNetworkMetadata'
export default function Details(): ReactElement {
const { chain } = useNetwork()
const { connector: activeConnector, isConnected } = useAccount()
const { open: openWeb3Modal } = useWeb3Modal()
const { connector: activeConnector } = useAccount()
const { setOpen } = useModal()
const { disconnect } = useDisconnect()
const provider = useProvider()
const { balance } = useBalance()
const { networkData } = useNetworkMetadata()
const { locale } = useUserPreferences()
@ -78,7 +77,7 @@ export default function Details(): ReactElement {
)}
</div>
<p>
<Button style="text" size="small" onClick={() => openWeb3Modal()}>
<Button style="text" size="small" onClick={() => setOpen(true)}>
Switch Wallet
</Button>
<Button

54
src/pages/_app.tsx
View File

@ -11,38 +11,44 @@ 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/wallet'
import { ConnectKitProvider } from 'connectkit'
import { wagmiClient } from '@utils/wallet'
import Web3LegacyProvider from '@context/Web3Legacy'
function MyApp({ Component, pageProps }: AppProps): ReactElement {
Decimal.set({ rounding: 1 })
return (
<>
<WagmiConfig client={wagmiClient}>
<Web3LegacyProvider>
<MarketMetadataProvider>
<UrqlProvider>
<UserPreferencesProvider>
<PricesProvider>
<ConsentProvider>
<App>
<Component {...pageProps} />
</App>
</ConsentProvider>
</PricesProvider>
</UserPreferencesProvider>
</UrqlProvider>
</MarketMetadataProvider>
</Web3LegacyProvider>
<ConnectKitProvider
options={{ initialChainId: 0 }}
customTheme={{
'--ck-font-family': 'var(--font-family-base)',
'--ck-border-radius': 'var(--border-radius)',
'--ck-primary-button-border-radius': 'var(--border-radius)',
'--ck-primary-button-color': 'var(--text-color)',
'--ck-primary-button-background': 'var(--brand-grey-dimmed)',
'--ck-secondary-button-border-radius': 'var(--border-radius)'
}}
>
<Web3LegacyProvider>
<MarketMetadataProvider>
<UrqlProvider>
<UserPreferencesProvider>
<PricesProvider>
<ConsentProvider>
<App>
<Component {...pageProps} />
</App>
</ConsentProvider>
</PricesProvider>
</UserPreferencesProvider>
</UrqlProvider>
</MarketMetadataProvider>
</Web3LegacyProvider>
</ConnectKitProvider>
</WagmiConfig>
<Web3Modal
projectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
ethereumClient={ethereumClient}
themeColor="blackWhite"
themeBackground="themeColor"
/>
</>
)
}

151
src/stylesGlobal/_web3modal.css
View File

@ -1,151 +0,0 @@
div.web3modal-modal-lightbox,
div.walletconnect-qrcode__base {
background: var(--background-body-transparent);
backdrop-filter: blur(3px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: fadeIn 0.2s ease-out backwards;
}
div.web3modal-modal-card {
border-radius: var(--border-radius);
padding: var(--spacer);
margin: var(--spacer) auto;
max-width: 100%;
border: 1px solid var(--border-color);
box-shadow: 0 6px 15px 0 var(--box-shadow-color);
animation: moveUp 0.2s ease-out backwards;
grid-template-columns: 1fr;
}
div.web3modal-provider-wrapper {
border: 0;
border-bottom: 1px solid var(--border-color);
padding: 0;
}
div.web3modal-provider-wrapper:last-child {
border-bottom: 0;
}
div.web3modal-provider-container {
border-radius: 0;
padding: var(--spacer);
}
@media (min-width: 40rem) {
div.web3modal-modal-card {
grid-template-columns: 1fr 1fr;
max-width: var(--break-point--small);
}
div.web3modal-provider-wrapper {
border-bottom: 0;
}
div.web3modal-provider-wrapper:nth-child(1),
div.web3modal-provider-wrapper:nth-child(2) {
border-bottom: 1px solid var(--border-color);
}
div.web3modal-provider-wrapper:nth-child(2n + 1) {
border-right: 1px solid var(--border-color);
}
}
div.web3modal-provider-icon {
filter: grayscale(1) contrast(150%);
transition: filter 0.2s ease-out;
}
div.web3modal-provider-wrapper:hover div.web3modal-provider-icon {
filter: none;
}
div.web3modal-provider-name {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
font-family: var(--font-family-heading);
}
div.web3modal-provider-description {
font-size: var(--font-size-base);
margin-top: 0;
}
div.walletconnect-modal__base {
background: var(--background-body);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: 0 6px 17px 0 var(--box-shadow-color);
}
div.walletconnect-modal__mobile__toggle {
width: 95%;
text-transform: uppercase;
cursor: pointer;
background: var(--background-body);
border: 1px solid var(--border-color);
}
div.walletconnect-modal__mobile__toggle a {
color: var(--color-secondary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
padding: calc(var(--spacer) / 12) var(--spacer);
white-space: nowrap;
}
div.walletconnect-modal__mobile__toggle_selector {
background: var(--font-color-heading);
color: var(--background-body);
border-color: var(--font-color-heading);
height: calc(100% - calc(var(--spacer) / 12));
top: calc(var(--spacer) / 24);
}
div.walletconnect-modal__header p {
color: var(--font-color-heading);
}
p.walletconnect-qrcode__text {
color: var(--color-secondary);
}
h3.walletconnect-modal__base__row__h3 {
font-size: var(--font-size-base);
color: var(--font-color-text);
}
svg.walletconnect-qrcode__image path:first-child {
fill: var(--background-body);
}
svg.walletconnect-qrcode__image path:last-child {
stroke: var(--font-color-heading);
}
#torusIframe {
z-index: 3;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes moveUp {
from {
transform: translate3d(0, 1rem, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}

1
src/stylesGlobal/styles.css
View File

@ -157,7 +157,6 @@ table th {
@import '_code.css';
@import '_toast.css';
@import '_web3modal.css';
/* prevent background scrolling */
.ReactModal__Body--open {