Merge pull request #62 from Agoric/emerynet-ui

feat(ui): support emerynet
Agoric · Sep 30, 2024 · 63f8535 · 63f8535
2 parents 249a6c2 + b18ea55
commit 63f8535
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 295 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -14,9 +14,7 @@
     "test:e2e": "exit 0"
   },
   "dependencies": {
-    "@agoric/react-components": "^0.1.1-dev-ca0ddde.0",
-    "@agoric/ui-components": "^0.3.9-u13.0",
-    "@agoric/web-components": "0.15.1-dev-8fc28e8.0",
+    "@agoric/react-components": "0.2.1-dev-e6f79e0.0",
     "buffer": "^6.0.3",
     "chain-registry": "1.28.0",
     "cosmos-kit": "^2.19.0",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -5,10 +5,15 @@ import { Tabs } from './components/Tabs';
 import { wallets } from 'cosmos-kit';
 import { ThemeProvider, useTheme } from '@interchain-ui/react';
 import '@agoric/react-components/dist/style.css';
+import { useEffect } from 'react';
 // import { Button, Modal } from 'react-daisyui';
 
 function App() {
-  const { themeClass } = useTheme();
+  const { themeClass, setTheme, setColorMode } = useTheme();
+  useEffect(() => {
+    setColorMode('dark');
+    setTheme('dark');
+  }, [setTheme, setColorMode]);
 
   return (
     <ThemeProvider>
@@ -28,6 +33,17 @@ function App() {
                 rpc: ['http://localhost:26657'],
               },
             },
+            {
+              testChain: {
+                chainId: 'agoric-emerynet-8',
+                chainName: 'emerynet',
+                iconUrl: 'agoric.svg',
+              },
+              apis: {
+                rest: ['https://emerynet.api.agoric.net'],
+                rpc: ['https://emerynet.rpc.agoric.net'],
+              },
+            },
           ]}
           defaultChainName="agoric-local"
         >

diff --git a/ui/src/components/Orchestration/FetchBalances.tsx b/ui/src/components/Orchestration/FetchBalances.tsx
@@ -1,11 +1,7 @@
 import { StargateClient } from '@cosmjs/stargate';
+import { rpcEndpoints } from '../../util';
 
