Update/injective vue update

examples/injective-vue/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/injective-vue/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "Vue.volar"
+  ]
+}

examples/injective-vue/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.3](https://github.com/hyperweb-io/create-interchain-app/compare/@hyperweb/[email protected]...@hyperweb/[email protected]) (2025-01-27)
+
+**Note:** Version bump only for package @hyperweb/injective-vue
+
+
+
+
+
+## 0.0.2 (2025-01-27)
+
+**Note:** Version bump only for package @hyperweb/injective-vue
+
+
+
+
+
+## 0.0.1 (2025-01-27)
+
+**Note:** Version bump only for package injective-vue

examples/injective-vue/README.md

@@ -0,0 +1,124 @@
+# Introduction
+This example demonstrates the usage of Vue composables provided by [@interchain-kit/vue](https://github.com/hyperweb-io/interchain-kit/tree/main/packages/vue) and generated by [telescope](https://github.com/hyperweb-io/telescope).
+## Directory Structure
+```
+├── src/
+│   ├── components/
+│   │   ├── asset-list/
+│   │   ├── provide-liquidity/
+│   │   └── stake-tokens/
+│   ├── composables/
+│   │   ├── common/
+│   │   └── injective/
+│   ├── utils/
+│   │   ├── asset-list/
+│   │   ├── stake-tokens/
+│   │   └── voting/
+│   ├── views/
+│   │   ├── index.vue
+│   │   └── injective.vue
+│   ├── router.ts
+│   ├── utils/
+│   ├── App.vue
+│   └── main.ts
+```
+## Pages
+
+### Asset List
+- **Completion Status:** ✅ Completed
+- **Functionalities:**
+  - Wallet connect
+  - Assets display
+  - IBC transfer
+- **Telescope generated `Vue Composables` Used:**
+```ts
+cosmos.bank.v1beta1.useBalance
+cosmos.bank.v1beta1.useAllBalances
+cosmos.staking.v1beta1.useDelegatorDelegations
+osmosis.gamm.v1beta1.usePools
+```
+- **`msgType`s are signAndBroadcasted:**
+```ts
+/ibc.applications.transfer.v1.MsgTransfer
+```
+
+### Auth
+- **Completion Status:** ✅ Completed
+- **Functionalities:**
+  - Vote permission granting and revoking
+  - Send permission granting and revoking
+  - Delegate permission granting and revoking
+  - Claim rewards granting and revoking
+- **Telescope generated `Vue Composables` Used:**
+```ts
+cosmos.authz.v1beta1.useGranterGrants
+cosmos.authz.v1beta1.useGranteeGrants
+cosmos.staking.v1beta1.useValidators
+```
+- **`msgType`s are signAndBroadcasted:**
+```ts
+/cosmos.authz.v1beta1.MsgRevoke
+/cosmos.authz.v1beta1.MsgGrant
+```
+
+### Voting
+- **Completion Status:** ✅ Completed
+- **Functionalities:**
+  - Proposals display
+  - Proposal voting
+- **Telescope generated `Vue Composables` Used:**
+```ts
+cosmos.gov.v1.useProposals
+cosmos.gov.v1.useParams
+cosmos.gov.v1.useProposals
+cosmos.staking.v1beta1.usePools
+```
+- **`msgType`s are signAndBroadcasted:**
+```ts
+/cosmos.gov.v1.MsgVote
+```
+
+### Injective
+- **Completion Status:** ✅ Completed
+- **Functionalities:**
+  - inj balance display
+- **Telescope Generated Tree Shakable Hooks Used:**
+```ts
+cosmos.bank.v1beta1.useBalance
+```
+  - 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:**
+  - all validators display
+  - validators display for a specified address
+  - claimable rewards display
+  - staked tokens display for a specified chain
+  - claim rewards
+  - manage validators
+- **Telescope generated `Vue Composables` Used:**
+```ts
+cosmos.mint.v1beta.useAnnualProvisions
+cosmos.distribution.v1beta1.useParams
+cosmos.distribution.v1beta1.useDelegationTotalRewards
+codegen.cosmos.staking.v1beta1.useDelegatorValidators
+cosmos.staking.v1beta1.useParams
+```
+- **`msgType`s are signAndBroadcasted:**
+```ts
+```
+
+### Provide Liquidity
+- **Completion Status:** ⏳ In Progress...
+
+### Swap tokens
+- **Completion Status:** ⏳ In Progress...
+
+
+### Rollkit
+- **Completion Status:** ⏳ In Progress...
+
+### Grpc Web & Grpc Gateway
+- **Completion Status:** ⏳ In Progress...

examples/injective-vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/injective-vue/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hyperweb/injective-vue",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chain-registry/v2": "^1.71.44",
+    "@chain-registry/v2-types": "^0.53.20",
+    "@cosmjs/amino": "^0.32.4",
+    "@cosmjs/stargate": "^0.32.4",
+    "@interchain-kit/core": "0.0.1-beta.39",
+    "@interchain-kit/keplr-extension": "0.0.1-beta.39",
+    "@interchain-kit/leap-extension": "0.0.1-beta.39",
+    "@interchain-kit/vue": "0.0.1-beta.38",
+    "@interchain-ui/vue": "^1.4.1",
+    "@interchainjs/cosmos": "1.6.1",
+    "@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",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.0",
+    "vue-tsc": "^2.1.10"
+  },
+  "packageManager": "[email protected]"
+}

