Skip to content

Commit f8a5145

Browse files
ZetazzzZetazzz
authored
Merge pull request #12 from hyperweb-io/update/injective-vue-update
Update/injective vue update
2 parents 4368c93 + 1e0378d commit f8a5145

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+5236
-4212
lines changed

‎examples/injective-vue/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar"
4+
]
5+
}

‎examples/injective-vue/CHANGELOG.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5+
6+
## [0.0.3](https://github.com/hyperweb-io/create-interchain-app/compare/@hyperweb/[email protected]...@hyperweb/[email protected]) (2025-01-27)
7+
8+
**Note:** Version bump only for package @hyperweb/injective-vue
9+
10+
11+
12+
13+
14+
## 0.0.2 (2025-01-27)
15+
16+
**Note:** Version bump only for package @hyperweb/injective-vue
17+
18+
19+
20+
21+
22+
## 0.0.1 (2025-01-27)
23+
24+
**Note:** Version bump only for package injective-vue

‎examples/injective-vue/README.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Introduction
2+
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).
3+
## Directory Structure
4+
```
5+
├── src/
6+
│ ├── components/
7+
│ │ ├── asset-list/
8+
│ │ ├── provide-liquidity/
9+
│ │ └── stake-tokens/
10+
│ ├── composables/
11+
│ │ ├── common/
12+
│ │ └── injective/
13+
│ ├── utils/
14+
│ │ ├── asset-list/
15+
│ │ ├── stake-tokens/
16+
│ │ └── voting/
17+
│ ├── views/
18+
│ │ ├── index.vue
19+
│ │ └── injective.vue
20+
│ ├── router.ts
21+
│ ├── utils/
22+
│ ├── App.vue
23+
│ └── main.ts
24+
```
25+
## Pages
26+
27+
### Asset List
28+
- **Completion Status:** ✅ Completed
29+
- **Functionalities:**
30+
- Wallet connect
31+
- Assets display
32+
- IBC transfer
33+
- **Telescope generated `Vue Composables` Used:**
34+
```ts
35+
cosmos.bank.v1beta1.useBalance
36+
cosmos.bank.v1beta1.useAllBalances
37+
cosmos.staking.v1beta1.useDelegatorDelegations
38+
osmosis.gamm.v1beta1.usePools
39+
```
40+
- **`msgType`s are signAndBroadcasted:**
41+
```ts
42+
/ibc.applications.transfer.v1.MsgTransfer
43+
```
44+
45+
### Auth
46+
- **Completion Status:** ✅ Completed
47+
- **Functionalities:**
48+
- Vote permission granting and revoking
49+
- Send permission granting and revoking
50+
- Delegate permission granting and revoking
51+
- Claim rewards granting and revoking
52+
- **Telescope generated `Vue Composables` Used:**
53+
```ts
54+
cosmos.authz.v1beta1.useGranterGrants
55+
cosmos.authz.v1beta1.useGranteeGrants
56+
cosmos.staking.v1beta1.useValidators
57+
```
58+
- **`msgType`s are signAndBroadcasted:**
59+
```ts
60+
/cosmos.authz.v1beta1.MsgRevoke
61+
/cosmos.authz.v1beta1.MsgGrant
62+
```
63+
64+
### Voting
65+
- **Completion Status:** ✅ Completed
66+
- **Functionalities:**
67+
- Proposals display
68+
- Proposal voting
69+
- **Telescope generated `Vue Composables` Used:**
70+
```ts
71+
cosmos.gov.v1.useProposals
72+
cosmos.gov.v1.useParams
73+
cosmos.gov.v1.useProposals
74+
cosmos.staking.v1beta1.usePools
75+
```
76+
- **`msgType`s are signAndBroadcasted:**
77+
```ts
78+
/cosmos.gov.v1.MsgVote
79+
```
80+
81+
### Injective
82+
- **Completion Status:** ✅ Completed
83+
- **Functionalities:**
84+
- inj balance display
85+
- **Telescope Generated Tree Shakable Hooks Used:**
86+
```ts
87+
cosmos.bank.v1beta1.useBalance
88+
```
89+
- The location of usage `./src/composables/injective/useBalanceVue.ts`
90+
- This is the demonstration of tree shakable function `useBalance` generated by `telescope`
91+
92+
### Stake tokens
93+
- **Completion Status:** ⏳ In Progress... 50% done.
94+
- **Functionalities:**
95+
- all validators display
96+
- validators display for a specified address
97+
- claimable rewards display
98+
- staked tokens display for a specified chain
99+
- claim rewards
100+
- manage validators
101+
- **Telescope generated `Vue Composables` Used:**
102+
```ts
103+
cosmos.mint.v1beta.useAnnualProvisions
104+
cosmos.distribution.v1beta1.useParams
105+
cosmos.distribution.v1beta1.useDelegationTotalRewards
106+
codegen.cosmos.staking.v1beta1.useDelegatorValidators
107+
cosmos.staking.v1beta1.useParams
108+
```
109+
- **`msgType`s are signAndBroadcasted:**
110+
```ts
111+
```
112+
113+
### Provide Liquidity
114+
- **Completion Status:** ⏳ In Progress...
115+
116+
### Swap tokens
117+
- **Completion Status:** ⏳ In Progress...
118+
119+
120+
### Rollkit
121+
- **Completion Status:** ⏳ In Progress...
122+
123+
### Grpc Web & Grpc Gateway
124+
- **Completion Status:** ⏳ In Progress...

