diff --git a/examples/injective-vue/.gitignore b/examples/injective-vue/.gitignore deleted file mode 100644 index a547bf36d..000000000 --- a/examples/injective-vue/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# 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? diff --git a/examples/injective-vue/.vscode/extensions.json b/examples/injective-vue/.vscode/extensions.json deleted file mode 100644 index 58b7200fd..000000000 --- a/examples/injective-vue/.vscode/extensions.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "recommendations": [ - "Vue.volar" - ] -} \ No newline at end of file diff --git a/examples/injective-vue/README.md b/examples/injective-vue/README.md deleted file mode 100644 index c0ae11bb6..000000000 --- a/examples/injective-vue/README.md +++ /dev/null @@ -1,199 +0,0 @@ -# Injective Vue Example - -

-
- Building the future of decentralized exchange -

- -## Introduction - -This example demonstrates the usage of Vue composables provided by [@interchain-kit/vue](https://github.com/cosmology-tech/interchain-kit/tree/main/packages/vue) and [injective-vue](https://github.com/cosmology-tech/interchainjs/tree/main/libs/injective-vue). - -## Getting Started - -First, install the packages and run the development server: - -```bash -yarn && yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. - -### 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 - - inj tokens transfer - -- **Telescope generated `Vue Composables` Used:** - -```ts -cosmos.bank.v1beta1.useBalance -``` - -- **`msgType`s are signAndBroadcasted:** - -```ts -/cosmos.bank.v1beta1.MsgSend -``` - -- **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 -``` - -## Learn More - -### Chain Registry - -The npm package for the Official Cosmos chain registry. Get chain and token data for you application. - -* https://github.com/cosmology-tech/chain-registry - -### Cosmology Videos - -Checkout more videos for how to use various frontend tooling in the Cosmos! - -* https://cosmology.zone/learn - -### Interchain Kit - -A wallet connector for the Cosmos ⚛️ - -* https://github.com/cosmology-tech/interchain-kit - -### Telescope - -A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain. - -* https://github.com/cosmology-tech/telescope - -🎥 [Checkout the Telescope video playlist](https://www.youtube.com/watch?v=n82MsLe82mk&list=PL-lMkVv7GZwyQaK6bp6kMdOS5mzosxytC) to learn how to use `telescope`! - -### CosmWasm TS Codegen - -The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code. - -* https://github.com/CosmWasm/ts-codegen - -🎥 [Checkout the CosmWasm/ts-codegen video playlist](https://www.youtube.com/watch?v=D_A5V2PfNLA&list=PL-lMkVv7GZwz1KO3jANwr5W4MoziruXwK) to learn how to use `ts-codegen`! - - -## Learn More about Next.js - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. - -## Related - -Checkout these related projects: - -* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. -* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. -* [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. -* [interchain-kit](https://github.com/cosmology-tech/interchain-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. -* [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command. -* [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. -* [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain. - -## Credits - -🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator) - - -## Disclaimer - -AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. - -No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value. diff --git a/examples/injective-vue/index.html b/examples/injective-vue/index.html deleted file mode 100644 index dde16aaf3..000000000 --- a/examples/injective-vue/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + Vue + TS - - -
- - - diff --git a/examples/injective-vue/package.json b/examples/injective-vue/package.json deleted file mode 100644 index 9706bd1b9..000000000 --- a/examples/injective-vue/package.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "name": "injective-vue", - "private": true, - "version": "0.0.0", - "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", - "@tanstack/vue-query": "5.62.7", - "interchain-vue": "1.6.2", - "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" - } -} diff --git a/examples/injective-vue/public/vite.svg b/examples/injective-vue/public/vite.svg deleted file mode 100644 index e7b8dfb1b..000000000 --- a/examples/injective-vue/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/injective-vue/src/App.vue b/examples/injective-vue/src/App.vue deleted file mode 100644 index 2eee603cf..000000000 --- a/examples/injective-vue/src/App.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/assets/vue.svg b/examples/injective-vue/src/assets/vue.svg deleted file mode 100644 index 770e9d333..000000000 --- a/examples/injective-vue/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/injective-vue/src/components/asset-list/asset-list-header.vue b/examples/injective-vue/src/components/asset-list/asset-list-header.vue deleted file mode 100644 index 110bed06d..000000000 --- a/examples/injective-vue/src/components/asset-list/asset-list-header.vue +++ /dev/null @@ -1,123 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/asset-list-item.vue b/examples/injective-vue/src/components/asset-list/asset-list-item.vue deleted file mode 100644 index cf25b2e9a..000000000 --- a/examples/injective-vue/src/components/asset-list/asset-list-item.vue +++ /dev/null @@ -1,114 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/asset-list.vue b/examples/injective-vue/src/components/asset-list/asset-list.vue deleted file mode 100644 index 8c936e780..000000000 --- a/examples/injective-vue/src/components/asset-list/asset-list.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/asset-withdraw-tokens.vue b/examples/injective-vue/src/components/asset-list/asset-withdraw-tokens.vue deleted file mode 100644 index 4a5c41041..000000000 --- a/examples/injective-vue/src/components/asset-list/asset-withdraw-tokens.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/common/header.vue b/examples/injective-vue/src/components/asset-list/common/header.vue deleted file mode 100644 index d35484649..000000000 --- a/examples/injective-vue/src/components/asset-list/common/header.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/common/layout.vue b/examples/injective-vue/src/components/asset-list/common/layout.vue deleted file mode 100644 index da477fcf6..000000000 --- a/examples/injective-vue/src/components/asset-list/common/layout.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/dropdown-transfer-modal.vue b/examples/injective-vue/src/components/asset-list/dropdown-transfer-modal.vue deleted file mode 100644 index 80333942a..000000000 --- a/examples/injective-vue/src/components/asset-list/dropdown-transfer-modal.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/index.vue b/examples/injective-vue/src/components/asset-list/index.vue deleted file mode 100644 index 07000fe40..000000000 --- a/examples/injective-vue/src/components/asset-list/index.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/row-transfer-modal.vue b/examples/injective-vue/src/components/asset-list/row-transfer-modal.vue deleted file mode 100644 index 8bc9cf4d4..000000000 --- a/examples/injective-vue/src/components/asset-list/row-transfer-modal.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/single-chain.vue b/examples/injective-vue/src/components/asset-list/single-chain.vue deleted file mode 100644 index 62e09f422..000000000 --- a/examples/injective-vue/src/components/asset-list/single-chain.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - - - \ No newline at end of file diff --git a/examples/injective-vue/src/components/asset-list/transfer-modal-body.vue b/examples/injective-vue/src/components/asset-list/transfer-modal-body.vue deleted file mode 100644 index b7fa1df8e..000000000 --- a/examples/injective-vue/src/components/asset-list/transfer-modal-body.vue +++ /dev/null @@ -1,144 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/astronaut.vue b/examples/injective-vue/src/components/asset-list/wallet/astronaut.vue deleted file mode 100644 index eb8f33527..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/astronaut.vue +++ /dev/null @@ -1,160 +0,0 @@ - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/chain-card.vue b/examples/injective-vue/src/components/asset-list/wallet/chain-card.vue deleted file mode 100644 index 7533e9e5d..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/chain-card.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/copy-address-btn.vue b/examples/injective-vue/src/components/asset-list/wallet/copy-address-btn.vue deleted file mode 100644 index 75b02d6c9..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/copy-address-btn.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/user-info.vue b/examples/injective-vue/src/components/asset-list/wallet/user-info.vue deleted file mode 100644 index fca1898d9..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/user-info.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/ConnectWalletButton.vue b/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/ConnectWalletButton.vue deleted file mode 100644 index 95497c355..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/ConnectWalletButton.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/Disconnected.vue b/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/Disconnected.vue deleted file mode 100644 index 94a3bfcc5..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/Disconnected.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/WalletConnectComponent.vue b/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/WalletConnectComponent.vue deleted file mode 100644 index 520e536dd..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/wallet-connect/WalletConnectComponent.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/asset-list/wallet/wallet.vue b/examples/injective-vue/src/components/asset-list/wallet/wallet.vue deleted file mode 100644 index 378e0dc17..000000000 --- a/examples/injective-vue/src/components/asset-list/wallet/wallet.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/components/provide-liquidity/overview.vue b/examples/injective-vue/src/components/provide-liquidity/overview.vue deleted file mode 100644 index d36ba12c1..000000000 --- a/examples/injective-vue/src/components/provide-liquidity/overview.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - - diff --git a/examples/injective-vue/src/components/stake-tokens/overview.vue b/examples/injective-vue/src/components/stake-tokens/overview.vue deleted file mode 100644 index 42399e8fd..000000000 --- a/examples/injective-vue/src/components/stake-tokens/overview.vue +++ /dev/null @@ -1,63 +0,0 @@ - - - - diff --git a/examples/injective-vue/src/composables/common/useAssets.ts b/examples/injective-vue/src/composables/common/useAssets.ts deleted file mode 100644 index d66ed6db1..000000000 --- a/examples/injective-vue/src/composables/common/useAssets.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Asset, AssetList } from '@chain-registry/types'; -import { asset_lists as ibcAssetLists } from '@chain-registry/assets'; -import { assets as chainAssets } from 'chain-registry'; -import { Ref } from 'vue' - - -export const useAssets = (chainName: Ref) => { - const filterAssets = (assetList: AssetList[]): Asset[] => { - return ( - assetList - .find(({ chain_name }) => chain_name === chainName.value) - ?.assets?.filter(({ type_asset }) => type_asset !== 'ics20') || [] - ); - }; - - const nativeAssets = filterAssets(chainAssets); - const ibcAssets = filterAssets(ibcAssetLists); - - const allAssets = [...nativeAssets, ...ibcAssets]; - return { - allAssets, - nativeAssets, - ibcAssets - } -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/useBalance.ts b/examples/injective-vue/src/composables/common/useBalance.ts deleted file mode 100644 index 5ca98e9e4..000000000 --- a/examples/injective-vue/src/composables/common/useBalance.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Ref, computed } from 'vue' -import { useChain } from '@interchain-kit/vue' -import { useRpcClient } from 'interchain-vue/vue-query'; -import { createRpcQueryHooks } from 'interchain-vue/cosmos/bank/v1beta1/query.rpc.Query'; -import { useAssets } from './useAssets'; -import { shiftDigits } from '../../utils/stake-tokens/math'; - -export const useBalance = (chainName: Ref) => { - const { rpcEndpoint, address } = useChain(chainName) - const { allAssets } = useAssets(chainName) - - const exp = computed(() => { - return allAssets[0].denom_units.find( - (unit) => unit.denom === allAssets[0].display - )?.exponent as number - }) - const { data: rpcClient } = useRpcClient({ - rpcEndpoint, - options: { - enabled: computed(() => !!rpcEndpoint.value), - }, - }); - const hooks = createRpcQueryHooks(rpcClient) - const { data, isLoading } = hooks.useBalance({ - request: { - address, - denom: computed(() => allAssets[0].base) - }, - options: { - // @ts-ignore - select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp.value), - } - }) - - return { - data, - isLoading - } -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/useBalances.ts b/examples/injective-vue/src/composables/common/useBalances.ts deleted file mode 100644 index 26ba30369..000000000 --- a/examples/injective-vue/src/composables/common/useBalances.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Ref, computed } from 'vue' -import { useChain } from '@interchain-kit/vue' -import { useRpcClient } from 'interchain-vue/vue-query'; -import { createRpcQueryHooks } from 'interchain-vue/cosmos/bank/v1beta1/query.rpc.Query'; - -export const getPagination = (limit: bigint) => ({ - limit, - key: new Uint8Array(), - offset: 0n, - countTotal: true, - reverse: false, -}); - -export const useBalances = (chainName: Ref) => { - const { rpcEndpoint, address } = useChain(chainName) - const { data: rpcClient } = useRpcClient({ - rpcEndpoint, - options: { - enabled: computed(() => !!rpcEndpoint.value), - }, - }); - - - const hooks = createRpcQueryHooks(rpcClient) - const { data: balances, refetch } = hooks.useAllBalances({ - request: { - address, - pagination: computed(() => getPagination(100n)), - resolveDenom: computed(() => true) - } - }) - - return { - balances, - refetch - } -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/useChainUtils.ts b/examples/injective-vue/src/composables/common/useChainUtils.ts deleted file mode 100644 index ac58f2103..000000000 --- a/examples/injective-vue/src/composables/common/useChainUtils.ts +++ /dev/null @@ -1,139 +0,0 @@ - -import { Ref } from 'vue' -import { useWalletManager } from '@interchain-kit/vue' -import { useAssets } from './useAssets' -import { Asset } from '@chain-registry/types'; -import { ibc } from 'chain-registry' -import { Coin } from 'osmojs/cosmos/base/v1beta1/coin'; -import BigNumber from 'bignumber.js' -import { CoinDenom, CoinSymbol, Exponent, PriceHash } from '../../utils/asset-list/types'; - - -export const useChainUtils = (chainName: Ref) => { - const wm = useWalletManager() - const { nativeAssets, allAssets, ibcAssets } = useAssets(chainName) - - const getChainName = (ibcDenom: CoinDenom) => { - const nativeAsset = nativeAssets.find((asset) => asset.base === ibcDenom) - if (nativeAsset) { - return chainName.value - } - const asset = ibcAssets.find((asset) => asset.base === ibcDenom); - const ibcChainName = asset?.traces?.[0].counterparty.chain_name; - if (!ibcChainName) throw Error('chainName not found for ibcDenom: ' + ibcDenom); - return ibcChainName; - }; - - const getPrettyChainName = (ibcDenom: CoinDenom) => { - const chainName = getChainName(ibcDenom); - try { - const chainRecord = wm.getChainByName(chainName) - return chainRecord?.prettyName; - } catch (e) { - return 'CHAIN_INFO_NOT_FOUND' - } - }; - - const getDenomByChainName = (chainName: string) => { - const chainRecord = wm.getChainByName(chainName) - const denom = chainRecord.staking?.stakingTokens[0].denom as string; - return denom - } - - const getAssetByDenom = (denom: CoinDenom): Asset => { - return allAssets.find((asset) => asset.base === denom) as Asset; - }; - - const denomToSymbol = (denom: CoinDenom): CoinSymbol => { - const asset = getAssetByDenom(denom); - const symbol = asset?.symbol; - if (!symbol) { - return denom; - } - return symbol; - }; - - const getExponentByDenom = (denom: CoinDenom): Exponent => { - const asset = getAssetByDenom(denom); - const unit = asset.denom_units.find(({ denom }) => denom === asset.display); - return unit?.exponent || 0; - }; - - const calcCoinDollarValue = (prices: PriceHash, coin: Coin) => { - const { denom, amount } = coin; - return new BigNumber(amount) - .shiftedBy(-getExponentByDenom(denom)) - .multipliedBy(prices[denom]) - .toString(); - }; - - const symbolToDenom = (symbol: CoinSymbol, chainName?: string): CoinDenom => { - const asset = allAssets.find((asset) => ( - asset.symbol === symbol - && ( - !chainName - || asset.traces?.[0].counterparty.chain_name.toLowerCase() === chainName.toLowerCase() - ) - )); - const base = asset?.base; - if (!base) { - return symbol; - } - return base; - }; - - const convRawToDispAmount = (symbol: string, amount: string | number, chainName?: string) => { - const denom = symbolToDenom(symbol, chainName); - return new BigNumber(amount) - .shiftedBy(-getExponentByDenom(denom)) - .toString(); - }; - - const getChainLogo = (chainName: string) => { - const { logoURIs } = wm.getChainByName(chainName) - return logoURIs - } - - const getIbcInfo = (fromChainName: string, toChainName: string) => { - let flipped = false; - - let ibcInfo = ibc.find( - (i) => - i.chain_1.chain_name === fromChainName && - i.chain_2.chain_name === toChainName - ); - - if (!ibcInfo) { - ibcInfo = ibc.find( - (i) => - i.chain_1.chain_name === toChainName && - i.chain_2.chain_name === fromChainName - ); - flipped = true; - } - - if (!ibcInfo) { - throw new Error('cannot find IBC info'); - } - - const key = flipped ? 'chain_2' : 'chain_1'; - const sourcePort = ibcInfo.channels[0][key].port_id; - const sourceChannel = ibcInfo.channels[0][key].channel_id; - - return { sourcePort, sourceChannel }; - }; - - return { - getChainName, - getPrettyChainName, - getDenomByChainName, - convRawToDispAmount, - denomToSymbol, - calcCoinDollarValue, - getExponentByDenom, - getAssetByDenom, - symbolToDenom, - getChainLogo, - getIbcInfo - } -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/useInjectiveClient.ts b/examples/injective-vue/src/composables/common/useInjectiveClient.ts deleted file mode 100644 index 66473fedf..000000000 --- a/examples/injective-vue/src/composables/common/useInjectiveClient.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { InjSigningClient } from '@interchainjs/injective/signing-client'; -import { Ref, computed, ref, watch } from 'vue' -import { ExtensionWallet } from '@interchain-kit/core' -import { useChain, useWalletManager } from '@interchain-kit/vue' -import { toEncoders, toConverters } from '@interchainjs/cosmos/utils'; -import { MsgSend } from 'interchain-vue/cosmos/bank/v1beta1/tx'; - -export const useInjectiveClient = (chainName: Ref) => { - const { rpcEndpoint, chain } = useChain(chainName) - const injectiveClient = ref() - const wm = useWalletManager() - const signer = computed(() => { - if (!chain.value.chainId) { - return - } - const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet - return wallet.getOfflineSigner(chain.value.chainId, 'direct') // cosmoshub-4 - }) - const _fetchClient = async (rpcEndpoint: string, signer: any) => { - if (!rpcEndpoint || !signer) { - return - } - signer.signMode = 'direct' - let res = await InjSigningClient.connectWithSigner(rpcEndpoint, signer) - - injectiveClient.value = res - injectiveClient.value?.addEncoders(toEncoders(MsgSend)); - injectiveClient.value?.addConverters(toConverters(MsgSend)); - } - watch([rpcEndpoint, signer], ([rpc, sn]) => { - _fetchClient(rpc as string, sn) - }) - _fetchClient(rpcEndpoint.value as string, signer.value) - return injectiveClient -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/usePrices.ts b/examples/injective-vue/src/composables/common/usePrices.ts deleted file mode 100644 index 70b2c7048..000000000 --- a/examples/injective-vue/src/composables/common/usePrices.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Ref, computed } from 'vue' -import { Asset } from '@chain-registry/types'; -import { useAssets } from './useAssets'; -import { useQuery } from '@tanstack/vue-query'; - -type CoinGeckoId = string; -type CoinGeckoUSD = { usd: number }; -type CoinGeckoUSDResponse = Record; -export type Prices = Record; - -export const handleError = (resp: Response) => { - if (!resp.ok) throw Error(resp.statusText); - return resp; -}; - -const fetchPrices = async ( - geckoIds: string[] -): Promise => { - const url = `https://api.coingecko.com/api/v3/simple/price?ids=${geckoIds.join()}&vs_currencies=usd`; - - return fetch(url) - .then(handleError) - .then((res) => res.json()); -}; - -const formatPrices = ( - prices: CoinGeckoUSDResponse, - assets: Asset[] -): Record => { - return Object.entries(prices).reduce((priceHash, cur) => { - const denom = assets.find((asset) => asset.coingecko_id === cur[0])!.base; - return { ...priceHash, [denom]: cur[1].usd }; - }, {}); -}; - -export const usePrices = (chainName: Ref) => { - const { allAssets } = useAssets(chainName) - const assetsWithGeckoIds = computed(() => { - return allAssets.filter((asset) => !!asset?.coingecko_id); - }) - - const geckoIds = computed(() => { - return assetsWithGeckoIds?.value.map(asset => asset.coingecko_id) as string[] - }) - - const { data, isLoading, error } = useQuery({ - queryKey: ['prices', geckoIds], - queryFn: () => { - return fetchPrices(geckoIds.value) - }, - select: (data) => formatPrices(data, assetsWithGeckoIds.value) - }) - - return { - prices: data, - isLoading, - error - } -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/common/useStargateClient.ts b/examples/injective-vue/src/composables/common/useStargateClient.ts deleted file mode 100644 index 295a598ac..000000000 --- a/examples/injective-vue/src/composables/common/useStargateClient.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Ref, computed, ref, watch } from 'vue' -import { ExtensionWallet } from '@interchain-kit/core' -import { useChain, useWalletManager } from '@interchain-kit/vue' -import { SigningStargateClient } from '@cosmjs/stargate' - -export const useStargateClient = (chainName: Ref) => { - const { rpcEndpoint, chain } = useChain(chainName) - const stargazeClient = ref() - const wm = useWalletManager() - const signer = computed(() => { - if (!chain.value.chainId) { - return - } - const wallet = wm.getCurrentWallet() as unknown as ExtensionWallet - return wallet.getOfflineSigner(chain.value.chainId, 'direct') // cosmoshub-4 - }) - const _fetchClient = async (rpcEndpoint: string, signer: any) => { - if (!rpcEndpoint || !signer) { - return - } - let res = await SigningStargateClient.connectWithSigner(rpcEndpoint, signer) - stargazeClient.value = res - } - watch([rpcEndpoint, signer], ([rpc, sn]) => { - _fetchClient(rpc as string, sn) - }) - _fetchClient(rpcEndpoint.value as string, signer.value) - return stargazeClient -} \ No newline at end of file diff --git a/examples/injective-vue/src/composables/injective/useBalance.ts b/examples/injective-vue/src/composables/injective/useBalance.ts deleted file mode 100644 index a360ee6e9..000000000 --- a/examples/injective-vue/src/composables/injective/useBalance.ts +++ /dev/null @@ -1,47 +0,0 @@ - -import { Ref, computed } from 'vue' -import { useChain } from '@interchain-kit/vue'; -import { useRpcClient } from 'interchain-vue/vue-query'; -import { createRpcQueryHooks } from 'interchain-vue/cosmos/bank/v1beta1/query.rpc.Query'; -import { useAssets } from '../common/useAssets'; -import BigNumber from "bignumber.js"; - -export const useBalance = (chainName: Ref) => { - const { rpcEndpoint, address } = useChain(chainName) - const { allAssets } = useAssets(chainName) - const { data: rpcClient } = useRpcClient({ - rpcEndpoint, - options: { - enabled: computed(() => !!rpcEndpoint.value), - }, - }); - - const COIN_DISPLAY_EXPONENT = allAssets[0]!.denom_units.find( - (unit) => unit.denom === allAssets[0]!.display - )?.exponent as number; - - const hooks = createRpcQueryHooks(rpcClient) - const { data: balance, isLoading, refetch } = hooks.useBalance({ - request: { - address, - denom: computed(() => allAssets[0].base) - }, - options: { - enabled: !!address && !!rpcClient, - // @ts-ignore - select: ({ balance }) => - new BigNumber(balance?.amount ?? 0).multipliedBy( - 10 ** -COIN_DISPLAY_EXPONENT - ), - } - }) - - return { - balance, - isLoading, - COIN_DISPLAY_EXPONENT, - symbol: allAssets[0].symbol, - denom: allAssets[0].base, - refetch - } -} diff --git a/examples/injective-vue/src/config/asset-list/defaults.ts b/examples/injective-vue/src/config/asset-list/defaults.ts deleted file mode 100644 index 72d37a036..000000000 --- a/examples/injective-vue/src/config/asset-list/defaults.ts +++ /dev/null @@ -1,3 +0,0 @@ - -export const defaultChainName = 'osmosis'; -export const KeplrWalletName = 'keplr-extension'; \ No newline at end of file diff --git a/examples/injective-vue/src/config/asset-list/features.ts b/examples/injective-vue/src/config/asset-list/features.ts deleted file mode 100644 index 64a031436..000000000 --- a/examples/injective-vue/src/config/asset-list/features.ts +++ /dev/null @@ -1,56 +0,0 @@ -export type Project = { - name: string; - desc: string; - link: string; -} - -export const products: Project[] = [ - { - name: 'Cosmos Kit', - desc: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.', - link: 'https://github.com/cosmology-tech/cosmos-kit', - }, - { - name: 'Telescope', - desc: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.', - link: 'https://github.com/cosmology-tech/telescope', - }, - { - name: 'TS Codegen', - desc: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.', - link: 'https://github.com/CosmWasm/ts-codegen', - }, - { - name: 'CosmWasm Academy', - desc: 'Master CosmWasm and build your secure, multi-chain dApp on any CosmWasm chain!', - link: 'https://academy.cosmwasm.com/', - }, - { - name: 'Chain Registry', - desc: 'Get chain and asset list information from the npm package for the Official Cosmos chain registry.', - link: 'https://github.com/cosmology-tech/chain-registry', - }, - { - name: 'Videos', - desc: 'How-to videos from the official Cosmology website, with learning resources for building in Cosmos.', - link: 'https://cosmology.zone/learn', - }, -]; - -export const dependencies: Project[] = [ - { - name: 'OsmoJS', - desc: 'OsmosJS makes it easy to compose and broadcast Osmosis and Cosmos messages', - link: 'https://github.com/osmosis-labs/osmojs', - }, - { - name: 'Interchain UI', - desc: 'A simple, modular and accessible React Component Library.', - link: 'https://cosmology.zone/components', - }, - { - name: 'Next.js', - desc: 'A React Framework supports hybrid static & server rendering.', - link: 'https://nextjs.org/', - }, -]; diff --git a/examples/injective-vue/src/main.ts b/examples/injective-vue/src/main.ts deleted file mode 100644 index d5597da78..000000000 --- a/examples/injective-vue/src/main.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { createApp } from 'vue' -import router from './router' -import './style.css' -import "@interchain-ui/vue/style.css"; -import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'; -// import "@interchain-ui/vue/globalStyles"; -import App from './App.vue' - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: 2, - refetchOnWindowFocus: false, - }, - }, -}); - -// @ts-ignore -BigInt.prototype['toJSON'] = function () { - return this.toString() -} - -const app = createApp(App); -app.use(VueQueryPlugin, { queryClient }); -app.use(router) -app.mount('#app'); diff --git a/examples/injective-vue/src/router.ts b/examples/injective-vue/src/router.ts deleted file mode 100644 index 37e803b0a..000000000 --- a/examples/injective-vue/src/router.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import Index from './views/index.vue' -import Injective from './views/injective.vue' - -const routes = [ - { path: '/', name: 'index', component: Index }, - { path: '/injective', name: 'injective', component: Injective }, -] - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes -}) - -export default router \ No newline at end of file diff --git a/examples/injective-vue/src/style.css b/examples/injective-vue/src/style.css deleted file mode 100644 index bb131d6b8..000000000 --- a/examples/injective-vue/src/style.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/examples/injective-vue/src/utils/asset-list/chain.ts b/examples/injective-vue/src/utils/asset-list/chain.ts deleted file mode 100644 index 510bc38ec..000000000 --- a/examples/injective-vue/src/utils/asset-list/chain.ts +++ /dev/null @@ -1,12 +0,0 @@ - -import { Asset, AssetList } from '@chain-registry/types'; - - -export const filterAssets = (assetList: AssetList[], chainName: string): Asset[] => { - return ( - assetList - .find(({ chain_name }) => chain_name === chainName) - ?.assets?.filter(({ type_asset }) => type_asset !== 'ics20') || [] - ); -}; - diff --git a/examples/injective-vue/src/utils/asset-list/format.ts b/examples/injective-vue/src/utils/asset-list/format.ts deleted file mode 100644 index b2a8693a8..000000000 --- a/examples/injective-vue/src/utils/asset-list/format.ts +++ /dev/null @@ -1,45 +0,0 @@ -import BigNumber from 'bignumber.js'; -import { PrettyAsset } from '../../views/asset-list.vue'; - -export type AvailableItem = { - imgSrc: string; - symbol: string; - name: string; - denom?: string; - /** - * Available amount - */ - available?: number; - /** - * Dollar price for per token - */ - priceDisplayAmount?: number; -}; - -export const formatDollarValue = (dollarValue: string, amount: string) => { - return new BigNumber(dollarValue).gt(0.01) - ? '$' + truncDecimals(dollarValue, 2) - : new BigNumber(amount).gt(0) - ? '< $0.01' - : '$0'; -}; - -export const truncDecimals = ( - val: string | number | undefined, - decimals: number -) => { - return new BigNumber(val || 0).decimalPlaces(decimals).toString(); -}; - -export const prettyAssetToTransferItem = (from: PrettyAsset): AvailableItem => { - return { - imgSrc: from.logoUrl ?? '', - symbol: from.symbol, - name: from.prettyChainName, - denom: from.denom, - available: new BigNumber(from.displayAmount).toNumber(), - priceDisplayAmount: new BigNumber( - truncDecimals(from.dollarValue, 2) - ).toNumber(), - }; -}; \ No newline at end of file diff --git a/examples/injective-vue/src/utils/asset-list/types.ts b/examples/injective-vue/src/utils/asset-list/types.ts deleted file mode 100644 index dd1c491d5..000000000 --- a/examples/injective-vue/src/utils/asset-list/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { DenomUnit } from '@chain-registry/types'; - -export const Transfer = { - Deposit: 'Deposit', - Withdraw: 'Withdraw', -} as const; - -export type Exponent = DenomUnit['exponent']; -export type CoinDenom = DenomUnit['denom']; -export type CoinSymbol = string; - -export interface PriceHash { - [key: CoinDenom]: number; -} \ No newline at end of file diff --git a/examples/injective-vue/src/utils/stake-tokens/math.ts b/examples/injective-vue/src/utils/stake-tokens/math.ts deleted file mode 100644 index 15e29be9c..000000000 --- a/examples/injective-vue/src/utils/stake-tokens/math.ts +++ /dev/null @@ -1,38 +0,0 @@ -import BigNumber from 'bignumber.js'; -import { Prices } from '../../composables/common/usePrices'; - -export const shiftDigits = ( - num: string | number, - places: number, - decimalPlaces?: number -) => { - return new BigNumber(num) - .shiftedBy(places) - .decimalPlaces(decimalPlaces || 6) - .toString(); -}; - -export const toNumber = (val: string, decimals: number = 6) => { - return new BigNumber(val).decimalPlaces(decimals).toNumber(); -}; - -export const isGreaterThanZero = (val: number | string | undefined) => { - return new BigNumber(val || 0).gt(0); -}; - -export const sum = (...args: string[]) => { - return args - .reduce((prev, cur) => prev.plus(cur), new BigNumber(0)) - .toString(); -}; - -export const calcDollarValue = ( - denom: string, - amount: string | number, - prices: Prices -) => { - return new BigNumber(prices[denom] || 0) - .times(amount) - .decimalPlaces(2) - .toNumber(); -}; \ No newline at end of file diff --git a/examples/injective-vue/src/utils/voting/index.ts b/examples/injective-vue/src/utils/voting/index.ts deleted file mode 100644 index 413caba53..000000000 --- a/examples/injective-vue/src/utils/voting/index.ts +++ /dev/null @@ -1,37 +0,0 @@ -import dayjs from 'dayjs'; -import BigNumber from 'bignumber.js'; - -export function formatDate(date?: Date) { - if (!date) return null; - return dayjs(date).format('YYYY-MM-DD hh:mm:ss'); -}; - -export function paginate(limit: bigint, reverse: boolean = false) { - return { - limit, - reverse, - key: new Uint8Array(), - offset: 0n, - countTotal: true, - } -} - -export function decodeUint8Array(value?: Uint8Array) { - return value ? new TextDecoder('utf-8').decode(value) : ''; -} - -export function parseQuorum(value?: Uint8Array) { - const quorum = decodeUint8Array(value); - return new BigNumber(quorum).shiftedBy(-quorum.length).toNumber(); -} - -export const exponentiate = (num: number | string | undefined, exp: number) => { - if (!num) return 0; - return new BigNumber(num) - .multipliedBy(new BigNumber(10).exponentiatedBy(exp)) - .toNumber(); -}; - -export function percent(num: number | string = 0, total: number, decimals = 2) { - return total ? new BigNumber(num).dividedBy(total).multipliedBy(100).decimalPlaces(decimals).toNumber() : 0; -} \ No newline at end of file diff --git a/examples/injective-vue/src/views/index.vue b/examples/injective-vue/src/views/index.vue deleted file mode 100644 index 909cabdb1..000000000 --- a/examples/injective-vue/src/views/index.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/views/injective.vue b/examples/injective-vue/src/views/injective.vue deleted file mode 100644 index aeba991b8..000000000 --- a/examples/injective-vue/src/views/injective.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - - - diff --git a/examples/injective-vue/src/vite-env.d.ts b/examples/injective-vue/src/vite-env.d.ts deleted file mode 100644 index 11f02fe2a..000000000 --- a/examples/injective-vue/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/examples/injective-vue/tsconfig.app.json b/examples/injective-vue/tsconfig.app.json deleted file mode 100644 index cb88a5a6c..000000000 --- a/examples/injective-vue/tsconfig.app.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "target": "ES2020", - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "Bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "preserve", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] -} diff --git a/examples/injective-vue/tsconfig.json b/examples/injective-vue/tsconfig.json deleted file mode 100644 index 1ffef600d..000000000 --- a/examples/injective-vue/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] -} diff --git a/examples/injective-vue/tsconfig.node.json b/examples/injective-vue/tsconfig.node.json deleted file mode 100644 index abcd7f0da..000000000 --- a/examples/injective-vue/tsconfig.node.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", - "target": "ES2022", - "lib": ["ES2023"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "Bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/examples/injective-vue/vite.config.ts b/examples/injective-vue/vite.config.ts deleted file mode 100644 index 4a42a6a46..000000000 --- a/examples/injective-vue/vite.config.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; -import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' -import { resolve } from 'path'; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vue()], - optimizeDeps: { - esbuildOptions: { - // Node.js global to browser globalThis - define: { - global: 'globalThis' - }, - // Enable esbuild polyfill plugins - plugins: [ - NodeGlobalsPolyfillPlugin({ - buffer: true - }) - ] - } - }, - resolve: { - alias: { - "crypto": "crypto-browserify", - '@': resolve(__dirname, 'src'), - } - } -}); diff --git a/examples/injective/.gitignore b/examples/injective/.gitignore deleted file mode 100644 index ae45b5ee5..000000000 --- a/examples/injective/.gitignore +++ /dev/null @@ -1,39 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts - -*.next/* -*.yarn/* \ No newline at end of file diff --git a/examples/injective/CHANGELOG.md b/examples/injective/CHANGELOG.md deleted file mode 100644 index e69de29bb..000000000 diff --git a/examples/injective/README.md b/examples/injective/README.md deleted file mode 100644 index ebb410bf3..000000000 --- a/examples/injective/README.md +++ /dev/null @@ -1,140 +0,0 @@ -# Injective React Example - -

-
- Building the future of decentralized exchange -

- -## Introduction - -This example demonstrates the usage of React hooks provided by [injective-react](https://github.com/cosmology-tech/interchainjs/tree/main/libs/injective-react) and how to interact with the Injective blockchain on the frontend. - -## Getting Started - -First, install the packages and run the development server: - -```bash -yarn && yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. - -## Overview - -This example demonstrates how to build a React application that interacts with the Injective blockchain. By following this guide, you will learn how to set up a development environment, use React hooks, and integrate various Cosmos ecosystem tools to enhance your application. - -## Query and Tx Hooks - -This example uses the query hooks(e.g. useGetBalance) and tx hooks(e.g. useSend) from the `injective-react` package to interact with the Injective blockchain. These hooks allow you to query data from the blockchain and send transactions to the blockchain. - -```js -import { useDelegate } from "injective-react/cosmos/staking/v1beta1/tx.rpc.func"; -import { useGetValidators } from "injective-react/cosmos/staking/v1beta1/query.rpc.func"; - -const { - data, - isSuccess: isGetValidatorsDone, - isLoading: isGetValidatorsLoading, -} = useGetValidators({ - request: { - status: "BOND_STATUS_BONDED", - }, - options: { - context: defaultContext, - enabled: !validatorAddress, - }, - rpcClient, -}); - -const { mutate: delegate, isSuccess: isDelegateSuccess } = useDelegate({ - clientResolver: signingClient, - options: { - context: defaultContext, - onSuccess: (data: any) => { - console.log("onSuccess", data); - }, - onError: (error) => { - console.log("onError", error); - }, - }, -}); -``` - -For more information on how to use these hooks, please refer to the [injective-react](https://github.com/cosmology-tech/interchainjs/tree/main/libs/injective-react) - -## Learn More - -### Chain Registry - -The npm package for the Official Cosmos chain registry. Get chain and token data for you application. - -* https://github.com/cosmology-tech/chain-registry - -### Cosmology Videos - -Checkout more videos for how to use various frontend tooling in the Cosmos! - -* https://cosmology.zone/learn - -### Interchain Kit - -A wallet connector for the Cosmos ⚛️ - -* https://github.com/cosmology-tech/interchain-kit - -### Telescope - -A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain. - -* https://github.com/cosmology-tech/telescope - -🎥 [Checkout the Telescope video playlist](https://www.youtube.com/watch?v=n82MsLe82mk&list=PL-lMkVv7GZwyQaK6bp6kMdOS5mzosxytC) to learn how to use `telescope`! - -### CosmWasm TS Codegen - -The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code. - -* https://github.com/CosmWasm/ts-codegen - -🎥 [Checkout the CosmWasm/ts-codegen video playlist](https://www.youtube.com/watch?v=D_A5V2PfNLA&list=PL-lMkVv7GZwz1KO3jANwr5W4MoziruXwK) to learn how to use `ts-codegen`! - - -## Learn More about Next.js - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. - -## Related - -Checkout these related projects: - -* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. -* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. -* [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. -* [interchain-kit](https://github.com/cosmology-tech/interchain-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. -* [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command. -* [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. -* [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain. - -## Credits - -🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator) - - -## Disclaimer - -AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. - -No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value. diff --git a/examples/injective/components/Main.tsx b/examples/injective/components/Main.tsx deleted file mode 100644 index 56803830a..000000000 --- a/examples/injective/components/Main.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Box, Text } from '@interchain-ui/react'; -import { useChain } from "@interchain-kit/react"; -import { defaultChainName } from "@/config"; -import { WalletState } from '@interchain-kit/core' -import dynamic from 'next/dynamic'; - -const SendMsg = dynamic(() => import('./SendMsg'), { - ssr: false, -}); - -export function Main() { - const { status } = useChain(defaultChainName); - - return ( - status === WalletState.Connected ? - : - - - Please connect to your wallet. - - - ); -} \ No newline at end of file diff --git a/examples/injective/components/SendMsg.tsx b/examples/injective/components/SendMsg.tsx deleted file mode 100644 index a23a85f39..000000000 --- a/examples/injective/components/SendMsg.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { Box, Text, Button, Link } from '@interchain-ui/react'; -import { InjSigningClient } from '@interchainjs/injective/signing-client'; -import { useEffect, useState } from 'react'; -import { useChain, useOfflineSigner } from '@interchain-kit/react'; -import { - defaultAssetList, - defaultChain, - defaultChainName, - defaultRpcEndpoint, -} from '@/config'; -import useBalance from '@/hooks/useBalance'; -import { useSend } from 'interchain-react/cosmos/bank/v1beta1/tx.rpc.func'; -import { defaultContext } from '@tanstack/react-query'; - -export default function SendMsg() { - const coin = defaultAssetList?.assets[0]; - - const denom = coin!.base!; - - const COIN_DISPLAY_EXPONENT = coin!.denomUnits.find( - (unit) => unit.denom === coin!.display - )?.exponent as number; - - const chain = defaultChain; - const txPage = chain?.explorers?.[0].txPage; - - const { address, isLoading, wallet } = useChain(defaultChainName); - const { offlineSigner } = useOfflineSigner( - defaultChainName, - wallet.info!.name - ); - - const [signingClient, setSigningClient] = useState( - null - ); - - useEffect(() => { - if (!offlineSigner) return; - (async () => { - console.log('offlineSigner', offlineSigner); - setSigningClient( - await InjSigningClient.connectWithSigner( - defaultRpcEndpoint, - offlineSigner - ) - ); - })(); - }, [offlineSigner]); - - const [sending, setSending] = useState(false); - const [txHash, setTxHash] = useState(null); - const [error, setError] = useState(null); - - const { mutate: send, isSuccess: isSendSuccess } = useSend({ - clientResolver: signingClient ?? undefined, - options: { - context: defaultContext, - onSuccess: (data) => { - console.log('signAndBroadcast', data); - if (data.code === 0) { - setTxHash((data as any).hash); - } else { - setError(data.rawLog || JSON.stringify(data || {})); - } - setSending(false); - }, - onError: (error) => { - console.error('signAndBroadcast', error); - setError(error.message); - setSending(false); - }, - }, - }); - - const { balance } = useBalance({ - address, - }); - - const handleSend = async () => { - if (sending || isLoading) return; - - setError(null); - setTxHash(null); - setSending(true); - - const fee = { - amount: [ - { - denom, - amount: '2500', - }, - ], - gas: '1000000', - }; - - send({ - signerAddress: address, - message: { - fromAddress: address, - toAddress: address, - amount: [ - { - denom, - amount: '1', - }, - ], - }, - fee, - memo: 'Send from interchain-react', - }); - }; - - return ( - - - - Balance:{' '} - {balance === null ? '--' : balance?.toFixed(COIN_DISPLAY_EXPONENT)}{' '} - {coin?.symbol} - - - - - - {txHash && ( - - Details: - - {txPage?.replace('${txHash}', txHash)!} - - - )} - {error && ( - - - Error: - - {error} - - )} - - ); -} diff --git a/examples/injective/components/common/Footer.tsx b/examples/injective/components/common/Footer.tsx deleted file mode 100644 index abdb60da5..000000000 --- a/examples/injective/components/common/Footer.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { Box, Link, Text, Icon, Stack, Divider, useColorModeValue } from '@interchain-ui/react'; -import { dependencies, products, Project } from '@/config'; - -function Product({ name, desc, link }: Project) { - return ( - - - - {name} → - - - {desc} - - - - ); -} - -function Dependency({ name, desc, link }: Project) { - return ( - - - - - - - - - {name} - - - {desc} - - - - - ); -} - -export function Footer() { - return ( - <> - - {products.map((product) => ( - - ))} - - - {dependencies.map((dependency) => ( - - ))} - - - - - - Built with - - Cosmology - - - - ); -} \ No newline at end of file diff --git a/examples/injective/components/common/Header.tsx b/examples/injective/components/common/Header.tsx deleted file mode 100644 index b036a25e1..000000000 --- a/examples/injective/components/common/Header.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Link, Box, Button, Icon, Text, useTheme, useColorModeValue } from '@interchain-ui/react'; -import { dependencies } from '@/config'; - -const stacks = ['Interchain Kit', 'Next.js']; - -const dependency = dependencies[0]; - -export function Header() { - const { theme, setTheme } = useTheme(); - - const toggleColorMode = () => { - setTheme(theme === 'light' ? 'dark' : 'light'); - }; - - return ( - <> - - - - - - - Interchain - - - - Welcome to  - - - {stacks.join(' + ')} - {' + '} - - - {dependency.name} - - - - - - ); -} \ No newline at end of file diff --git a/examples/injective/components/common/Layout.tsx b/examples/injective/components/common/Layout.tsx deleted file mode 100644 index af6777c01..000000000 --- a/examples/injective/components/common/Layout.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Head from 'next/head'; -import { Toaster, Container } from '@interchain-ui/react'; -import { Header } from './Header'; -import { Footer } from './Footer'; - -export function Layout({ children }: { children: React.ReactNode }) { - return ( - - - Interchain-Kit Demo - - - -
- {children} - -