examples/injective-vue/src/App.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ThemeProvider } from '@interchain-ui/vue'
+import { ChainProvider } from '@interchain-kit/vue'
+import { keplrWallet } from '@interchain-kit/keplr-extension';
+import { leapWallet } from '@interchain-kit/leap-extension';
+import { RouterView } from 'vue-router';
+import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
+import { chain as osmosisChain, assetList as osmosisAssetList } from "@chain-registry/v2/mainnet/osmosis";
+import { chain as cosmoshubChain, assetList as cosmoshubAssetList } from "@chain-registry/v2/mainnet/cosmoshub";
+import { chain as stargazeChain, assetList as stargazeAssetList } from "@chain-registry/v2/mainnet/stargaze";
+import { chain as xplaChain, assetList as xplaAssetList} from "@chain-registry/v2/mainnet/xpla"
+import { chain as osmosisTestChain, assetList as osmosisTestAssetList } from "@chain-registry/v2/testnet/osmosistestnet"
+import { chain as injectiveChain, assetList as injectiveAssetList } from "@chain-registry/v2/mainnet/injective"
+</script>
+
+<template>
+  <ThemeProvider>
+    <ChainProvider 
+      :wallets="[keplrWallet, leapWallet]"
+      :chains="[osmosisChain, junoChain, cosmoshubChain, stargazeChain, xplaChain, osmosisTestChain, injectiveChain]"
+      :asset-lists="[osmosisAssetList, junoAssetList, cosmoshubAssetList, stargazeAssetList, xplaAssetList, osmosisTestAssetList, injectiveAssetList]" :signer-options="{}"
+      :endpoint-options="{}">
+      <router-view />
+    </ChainProvider>
+  </ThemeProvider>
+</template>
+
+<style scoped></style>

examples/injective-vue/src/components/asset-list/asset-list-header.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { Box, Stack, Text, Button } from '@interchain-ui/vue'
+import { defineProps } from 'vue'
+
+defineProps<{
+  title: string,
+  singleChainHeader: any,
+}>();
+
+const emit = defineEmits<{
+  (event: 'onDeposit'): void;
+  (event: 'onWithdraw'): void;
+}>();
+
+const handleWithdraw = () => {
+  emit('onWithdraw')
+}
+
+const handleDeposit = () => {
+  emit('onDeposit')
+}
+
+</script>
+
+<template>
+  <Box
+    display="flex"
+    flexDirection="column"
+  >
+    <Text
+      fontSize="$xl"
+      fontWeight="$semibold"
+      :attributes="{
+        marginBottom: '$10',
+      }"
+    >
+      {{ title }}
+    </Text>
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        gap="$10"
+        justifyContent="space-between"
+        alignItems="center"
+        width="auto"
+        minHeight="$21"
+        py="$10"
+        px="$10"
+        backgroundColor="$cardBg"
+        borderRadius="$lg"
+      >
+        <Stack direction="vertical">
+          <Text>{{ singleChainHeader?.label }}</Text>
+          <Stack
+            :attributes="{
+              alignItems: 'baseline'
+            }"
+          >
+            <Text fontWeight="$semibold">$</Text>
+            <Text fontSize="$4xl" fontWeight="$semibold">
+              {{ singleChainHeader?.value }}
+            </Text>
+          </Stack>
+        </Stack>
+        <Box
+          display="flex"
+          flex="1"
+          alignItems="center"
+          :justifyContent="{
+            mobile: 'space-between',
+            tablet: 'flex-end',
+          }"
+          :gap="{
+            mobile: '$6',
+            tablet: '$12',
+            desktop: '$12',
+          }"
+        >
+          <Box
+            :flex="{
+              mobile: '1',
+              tablet: '0 0 auto',
+            }"
+            :width="{
+              mobile: 'auto',
+              tablet: '$25',
+              desktop: '$25',
+            }"
+          >
+            <Button
+              variant="outlined"
+              intent="secondary"
+              fluidWidth
+              @click="handleWithdraw"
+            >
+              Withdraw
+            </Button>
+          </Box>
+          <Box
+            :flex="{
+              mobile: '1',
+              tablet: '0 0 auto',
+            }"
+            :width="{
+              mobile: 'auto',
+              tablet: '$25',
+              desktop: '$25',
+            }"
+          >
+            <Button
+              intent="tertiary"
+              fluidWidth
+              @click="handleDeposit"
+            >
+              Deposit
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+</template>
+
+<style scoped></style>