Merge pull request #20 from hyperweb-io/fix-inj

Fix inj
hyperweb-io · Feb 18, 2025 · 143890a · 143890a
2 parents 89ab467 + f8c09e5
commit 143890a
Show file tree

Hide file tree

Showing 6 changed files with 885 additions and 567 deletions.
diff --git a/examples/authz/hooks/useTx.ts b/examples/authz/hooks/useTx.ts
@@ -1,23 +1,9 @@
 import { useChain } from '@interchain-kit/react';
-import { StdFee } from '@cosmjs/stargate';
-import { type CustomToast } from './useToast';
 import { defaultContext, useQuery } from '@tanstack/react-query';
 
-
 import { DEFAULT_SIGNING_CLIENT_QUERY_KEY } from '@interchainjs/react/react-query';
 import { WalletState } from '@interchain-kit/core';
 
-interface Msg {
-  typeUrl: string;
-  value: any;
-}
-
-interface TxOptions {
-  fee?: StdFee | null;
-  toast?: Partial<CustomToast>;
-  onSuccess?: () => void;
-}
-
 export enum TxStatus {
   Failed = 'Transaction Failed',
   Successful = 'Transaction Successful',

diff --git a/examples/injective/components/SendMsg.tsx b/examples/injective/components/SendMsg.tsx
@@ -1,40 +1,49 @@
-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 { useState } from 'react';
+import { useChain } from '@interchain-kit/react';
+import { defaultAssetList, defaultChain, defaultChainName } from '@/config';
+import useBalance from '@/hooks/useBalance';
+import { MsgSend } from 'injective-react/cosmos/bank/v1beta1/tx';
+import { useSend } from 'injective-react/cosmos/bank/v1beta1/tx.rpc.react';
+import { useSigningClient } from '../hooks/useTx';
+import { WalletState } from '@interchain-kit/core';
+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 } = useChain(defaultChainName);
+  const { data: signingClient, isLoading } = useSigningClient(
+    defaultChainName,
+    {
+      walletStatus: WalletState.Connected,
+    }
+  );
+
+  const { mutate: send } = useSend({
+    options: {
+      context: defaultContext,
+    },
+    clientResolver: signingClient,
+  });
 
   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({
-    address,
-  })
+  const { balance, isBalanceLoaded, isFetchingBalance, refetchBalance } =
+    useBalance({
+      address,
+    });
 
   const handleSend = async () => {
     if (sending || isLoading) return;
@@ -44,62 +53,76 @@ 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({
+
+    const msg = MsgSend.fromPartial({
       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);
+      amount: [{ denom, amount: '1' }],
+    });
+
+    send(
+      {
+        signerAddress: address,
+        message: msg,
+        fee,
+        memo: 'using interchainjs',
+      },
+      {
+        onSuccess: (data) => {
+          refetchBalance();
+          setTxHash(data.transactionHash);
+          setSending(false);
+        },
+        onError: (error) => {
+          setError(error?.message || 'Unknown error');
           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);
-    }
-  }
+    );
+  };
 
   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:{' '}
+          {isFetchingBalance ? '--' : 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,57 +1,44 @@
-// import { useGetBalance } from 'interchainjs/cosmos/bank/v1beta1/query.rpc.func'
+import { useGetBalance } from 'injective-react/cosmos/bank/v1beta1/query.rpc.react';
 import { defaultRpcEndpoint as rpcEndpoint } from '@/config';
-// import { defaultContext } from '@tanstack/react-query'
-import BigNumber from "bignumber.js";
-import { defaultAssetList } from "@/config";
-import { createRpcQueryHooks, useRpcClient } from '../src/codegen';
-
-export default function useBalance({
-  address,
-}:{
-  address: string,
-}) {
+import BigNumber from 'bignumber.js';
+import { defaultAssetList } from '@/config';
+import { defaultContext } from '@tanstack/react-query';
 
+export default function useBalance({ address }: { address: string }) {
   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 { 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 || '',
       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
         ),
-    }
+      staleTime: 0,
+    },
+    clientResolver: rpcEndpoint,
   });
 
   return {
     balance,
     isBalanceLoaded,
     isFetchingBalance,
     refetchBalance,
-  }
+  };
 }
diff --git a/examples/injective/hooks/useTx.ts b/examples/injective/hooks/useTx.ts
@@ -0,0 +1,34 @@
+import { useChain } from '@interchain-kit/react';
+import { defaultContext, useQuery } from '@tanstack/react-query';
+
+import { DEFAULT_SIGNING_CLIENT_QUERY_KEY } from 'injective-react/react-query';
+import { WalletState } from '@interchain-kit/core';
+
+export enum TxStatus {
+  Failed = 'Transaction Failed',
+  Successful = 'Transaction Successful',
+  Broadcasting = 'Transaction Broadcasting',
+}
+
+export const useSigningClient = (
+  chainName: string,
+  options: {
+    walletStatus?: WalletState;
+  }
+) => {
+  const { getSigningClient } = useChain(chainName);
+
+  return useQuery(
+    [DEFAULT_SIGNING_CLIENT_QUERY_KEY, chainName],
+    async () => {
+      const client = await getSigningClient();
+      return client;
+    },
+    {
+      enabled:
+        !!chainName &&
+        (!options || options?.walletStatus === WalletState.Connected),
+      context: defaultContext,
+    }
+  );
+};
diff --git a/examples/injective/package.json b/examples/injective/package.json
@@ -37,13 +37,14 @@
     "@interchain-kit/react": "0.2.202",
     "@interchain-ui/react": "^1.23.29",
     "@interchain-ui/react-no-ssr": "^0.1.6",
+    "@interchainjs/cosmos": "1.9.12",
     "@interchainjs/cosmos-types": "1.9.12",
     "@interchainjs/injective": "1.9.12",
     "@tanstack/react-query": "4.29.1",
     "bignumber.js": "9.1.1",
     "chain-registry": "^1.69.32",
     "decimal.js": "^10.4.3",
-    "interchainjs": "1.9.12",
+    "injective-react": "1.9.12",
     "mobx": "^6.13.5",
     "next": "^13",
     "react": "18.2.0",