feat: move web3 connect to the top bar (#189)

decentralized-identity · Oct 16, 2023 · 73ed64a · 73ed64a
1 parent fa980c7
commit 73ed64a
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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: [