use hooks

add interchainjs-demo
hyperweb-io · Dec 25, 2024 · a2018ee · a2018ee
1 parent 318386c
commit a2018ee
Show file tree

Hide file tree

Showing 36 changed files with 15,781 additions and 1,061 deletions.
diff --git a/examples/injective/components/SendMsg.tsx b/examples/injective/components/SendMsg.tsx
@@ -1,48 +1,80 @@
-import { Box, Text, Button, Link } from "@interchain-ui/react";
-import { useEffect, useState } from "react";
-import { useChain, useOfflineSigner } from "@interchain-kit/react";
-import { defaultAssetList, defaultChain, defaultChainName, defaultRpcEndpoint } from "@/config";
-import useBalance from "@/hooks/useBalance";
-import { InjSigningClient } from "@interchainjs/injective/signing-client";
-import { toEncoders, toConverters } from '@interchainjs/cosmos/utils';
-import { MsgSend } from 'interchain-react/cosmos/bank/v1beta1/tx';
+import { Box, Text, Button, Link } from '@interchain-ui/react';
+import { InjSigningClient } from '@interchainjs/injective/signing-client';
+import { useEffect, useState } from 'react';
+import { useChain, useOfflineSigner } from '@interchain-kit/react';
+import {
+  defaultAssetList,
+  defaultChain,
+  defaultChainName,
+  defaultRpcEndpoint,
+} from '@/config';
+import useBalance from '@/hooks/useBalance';
+import { useSend } from 'interchain-react/cosmos/bank/v1beta1/tx.rpc.func';
+import { defaultContext } from '@tanstack/react-query';
 
 export default function SendMsg() {
   const coin = defaultAssetList?.assets[0];
-  const denom = coin!.base!
+
+  const denom = coin!.base!;
+
   const COIN_DISPLAY_EXPONENT = coin!.denomUnits.find(
     (unit) => unit.denom === coin!.display
   )?.exponent as number;
-  const chain = defaultChain
-  const txPage = chain?.explorers?.[0].txPage
 
-  const { address, isLoading, wallet } = useChain(defaultChainName);
+  const chain = defaultChain;
+  const txPage = chain?.explorers?.[0].txPage;
 
-  const { offlineSigner } = useOfflineSigner(defaultChainName, wallet.info!.name)
+  const { address, isLoading, wallet } = useChain(defaultChainName);
+  const { offlineSigner } = useOfflineSigner(
+    defaultChainName,
+    wallet.info!.name
+  );
 
-  const [sending, setSending] = useState(false);
-  const [txHash, setTxHash] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [signingClient, setSigningClient] = useState<InjSigningClient | null>(null);
+  const [signingClient, setSigningClient] = useState<InjSigningClient | null>(
+    null
+  );
 
   useEffect(() => {
     if (!offlineSigner) return;
     (async () => {
-      console.log('offlineSigner', offlineSigner)
-      setSigningClient(await InjSigningClient.connectWithSigner(defaultRpcEndpoint, offlineSigner))
-    })()
-  }, [offlineSigner])
+      console.log('offlineSigner', offlineSigner);
+      setSigningClient(
+        await InjSigningClient.connectWithSigner(
+          defaultRpcEndpoint,
+          offlineSigner
+        )
+      );
+    })();
+  }, [offlineSigner]);
 
