Skip to content

Commit 3d02f85

Browse files
committed
solved import package crypto issue
1 parent 53a2efd commit 3d02f85

File tree

6 files changed

+512
-201
lines changed

6 files changed

+512
-201
lines changed

examples/injective-vue/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
"@interchain-kit/vue": "0.2.222",
1818
"@interchain-ui/vue": "^1.4.1",
1919
"@interchainjs/cosmos": "1.11.2",
20-
"@interchainjs/injective": "1.11.2",
20+
"@interchainjs/injective": "1.6.5",
2121
"@interchainjs/vue": "1.11.2",
2222
"@tanstack/vue-query": "5.62.7",
2323
"bignumber.js": "9.1.0",
24+
"crypto-browserify": "^3.12.1",
25+
"injective-vue": "1.16.6",
2426
"vue": "^3.5.13",
2527
"vue-router": "^4.5.0"
2628
},
@@ -31,4 +33,4 @@
3133
"vite": "^6.0.0",
3234
"vue-tsc": "^2.1.10"
3335
}
34-
}
36+
}

examples/injective-vue/src/composables/common/useInjectiveClient.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,30 @@ import { MsgSend } from '@interchainjs/vue/cosmos/bank/v1beta1/tx';
66
import { Ref, computed, ref, watch } from 'vue';
77

88
export const useInjectiveClient = (chainName: Ref<string>) => {
9-
const { rpcEndpoint, chain } = useChain(chainName)
10-
const injectiveClient = ref()
11-
const wm = useWalletManager()
9+
const { rpcEndpoint, chain } = useChain(chainName);
10+
const injectiveClient = ref();
11+
const wm = useWalletManager();
1212
const signer = computed(() => {
1313
if (!chain.value.chainId) {
14-
return
14+
return;
1515
}
16-
const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet
17-
return wallet.getOfflineSigner(chain.value.chainId, 'direct') // cosmoshub-4
18-
})
16+
const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet;
17+
return wallet.getOfflineSigner(chain.value.chainId, 'direct'); // cosmoshub-4
18+
});
1919
const _fetchClient = async (rpcEndpoint: string, signer: any) => {
2020
if (!rpcEndpoint || !signer) {
21-
return
21+
return;
2222
}
23-
signer.signMode = 'direct'
24-
let res = await InjSigningClient.connectWithSigner(rpcEndpoint, signer)
23+
signer.signMode = 'direct';
24+
let res = await InjSigningClient.connectWithSigner(rpcEndpoint, signer);
2525

26-
injectiveClient.value = res
26+
injectiveClient.value = res;
2727
injectiveClient.value?.addEncoders(toEncoders(MsgSend));
2828
injectiveClient.value?.addConverters(toConverters(MsgSend));
29-
}
29+
};
3030
watch([rpcEndpoint, signer], ([rpc, sn]) => {
31-
_fetchClient(rpc as string, sn)
32-
})
33-
_fetchClient(rpcEndpoint.value as string, signer.value)
34-
return injectiveClient
35-
}
31+
_fetchClient(rpc as string, sn);
32+
});
33+
_fetchClient(rpcEndpoint.value as string, signer.value);
34+
return injectiveClient;
35+
};
Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
1-
import { Ref, computed, ref, watch } from 'vue'
2-
import { ExtensionWallet } from '@interchain-kit/core'
3-
import { useChain, useWalletManager } from '@interchain-kit/vue'
1+
import { Ref, computed, ref, watch } from 'vue';
2+
import { ExtensionWallet } from '@interchain-kit/core';
3+
import { useChain, useWalletManager } from '@interchain-kit/vue';
44
import { SigningClient as SigningStargateClient } from '@interchainjs/cosmos/signing-client';
55

66
export const useStargateClient = (chainName: Ref<string>) => {
7-
const { rpcEndpoint, chain } = useChain(chainName)
8-
const stargazeClient = ref()
9-
const wm = useWalletManager()
7+
const { rpcEndpoint, chain } = useChain(chainName);
8+
const stargazeClient = ref();
9+
const wm = useWalletManager();
1010
const signer = computed(() => {
1111
if (!chain.value.chainId) {
12-
return
12+
return;
1313
}
14-
const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet
15-
return wallet.getOfflineSigner(chain.value.chainId, 'direct') // cosmoshub-4
16-
})
14+
const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet;
15+
return wallet.getOfflineSigner(chain.value.chainId, 'direct'); // cosmoshub-4
16+
});
1717
const _fetchClient = async (rpcEndpoint: string, signer: any) => {
1818
if (!rpcEndpoint || !signer) {
19-
return
19+
return;
2020
}
21-
let res = await SigningStargateClient.connectWithSigner(rpcEndpoint, signer)
22-
stargazeClient.value = res
23-
}
21+
let res = await SigningStargateClient.connectWithSigner(
22+
rpcEndpoint,
23+
signer
24+
);
25+
stargazeClient.value = res;
26+
};
2427
watch([rpcEndpoint, signer], ([rpc, sn]) => {
25-
_fetchClient(rpc as string, sn)
26-
})
27-
_fetchClient(rpcEndpoint.value as string, signer.value)
28-
return stargazeClient
29-
}
28+
_fetchClient(rpc as string, sn);
29+
});
30+
_fetchClient(rpcEndpoint.value as string, signer.value);
31+
return stargazeClient;
32+
};

