From 73ed64aca51ada2ce754cef00f3c89dc5669e55d Mon Sep 17 00:00:00 2001
From: Simonas Karuzas <simonas@not.cat>
Date: Mon, 16 Oct 2023 10:37:55 +0300
Subject: [PATCH] feat: move web3 connect to the top bar (#189)

---
 .../agent-explore/src/context/ThemeProvider.tsx    |  4 ++++
 .../src/context/web3/VeramoWeb3Provider.tsx        | 10 +++++++++-
 packages/agent-explore/src/layout/Layout.tsx       |  4 +---
 .../agent-explore/src/pages/settings/Agents.tsx    |  1 +
 packages/agent-explore/src/pages/settings/Web3.tsx | 14 --------------
 .../src/plugins/identifiers/ManagedIdentifiers.tsx |  2 +-
 6 files changed, 16 insertions(+), 19 deletions(-)
 delete mode 100644 packages/agent-explore/src/pages/settings/Web3.tsx

diff --git a/packages/agent-explore/src/context/ThemeProvider.tsx b/packages/agent-explore/src/context/ThemeProvider.tsx
index 615b35ee..2f4b5084 100644
--- a/packages/agent-explore/src/context/ThemeProvider.tsx
+++ b/packages/agent-explore/src/context/ThemeProvider.tsx
@@ -2,6 +2,7 @@ import { ConfigProvider, theme as antdTheme, App } from 'antd'
 import { ProConfigProvider } from '@ant-design/pro-components'
 import React, { createContext, useState, useEffect, useContext } from 'react'
 import en_US from 'antd/es/locale/en_US'
+import { useWeb3ModalTheme } from '@web3modal/wagmi/react'
 
 const ThemeContext = createContext<any>({})
 
@@ -28,6 +29,7 @@ function getStoredPrimaryColor(): string {
 }
 
 const ThemeProvider = (props: any) => {
+  const { setThemeMode } = useWeb3ModalTheme()
   const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(
     getSystemTheme(),
   )
@@ -94,6 +96,8 @@ const ThemeProvider = (props: any) => {
     algorithm.push(antdTheme.compactAlgorithm)
   }
 
+  setThemeMode(isDark ? 'dark' : 'light')
+
   return (
     <ThemeContext.Provider
       value={{ theme, switchTheme, isCompact, setIsCompact, primaryColor, switchPrimaryColor }}
diff --git a/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx b/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx
index 51ae085f..95dcafeb 100644
--- a/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx
+++ b/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx
@@ -7,6 +7,7 @@ import { IdentifierProfilePlugin } from '@veramo-community/agent-explorer-plugin
 
 import { useAccount, useNetwork } from 'wagmi'
 import { useEthersProvider } from './wagmi'
+import { useQueryClient } from 'react-query'
 
 export const VeramoWeb3Provider = ({
   children,
@@ -20,6 +21,7 @@ export const VeramoWeb3Provider = ({
   const [web3agent, setWeb3Agent] = useState<TAgent<IResolver>>()
   const [preConfiguredAgents, setPreConfiguredAgents] =
     useState<Array<TAgent<IResolver>>>()
+  const queryClient = useQueryClient()
 
   const { address, isConnected } = useAccount()
   const { chain } = useNetwork()
@@ -43,7 +45,13 @@ export const VeramoWeb3Provider = ({
       })
     }
     void createWeb3Agent({ connectors }).then(setWeb3Agent)
-
+    queryClient.invalidateQueries({ 
+      queryKey: [
+        'identifiers', 
+        { agentId: 'web3Agent'}
+      ] 
+    })
+    console.log('invalidateQueries')
     return () => {
       setWeb3Agent(undefined)
     }
diff --git a/packages/agent-explore/src/layout/Layout.tsx b/packages/agent-explore/src/layout/Layout.tsx
index 72cfa7e4..66751c17 100644
--- a/packages/agent-explore/src/layout/Layout.tsx
+++ b/packages/agent-explore/src/layout/Layout.tsx
@@ -8,7 +8,6 @@ import { usePlugins } from '@veramo-community/agent-explorer-plugin'
 import { Landing } from '../pages/Landing'
 import { Appearance } from '../pages/settings/Appearance'
 import { Plugins } from '../pages/settings/Plugins'
-import { Web3 } from '../pages/settings/Web3'
 import { Version } from '../pages/settings/Version'
 import { Agents } from '../pages/settings/Agents'
 import { useTheme } from '../context/ThemeProvider'
@@ -28,7 +27,6 @@ const Layout = () => {
 
   const availableMethods = agent?.availableMethods() || []
 
-
   const uri =
     agent?.context?.name &&
     GRAVATAR_URI + md5(agent?.context?.name) + '?s=200&d=retro'
@@ -85,6 +83,7 @@ const Layout = () => {
       <ProLayout
         contentWidth="Fixed"
         title={false}
+        actionsRender={() => [<w3m-button size='sm' balance='hide'/>]}
 
         colorPrimary={primaryColor}
         // collapsed={collapsed}
@@ -139,7 +138,6 @@ const Layout = () => {
           <Route path="/settings/agents/:schema" element={<Agents />} />
           <Route path="/settings/appearance" element={<Appearance />} />
           <Route path="/settings/plugins" element={<Plugins />} />
-          <Route path="/settings/web3" element={<Web3 />} />
           <Route path="/settings/version" element={<Version />} />
           {plugins.map((plugin) => {
             if (plugin.config?.enabled && plugin.routes) {
diff --git a/packages/agent-explore/src/pages/settings/Agents.tsx b/packages/agent-explore/src/pages/settings/Agents.tsx
index f3068600..7ea31760 100644
--- a/packages/agent-explore/src/pages/settings/Agents.tsx
+++ b/packages/agent-explore/src/pages/settings/Agents.tsx
@@ -40,6 +40,7 @@ export const Agents = () => {
           avatar: agent?.context?.name && GRAVATAR_URI + md5(agent?.context?.name) + '?s=200&d=retro',
           title: agent.context.name || 'Empty',
           actions: [
+            agent.context.id === 'web3Agent' && <w3m-network-button />,
             agent.context.id !== 'web3Agent' && <Button
               icon={<DeleteOutlined />}
               type='text'
diff --git a/packages/agent-explore/src/pages/settings/Web3.tsx b/packages/agent-explore/src/pages/settings/Web3.tsx
deleted file mode 100644
index 21155c2c..00000000
--- a/packages/agent-explore/src/pages/settings/Web3.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { Button } from 'antd'
-import { PageContainer } from '@ant-design/pro-components'
-import { useWeb3Modal } from '@web3modal/wagmi/react'
-
-export const Web3: React.FC = () => {
-  const { open } = useWeb3Modal()
-  return (
-    <PageContainer>
-      <Button onClick={() => open()}>Open Connect Modal</Button>
-      <Button onClick={() => open({ view: 'Networks' })}>Open Network Modal</Button>
-    </PageContainer>
-  )
-}
diff --git a/packages/agent-explore/src/plugins/identifiers/ManagedIdentifiers.tsx b/packages/agent-explore/src/plugins/identifiers/ManagedIdentifiers.tsx
index b3746945..05f6798b 100644
--- a/packages/agent-explore/src/plugins/identifiers/ManagedIdentifiers.tsx
+++ b/packages/agent-explore/src/plugins/identifiers/ManagedIdentifiers.tsx
@@ -132,7 +132,7 @@ export const ManagedIdentifiers = () => {
           showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
         }}
         loading={isLoading}
-        dataSource={identifiers !== undefined ? identifiers.map((identifier) => ({ 
+        dataSource={identifiers !== undefined ? identifiers?.map((identifier) => ({ 
           id: identifier.did,
           title: identifier.alias || shortId(identifier.did),
           actions: [