Skip to content

Commit 143890a

Browse files
ZetazzzZetazzz
authored
Merge pull request #20 from hyperweb-io/fix-inj
Fix inj
2 parents 89ab467 + f8c09e5 commit 143890a

File tree

6 files changed

+885
-567
lines changed

6 files changed

+885
-567
lines changed

‎examples/authz/hooks/useTx.ts

-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,9 @@
11
import { useChain } from '@interchain-kit/react';
2-
import { StdFee } from '@cosmjs/stargate';
3-
import { type CustomToast } from './useToast';
42
import { defaultContext, useQuery } from '@tanstack/react-query';
53

6-
74
import { DEFAULT_SIGNING_CLIENT_QUERY_KEY } from '@interchainjs/react/react-query';
85
import { WalletState } from '@interchain-kit/core';
96

10-
interface Msg {
11-
typeUrl: string;
12-
value: any;
13-
}
14-
15-
interface TxOptions {
16-
fee?: StdFee | null;
17-
toast?: Partial<CustomToast>;
18-
onSuccess?: () => void;
19-
}
20-
217
export enum TxStatus {
228
Failed = 'Transaction Failed',
239
Successful = 'Transaction Successful',

‎examples/injective/components/SendMsg.tsx

+87-64
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,49 @@
1-
import { Box, Text, Button, Link } from "@interchain-ui/react";
2-
import { useState } from "react";
3-
import { useChain } from "@interchain-kit/react";
4-
import { defaultAssetList, defaultChain, defaultChainName } from "@/config";
5-
import useBalance from "@/hooks/useBalance";
6-
import { toEncoders, toConverters } from '@interchainjs/cosmos/utils';
7-
import { MsgSend } from '../src/codegen/cosmos/bank/v1beta1/tx';
8-
import { cosmos } from '../src/codegen';
1+
import { Box, Text, Button, Link } from '@interchain-ui/react';
2+
import { useState } from 'react';
3+
import { useChain } from '@interchain-kit/react';
4+
import { defaultAssetList, defaultChain, defaultChainName } from '@/config';
5+
import useBalance from '@/hooks/useBalance';
6+
import { MsgSend } from 'injective-react/cosmos/bank/v1beta1/tx';
7+
import { useSend } from 'injective-react/cosmos/bank/v1beta1/tx.rpc.react';
8+
import { useSigningClient } from '../hooks/useTx';
9+
import { WalletState } from '@interchain-kit/core';
10+
import { defaultContext } from '@tanstack/react-query';
911

1012
export default function SendMsg() {
1113
const coin = defaultAssetList?.assets[0];
1214

13-
const denom = coin!.base!
15+
const denom = coin!.base!;
1416

1517
const COIN_DISPLAY_EXPONENT = coin!.denomUnits.find(
1618
(unit) => unit.denom === coin!.display
1719
)?.exponent as number;
1820

19-
const chain = defaultChain
20-
const txPage = chain?.explorers?.[0].txPage
21+
const chain = defaultChain;
22+
const txPage = chain?.explorers?.[0].txPage;
2123

22-
const { address, signingClient, isLoading } = useChain(defaultChainName);
23-
signingClient?.addEncoders(toEncoders(MsgSend));
24-
signingClient?.addConverters(toConverters(MsgSend));
24+
const { address } = useChain(defaultChainName);
25+
const { data: signingClient, isLoading } = useSigningClient(
26+
defaultChainName,
27+
{
28+
walletStatus: WalletState.Connected,
29+
}
30+
);
31+
32+
const { mutate: send } = useSend({
33+
options: {
34+
context: defaultContext,
35+
},
36+
clientResolver: signingClient,
37+
});
2538

2639
const [sending, setSending] = useState(false);
2740
const [txHash, setTxHash] = useState<string | null>(null);
2841
const [error, setError] = useState<string | null>(null);
2942

30-
const {
31-
balance,
32-
isBalanceLoaded,
33-
isFetchingBalance,
34-
refetchBalance,
35-
} = useBalance({
36-
address,
37-
})
43+
const { balance, isBalanceLoaded, isFetchingBalance, refetchBalance } =
44+
useBalance({
45+
address,
46+
});
3847

3948
const handleSend = async () => {
4049
if (sending || isLoading) return;
@@ -44,62 +53,76 @@ export default function SendMsg() {
4453
setSending(true);
4554

4655
const fee = {
47-
amount: [{
48-
denom,
49-
amount: '2500',
50-
}],
51-
gas: "1000000",
56+
amount: [
57+
{
58+
denom,
59+
amount: '2500',
60+
},
61+
],
62+
gas: '1000000',
5263
};
53-
const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl
54-
const msgs = [send({
64+
65+
const msg = MsgSend.fromPartial({
5566
fromAddress: address,
5667
toAddress: address,
57-
amount: [{ denom, amount: '1' }]
58-
})]
59-
try {
60-
const data = await signingClient.signAndBroadcast(
61-
address, msgs, fee, 'using interchainjs'
62-
) as any
63-
console.log('onSuccess', data)
64-
if (data.code === 0) {
65-
setTimeout(() => {
66-
refetchBalance()
67-
setTxHash(data.hash);
68+
amount: [{ denom, amount: '1' }],
69+
});
70+
71+
send(
72+
{
73+
signerAddress: address,
74+
message: msg,
75+
fee,
76+
memo: 'using interchainjs',
77+
},
78+
{
79+
onSuccess: (data) => {
80+
refetchBalance();
81+
setTxHash(data.transactionHash);
82+
setSending(false);
83+
},
84+
onError: (error) => {
85+
setError(error?.message || 'Unknown error');
6886
setSending(false);
69-
}, 4000)
70-
} else {
71-
setError(data.rawLog || JSON.stringify(data || {}));
72-
setSending(false);
87+
},
7388
}
74-
} catch (error: any) {
75-
console.log('onError', error)
76-
setError(error?.message || 'Unknown error');
77-
setSending(false);
78-
}
79-
}
89+
);
90+
};
8091

8192
return (
8293
<Box display="flex" flexDirection="column" alignItems="center">
83-
<Box mb='$4'>
84-
<Text fontSize='$2xl'>Balance: {isFetchingBalance ? '--' : (balance?.toFixed(COIN_DISPLAY_EXPONENT))} {coin?.symbol}</Text>
94+
<Box mb="$4">
95+
<Text fontSize="$2xl">
96+
Balance:{' '}
97+
{isFetchingBalance ? '--' : balance?.toFixed(COIN_DISPLAY_EXPONENT)}{' '}
98+
{coin?.symbol}
99+
</Text>
85100
</Box>
86101
<Box>
87102
<Button
88103
disabled={sending || isLoading}
89104
isLoading={sending}
90105
onClick={handleSend}
91-
>{isLoading ? 'Initializing...' : 'Send Token'}</Button>
106+
>
107+
{isLoading ? 'Initializing...' : 'Send Token'}
108+
</Button>
92109
</Box>
93-
{txHash && <Box mt='$4' display='flex' flexDirection='row' alignItems='center'>
94-
<Text attributes={{ mr: '$1' }}>Details:</Text>
95-
<Link href={txPage?.replace('${txHash}', txHash)!} target="_blank">
96-
{txPage?.replace('${txHash}', txHash)!}
97-
</Link>
98-
</Box>}
99-
{error && <Box mt='$4' display='flex' flexDirection='row' alignItems='center'>
100-
<Text attributes={{ mr: '$1' }} fontSize='$2xl'>Error:</Text>
101-
<Text fontSize='$2xl'>{error}</Text>
102-
</Box>}
110+
{txHash && (
111+
<Box mt="$4" display="flex" flexDirection="row" alignItems="center">
112+
<Text attributes={{ mr: '$1' }}>Details:</Text>
113+
<Link href={txPage?.replace('${txHash}', txHash)!} target="_blank">
114+
{txPage?.replace('${txHash}', txHash)!}
115+
</Link>
116+
</Box>
117+
)}
118+
{error && (
119+
<Box mt="$4" display="flex" flexDirection="row" alignItems="center">
120+
<Text attributes={{ mr: '$1' }} fontSize="$2xl">
121+
Error:
122+
</Text>
123+
<Text fontSize="$2xl">{error}</Text>
124+
</Box>
125+
)}
103126
</Box>
104127
);
105-
}
128+
}

‎examples/injective/hooks/useBalance.ts

+13-26
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,44 @@
1-
// import { useGetBalance } from 'interchainjs/cosmos/bank/v1beta1/query.rpc.func'
1+
import { useGetBalance } from 'injective-react/cosmos/bank/v1beta1/query.rpc.react';
22
import { defaultRpcEndpoint as rpcEndpoint } from '@/config';
3-
// import { defaultContext } from '@tanstack/react-query'
4-
import BigNumber from "bignumber.js";
5-
import { defaultAssetList } from "@/config";
6-
import { createRpcQueryHooks, useRpcClient } from '../src/codegen';
7-
8-
export default function useBalance({
9-
address,
10-
}:{
11-
address: string,
12-
}) {
3+
import BigNumber from 'bignumber.js';
4+
import { defaultAssetList } from '@/config';
5+
import { defaultContext } from '@tanstack/react-query';
136

7+
export default function useBalance({ address }: { address: string }) {
148
const coin = defaultAssetList?.assets[0];
159

16-
const denom = coin!.base!
10+
const denom = coin!.base!;
1711

1812
const COIN_DISPLAY_EXPONENT = coin!.denomUnits.find(
1913
(unit) => unit.denom === coin!.display
2014
)?.exponent as number;
2115

22-
const { data: rpcClient } = useRpcClient({
23-
rpcEndpoint,
24-
options: {
25-
enabled: !!rpcEndpoint && !!address,
26-
},
27-
});
28-
29-
const hooks = createRpcQueryHooks({ rpc: rpcClient });
30-
3116
const {
3217
data: balance,
3318
isSuccess: isBalanceLoaded,
3419
isLoading: isFetchingBalance,
3520
refetch: refetchBalance,
36-
} = hooks.useBalance({
21+
} = useGetBalance({
3722
request: {
3823
address: address || '',
3924
denom,
4025
},
4126
options: {
42-
enabled: !!address && !!rpcClient,
43-
// transform the returned balance into a BigNumber
27+
context: defaultContext,
28+
enabled: !!address,
4429
select: ({ balance }) =>
4530
new BigNumber(balance?.amount ?? 0).multipliedBy(
4631
10 ** -COIN_DISPLAY_EXPONENT
4732
),
48-
}
33+
staleTime: 0,
34+
},
35+
clientResolver: rpcEndpoint,
4936
});
5037

5138
return {
5239
balance,
5340
isBalanceLoaded,
5441
isFetchingBalance,
5542
refetchBalance,
56-
}
43+
};
5744
}

‎examples/injective/hooks/useTx.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useChain } from '@interchain-kit/react';
2+
import { defaultContext, useQuery } from '@tanstack/react-query';
3+
4+
import { DEFAULT_SIGNING_CLIENT_QUERY_KEY } from 'injective-react/react-query';
5+
import { WalletState } from '@interchain-kit/core';
6+
7+
export enum TxStatus {
8+
Failed = 'Transaction Failed',
9+
Successful = 'Transaction Successful',
10+
Broadcasting = 'Transaction Broadcasting',
11+
}
12+
13+
export const useSigningClient = (
14+
chainName: string,
15+
options: {
16+
walletStatus?: WalletState;
17+
}
18+
) => {
19+
const { getSigningClient } = useChain(chainName);
20+
21+
return useQuery(
22+
[DEFAULT_SIGNING_CLIENT_QUERY_KEY, chainName],
23+
async () => {
24+
const client = await getSigningClient();
25+
return client;
26+
},
27+
{
28+
enabled:
29+
!!chainName &&
30+
(!options || options?.walletStatus === WalletState.Connected),
31+
context: defaultContext,
32+
}
33+
);
34+
};

‎examples/injective/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,14 @@
3737
"@interchain-kit/react": "0.2.202",
3838
"@interchain-ui/react": "^1.23.29",
3939
"@interchain-ui/react-no-ssr": "^0.1.6",
40+
"@interchainjs/cosmos": "1.9.12",
4041
"@interchainjs/cosmos-types": "1.9.12",
4142
"@interchainjs/injective": "1.9.12",
4243
"@tanstack/react-query": "4.29.1",
4344
"bignumber.js": "9.1.1",
4445
"chain-registry": "^1.69.32",
4546
"decimal.js": "^10.4.3",
46-
"interchainjs": "1.9.12",
47+
"injective-react": "1.9.12",
4748
"mobx": "^6.13.5",
4849
"next": "^13",
4950
"react": "18.2.0",

0 commit comments

Comments
 (0)