Merge pull request #229 from cosmology-tech/injective-examples

Injective examples update
hyperweb-io · Dec 25, 2024 · 78d5677 · 78d5677
2 parents 6d8ff09 + ebed0e3
commit 78d5677
Show file tree

Hide file tree

Showing 380 changed files with 16,030 additions and 197,274 deletions.
diff --git a/examples/injective/components/SendMsg.tsx b/examples/injective/components/SendMsg.tsx
@@ -1,40 +1,80 @@
-import { Box, Text, Button, Link } from "@interchain-ui/react";
-import { useState } from "react";
-import { useChain } from "@interchain-kit/react";
-import { defaultAssetList, defaultChain, defaultChainName } from "@/config";
-import useBalance from "@/hooks/useBalance";
-import { toEncoders, toConverters } from '@interchainjs/cosmos/utils';
-import { MsgSend } from '../src/codegen/cosmos/bank/v1beta1/tx';
-import { cosmos } from '../src/codegen';
+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 chain = defaultChain;
+  const txPage = chain?.explorers?.[0].txPage;
 
-  const { address, signingClient, isLoading } = useChain(defaultChainName);
-  signingClient?.addEncoders(toEncoders(MsgSend));
-  signingClient?.addConverters(toConverters(MsgSend));
+  const { address, isLoading, wallet } = useChain(defaultChainName);
+  const { offlineSigner } = useOfflineSigner(
+    defaultChainName,
+    wallet.info!.name
+  );
+
+  const [signingClient, setSigningClient] = useState<InjSigningClient | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (!offlineSigner) return;
+    (async () => {
+      console.log('offlineSigner', offlineSigner);
+      setSigningClient(
+        await InjSigningClient.connectWithSigner(
+          defaultRpcEndpoint,
+          offlineSigner
+        )
+      );
+    })();
+  }, [offlineSigner]);
 
   const [sending, setSending] = useState(false);
   const [txHash, setTxHash] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const {
-    balance,
-    isBalanceLoaded,
-    isFetchingBalance,
-    refetchBalance,
-  } = 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;
@@ -44,62 +84,66 @@ export default function SendMsg() {
     setSending(true);
 
     const fee = {
-      amount: [{
-        denom,
-        amount: '2500',
-      }],
-      gas: "1000000",
+      amount: [
+        {
+          denom,
+          amount: '2500',
+        },
+      ],
+      gas: '1000000',
     };
-    const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl
-    const msgs = [send({
-      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);
-    }
-  }
+
+    send({
+      signerAddress: address,
+      message: {
+        fromAddress: address,
+        toAddress: address,
+        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/hooks/useBalance.ts b/examples/injective/hooks/useBalance.ts
@@ -1,13 +1,12 @@
-// import { useGetBalance } from 'interchainjs/cosmos/bank/v1beta1/query.rpc.func'
 import { defaultRpcEndpoint as rpcEndpoint } from '@/config';
-// import { defaultContext } from '@tanstack/react-query'
+import { defaultContext } from '@tanstack/react-query'
 import BigNumber from "bignumber.js";
 import { defaultAssetList } from "@/config";
-import { createRpcQueryHooks, useRpcClient } from '../src/codegen';
+import { useGetBalance } from 'interchain-react/cosmos/bank/v1beta1/query.rpc.func'
 
 export default function useBalance({
   address,
-}:{
+}: {
   address: string,
 }) {
 
@@ -19,33 +18,26 @@ export default function useBalance({
     (unit) => unit.denom === coin!.display
   )?.exponent as number;
 
-  const { data: rpcClient } = useRpcClient({
-    rpcEndpoint,
-    options: {
-      enabled: !!rpcEndpoint && !!address,
-    },
-  });
-
-  const hooks = createRpcQueryHooks({ rpc: rpcClient });
-
   const {
     data: balance,
     isSuccess: isBalanceLoaded,
     isLoading: isFetchingBalance,
     refetch: refetchBalance,
-  } = hooks.useBalance({
+  } = useGetBalance({
     request: {
-      address: address || '',
+      address,
       denom,
     },
     options: {
-      enabled: !!address && !!rpcClient,
-      // transform the returned balance into a BigNumber
+      context: defaultContext,
+      enabled: !!address,
       select: ({ balance }) =>
         new BigNumber(balance?.amount ?? 0).multipliedBy(
           10 ** -COIN_DISPLAY_EXPONENT
         ),
-    }
+    },
+    // with the new version, simply pass the endpoint to the clientResolver
+    clientResolver: rpcEndpoint,
   });
 
   return {
@@ -54,4 +46,4 @@ export default function useBalance({
     isFetchingBalance,
     refetchBalance,
   }
-}
+}
diff --git a/examples/injective/package.json b/examples/injective/package.json
@@ -23,28 +23,27 @@
     "@chain-registry/v2": "^1.71.31",
     "@chakra-ui/icons": "2.0.12",
     "@chakra-ui/react": "2.5.1",
-    "@cosmjs/amino": "0.32.3",
-    "@cosmjs/cosmwasm-stargate": "0.31.3",
     "@cosmjs/proto-signing": "0.32.3",
     "@cosmjs/stargate": "0.32.3",
     "@cosmology/lcd": "^0.12.0",
     "@cosmology/telescope": "^1.10.3",
-    "@cosmos-kit/react": "2.17.0",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@interchain-kit/core": "0.0.1-beta.23",
-    "@interchain-kit/keplr-extension": "0.0.1-beta.23",
-    "@interchain-kit/leap-extension": "0.0.1-beta.23",
-    "@interchain-kit/react": "0.0.1-beta.23",
+    "@interchain-kit/core": "0.0.1-beta.43",
+    "@interchain-kit/keplr-extension": "0.0.1-beta.43",
+    "@interchain-kit/leap-extension": "0.0.1-beta.43",
+    "@interchain-kit/react": "0.0.1-beta.43",
     "@interchain-ui/react": "^1.23.29",
     "@interchain-ui/react-no-ssr": "^0.1.6",
-    "@interchainjs/cosmos-types": "1.6.1",
-    "@interchainjs/injective": "1.6.1",
+    "@interchainjs/cosmos-types": "1.6.3",
+    "@interchainjs/injective": "1.6.3",
     "@tanstack/react-query": "4.29.1",
     "bignumber.js": "9.1.1",
     "chain-registry": "^1.69.32",
     "decimal.js": "^10.4.3",
-    "interchainjs": "1.6.1",
+    "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/pages/_app.tsx b/examples/injective/pages/_app.tsx
@@ -30,11 +30,12 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
       <ChainProvider
-        // @ts-ignore
         chains={[defaultChain!]}
-        // @ts-ignore
         assetLists={[defaultAssetList!]}
-        wallets={[keplrWallet, leapWallet]}
+        wallets={[
+          keplrWallet,
+          leapWallet
+        ]}
         signerOptions={{
           signing: () => {
             return {