-  useEffect(() => {
-    signingClient?.addEncoders(toEncoders(MsgSend));
-    signingClient?.addConverters(toConverters(MsgSend));
-  }, [signingClient])
+  const [sending, setSending] = useState(false);
+  const [txHash, setTxHash] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const {
-    balance, refetchBalance, isFetchingBalance
-  } = useBalance({
+  const { mutate: send, isSuccess: isSendSuccess } = useSend({
+    clientResolver: signingClient ?? undefined,
+    options: {
+      context: defaultContext,
+      onSuccess: (data) => {
+        console.log('signAndBroadcast', data);
+        if (data.code === 0) {
+          setTxHash((data as any).hash);
+        } else {
+          setError(data.rawLog || JSON.stringify(data || {}));
+        }
+        setSending(false);
+      },
+      onError: (error) => {
+        console.error('signAndBroadcast', error);
+        setError(error.message);
+        setSending(false);
+      },
+    },
+  });
+
+  const { balance } = useBalance({
     address,
-  })
+  });
 
   const handleSend = async () => {
     if (sending || isLoading) return;
@@ -52,66 +84,66 @@ export default function SendMsg() {
     setSending(true);
 
     const fee = {
-      amount: [{
-        denom,
-        amount: '2500',
-      }],
-      gas: "1000000",
+      amount: [
+        {
+          denom,
+          amount: '2500',
+        },
+      ],
+      gas: '1000000',
     };
 
-    const msgs = [{
-      typeUrl: MsgSend.typeUrl,
-      value: {
+    send({
+      signerAddress: address,
+      message: {
         fromAddress: address,
         toAddress: address,
-        amount: [{ denom, amount: '1' }]
-      }
-    }]
-
-    try {
-      const data = await signingClient!.signAndBroadcast(
-        address, msgs, fee, 'using interchainjs'
-      ) as any
-      console.log('onSuccess', data)
-      if (data.code === 0) {
-        setTimeout(() => {
-          refetchBalance()
-          setTxHash(data.hash);
-          setSending(false);
-        }, 4000)
-      } else {
-        setError(data.rawLog || JSON.stringify(data || {}));
-        setSending(false);
-      }
-    } catch (error: any) {
-      console.log('onError', error)
-      setError(error?.message || 'Unknown error');
-      setSending(false);
-    }
-  }
+        amount: [
+          {
+            denom,
+            amount: '1',
+          },
+        ],
+      },
+      fee,
+      memo: 'Send from interchain-react',
+    });
+  };
 
   return (
     <Box display="flex" flexDirection="column" alignItems="center">
-      <Box mb='$4'>
-        <Text fontSize='$2xl'>Balance: {isFetchingBalance ? '--' : (balance?.toFixed(COIN_DISPLAY_EXPONENT))} {coin?.symbol}</Text>
+      <Box mb="$4">
+        <Text fontSize="$2xl">
+          Balance:{' '}
+          {balance === null ? '--' : balance?.toFixed(COIN_DISPLAY_EXPONENT)}{' '}
+          {coin?.symbol}
+        </Text>
       </Box>
       <Box>
         <Button
           disabled={sending || isLoading}
           isLoading={sending}
           onClick={handleSend}
-        >{isLoading ? 'Initializing...' : 'Send Token'}</Button>
+        >
+          {isLoading ? 'Initializing...' : 'Send Token'}
+        </Button>
       </Box>
-      {txHash && <Box mt='$4' display='flex' flexDirection='row' alignItems='center'>
-        <Text attributes={{ mr: '$1' }}>Details:</Text>
-        <Link href={txPage?.replace('${txHash}', txHash)!} target="_blank">
-          {txPage?.replace('${txHash}', txHash)!}
-        </Link>
-      </Box>}
-      {error && <Box mt='$4' display='flex' flexDirection='row' alignItems='center'>
-        <Text attributes={{ mr: '$1' }} fontSize='$2xl'>Error:</Text>
-        <Text fontSize='$2xl'>{error}</Text>
-      </Box>}
+      {txHash && (
+        <Box mt="$4" display="flex" flexDirection="row" alignItems="center">
+          <Text attributes={{ mr: '$1' }}>Details:</Text>
+          <Link href={txPage?.replace('${txHash}', txHash)!} target="_blank">
+            {txPage?.replace('${txHash}', txHash)!}
+          </Link>
+        </Box>
+      )}
+      {error && (
+        <Box mt="$4" display="flex" flexDirection="row" alignItems="center">
+          <Text attributes={{ mr: '$1' }} fontSize="$2xl">
+            Error:
+          </Text>
+          <Text fontSize="$2xl">{error}</Text>
+        </Box>
+      )}
     </Box>
   );
-}
+}
diff --git a/examples/injective/package.json b/examples/injective/package.json
@@ -41,9 +41,9 @@
     "bignumber.js": "9.1.1",
     "chain-registry": "^1.69.32",
     "decimal.js": "^10.4.3",
-    "injective-react": "^1.6.3",
-    "interchain-react": "1.6.3",
-    "interchainjs": "1.6.3",
+    "injective-react": "^1.6.4",
+    "interchain-react": "1.6.4",
+    "interchainjs": "1.6.4",
     "mobx": "^6.13.5",
     "next": "^13",
     "react": "18.2.0",