‎examples/injective-vue/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/injective-vue/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@hyperweb/injective-vue",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc -b && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@chain-registry/v2": "^1.71.44",
13+
"@chain-registry/v2-types": "^0.53.20",
14+
"@cosmjs/amino": "^0.32.4",
15+
"@cosmjs/stargate": "^0.32.4",
16+
"@interchain-kit/core": "0.0.1-beta.39",
17+
"@interchain-kit/keplr-extension": "0.0.1-beta.39",
18+
"@interchain-kit/leap-extension": "0.0.1-beta.39",
19+
"@interchain-kit/vue": "0.0.1-beta.38",
20+
"@interchain-ui/vue": "^1.4.1",
21+
"@interchainjs/cosmos": "1.6.1",
22+
"@interchainjs/injective": "1.6.1",
23+
"@interchainjs/vue": "1.8.1",
24+
"@tanstack/vue-query": "5.62.7",
25+
"bignumber.js": "9.1.0",
26+
"osmojs": "^16.15.0",
27+
"vue": "^3.5.13",
28+
"vue-router": "^4.5.0"
29+
},
30+
"devDependencies": {
31+
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
32+
"@vitejs/plugin-vue": "^5.2.1",
33+
"typescript": "~5.6.2",
34+
"vite": "^6.0.0",
35+
"vue-tsc": "^2.1.10"
36+
},
37+
"packageManager": "[email protected]"
38+
}

‎examples/injective-vue/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/injective-vue/src/App.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import { ThemeProvider } from '@interchain-ui/vue'
3+
import { ChainProvider } from '@interchain-kit/vue'
4+
import { keplrWallet } from '@interchain-kit/keplr-extension';
5+
import { leapWallet } from '@interchain-kit/leap-extension';
6+
import { RouterView } from 'vue-router';
7+
import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
8+
import { chain as osmosisChain, assetList as osmosisAssetList } from "@chain-registry/v2/mainnet/osmosis";
9+
import { chain as cosmoshubChain, assetList as cosmoshubAssetList } from "@chain-registry/v2/mainnet/cosmoshub";
10+
import { chain as stargazeChain, assetList as stargazeAssetList } from "@chain-registry/v2/mainnet/stargaze";
11+
import { chain as xplaChain, assetList as xplaAssetList} from "@chain-registry/v2/mainnet/xpla"
12+
import { chain as osmosisTestChain, assetList as osmosisTestAssetList } from "@chain-registry/v2/testnet/osmosistestnet"
13+
import { chain as injectiveChain, assetList as injectiveAssetList } from "@chain-registry/v2/mainnet/injective"
14+
</script>
15+
16+
<template>
17+
<ThemeProvider>
18+
<ChainProvider
19+
:wallets="[keplrWallet, leapWallet]"
20+
:chains="[osmosisChain, junoChain, cosmoshubChain, stargazeChain, xplaChain, osmosisTestChain, injectiveChain]"
21+
:asset-lists="[osmosisAssetList, junoAssetList, cosmoshubAssetList, stargazeAssetList, xplaAssetList, osmosisTestAssetList, injectiveAssetList]" :signer-options="{}"
22+
:endpoint-options="{}">
23+
<router-view />
24+
</ChainProvider>
25+
</ThemeProvider>
26+
</template>
27+
28+
<style scoped></style>

