Merge pull request #1110 from yieldprotocol/feat/ChainColors

adding in colors for different chains

src/components/NetworkBanner.tsx

@@ -33,7 +33,7 @@ const NetworkBanner = () => {
   if (!ethBalance || !currentChainInfo || (ethBalance && ethBalance.gt(ZERO_BN))) return null;
 
   return SHOWABLE_CHAINS.includes(chain.id) && show ? (
-    <StyledBox pad="small" background={{ opacity: 0.9 }} round gap="small">
+    <StyledBox pad="small" background={{ color: chain.iconBackground, opacity: 0.9 }} round gap="small">
       <Box direction="row" justify="between">
         <Box>Yield on {chain.name}</Box>
         <Button onClick={() => setShow(false)}>

src/config/customChains.ts

@@ -0,0 +1,14 @@
+import { Chain } from '@rainbow-me/rainbowkit'
+import { mainnet, arbitrum } from 'wagmi/chains'
+
+export const defaultChains: Chain[] = [
+    {
+        ...mainnet,
+        iconBackground: '#29b6af'
+    },
+    {
+        ...arbitrum,
+        iconBackground: '#1F2937'
+    }
+]
+

src/contexts/ProviderContext.tsx

@@ -1,9 +1,9 @@
 import { WagmiConfig, createClient, configureChains } from 'wagmi';
-import { mainnet, arbitrum } from 'wagmi/chains';
 import { alchemyProvider } from 'wagmi/providers/alchemy';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
 import { ReactNode, useContext } from 'react';
 import { SettingsContext } from './SettingsContext';
+import { defaultChains } from '../config/customChains';
 
 import {
   darkTheme,
@@ -58,7 +58,7 @@ const ProviderContext = ({ children }: { children: ReactNode }) => {
 
   // Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)
   const { chains, provider } = configureChains(
-    [mainnet, arbitrum], // [chain.mainnet, chain.arbitrum, chain.localhost, chain.foundry],
+    defaultChains, // [chain.mainnet, chain.arbitrum, chain.localhost, chain.foundry],
     [...chainConfig] // , publicProvider() ] // defaults to public if all else fails
   );