mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
connectkit theming
This commit is contained in:
parent
6c84a19570
commit
2a4c69b0e8
@ -1,7 +1,7 @@
|
|||||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||||
import { createClient, erc20ABI } from 'wagmi'
|
import { createClient, erc20ABI } from 'wagmi'
|
||||||
import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
|
import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
|
||||||
import { ethers } from 'ethers'
|
import { ethers, Contract } from 'ethers'
|
||||||
import { formatEther } from 'ethers/lib/utils'
|
import { formatEther } from 'ethers/lib/utils'
|
||||||
import { getDefaultClient } from 'connectkit'
|
import { getDefaultClient } from 'connectkit'
|
||||||
|
|
||||||
@ -14,6 +14,20 @@ export const wagmiClient = createClient(
|
|||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// ConnectKit CSS overrides
|
||||||
|
// https://docs.family.co/connectkit/theming#theme-variables
|
||||||
|
export const connectKitTheme = {
|
||||||
|
'--ck-font-family': 'var(--font-family-base)',
|
||||||
|
'--ck-border-radius': 'var(--border-radius)',
|
||||||
|
'--ck-overlay-background': 'var(--background-body-transparent)',
|
||||||
|
'--ck-body-background': 'var(--background-body)',
|
||||||
|
'--ck-body-color': 'var(--font-color-text)',
|
||||||
|
'--ck-primary-button-border-radius': 'var(--border-radius)',
|
||||||
|
'--ck-primary-button-color': 'var(--font-color-heading)',
|
||||||
|
'--ck-primary-button-background': 'var(--background-content)',
|
||||||
|
'--ck-secondary-button-border-radius': 'var(--border-radius)'
|
||||||
|
}
|
||||||
|
|
||||||
export function accountTruncate(account: string): string {
|
export function accountTruncate(account: string): string {
|
||||||
if (!account || account === '') return
|
if (!account || account === '') return
|
||||||
const middle = account.substring(6, 38)
|
const middle = account.substring(6, 38)
|
||||||
@ -63,10 +77,10 @@ export async function getTokenBalance(
|
|||||||
tokenAddress: string,
|
tokenAddress: string,
|
||||||
web3Provider: ethers.providers.Provider
|
web3Provider: ethers.providers.Provider
|
||||||
): Promise<string> {
|
): Promise<string> {
|
||||||
if (!web3Provider) return
|
if (!web3Provider || !accountId || !tokenAddress) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const token = new ethers.Contract(tokenAddress, erc20ABI, web3Provider)
|
const token = new Contract(tokenAddress, erc20ABI, web3Provider)
|
||||||
const balance = await token.balanceOf(accountId)
|
const balance = await token.balanceOf(accountId)
|
||||||
const adjustedDecimalsBalance = `${balance}${'0'.repeat(18 - decimals)}`
|
const adjustedDecimalsBalance = `${balance}${'0'.repeat(18 - decimals)}`
|
||||||
return formatEther(adjustedDecimalsBalance)
|
return formatEther(adjustedDecimalsBalance)
|
||||||
|
@ -12,7 +12,7 @@ import Decimal from 'decimal.js'
|
|||||||
import MarketMetadataProvider from '@context/MarketMetadata'
|
import MarketMetadataProvider from '@context/MarketMetadata'
|
||||||
import { WagmiConfig } from 'wagmi'
|
import { WagmiConfig } from 'wagmi'
|
||||||
import { ConnectKitProvider } from 'connectkit'
|
import { ConnectKitProvider } from 'connectkit'
|
||||||
import { wagmiClient } from '@utils/wallet'
|
import { connectKitTheme, wagmiClient } from '@utils/wallet'
|
||||||
import Web3LegacyProvider from '@context/Web3Legacy'
|
import Web3LegacyProvider from '@context/Web3Legacy'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps): ReactElement {
|
function MyApp({ Component, pageProps }: AppProps): ReactElement {
|
||||||
@ -23,14 +23,7 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
|
|||||||
<WagmiConfig client={wagmiClient}>
|
<WagmiConfig client={wagmiClient}>
|
||||||
<ConnectKitProvider
|
<ConnectKitProvider
|
||||||
options={{ initialChainId: 0 }}
|
options={{ initialChainId: 0 }}
|
||||||
customTheme={{
|
customTheme={connectKitTheme}
|
||||||
'--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>
|
<Web3LegacyProvider>
|
||||||
<MarketMetadataProvider>
|
<MarketMetadataProvider>
|
||||||
|
Loading…
Reference in New Issue
Block a user