dynamic wallet test

baldr-frontend/package.json

@@ -11,17 +11,21 @@
   },
   "dependencies": {
     "@dynamic-labs/ethereum": "^3.3.0",
+    "@dynamic-labs/ethereum-all": "^0.18.30",
     "@dynamic-labs/sdk-react-core": "^3.3.0",
+    "@dynamic-labs/wagmi-connector": "^3.4.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.4",
+    "@tanstack/react-query": "^5.59.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.13",
     "styled-reset": "^4.5.2",
     "viem": "^2.21.27",
+    "wagmi": "^2.12.20",
     "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {

baldr-frontend/src/App.jsx

@@ -5,30 +5,41 @@ import EscrowTradePage from "./pages/EscrowTrade";
 import EscrowCreatePage from "./pages/EscrowCreate";
 import InventoryPage from "./pages/Inventory";
 import HistoryPage from "./pages/History";
-import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core';
+import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
 import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
-
+import { config } from './config';
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+// import { EthereumWalletConnectors } from '@dynamic-labs/ethereum-all';
+const queryClient = new QueryClient()
 function App() {
   return (
-    <DynamicContextProvider
-      settings={{
-        environmentId: '9ebc2da2-5d7d-4c1e-85f8-6442ff43725c',
-        walletConnectors: [EthereumWalletConnectors],
-      }}>
+    <WagmiProvider config={config}>
+
+
+      <QueryClientProvider client={queryClient}>
+
+        <DynamicContextProvider
+          settings={{
+            environmentId: '9ebc2da2-5d7d-4c1e-85f8-6442ff43725c',
+            walletConnectors: [EthereumWalletConnectors],
+          }}>
 
 
 
-      <BrowserRouter>
-        <Routes>
-          <Route path={ROUTE_PATH.MAIN} element={<EscrowListPage />}></Route>
-          <Route path={ROUTE_PATH.ESCROW_LIST} element={<EscrowListPage />}></Route>
-          <Route path={ROUTE_PATH.ESCROW_TRADE} element={<EscrowTradePage />}></Route>
-          <Route path={ROUTE_PATH.ESCROW_CREATE} element={<EscrowCreatePage />}></Route>
-          <Route path={ROUTE_PATH.INVENTORY} element={<InventoryPage />}></Route>
-          <Route path={ROUTE_PATH.HISTORY} element={<HistoryPage />}></Route>
-        </Routes>
-      </BrowserRouter>
-    </DynamicContextProvider>
+          <BrowserRouter>
+            <Routes>
+              <Route path={ROUTE_PATH.MAIN} element={<EscrowListPage />}></Route>
+              <Route path={ROUTE_PATH.ESCROW_LIST} element={<EscrowListPage />}></Route>
+              <Route path={ROUTE_PATH.ESCROW_TRADE} element={<EscrowTradePage />}></Route>
+              <Route path={ROUTE_PATH.ESCROW_CREATE} element={<EscrowCreatePage />}></Route>
+              <Route path={ROUTE_PATH.INVENTORY} element={<InventoryPage />}></Route>
+              <Route path={ROUTE_PATH.HISTORY} element={<HistoryPage />}></Route>
+            </Routes>
+          </BrowserRouter>
+        </DynamicContextProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

baldr-frontend/src/components/ContractTester.jsx

@@ -0,0 +1,64 @@
+import { useWriteContract } from 'wagmi'
+import { fefe } from './abi'
+console.log(fefe)
+const abi = fefe.abi
+console.log(abi)
+
+const myAddress = "0xfa6Cc5134a2e81a2F19113992Ef61F9BE81cafdE"
+const tmpTokenDetails = [
+    {
+        tokenId: 0,
+        amount: 1,
+        price: 2,
+
+
+    }
+]
+
+export default function App() {
+    const { writeContract } = useWriteContract()
+
+    return (
+        <div>
+
+            <h1>hello</h1>
+            <button
+                onClick={async () => {
+                    console.log('hello')
+                    const result =  writeContract({
+                        abi,
+                        address: '0x9F3D6c3ff075c457fbC196d77548d86487C535E9',
+                        functionName: 'createTrade',
+                        args: [
+                            myAddress, tmpTokenDetails
+                        ],
+                    })
+
+                    console.log(result)
+                }
+
+                }
+            >
+                Transfer
+            </button>
+            <h1>hello</h1>
+        </div>
+    )
+}
+
+
+{/* <button
+className="btn btn-primary"
+onClick={async () => {
+  try {
+    await writeYourContractAsync({
+      functionName: "createTrade",
+      args: [myAddress, tmpTokenDetails]
+    });
+  } catch (e) {
+    console.error("Error setting greeting:", e);
+  }
+}}
+>
+Set Greeting
+</button> */}

baldr-frontend/src/components/LogoTopBar.jsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import theme from "../styles/theme";
 import Baldr from "../assets/image/baldr.png";
 
+import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
 import { DynamicWidget } from '@dynamic-labs/sdk-react-core';
 
 const LogoTopBar = () => {
@@ -12,7 +13,11 @@ const LogoTopBar = () => {
         <p>Baldr</p>
       </div>
       <div>Wallet</div>
-      <DynamicWidget />
+      <DynamicWagmiConnector>
+
+        <DynamicWidget />
+      </DynamicWagmiConnector>
+
     </Wrapper>
   );
 };