‎examples/injective-vue/src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<script setup lang="ts">
2+
import { Box, Stack, Text, Button } from '@interchain-ui/vue'
3+
import { defineProps } from 'vue'
4+
5+
defineProps<{
6+
title: string,
7+
singleChainHeader: any,
8+
}>();
9+
10+
const emit = defineEmits<{
11+
(event: 'onDeposit'): void;
12+
(event: 'onWithdraw'): void;
13+
}>();
14+
15+
const handleWithdraw = () => {
16+
emit('onWithdraw')
17+
}
18+
19+
const handleDeposit = () => {
20+
emit('onDeposit')
21+
}
22+
23+
</script>
24+
25+
<template>
26+
<Box
27+
display="flex"
28+
flexDirection="column"
29+
>
30+
<Text
31+
fontSize="$xl"
32+
fontWeight="$semibold"
33+
:attributes="{
34+
marginBottom: '$10',
35+
}"
36+
>
37+
{{ title }}
38+
</Text>
39+
<Box
40+
display="flex"
41+
flexWrap="wrap"
42+
gap="$10"
43+
justifyContent="space-between"
44+
alignItems="center"
45+
width="auto"
46+
minHeight="$21"
47+
py="$10"
48+
px="$10"
49+
backgroundColor="$cardBg"
50+
borderRadius="$lg"
51+
>
52+
<Stack direction="vertical">
53+
<Text>{{ singleChainHeader?.label }}</Text>
54+
<Stack
55+
:attributes="{
56+
alignItems: 'baseline'
57+
}"
58+
>
59+
<Text fontWeight="$semibold">$</Text>
60+
<Text fontSize="$4xl" fontWeight="$semibold">
61+
{{ singleChainHeader?.value }}
62+
</Text>
63+
</Stack>
64+
</Stack>
65+
<Box
66+
display="flex"
67+
flex="1"
68+
alignItems="center"
69+
:justifyContent="{
70+
mobile: 'space-between',
71+
tablet: 'flex-end',
72+
}"
73+
:gap="{
74+
mobile: '$6',
75+
tablet: '$12',
76+
desktop: '$12',
77+
}"
78+
>
79+
<Box
80+
:flex="{
81+
mobile: '1',
82+
tablet: '0 0 auto',
83+
}"
84+
:width="{
85+
mobile: 'auto',
86+
tablet: '$25',
87+
desktop: '$25',
88+
}"
89+
>
90+
<Button
91+
variant="outlined"
92+
intent="secondary"
93+
fluidWidth
94+
@click="handleWithdraw"
95+
>
96+
Withdraw
97+
</Button>
98+
</Box>
99+
<Box
100+
:flex="{
101+
mobile: '1',
102+
tablet: '0 0 auto',
103+
}"
104+
:width="{
105+
mobile: 'auto',
106+
tablet: '$25',
107+
desktop: '$25',
108+
}"
109+
>
110+
<Button
111+
intent="tertiary"
112+
fluidWidth
113+
@click="handleDeposit"
114+
>
115+
Deposit
116+
</Button>
117+
</Box>
118+
</Box>
119+
</Box>
120+
</Box>
121+
</template>
122+
123+
<style scoped></style>

0 commit comments

Comments
 (0)