Dependency fixes and readme update

Author: NorOldBurden

examples/injective-vue/README.md

@@ -3,32 +3,20 @@ This example demonstrates the usage of Vue composables provided by [@interchain-
 ## Directory Structure
 ```
 ├── src/
-│   ├── codegen                     # containing vue composables generated by `telescope`
 │   ├── components/
 │   │   ├── asset-list/
-│   │   ├── authz/
 │   │   ├── provide-liquidity/
-│   │   ├── stake-tokens/
-│   │   └── voting/
+│   │   └── stake-tokens/
 │   ├── composables/
-│   │   ├── asset-list/
-│   │   ├── authz/
 │   │   ├── common/
-│   │   ├── injective/
-│   │   ├── provide-liquidity/
-│   │   ├── stake-tokens/
-│   │   └── voting/
+│   │   └── injective/
 │   ├── utils/
 │   │   ├── asset-list/
-│   │   ├── authz/
-│   │   ├── provide-liquidity/
 │   │   ├── stake-tokens/
 │   │   └── voting/
 │   ├── views/
-│   │   ├── asset-list.vue
-│   │   ├── authz.vue
 │   │   ├── index.vue
-│   │   └── voting.vue
+│   │   └── injective.vue
 │   ├── router.ts
 │   ├── utils/
 │   ├── App.vue
@@ -94,15 +82,13 @@ cosmos.staking.v1beta1.usePools
 - **Completion Status:** ✅ Completed
 - **Functionalities:**
   - inj balance display
-  - inj tokens transfer
-- **Telescope generated `Vue Composables` Used:**
+- **Telescope Generated Tree Shakable Hooks Used:**
 ```ts
 cosmos.bank.v1beta1.useBalance
 ```
-- **`msgType`s are signAndBroadcasted:**
-```ts
-/cosmos.bank.v1beta1.MsgSend
-```
+  - The location of usage `./src/composables/injective/useBalanceVue.ts`
+  - This is the demonstration of tree shakable function `useBalance` generated by `telescope`
+
 ### Stake tokens
 - **Completion Status:** ⏳ In Progress... 50% done.
 - **Functionalities:**

examples/injective-vue/package.json

@@ -19,12 +19,12 @@
     "@interchain-kit/vue": "0.0.1-beta.38",
     "@interchain-ui/vue": "^1.4.1",
     "@interchainjs/cosmos": "1.6.1",
-    "@interchainjs/injective": "1.8.3",
+    "@interchainjs/injective": "1.6.1",
     "@interchainjs/vue": "1.8.1",
     "@tanstack/vue-query": "5.62.7",
+    "bignumber.js": "9.1.0",
     "osmojs": "^16.15.0",
     "vue": "^3.5.13",
-    "bignumber.js": "9.1.0",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
@@ -34,5 +34,5 @@
     "vite": "^6.0.0",
     "vue-tsc": "^2.1.10"
   },
-  "packageManager": "yarn@4.3.0"
+  "packageManager": "yarn@4.1.0"
 }

examples/injective-vue/src/composables/injective/useBalance.ts

@@ -44,6 +44,7 @@ export const useBalanceVue = (address: Ref) => {
     isBalanceLoaded,
     isFetchingBalance,
     refetchBalance,
+    denom,
   };
 };
 

examples/injective-vue/src/composables/injective/useBalanceVue.ts

@@ -1,25 +1,34 @@
 <script setup lang="ts">
 import { Box, Button, Text, Link } from "@interchain-ui/vue";
 import { computed, ref } from "vue";
-import { useBalance } from "../composables/injective/useBalance";
+import { useBalanceVue } from "../composables/injective/useBalanceVue";
 import { useChain } from "@interchain-kit/vue";
 import { MessageComposer } from "../../../injective/src/codegen/cosmos/bank/v1beta1/tx.registry";
 import { useInjectiveClient } from "../composables/common/useInjectiveClient";
 
 const chainName = ref("injective");
 const injectiveClient = useInjectiveClient(chainName);
 const { address, chain } = useChain(chainName);
-const { balance, isLoading, COIN_DISPLAY_EXPONENT, symbol, denom, refetch } = useBalance(
-  chainName
-);
-const txHashMessageComposer = ref("");
+const {
+  balance,
+  isBalanceLoaded,
+  isFetchingBalance,
+  refetchBalance,
+  denom,
+} = useBalanceVue(address);
+
+const txHash = ref("");
 
 const sending = ref(false);
 console.log("chain>", chain);
 const txPage = computed(() => {
   return chain?.value.explorers?.[0]?.txPage;
 });
 
+const computedBalance = computed(() => {
+  return balance ?? null;
+});
+
 const handleSend = async () => {
   sending.value = true;
   const fee = {
@@ -60,7 +69,7 @@ const handleSend = async () => {
     )) as any;
     console.log("onSuccess", data);
     if (data.code === 0) {
-      refetch();
+      refetchBalance();
       txHash.value = data.hash;
     }
   } catch (error: any) {
@@ -75,9 +84,8 @@ const handleSend = async () => {
   <Box display="flex" flexDirection="column" alignItems="center">
     <Box mb="$4">
       <Text fontSize="$2xl"
-        >Balance: {{ isLoading ? "--" : balance?.toFixed(COIN_DISPLAY_EXPONENT) }}
-        {{ symbol }}</Text
-      >
+        >Balance: {{ isFetchingBalance ? "--" : computedBalance }}
+      </Text>
     </Box>
     <Button :disabled="sending" @click="handleSend"> Send </Button>
     <Box v-if="txHash" mt="$4" display="flex" flexDirection="row" alignItems="center">