examples/injective-vue/src/views/injective.vue

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
<script setup lang="ts">
2-
import { Box, Button, Text, Link } from "@interchain-ui/vue";
3-
import { computed, ref } from "vue";
4-
import { useBalanceVue } from "../composables/injective/useBalanceVue";
5-
import { useChain } from "@interchain-kit/vue";
6-
import { MessageComposer } from "../../../injective/src/codegen/cosmos/bank/v1beta1/tx.registry";
7-
import { useInjectiveClient } from "../composables/common/useInjectiveClient";
2+
import { Box, Button, Text, Link } from '@interchain-ui/vue';
3+
import { computed, ref } from 'vue';
4+
import { useBalanceVue } from '../composables/injective/useBalanceVue';
5+
import { useChain } from '@interchain-kit/vue';
6+
import { MessageComposer } from 'injective-vue/cosmos/bank/v1beta1/tx.registry';
7+
import { useInjectiveClient } from '../composables/common/useInjectiveClient';
88
9-
const chainName = ref("injective");
9+
const chainName = ref('injective');
1010
const injectiveClient = useInjectiveClient(chainName);
1111
const { address, chain } = useChain(chainName);
12-
const {
13-
balance,
14-
isBalanceLoaded,
15-
isFetchingBalance,
16-
refetchBalance,
17-
denom,
18-
} = useBalanceVue(chainName);
12+
const { balance, isBalanceLoaded, isFetchingBalance, refetchBalance, denom } =
13+
useBalanceVue(chainName);
1914
20-
const txHash = ref("");
15+
const txHash = ref('');
2116
2217
const sending = ref(false);
23-
console.log("chain>", chain);
18+
console.log('chain>', chain);
2419
const txPage = computed(() => {
2520
return chain?.value.explorers?.[0]?.txPage;
2621
});
@@ -35,10 +30,10 @@ const handleSend = async () => {
3530
amount: [
3631
{
3732
denom,
38-
amount: "2500",
33+
amount: '2500',
3934
},
4035
],
41-
gas: "1000000",
36+
gas: '1000000',
4237
};
4338
4439
// const msgs = [{
@@ -55,25 +50,25 @@ const handleSend = async () => {
5550
send({
5651
fromAddress: address.value,
5752
toAddress: address.value,
58-
amount: [{ denom, amount: "1" }],
53+
amount: [{ denom, amount: '1' }],
5954
}),
6055
];
6156
62-
console.log("msgs", msgs);
57+
console.log('msgs', msgs);
6358
try {
6459
const data = (await injectiveClient.value.signAndBroadcast(
6560
address.value,
6661
msgs,
6762
fee,
68-
"using interchainjs"
63+
'using interchainjs'
6964
)) as any;
70-
console.log("onSuccess", data);
65+
console.log('onSuccess', data);
7166
if (data.code === 0) {
7267
refetchBalance();
7368
txHash.value = data.hash;
7469
}
7570
} catch (error: any) {
76-
console.log("onError", error);
71+
console.log('onError', error);
7772
} finally {
7873
sending.value = false;
7974
}
@@ -84,14 +79,20 @@ const handleSend = async () => {
8479
<Box display="flex" flexDirection="column" alignItems="center">
8580
<Box mb="$4">
8681
<Text fontSize="$2xl"
87-
>Balance: {{ isFetchingBalance ? "--" : computedBalance }}
82+
>Balance: {{ isFetchingBalance ? '--' : computedBalance }}
8883
</Text>
8984
</Box>
9085
<Button :disabled="sending" @click="handleSend"> Send </Button>
91-
<Box v-if="txHash" mt="$4" display="flex" flexDirection="row" alignItems="center">
86+
<Box
87+
v-if="txHash"
88+
mt="$4"
89+
display="flex"
90+
flexDirection="row"
91+
alignItems="center"
92+
>
9293
<Text :attributes="{ mr: '$1' }">Details:</Text>
9394
<Link :href="txPage?.replace('${txHash}', txHash)!" target="_blank">
94-
{{txPage?.replace('${txHash}', txHash)!}}
95+
{{ txPage?.replace('${txHash}', txHash)! }}
9596
</Link>
9697
</Box>
9798
</Box>

examples/injective-vue/vite.config.ts

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
import { defineConfig } from 'vite';
22
import vue from '@vitejs/plugin-vue';
3-
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
3+
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
44
import { resolve } from 'path';
55

6-
// https://vitejs.dev/config/
76
export default defineConfig({
87
plugins: [vue()],
98
optimizeDeps: {
109
esbuildOptions: {
11-
// Node.js global to browser globalThis
1210
define: {
13-
global: 'globalThis'
11+
global: 'globalThis',
1412
},
15-
// Enable esbuild polyfill plugins
1613
plugins: [
1714
NodeGlobalsPolyfillPlugin({
18-
buffer: true
19-
})
20-
]
21-
}
15+
buffer: true,
16+
process: true,
17+
}),
18+
],
19+
},
2220
},
2321
resolve: {
2422
alias: {
25-
"crypto": "crypto-browserify",
23+
crypto: resolve(__dirname, 'node_modules/crypto-browserify'),
2624
'@': resolve(__dirname, 'src'),
27-
}
28-
}
25+
},
26+
},
2927
});

0 commit comments

Comments
 (0)