@interchain-kit/vue v0.3.39

@interchain-kit/vue

Install

Using npm:

npm install @interchain-kit/vue

Using yarn:

yarn add @interchain-kit/vue

Usage

Setup

import @interchain-ui/vue stylesheet.

main.ts

import "@interchain-ui/vue/style.css";

import chain registry info that you need

App.ts

<script setup lang="ts">
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 osmosisTestChain, assetList as osmosisTestAssetList } from "@chain-registry/v2/testnet/osmosistestnet"
</script>

<template>
  <ChainProvider
    :wallets="[keplrWallet, leapWallet]"
    :chains="[osmosisChain, junoChain, cosmoshubChain, osmosisTestChain]"
    :asset-lists="[osmosisAssetList, junoAssetList, cosmoshubAssetList, osmosisTestAssetList]"
    :signer-options="{}"
    :endpoint-options="{}"
  >
    <router-view />
  </ChainProvider>
</template>

<style scoped>
</style>

or import all chain registry

App.ts

<script setup lang="ts">
import { ChainProvider } from '@interchain-kit/vue';
import { keplrWallet } from '@interchain-kit/keplr-extension';
import { chains, assetLists } from '@chain-registry/v2/mainnet';
import Show from './views/show.vue';
</script>

<template>
  <ChainProvider
    :wallets="[keplrWallet]"
    :chains="[chains]"
    :asset-lists="[assetLists]"
    :signer-options="{}"
    :endpoint-options="{}"
  >
    <show />
  </ChainProvider>
</template>

<style scoped>
</style>

show.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useChain } from '@interchain-kit/vue';

const chainName = ref('osmosis')
const { address } = useChain(chainName);
</script>

<template>
  <div>
    <div>address: {{ address }}</div>
  </div>
</template>

<style scoped>
</style>

useChain

<script setup lang="ts">
import { ref } from 'vue'
import { useChain } from '@interchain-kit/vue';

const chainName = ref('osmosistestnet')
const { chain, assetList, address, wallet, queryClient, signingClient } = useChain(chainName)
const balance = ref('0')

const getBalance = async() => {
  const {balance: bc} =  await queryClient.value.balance({
    address: address.value,
    denom: 'uosmo',
  })
  balance.value = bc?.amount || '0'
}
</script>

<template>
  <div>
    <div>chain: {{ chain.prettyName }}</div>
    <div>assetList: {{ assetList?.assets?.length }}</div>
    <div>address: {{ address }}</div>
    <div>wallet: {{ wallet?.option?.prettyName }}</div>
    <div>balance: {{ balance }}</div> <button @click="getBalance">getBalance</button>
  </div>
</template>

<style scoped>
</style>

useChainWallet

App.ts

<script setup lang="ts">
import { ChainProvider } from '@interchain-kit/vue'
import { keplrWallet } from '@interchain-kit/keplr-extension';
import { leapWallet } from '@interchain-kit/leap-extension';
import Show from './views/show.vue';
import { chains, assetLists } from '@chain-registry/v2/mainnet';

const chainNames = ['juno', 'stargaze']
</script>

<template>
  <ChainProvider
    :wallets="[keplrWallet, leapWallet]"
    :chains="chains.filter(c => chainNames.includes(c.chainName))"
    :asset-lists="assetLists.filter(c => chainNames.includes(c.chainName))"
    :signer-options="{}"
    :endpoint-options="{}"
  >
    <show />
  </ChainProvider>
</template>

<style scoped>
</style>

show.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useChainWallet, useWalletManager } from '@interchain-kit/vue';

const junoChainName = ref('juno')
const keplrWalletName = ref('keplr-extension')
const juno = useChainWallet(junoChainName, keplrWalletName);

const stargazeChainName = ref('stargaze')
const leapWalletName = ref('leap-extension')
const stargaze = useChainWallet(stargazeChainName, leapWalletName);

const walletManager = useWalletManager()
	
const connectKeplr = async() => {
  await walletManager.connect('keplr-extension')
}
const connectLeap = async() => {
  await walletManager.connect('leap-extension')
}
</script>

<template>
  <div>
    <button @click="connectKeplr">connect keplr</button>
    <button @click="connectLeap">connect leap</button>
    <div>juno address: {{ juno.address }}</div>
    <div>stargaze address: {{ stargaze.address }}</div>
  </div>
</template>

<style scoped>
</style>

useChains

WIP

Developing

When first cloning the repo, under project root directory run:

yarn
# build the prod packages. When devs would like to navigate to the source code, this will only navigate from references to their definitions (.d.ts files) between packages.
yarn build

Interchain JavaScript Stack

A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️

Credits

🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to our github ⚛️

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.