web3modal styling and interaction tweaks

src/components/molecules/Wallet/Details.module.css

@@ -5,10 +5,6 @@
   max-width: 25rem;
 }
 
-.details > ul {
-  margin-bottom: calc(var(--spacer) / 4);
-}
-
 .balance {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
@@ -29,7 +25,11 @@
   border-top: 1px solid var(--brand-grey-lighter);
   margin-top: calc(var(--spacer) / 2);
   padding-top: calc(var(--spacer) / 2);
-  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
 }
 
 .arrow,

src/components/molecules/Wallet/Details.tsx

@@ -5,9 +5,10 @@ import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
 import { formatNumber } from '../../../utils'
 import { connectWallet } from '../../../utils/wallet'
+import { getInjectedProviderName } from 'web3modal'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
-  const { balance, connect, logout } = useOcean()
+  const { balance, connect, logout, web3Provider } = useOcean()
   const oceanBalance = 'Hello Test'
 
   return (
@@ -20,12 +21,13 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
           <span>ETH</span> {formatNumber(Number(balance))}
         </li>
         <li className={styles.actions}>
+          <span title="Connected provider">{getInjectedProviderName()}</span>
           <Button
             style="text"
             size="small"
-            onClick={async () => {
+            onClick={() => {
-              await logout()
+              logout()
-              await connectWallet(connect)
+              connectWallet(connect)
             }}
           >
             Switch Wallet

src/components/molecules/Wallet/index.tsx

@@ -39,6 +39,7 @@ export default function Wallet(): ReactElement {
       interactive
       interactiveBorder={30}
       trigger="click focus"
+      zIndex={1}
       render={(attrs: any) => (
         <animated.div style={props}>
           <Details attrs={attrs} />

src/global/Styles.tsx

@@ -3,7 +3,6 @@ import { ToastContainer } from 'react-toastify'
 
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../global/styles.css'
-import 'react-toastify/dist/ReactToastify.css'
 
 export default function Styles({
   children

src/global/_toast.css

@@ -1,3 +1,5 @@
+@import '../../node_modules/react-toastify/dist/ReactToastify.css';
+
 div.Toastify__toast {
   font-family: var(--font-family-base);
   font-size: var(--font-size-small);

src/global/_web3modal.css

@@ -0,0 +1,68 @@
+div.web3modal-modal-lightbox {
+  background: rgba(255, 255, 255, 0.8);
+  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: var(--break-point--small);
+  border: 1px solid var(--brand-grey-lighter);
+  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);
+  animation: moveUp 0.2s ease-out backwards;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+div.web3modal-provider-wrapper {
+  border: none;
+  padding: 0;
+}
+
+div.web3modal-provider-container {
+  padding: var(--spacer);
+}
+
+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-title);
+}
+
+div.web3modal-provider-description {
+  font-size: var(--font-size-base);
+  margin-top: 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes moveUp {
+  from {
+    transform: translate3d(0, 1rem, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/global/styles.css

@@ -134,3 +134,4 @@ fieldset {
 
 @import '_code.css';
 @import '_toast.css';
+@import '_web3modal.css';

src/utils/wallet.ts

@@ -1,12 +1,21 @@
 import { OceanProviderValue } from '@oceanprotocol/react'
 import { networks, infuraProjectId } from '../../app.config'
 
+const web3ModalTheme = {
+  background: 'var(--brand-white)',
+  main: 'var(--brand-black)',
+  secondary: 'var(--brand-grey-light)',
+  border: 'var(--brand-grey-lighter)',
+  hover: 'var(--brand-grey-dimmed)'
+}
+
 export async function connectWallet(
   connect: OceanProviderValue['connect']
 ): Promise<void> {
   const { default: WalletConnectProvider } = await import(
     '@walletconnect/web3-provider'
   )
+
   const providerOptions = {
     /* See Provider Options Section */
     walletconnect: {
@@ -17,7 +26,7 @@ export async function connectWallet(
     }
   }
 
-  await connect({ cacheProvider: true, providerOptions })
+  await connect({ cacheProvider: true, providerOptions, theme: web3ModalTheme })
 }
 
 export function isCorrectNetwork(chainId: number): boolean {