-const rpcEndpoints = {
-  osmosis: 'http://127.0.0.1:26655',
-  agoric: 'http://127.0.0.1:26657',
-};
-
-export const fetchBalances = async (addresses: string[]) => {
+export const fetchBalances = async (addresses: string[], chainName: string) => {
   return Promise.all(
     addresses.map(async address => {
       console.log('address', address);
@@ -21,7 +17,7 @@ export const fetchBalances = async (addresses: string[]) => {
         };
       }
 
-      const rpcEndpoint = rpcEndpoints[chain];
+      const rpcEndpoint = rpcEndpoints[chainName][chain];
       try {
         const balance = await fetchBalanceFromRpc(address, rpcEndpoint);
         return {

diff --git a/ui/src/components/Orchestration/KeplrInitializer.tsx b/ui/src/components/Orchestration/KeplrInitializer.tsx
diff --git a/ui/src/components/Orchestration/MakeAccount.tsx b/ui/src/components/Orchestration/MakeAccount.tsx
@@ -1,63 +1,13 @@
 import { AgoricWalletConnection, useAgoric } from '@agoric/react-components';
-import { SigningStargateClient, StargateClient } from '@cosmjs/stargate';
+import { StargateClient } from '@cosmjs/stargate';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { Button } from 'react-daisyui';
 import { NotificationContext } from '../../context/NotificationContext';
 import { useContractStore } from '../../store/contract';
 import { DynamicToastChild } from '../Tabs';
+import { ibcChannels, rpcEndpoints } from '../../util';
 
-const rpcEndpoints = {
-  osmosis: 'http://127.0.0.1:26655',
-  agoric: 'http://127.0.0.1:26657',
-};
-
-const initializeKeplr = async () => {
-  await window.keplr.experimentalSuggestChain({
-    chainId: 'osmosislocal',
-    chainName: 'Osmosis Local',
-    rpc: 'http://127.0.0.1:26655', ///port from starshp
-    rest: 'http://127.0.0.1:1315', //port from starship
-    bip44: {
-      coinType: 118,
-    },
-    bech32Config: {
-      bech32PrefixAccAddr: 'osmo',
-      bech32PrefixAccPub: 'osmopub',
-      bech32PrefixValAddr: 'osmovaloper',
-      bech32PrefixValPub: 'osmovaloperpub',
-      bech32PrefixConsAddr: 'osmovalcons',
-      bech32PrefixConsPub: 'osmovalconspub',
-    },
-    currencies: [
-      {
-        coinDenom: 'OSMO',
-        coinMinimalDenom: 'uosmo',
-        coinDecimals: 6,
-      },
-    ],
-    feeCurrencies: [
-      {
-        coinDenom: 'OSMO',
-        coinMinimalDenom: 'uosmo',
-        coinDecimals: 6,
-      },
-    ],
-    stakeCurrency: {
-      coinDenom: 'OSMO',
-      coinMinimalDenom: 'uosmo',
-      coinDecimals: 6,
-    },
-    // @ts-expect-error XXX typedefs
-    coinType: 118,
-    gasPriceStep: {
-      low: 0.01,
-      average: 0.025,
-      high: 0.04,
-    },
-  });
-};
-
-const fetchBalances = async addresses => {
+const fetchBalances = async (addresses, agoricChainName) => {
   return Promise.all(
     addresses.map(async address => {
       console.log('address', address);
@@ -73,7 +23,7 @@ const fetchBalances = async addresses => {
         };
       }
 
-      const rpcEndpoint = rpcEndpoints[chain];
+      const rpcEndpoint = rpcEndpoints[agoricChainName][chain];
       try {
         const balance = await fetchBalanceFromRpc(address, rpcEndpoint);
         return {
@@ -156,7 +106,7 @@ const makeAccountOffer = async (
 // TODO: this can be for making an account
 
 const MakeAccount = () => {
-  const { walletConnection } = useAgoric();
+  const { walletConnection, chainName: agoricChainName } = useAgoric();
   const { addNotification } = useContext(NotificationContext);
 
   const icas = useContractStore(state => state.icas);
@@ -193,7 +143,7 @@ const MakeAccount = () => {
   useEffect(() => {
     const loadBalances = async () => {
       try {
-        const fetchedBalances = await fetchBalances(icas);
+        const fetchedBalances = await fetchBalances(icas, agoricChainName);
         console.log('fetchedBalances');
         console.log(fetchedBalances);
         setBalances(fetchedBalances);
@@ -206,7 +156,7 @@ const MakeAccount = () => {
     if (icas && icas.length > 0) {
       loadBalances();
     }
-  }, [icas, selectedChain]);
+  }, [agoricChainName, icas, selectedChain]);
 
   // //spinners
   useEffect(() => {
@@ -236,9 +186,6 @@ const MakeAccount = () => {
   const handleDeposit = async address => {
     setLoadingDeposit(true);
     try {
-      // init osmo in wallet
-      await initializeKeplr();
-
       let chain = '';
       if (address.startsWith('osmo1')) {
         chain = 'osmosis';
@@ -247,22 +194,13 @@ const MakeAccount = () => {
       } else {
         throw new Error('unsupported address prefix');
       }
+      const { signingClient, address: walletAddress } = walletConnection;
 
       if (chain === 'agoric') {
-        await window.keplr.enable(`${chain}local`);
-        const offlineSigner = window.getOfflineSigner(`${chain}local`);
-        const accounts = await offlineSigner.getAccounts();
-
-        // const client = await SigningStargateClient.connectWithSigner(rpcEndpoints[chain], offlineSigner);
-        const client = await SigningStargateClient.connectWithSigner(
-          `${rpcEndpoints[chain]}`,
-          offlineSigner,
-        );
-
         const sendMsg = {
           typeUrl: '/cosmos.bank.v1beta1.MsgSend',
           value: {
-            fromAddress: accounts[0].address,
+            fromAddress: walletAddress,
             toAddress: address,
             amount: [{ denom: 'ubld', amount: '1000000' }],
           },
@@ -273,8 +211,8 @@ const MakeAccount = () => {
           gas: '200000',
         };
 
-        const result = await client.signAndBroadcast(
-          accounts[0].address,
+        const result = await signingClient.signAndBroadcast(
+          walletAddress,
           [sendMsg],
           fee,
           '',
@@ -285,25 +223,13 @@ const MakeAccount = () => {
         }
         console.log('message sent successfully');
       } else {
-        await window.keplr.enable(`${chain}local`);
-        const offlineSigner = window.getOfflineSigner(`${chain}local`);
-        console.log('offlineSigner', offlineSigner);
-        const accounts = await offlineSigner.getAccounts();
-        console.log('accounts', accounts);
-
-        console.log(rpcEndpoints);
-        const client = await SigningStargateClient.connectWithSigner(
-          `${rpcEndpoints[chain]}`,
-          offlineSigner,
-        );
-
         const sendMsg = {
           typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
           value: {
             sourcePort: 'transfer',
-            sourceChannel: 'channel-0',
+            sourceChannel: ibcChannels[agoricChainName][chain],
             token: { denom: 'uosmo', amount: '1000000' },
-            sender: accounts[0].address,
+            sender: walletAddress,
             receiver: address,
             timeoutTimestamp: (Math.floor(Date.now() / 1000) + 600) * 1e9, // 10
           },
@@ -314,10 +240,8 @@ const MakeAccount = () => {
           gas: '200000',
         };
 
-        console.log('accounts[0].address', accounts[0].address);
-
-        const result = await client.signAndBroadcast(
-          accounts[0].address,
+        const result = await signingClient.signAndBroadcast(
+          walletAddress,
           [sendMsg],
           fee,
           '',