From 2a4c69b0e8eae724f2c51eacf15dc6b58c49fad3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 9 Feb 2023 09:18:34 +0000
Subject: [PATCH] connectkit theming

---
 src/@utils/wallet.ts | 20 +++++++++++++++++---
 src/pages/_app.tsx   | 11 ++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/@utils/wallet.ts b/src/@utils/wallet.ts
index 249b1a5ed..01b882771 100644
--- a/src/@utils/wallet.ts
+++ b/src/@utils/wallet.ts
@@ -1,7 +1,7 @@
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { createClient, erc20ABI } from 'wagmi'
 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 { 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 {
   if (!account || account === '') return
   const middle = account.substring(6, 38)
@@ -63,10 +77,10 @@ export async function getTokenBalance(
   tokenAddress: string,
   web3Provider: ethers.providers.Provider
 ): Promise<string> {
-  if (!web3Provider) return
+  if (!web3Provider || !accountId || !tokenAddress) return
 
   try {
-    const token = new ethers.Contract(tokenAddress, erc20ABI, web3Provider)
+    const token = new Contract(tokenAddress, erc20ABI, web3Provider)
     const balance = await token.balanceOf(accountId)
     const adjustedDecimalsBalance = `${balance}${'0'.repeat(18 - decimals)}`
     return formatEther(adjustedDecimalsBalance)
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f702826ec..63ae022b0 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,7 +12,7 @@ import Decimal from 'decimal.js'
 import MarketMetadataProvider from '@context/MarketMetadata'
 import { WagmiConfig } from 'wagmi'
 import { ConnectKitProvider } from 'connectkit'
-import { wagmiClient } from '@utils/wallet'
+import { connectKitTheme, wagmiClient } from '@utils/wallet'
 import Web3LegacyProvider from '@context/Web3Legacy'
 
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
@@ -23,14 +23,7 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
       <WagmiConfig client={wagmiClient}>
         <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)'
-          }}
+          customTheme={connectKitTheme}
         >
           <Web3LegacyProvider>
             <MarketMetadataProvider>