diff --git a/examples/injective/yarn.lock b/examples/injective/yarn.lock
@@ -3063,9 +3063,9 @@ __metadata:
     eslint: "npm:8.28.0"
     eslint-config-next: "npm:13.0.5"
     generate-lockfile: "npm:0.0.12"
-    injective-react: "npm:^1.6.3"
-    interchain-react: "npm:1.6.3"
-    interchainjs: "npm:1.6.3"
+    injective-react: "npm:^1.6.4"
+    interchain-react: "npm:1.6.4"
+    interchainjs: "npm:1.6.4"
     mobx: "npm:^6.13.5"
     next: "npm:^13"
     react: "npm:18.2.0"
@@ -9990,9 +9990,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"injective-react@npm:^1.6.3":
-  version: 1.6.3
-  resolution: "injective-react@npm:1.6.3"
+"injective-react@npm:^1.6.4":
+  version: 1.6.4
+  resolution: "injective-react@npm:1.6.4"
   dependencies:
     "@interchainjs/cosmos": "npm:1.6.3"
     "@interchainjs/cosmos-types": "npm:1.6.3"
@@ -10002,7 +10002,7 @@ __metadata:
     decimal.js: "npm:^10.4.3"
   peerDependencies:
     "@tanstack/react-query": 4.29.1
-  checksum: 10c0/e46f1cbf4622b03c572472ec9c3a8c1e65a41f090e216869bcce429e432dde26bdb0a0382c5d7c14781e2da42f9d55371313ecd8a5a78a64e985fb8fef37a7aa
+  checksum: 10c0/73ede404cd05856314c28ab297a50ca66a7918cd5d36ba92085dcde0bb40e8f52f45105c035b665da618e71d1dd094194bad754b888d45a3eece2b2c4b2906b1
   languageName: node
   linkType: hard
 
@@ -10075,9 +10075,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"interchain-react@npm:1.6.3":
-  version: 1.6.3
-  resolution: "interchain-react@npm:1.6.3"
+"interchain-react@npm:1.6.4":
+  version: 1.6.4
+  resolution: "interchain-react@npm:1.6.4"
   dependencies:
     "@interchainjs/cosmos": "npm:1.6.3"
     "@interchainjs/cosmos-types": "npm:1.6.3"
@@ -10087,7 +10087,7 @@ __metadata:
     decimal.js: "npm:^10.4.3"
   peerDependencies:
     "@tanstack/react-query": 4.29.1
-  checksum: 10c0/4a437e4a40a746159f313c22c767650e396958f30dd246bb214443ab56275a73eb5ab341b3a139081bfeb2ea730cf64bd9e2d55629b41f24a2c3180f4aff83ba
+  checksum: 10c0/3b166295b38e7ff6a5b9905524be162f67a84989f57d48ab68247a718f123e2fcf148d2bc9292ad5cc410d737153ca68fc3e9e0941677f0b2b8a431451e17412
   languageName: node
   linkType: hard
 
@@ -10107,6 +10107,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"interchainjs@npm:1.6.4":
+  version: 1.6.4
+  resolution: "interchainjs@npm:1.6.4"
+  dependencies:
+    "@interchainjs/cosmos": "npm:1.6.3"
+    "@interchainjs/cosmos-types": "npm:1.6.3"
+    "@interchainjs/types": "npm:1.6.3"
+    "@interchainjs/utils": "npm:1.6.3"
+    "@noble/hashes": "npm:^1.3.1"
+    decimal.js: "npm:^10.4.3"
+  peerDependencies:
+    "@tanstack/react-query": 4.29.1
+  checksum: 10c0/aca1d8f21c9b3768d0694d67cc8c3434d986f99b9926ca2d63bb6661f2380d4d54255b2fea752e3944123731fd931c989d809e5ca979811d000fcc1964d7ce0a
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"

diff --git a/examples/interchainjs-demo/.gitignore b/examples/interchainjs-demo/.gitignore
@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+*.next/*
+*.yarn/*
diff --git a/examples/interchainjs-demo/CHANGELOG.md b/examples/interchainjs-demo/CHANGELOG.md