WIP (#12)

* osmosis initial setup and nft contract queries/mutations

* display errors on ui

* fix: create credit account queryMsg and contract

* client initialization. loading indicator when pending io

* added tx feedback on toast

* remove unused wallet store code

* fetch credit accounts moved to external hook

* navigation copy

* file name typo

* remove console logs and unused imports

* fix: credit accounts query msg

* credit manager store. create credit account hook created

* delete credit account hook. fees declaration moved to utils

* update selected account when a new one is created

* type inference for mutation hooks

* loading indicator for async actions. onSuccess toast

* credit accounts popover

* minor improvements credit account slice

* credit manager module state and respective markup

* fix: credit account list threshold

* credit manager component. currency formatter function update

* update contract addresses

* borrow screen initial setup

* error handling mutation queries

* update credit account list when address changes

* update credit accounts query key to include address

* update selected account when nothing is selected

* credit manager wip. deposit and listing positions on credit account

* FundAccount component moved to different file

* removed unused code

* lending assets switch

* minor refactor injective balance hook to be more generic

* style: font size minor adjustments

* borrow action initial. display liabilities and borrow positions on credit manager

* positions amount formatting

* preserve selected account on local storage

* prettier custom settings and respective files formatting

* credit manager container moved to external file

* removed threshold variable. nav elements moved to array declaration

* Navigation component naming and minor cleanup

* react query keys enum

* query keys improvements

* initial generated smart contract api type definitions

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100
+}

components/Button.tsx

@@ -1,22 +1,26 @@
-import React from "react";
+import React from 'react'
 
 type Props = {
-  children: string;
+  children: string
-  className?: string;
+  className?: string
-  onClick: () => void;
+  onClick: () => void
-};
+  disabled?: boolean
+}
 
 const Button = React.forwardRef<any, Props>(
-  ({ children, className = "", onClick }, ref) => (
+  ({ children, className = '', onClick, disabled }, ref) => (
     <button
       ref={ref}
       onClick={onClick}
-      className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className}`}
+      className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className} ${
+        disabled ? 'opacity-40' : ''
+      }`}
+      disabled={disabled}
     >
       {children}
     </button>
   )
-);
+)
 
-Button.displayName = "Button";
+Button.displayName = 'Button'
-export default Button;
+export default Button

components/ConnectModal.tsx

@@ -1,81 +1,85 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useState } from 'react'
-import Image from "next/image";
+import Image from 'next/image'
-import { Dialog, Transition } from "@headlessui/react";
+import { Dialog, Transition } from '@headlessui/react'
-import { toast } from "react-toastify";
+import { toast } from 'react-toastify'
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { Coin } from '@cosmjs/stargate'
 
-import { getInjectiveAddress } from "utils/address";
+import { getInjectiveAddress } from 'utils/address'
-import { getExperimentalChainConfigBasedOnChainId } from "utils/experimental-chains";
+import { getExperimentalChainConfigBasedOnChainId } from 'utils/experimental-chains'
-import { ChainId } from "types";
+import { ChainId } from 'types'
-import useWalletStore from "stores/useWalletStore";
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
 
 type Props = {
-  isOpen: boolean;
+  isOpen: boolean
-  onClose: () => void;
+  onClose: () => void
-};
+}
 
 const ConnectModal = ({ isOpen, onClose }: Props) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
 
-  const actions = useWalletStore((state) => state.actions);
+  const actions = useWalletStore((state) => state.actions)
-  const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled);
+  const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled)
-  const isKeplrInstalled = typeof window !== "undefined" && window.keplr;
+  const isKeplrInstalled = typeof window !== 'undefined' && window.keplr
 
   const handleConnectSuccess = () => {
-    onClose();
+    onClose()
 
     // defering update on loading state to avoid updating before close animation is finished
     setTimeout(() => {
-      setIsLoading(false);
+      setIsLoading(false)
-    }, 500);
+    }, 500)
-  };
+  }
 
   const handleConnectKeplr = async () => {
     if (!window.keplr) {
-      toast.error("You need Keplr extension installed");
+      toast.error('You need Keplr extension installed')
-      return;
+      return
     }
 
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
-      const chainData = getExperimentalChainConfigBasedOnChainId(
+      const chainData = getExperimentalChainConfigBasedOnChainId(chain.chainId)
-        ChainId.Mainnet
-      );
-      await window.keplr.experimentalSuggestChain(chainData);
 
-      const key = await window.keplr.getKey(ChainId.Mainnet);
+      if (chainData) {
-      actions.setAddress(key.bech32Address);
+        await window.keplr.experimentalSuggestChain(chainData)
+      }
 
-      handleConnectSuccess();
+      const key = await window.keplr.getKey(chain.chainId)
+      actions.setAddress(key.bech32Address)
+
+      handleConnectSuccess()
     } catch (e) {
       // TODO: handle exception
-      console.log(e);
+      console.log(e)
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   const handleConnectMetamask = async () => {
     if (!metamaskInstalled) {
-      toast.error("You need Metamask extension installed");
+      toast.error('You need Metamask extension installed')
-      return;
+      return
     }
 
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
       // TODO: missing type definitions
       const addresses = await (window.ethereum as any).request({
-        method: "eth_requestAccounts",
+        method: 'eth_requestAccounts',
-      });
+      })
-      const [address] = addresses;
+      const [address] = addresses
-      actions.setAddress(getInjectiveAddress(address));
+      actions.setAddress(getInjectiveAddress(address))
-      handleConnectSuccess();
+      handleConnectSuccess()
     } catch (e) {
       // TODO: handle exception
-      console.log(e);
+      console.log(e)
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
@@ -104,10 +108,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <Dialog.Title
+                <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 mb-6">
-                  as="h3"
-                  className="text-lg font-medium leading-6 text-gray-900 mb-6"
-                >
                   Connect your wallet
                 </Dialog.Title>
                 {isLoading ? (
@@ -135,12 +136,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                       className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
                       onClick={handleConnectMetamask}
                     >
-                      <Image
+                      <Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
-                        src="/wallets/metamask.webp"
-                        height={30}
-                        width={30}
-                        alt="metamask"
-                      />
                       <div className="ml-4 text-left">
                         <div className="flex items-end">
                           <p>Metamask</p>
@@ -148,29 +144,22 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                             <a
                               className="ml-3 text-sm text-blue-600"
                               onClick={(e) => {
-                                window.open("https://metamask.io/", "_blank");
+                                window.open('https://metamask.io/', '_blank')
-                                e.stopPropagation();
+                                e.stopPropagation()
                               }}
                             >
                               Install
                             </a>
                           )}
                         </div>
-                        <p className="text-sm text-gray-400">
+                        <p className="text-sm text-gray-400">Connect using Metamask</p>
-                          Connect using Metamask
-                        </p>
                       </div>
                     </button>
                     <button
                       className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
                       onClick={handleConnectKeplr}
                     >
-                      <Image
+                      <Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" />
-                        src="/wallets/keplr.png"
-                        height={30}
-                        width={30}
-                        alt="keplr"
-                      />
                       <div className="ml-4 text-left">
                         <div className="flex items-end">
                           <p>Keplr</p>
@@ -178,17 +167,15 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                             <a
                               className="ml-3 text-sm text-blue-600"
                               onClick={(e) => {
-                                window.open("https://www.keplr.app/", "_blank");
+                                window.open('https://www.keplr.app/', '_blank')
-                                e.stopPropagation();
+                                e.stopPropagation()
                               }}
                             >
                               Install
                             </a>
                           )}
                         </div>
-                        <p className="text-sm text-gray-400">
+                        <p className="text-sm text-gray-400">Connect using Keplr</p>
-                          Connect using Keplr
-                        </p>
                       </div>
                     </button>
                   </div>
@@ -199,7 +186,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
         </div>
       </Dialog>
     </Transition>
-  );
+  )
-};
+}
 
-export default ConnectModal;
+export default ConnectModal

components/Container/index.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react'
-import styles from "./Container.module.css";
+import styles from './Container.module.css'
 
 type Props = {
-  children: React.ReactNode;
+  children: React.ReactNode
-  className?: string;
+  className?: string
-};
+}
 
-const Container = ({ children, className = "" }: Props) => {
+const Container = ({ children, className = '' }: Props) => {
-  return <div className={`${styles.container} ${className}`}>{children}</div>;
+  return <div className={`${styles.container} ${className}`}>{children}</div>
-};
+}
 
-export default Container;
+export default Container

components/CreditManager/CreditManagerContainer.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+// move this component outside and probably adapt generic container component to different UI variants
+export const CreditManagerContainer = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  return <div className={`p-2 bg-[#D8DAEA] rounded-lg text-[#585A74] ${className}`}>{children}</div>
+}
+
+export default CreditManagerContainer

components/CreditManager/FundAccount.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import * as Slider from '@radix-ui/react-slider'
+import BigNumber from 'bignumber.js'
+import { Switch } from '@headlessui/react'
+
+import Button from '../Button'
+import useAllowedCoins from 'hooks/useAllowedCoins'
+import useDepositCreditAccount from 'hooks/useDepositCreditAccount'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import useAllBalances from 'hooks/useAllBalances'
+import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
+import CreditManagerContainer from './CreditManagerContainer'
+
+const FundAccount = () => {
+  const [amount, setAmount] = useState(0)
+  const [selectedToken, setSelectedToken] = useState('')
+  const [enabled, setEnabled] = useState(false)
+
+  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+
+  const { data: balancesData } = useAllBalances()
+  const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins()
+  const { mutate } = useDepositCreditAccount(
+    selectedAccount || '',
+    selectedToken,
+    BigNumber(amount)
+      .times(10 ** getTokenDecimals(selectedToken))
+      .toNumber()
+  )
+
+  useEffect(() => {
+    if (allowedCoinsData && allowedCoinsData.length > 0) {
+      // initialize selected token when allowedCoins fetch data is available
+      setSelectedToken(allowedCoinsData[0])
+    }
+  }, [allowedCoinsData])
+
+  const walletAmount = useMemo(() => {
+    if (!selectedToken) return 0
+
+    return BigNumber(balancesData?.find((balance) => balance.denom === selectedToken)?.amount ?? 0)
+      .div(10 ** getTokenDecimals(selectedToken))
+      .toNumber()
+  }, [balancesData, selectedToken])
+
+  const handleValueChange = (value: number) => {
+    if (value > walletAmount) {
+      setAmount(walletAmount)
+      return
+    }
+
+    setAmount(value)
+  }
+
+  const maxValue = walletAmount
+  const percentageValue = isNaN(amount) ? 0 : (amount * 100) / maxValue
+
+  return (
+    <>
+      <CreditManagerContainer className="p-3 mb-2">
+        <p className="mb-6">
+          Transfer assets from your injective wallet to your Mars credit account. If you don’t have
+          any assets in your injective wallet use the injective bridge to transfer funds to your
+          injective wallet.
+        </p>
+        {isLoadingAllowedCoins ? (
+          <p>Loading...</p>
+        ) : (
+          <>
+            <div className="mb-4">
+              <div className="flex justify-between mb-1">
+                <div>Asset:</div>
+                <select
+                  className="bg-transparent"
+                  onChange={(e) => {
+                    setSelectedToken(e.target.value)
+
+                    if (e.target.value !== selectedToken) setAmount(0)
+                  }}
+                >
+                  {allowedCoinsData?.map((entry) => (
+                    <option key={entry} value={entry}>
+                      {getTokenSymbol(entry)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="flex justify-between">
+                <div>Amount:</div>
+                <input
+                  type="number"
+                  className="bg-transparent border border-black/50 px-2"
+                  value={amount}
+                  onChange={(e) => handleValueChange(e.target.valueAsNumber)}
+                />
+              </div>
+            </div>
+            <p>In wallet: {walletAmount.toLocaleString()}</p>
+            {/* SLIDER - initial implementation to test functionality */}
+            {/* TODO: will need to be revamped later on */}
+            <div className="relative flex flex-1 mb-6 items-center">
+              <Slider.Root
+                className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center"
+                value={[percentageValue]}
+                min={0}
+                max={100}
+                step={1}
+                onValueChange={(value) => {
+                  const decimal = value[0] / 100
+                  const tokenDecimals = getTokenDecimals(selectedToken)
+                  // limit decimal precision based on token contract decimals
+                  const newAmount = Number((decimal * maxValue).toFixed(tokenDecimals))
+
+                  setAmount(newAmount)
+                }}
+              >
+                <Slider.Track className="relative h-[6px] grow rounded-full bg-gray-400">
+                  <Slider.Range className="absolute h-[100%] rounded-full bg-blue-600" />
+                </Slider.Track>
+                <Slider.Thumb className="flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white !outline-none">
+                  <div className="relative top-5 text-xs">{percentageValue.toFixed(0)}%</div>
+                </Slider.Thumb>
+              </Slider.Root>
+              <button
+                className="ml-4 py-1 px-2 text-sm bg-blue-600 text-white rounded-md"
+                onClick={() => setAmount(maxValue)}
+              >
+                MAX
+              </button>
+            </div>
+          </>
+        )}
+      </CreditManagerContainer>
+      <CreditManagerContainer className="flex justify-between items-center mb-2">
+        <div>
+          <h3 className="font-bold">Lending Assets</h3>
+          <div className="opacity-50">Lend assets from account to earn yield.</div>
+        </div>
+
+        <Switch
+          checked={enabled}
+          onChange={setEnabled}
+          className={`${
+            enabled ? 'bg-blue-600' : 'bg-gray-400'
+          } relative inline-flex h-6 w-11 items-center rounded-full`}
+        >
+          <span
+            className={`${
+              enabled ? 'translate-x-6' : 'translate-x-1'
+            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+          />
+        </Switch>
+      </CreditManagerContainer>
+      <Button
+        className="w-full !rounded-lg"
+        onClick={() => mutate()}
+        disabled={amount === 0 || !amount}
+      >
+        Fund
+      </Button>
+    </>
+  )
+}
+
+export default FundAccount

components/CreditManager/index.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+import BigNumber from 'bignumber.js'
+
+import Button from '../Button'
+import { formatCurrency } from 'utils/formatters'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import useWalletStore from 'stores/useWalletStore'
+import useCreditAccountBalances from 'hooks/useCreditAccountPositions'
+import { getTokenDecimals } from 'utils/tokens'
+import FundAccount from './FundAccount'
+import CreditManagerContainer from './CreditManagerContainer'
+
+const CreditManager = () => {
+  const [isFund, setIsFund] = useState(false)
+
+  const address = useWalletStore((state) => state.address)
+  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+
+  const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances(
+    selectedAccount ?? ''
+  )
+
+  const totalPosition =
+    positionsData?.coins.reduce((acc, coin) => {
+      return Number(coin.value) + acc
+    }, 0) ?? 0
+
+  const totalDebt =
+    positionsData?.debt.reduce((acc, coin) => {
+      return Number(coin.value) + acc
+    }, 0) ?? 0
+
+  if (!address) {
+    return (
+      <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+        <CreditManagerContainer>You must have a connected wallet</CreditManagerContainer>
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+      <CreditManagerContainer className="mb-2">
+        {isFund ? (
+          <div className="flex justify-between items-center">
+            <h3 className="font-bold">Fund Account</h3>
+            <Button className="rounded-md" onClick={() => setIsFund(false)}>
+              Cancel
+            </Button>
+          </div>
+        ) : (
+          <div className="flex gap-3">
+            <Button className="rounded-md flex-1" onClick={() => setIsFund(true)}>
+              Fund
+            </Button>
+            <Button className="rounded-md flex-1" onClick={() => alert('TODO')}>
+              Withdraw
+            </Button>
+          </div>
+        )}
+      </CreditManagerContainer>
+      {isFund ? (
+        <FundAccount />
+      ) : (
+        <>
+          <CreditManagerContainer className="mb-2 text-sm">
+            <div className="flex justify-between mb-1">
+              <div>Total Position:</div>
+              <div className="font-semibold">{formatCurrency(totalPosition)}</div>
+            </div>
+            <div className="flex justify-between">
+              <div>Total Liabilities:</div>
+              <div className="font-semibold">{formatCurrency(totalDebt)}</div>
+            </div>
+          </CreditManagerContainer>
+          <CreditManagerContainer>
+            <h4 className="font-bold">Balances</h4>
+            {isLoadingPositions ? (
+              <div>Loading...</div>
+            ) : (
+              <>
+                <div className="flex font-semibold text-xs">
+                  <div className="flex-1">Asset</div>
+                  <div className="flex-1">Value</div>
+                  <div className="flex-1">Size</div>
+                  <div className="flex-1">APY</div>
+                </div>
+                {positionsData?.coins.map((coin) => (
+                  <div key={coin.denom} className="flex text-xs text-black/40">
+                    <div className="flex-1">{coin.denom}</div>
+                    <div className="flex-1">{formatCurrency(coin.value)}</div>
+                    <div className="flex-1">
+                      {BigNumber(coin.amount)
+                        .div(10 ** getTokenDecimals(coin.denom))
+                        .toNumber()
+                        .toLocaleString(undefined, {
+                          maximumFractionDigits: 6,
+                        })}
+                    </div>
+                    <div className="flex-1">-</div>
+                  </div>
+                ))}
+                {positionsData?.debt.map((coin) => (
+                  <div key={coin.denom} className="flex text-xs text-red-500">
+                    <div className="flex-1">{coin.denom}</div>
+                    <div className="flex-1">{formatCurrency(coin.value)}</div>
+                    <div className="flex-1">
+                      {BigNumber(coin.amount)
+                        .div(10 ** getTokenDecimals(coin.denom))
+                        .toNumber()
+                        .toLocaleString(undefined, {
+                          maximumFractionDigits: 6,
+                        })}
+                    </div>
+                    <div className="flex-1">-</div>
+                  </div>
+                ))}
+              </>
+            )}
+          </CreditManagerContainer>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default CreditManager

components/Layout/index.tsx

@@ -1,15 +1,22 @@
-import Navigation from "components/Navigation";
+import React from 'react'
-import React from "react";
+import useCreditManagerStore from 'stores/useCreditManagerStore'
 
-import styles from "./Layout.module.css";
+import CreditManager from 'components/CreditManager'
+import Navigation from 'components/Navigation'
+import styles from './Layout.module.css'
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
+  const isOpen = useCreditManagerStore((s) => s.isOpen)
+
   return (
     <div className={styles.background}>
       <Navigation />
-      <div className={styles.container}>{children}</div>
+      <div className={`${styles.container} relative`}>
+        {children}
+        {isOpen && <CreditManager />}
+      </div>
     </div>
-  );
+  )
-};
+}
 
-export default Layout;
+export default Layout

components/Navigation.tsx

@@ -1,46 +1,60 @@
-import React from "react";
+import React, { useMemo } from 'react'
-import Link from "next/link";
+import Link from 'next/link'
-import { useRouter } from "next/router";
+import { useRouter } from 'next/router'
-import { Popover } from "@headlessui/react";
+import { Popover } from '@headlessui/react'
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
-import SearchInput from "components/SearchInput";
+import SearchInput from 'components/SearchInput'
-import ProgressBar from "components/ProgressBar";
+import ProgressBar from 'components/ProgressBar'
-import Wallet from "./Wallet";
+import Spinner from 'components/Spinner'
-import { formatCurrency } from "utils/formatters";
+import Wallet from 'components/Wallet'
+import { formatCurrency } from 'utils/formatters'
+import useCreditAccounts from 'hooks/useCreditAccounts'
+import useCreateCreditAccount from 'hooks/useCreateCreditAccount'
+import useDeleteCreditAccount from 'hooks/useDeleteCreditAccount'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
 
-const mockedAccounts = [
+// TODO: will require some tweaks depending on how lower viewport mocks pans out
-  {
+const MAX_VISIBLE_CREDIT_ACCOUNTS = 5
-    label: "Subaccount 1",
+
-  },
+const navItems = [
-  {
+  { href: '/trade', label: 'Trade' },
-    label: "Subaccount 2",
+  { href: '/yield', label: 'Yield' },
-  },
+  { href: '/borrow', label: 'Borrow' },
-  {
+  { href: '/portfolio', label: 'Portfolio' },
-    label: "Subaccount 3",
+  { href: '/council', label: 'Council' },
-  },
+]
-  {
-    label: "Subaccount 4",
-  },
-];
 
 const NavLink = ({ href, children }: { href: string; children: string }) => {
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <Link href={href} passHref>
-      <a
+      <a className={`${router.pathname === href ? 'text-white' : ''} hover:text-white`}>
-        className={`${
-          router.pathname === href ? "text-white" : ""
-        } hover:text-white`}
-      >
         {children}
       </a>
     </Link>
-  );
+  )
-};
+}
 
 const Navigation = () => {
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
+  const setSelectedAccount = useCreditManagerStore((s) => s.actions.setSelectedAccount)
+  const toggleCreditManager = useCreditManagerStore((s) => s.actions.toggleCreditManager)
+
+  const { data: creditAccountsList } = useCreditAccounts()
+  const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
+  const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
+    selectedAccount || ''
+  )
+
+  const { firstCreditAccounts, restCreditAccounts } = useMemo(() => {
+    return {
+      firstCreditAccounts: creditAccountsList?.slice(0, MAX_VISIBLE_CREDIT_ACCOUNTS) ?? [],
+      restCreditAccounts: creditAccountsList?.slice(MAX_VISIBLE_CREDIT_ACCOUNTS) ?? [],
+    }
+  }, [creditAccountsList])
+
   return (
     <div>
       {/* Main navigation bar */}
@@ -51,11 +65,11 @@ const Navigation = () => {
           </a>
         </Link>
         <div className="flex px-12 gap-5 text-white/40">
-          <NavLink href="/trade">Trade</NavLink>
+          {navItems.map((item, index) => (
-          <NavLink href="/yield">Yield</NavLink>
+            <NavLink key={index} href={item.href}>
-          <NavLink href="/borrow">Borrow</NavLink>
+              {item.label}
-          <NavLink href="/portfolio">Portfolio</NavLink>
+            </NavLink>
-          <NavLink href="/council">Council</NavLink>
+          ))}
         </div>
         <Wallet />
       </div>
@@ -63,11 +77,42 @@ const Navigation = () => {
       <div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20">
         <div className="flex items-center">
           <SearchInput />
-          {mockedAccounts.map((account, index) => (
+          {firstCreditAccounts.map((account) => (
-            <div key={index} className="px-4 hover:text-white cursor-pointer">
+            <div
-              {account.label}
+              key={account}
+              className={`px-4 hover:text-white cursor-pointer ${
+                selectedAccount === account ? 'text-white' : ''
+              }`}
+              onClick={() => setSelectedAccount(account)}
+            >
+              Account {account}
             </div>
           ))}
+          {restCreditAccounts.length > 0 && (
+            <Popover className="relative">
+              <Popover.Button>
+                <div className="px-3 flex items-center hover:text-white cursor-pointer">
+                  More
+                  <ChevronDownIcon className="ml-1 h-4 w-4" />
+                </div>
+              </Popover.Button>
+              <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
+                <div className="bg-white rounded-2xl p-4 text-gray-900">
+                  {restCreditAccounts.map((account) => (
+                    <div
+                      key={account}
+                      className={`cursor-pointer hover:text-orange-500 ${
+                        selectedAccount === account ? 'text-orange-500' : ''
+                      }`}
+                      onClick={() => setSelectedAccount(account)}
+                    >
+                      Account {account}
+                    </div>
+                  ))}
+                </div>
+              </Popover.Panel>
+            </Popover>
+          )}
           <Popover className="relative">
             <Popover.Button>
               <div className="px-3 flex items-center hover:text-white cursor-pointer">
@@ -76,46 +121,65 @@ const Navigation = () => {
               </div>
             </Popover.Button>
             <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
-              <div className="bg-white rounded-2xl p-4 text-gray-900">
+              {({ close }) => (
-                <div
+                <div className="bg-white rounded-2xl p-4 text-gray-900">
-                  className="mb-2 cursor-pointer"
+                  <div
-                  onClick={() => alert("TODO")}
+                    className="mb-2 cursor-pointer hover:text-orange-500"
-                >
+                    onClick={() => {
-                  Create subaccount
+                      close()
+                      createCreditAccount()
+                    }}
+                  >
+                    Create Account
+                  </div>
+                  <div
+                    className="mb-2 cursor-pointer hover:text-orange-500"
+                    onClick={() => {
+                      close()
+                      deleteCreditAccount()
+                    }}
+                  >
+                    Close Account
+                  </div>
+                  <div
+                    className="mb-2 cursor-pointer hover:text-orange-500"
+                    onClick={() => alert('TODO')}
+                  >
+                    Transfer Balance
+                  </div>
+                  <div
+                    className="cursor-pointer hover:text-orange-500"
+                    onClick={() => alert('TODO')}
+                  >
+                    Rearrange
+                  </div>
                 </div>
-                <div
+              )}
-                  className="mb-2 cursor-pointer"
-                  onClick={() => alert("TODO")}
-                >
-                  Close subaccount
-                </div>
-                <div
-                  className="mb-2 cursor-pointer"
-                  onClick={() => alert("TODO")}
-                >
-                  Transfer balance
-                </div>
-                <div className="cursor-pointer" onClick={() => alert("TODO")}>
-                  Rearrange
-                </div>
-              </div>
             </Popover.Panel>
           </Popover>
         </div>
         <div className="flex gap-4 items-center">
-          <p>$: ${formatCurrency(2500)}</p>
+          <p>{formatCurrency(2500)}</p>
           <div>Lvg</div>
           <div>Risk</div>
           <ProgressBar value={0.43} />
-          <div className="flex justify-center w-16">
+          <div
+            className="flex justify-center w-16 cursor-pointer hover:text-white"
+            onClick={toggleCreditManager}
+          >
             <svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">
               <path d="M0.234863 6.57567C0.234863 7.07288 0.581403 7.41188 1.08615 7.41188H8.04708L9.62912 7.33655L7.45194 9.31785L5.93771 10.8547C5.77951 11.0129 5.68157 11.2163 5.68157 11.4574C5.68157 11.9244 6.02811 12.2634 6.50272 12.2634C6.72872 12.2634 6.93213 12.173 7.12047 11.9922L11.859 7.20094C11.9871 7.07288 12.0775 6.92221 12.1152 6.74894V11.5478C12.1152 12.0148 12.4692 12.3538 12.9363 12.3538C13.4109 12.3538 13.765 12.0148 13.765 11.5478V1.6111C13.765 1.14403 13.4109 0.797485 12.9363 0.797485C12.4692 0.797485 12.1152 1.14403 12.1152 1.6111V6.39486C12.0775 6.22913 11.9871 6.07846 11.859 5.95039L7.12047 1.15156C6.93213 0.970755 6.72872 0.880354 6.50272 0.880354C6.02811 0.880354 5.68157 1.22689 5.68157 1.68644C5.68157 1.92751 5.77951 2.13845 5.93771 2.28911L7.45194 3.83348L9.62912 5.80725L8.04708 5.73192H1.08615C0.581403 5.73192 0.234863 6.07846 0.234863 6.57567Z" />
             </svg>
           </div>
         </div>
       </div>
+      {(isLoadingCreate || isLoadingDelete) && (
+        <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <Spinner />
+        </div>
+      )}
     </div>
-  );
+  )
-};
+}
 
-export default Navigation;
+export default Navigation

components/ProgressBar.tsx

@@ -1,22 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react'
-import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import { ArrowRightIcon } from '@heroicons/react/24/solid'
 
 type Props = {
-  value: number;
+  value: number
-};
+}
 
 const ProgressBar = ({ value }: Props) => {
-  const percentageValue = `${(value * 100).toFixed(0)}%`;
+  const percentageValue = `${(value * 100).toFixed(0)}%`
-  const [newValue, setNewValue] = useState(0.77);
+  const [newValue, setNewValue] = useState(0.77)
 
   useEffect(() => {
     setInterval(() => {
       // randomizing value between value and 1
-      setNewValue(Math.random() * (1 - value) + value);
+      setNewValue(Math.random() * (1 - value) + value)
-    }, 3000);
+    }, 3000)
-  }, [value]);
+  }, [value])
 
-  const percentageNewValue = `${(newValue * 100).toFixed(0)}%`;
+  const percentageNewValue = `${(newValue * 100).toFixed(0)}%`
 
   return (
     <div className="relative w-[130px] h-4 bg-black rounded-full z-0">
@@ -34,7 +34,7 @@ const ProgressBar = ({ value }: Props) => {
         {percentageNewValue}
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default ProgressBar;
+export default ProgressBar

components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const SearchInput = () => (
   <div className="relative text-white">
@@ -20,6 +20,6 @@ const SearchInput = () => (
       placeholder="Search"
     />
   </div>
-);
+)
 
-export default SearchInput;
+export default SearchInput

components/Spinner.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const Spinner = () => {
+  return (
+    <svg
+      className="animate-spin h-8 w-8"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Spinner

components/Wallet.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react'
-import { Popover } from "@headlessui/react";
+import { Popover } from '@headlessui/react'
-import { toast } from "react-toastify";
+import { toast } from 'react-toastify'
-import Image from "next/image";
+import Image from 'next/image'
 
-import Button from "./Button";
+import Button from './Button'
-import ConnectModal from "./ConnectModal";
+import ConnectModal from './ConnectModal'
-import useWalletStore from "stores/useWalletStore";
+import useWalletStore from 'stores/useWalletStore'
-import useInjectiveBalance from "hooks/useInjectiveBalance";
+import useTokenBalance from 'hooks/useTokenBalance'
-import { formatWalletAddress } from "utils/formatters";
+import { formatWalletAddress } from 'utils/formatters'
+import { chain } from 'utils/chains'
 
 const WalletPopover = ({ children }: { children: React.ReactNode }) => {
-  const address = useWalletStore((state) => state.address);
+  const address = useWalletStore((state) => state.address)
-  const actions = useWalletStore((state) => state.actions);
+  const actions = useWalletStore((state) => state.actions)
 
-  const { data } = useInjectiveBalance();
+  const { data } = useTokenBalance()
 
   return (
     <Popover className="relative">
@@ -25,17 +26,15 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
         <div className="bg-white rounded-2xl p-6 text-gray-900">
           <div className="flex justify-between items-center mb-4">
             <div className="flex items-center">
-              <Image src="/injective.svg" alt="token" width={24} height={24} />
+              <Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
               <p className="ml-2">
-                INJ{" "}
+                {chain.stakeCurrency.coinDenom}{' '}
-                <span className="text-lg font-semibold ml-1">
+                <span className="text-lg font-semibold ml-1">{data?.toFixed(2)}</span>
-                  {data?.toFixed(2)}
-                </span>
               </p>
             </div>
             <Button
               className=" bg-[#524bb1] hover:bg-[#6962cc]"
-              onClick={() => actions.setAddress("")}
+              onClick={() => actions.setAddress('')}
             >
               Disconnect
             </Button>
@@ -45,8 +44,8 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
             className="flex items-center text-slate-500 hover:text-slate-700 text-sm"
             onClick={() => {
               navigator.clipboard.writeText(address).then(() => {
-                toast.success("Address copied to your clipboard");
+                toast.success('Address copied to your clipboard')
-              });
+              })
             }}
           >
             <svg
@@ -67,19 +66,19 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
         </div>
       </Popover.Panel>
     </Popover>
-  );
+  )
-};
+}
 
 const Wallet = () => {
-  const [showConnectModal, setShowConnectModal] = useState(false);
+  const [showConnectModal, setShowConnectModal] = useState(false)
-  const [hasHydrated, setHasHydrated] = useState<boolean>(false);
+  const [hasHydrated, setHasHydrated] = useState<boolean>(false)
 
-  const address = useWalletStore((state) => state.address);
+  const address = useWalletStore((state) => state.address)
 
   // avoid server-client hydration mismatch
   useEffect(() => {
-    setHasHydrated(true);
+    setHasHydrated(true)
-  }, []);
+  }, [])
 
   return (
     <>
@@ -90,12 +89,9 @@ const Wallet = () => {
           Connect Wallet
         </Button>
       )}
-      <ConnectModal
+      <ConnectModal isOpen={showConnectModal} onClose={() => setShowConnectModal(false)} />
-        isOpen={showConnectModal}
-        onClose={() => setShowConnectModal(false)}
-      />
     </>
-  );
+  )
-};
+}
 
-export default Wallet;
+export default Wallet

config/contracts.ts

@@ -0,0 +1,9 @@
+// https://github.com/mars-protocol/rover/blob/master/scripts/deploy/addresses/osmo-test-4.json
+export const contractAddresses = {
+  accountNft: 'osmo16v3mvsdnkh4c6ykc885n3x5ay9e36akdzxcl2g93698rqw007xxqesld8w',
+  mockRedBank: 'osmo1xrnx0q3x7kwzss53fry0dwwsc7pff6aq628l6n0rmvegkalp4y7qzl7j7z',
+  mockOracle: 'osmo1r9u2tfq8n5xpn2g0fq8ha0rj0cyp2fzr5w9jvcqwt3r8lxdfm6yszmtza5',
+  mockVault: 'osmo1gg4rpug7vwrnq0ask0k7nmw23z6wl8c8fr7jmup9pdpaal9uc5nqq7lyrm',
+  swapper: 'osmo1ak4x8k2h7s6pq5dnlncmgsmx2nqcaplpfxlmklx2ln7qn6dtny8q70apjv',
+  creditManager: 'osmo1963xgmt8agyc6q4k2vhf980kffq6ukkj9mgtwdxxnpj3dak2akdq20z9dw',
+}

config/tokenInfo.ts

@@ -0,0 +1,20 @@
+type Token = {
+  symbol: string
+  decimals: number
+  icon: string
+}
+
+const tokenInfo: { [key in string]: Token } = {
+  uosmo: {
+    symbol: 'OSMO',
+    decimals: 6,
+    icon: '/tokens/osmo.svg',
+  },
+  'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2': {
+    symbol: 'ATOM',
+    icon: '',
+    decimals: 6,
+  },
+}
+
+export default tokenInfo

hooks/useAllBalances.tsx

@@ -1,20 +1,29 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from '@tanstack/react-query'
 
-import useWalletStore from "stores/useWalletStore";
+import useWalletStore from 'stores/useWalletStore'
+import { queryKeys } from 'types/query-keys-factory'
+import { chain } from 'utils/chains'
+
+type Result = {
+  balances: { amount: string; denom: string }[]
+}
 
 const useAllBalances = () => {
-  const address = useWalletStore((state) => state.address);
+  const address = useWalletStore((state) => state.address)
 
-  return useQuery(
+  const result = useQuery<Result>(
-    ["allBalances"],
+    queryKeys.allBalances(address),
-    () =>
+    () => fetch(`${chain.rest}/cosmos/bank/v1beta1/balances/${address}`).then((res) => res.json()),
-      fetch(
-        `https://lcd.injective.network/cosmos/bank/v1beta1/balances/${address}`
-      ).then((res) => res.json()),
     {
       enabled: !!address,
+      staleTime: Infinity,
     }
-  );
+  )
-};
 
-export default useAllBalances;
+  return {
+    ...result,
+    data: result?.data?.balances,
+  }
+}
+
+export default useAllBalances

hooks/useAllowedCoins.tsx

@@ -0,0 +1,46 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { queryKeys } from 'types/query-keys-factory'
+
+type Result = string[]
+
+const queryMsg = {
+  allowed_coins: {},
+}
+
+const useAllowedCoins = () => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const address = useWalletStore((state) => state.address)
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  const result = useQuery<Result>(
+    queryKeys.allowedCoins(),
+    async () => signingClient?.queryContractSmart(contractAddresses.creditManager, queryMsg),
+    {
+      enabled: !!address && !!signingClient,
+      staleTime: Infinity,
+    }
+  )
+
+  return {
+    ...result,
+    data: result?.data,
+  }
+}
+
+export default useAllowedCoins

hooks/useCreateCreditAccount.tsx

@@ -0,0 +1,63 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { hardcodedFee } from 'utils/contants'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import { queryKeys } from 'types/query-keys-factory'
+
+// 200000 gas used
+const executeMsg = {
+  create_credit_account: {},
+}
+
+const useCreateCreditAccount = () => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const setSelectedAccount = useCreditManagerStore((state) => state.actions.setSelectedAccount)
+  const address = useWalletStore((state) => state.address)
+
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  return useMutation(
+    async () =>
+      await signingClient?.execute(
+        address,
+        contractAddresses.creditManager,
+        executeMsg,
+        hardcodedFee
+      ),
+    {
+      onSettled: () => {
+        queryClient.invalidateQueries(queryKeys.creditAccounts(address))
+      },
+      onError: (err: Error) => {
+        toast.error(err.message)
+      },
+      onSuccess: (data) => {
+        if (!data) return
+
+        // TODO: is there some better way to parse response to extract token id???
+        const createdID = data.logs[0].events[2].attributes[6].value
+        setSelectedAccount(createdID)
+        toast.success('New account created')
+      },
+    }
+  )
+}
+
+export default useCreateCreditAccount

hooks/useCreditAccountPositions.tsx

@@ -0,0 +1,79 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { queryKeys } from 'types/query-keys-factory'
+
+interface CoinValue {
+  amount: string
+  denom: string
+  price: string
+  value: string
+}
+
+interface DebtSharesValue {
+  amount: string
+  denom: string
+  price: string
+  shares: string
+  value: string
+}
+
+export interface VaultPosition {
+  locked: string
+  unlocked: string
+}
+
+interface VaultPositionWithAddr {
+  addr: string
+  position: VaultPosition
+}
+
+interface Result {
+  account_id: string
+  coins: CoinValue[]
+  debt: DebtSharesValue[]
+  vault_positions: VaultPositionWithAddr[]
+}
+
+const useCreditAccountPositions = (accountId: string) => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const address = useWalletStore((state) => state.address)
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  const result = useQuery<Result>(
+    queryKeys.creditAccountsPositions(accountId),
+    async () =>
+      signingClient?.queryContractSmart(contractAddresses.creditManager, {
+        positions: {
+          account_id: accountId,
+        },
+      }),
+    {
+      enabled: !!address && !!signingClient,
+      staleTime: Infinity,
+    }
+  )
+
+  return {
+    ...result,
+    data: useMemo(() => {
+      return result?.data
+    }, [result.data]),
+  }
+}
+
+export default useCreditAccountPositions

hooks/useCreditAccounts.tsx

@@ -0,0 +1,63 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import { queryKeys } from 'types/query-keys-factory'
+
+type Result = {
+  tokens: string[]
+}
+
+const useCreditAccounts = () => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const address = useWalletStore((state) => state.address)
+  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const creditManagerActions = useCreditManagerStore((state) => state.actions)
+
+  const queryMsg = useMemo(() => {
+    return {
+      tokens: {
+        owner: address,
+      },
+    }
+  }, [address])
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  const result = useQuery<Result>(
+    queryKeys.creditAccounts(address),
+    async () => signingClient?.queryContractSmart(contractAddresses.accountNft, queryMsg),
+    {
+      enabled: !!address && !!signingClient,
+      onSuccess: (data) => {
+        if (!data.tokens.includes(selectedAccount || '') && data.tokens.length > 0) {
+          creditManagerActions.setSelectedAccount(data.tokens[0])
+        }
+      },
+    }
+  )
+
+  return {
+    ...result,
+    data: useMemo(() => {
+      if (!address) return []
+
+      return result?.data && result.data.tokens
+    }, [address, result?.data]),
+  }
+}
+
+export default useCreditAccounts

hooks/useDeleteCreditAccount.tsx

@@ -0,0 +1,55 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { hardcodedFee } from 'utils/contants'
+import { queryKeys } from 'types/query-keys-factory'
+
+const useCreateCreditAccount = (accountId: string) => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const address = useWalletStore((state) => state.address)
+
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  return useMutation(
+    async () =>
+      await signingClient?.execute(
+        address,
+        contractAddresses.accountNft,
+        {
+          burn: {
+            token_id: accountId,
+          },
+        },
+        hardcodedFee
+      ),
+    {
+      onSettled: () => {
+        queryClient.invalidateQueries(queryKeys.creditAccounts(address))
+      },
+      onError: (err: Error) => {
+        toast.error(err.message)
+      },
+      onSuccess: () => {
+        toast.success('Credit Account Deleted')
+      },
+    }
+  )
+}
+
+export default useCreateCreditAccount

hooks/useDepositCreditAccount.tsx

@@ -0,0 +1,71 @@
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { hardcodedFee } from 'utils/contants'
+import { queryKeys } from 'types/query-keys-factory'
+
+const useDepositCreditAccount = (accountId: string, denom: string, amount: number) => {
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+  const address = useWalletStore((state) => state.address)
+
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  return useMutation(
+    async () =>
+      await signingClient?.execute(
+        address,
+        contractAddresses.creditManager,
+        {
+          update_credit_account: {
+            account_id: accountId,
+            actions: [
+              {
+                deposit: {
+                  denom,
+                  amount: String(amount),
+                },
+              },
+            ],
+          },
+        },
+        hardcodedFee,
+        undefined,
+        [
+          {
+            denom,
+            amount: String(amount),
+          },
+        ]
+      ),
+    {
+      onError: (err: Error) => {
+        toast.error(err.message)
+      },
+      onSuccess: () => {
+        queryClient.invalidateQueries(queryKeys.allBalances(address))
+        queryClient.invalidateQueries(queryKeys.tokenBalance(address, denom))
+        queryClient.invalidateQueries(queryKeys.creditAccountsPositions(accountId))
+
+        toast.success('Deposited Successfully')
+      },
+    }
+  )
+}
+
+export default useDepositCreditAccount

hooks/useInjectiveBalance.tsx

@@ -1,37 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import BigNumber from "bignumber.js";
-
-import useWalletStore from "stores/useWalletStore";
-
-type Result = {
-  balance: {
-    amount: number;
-    denom: string;
-  };
-};
-
-const useAllBalances = () => {
-  const address = useWalletStore((state) => state.address);
-
-  const result = useQuery<Result>(
-    ["injectiveBalance"],
-    async () =>
-      fetch(
-        `https://lcd.injective.network/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=inj`
-      ).then((res) => res.json()),
-    {
-      enabled: !!address,
-    }
-  );
-
-  return {
-    ...result,
-    data:
-      result?.data &&
-      BigNumber(result.data.balance.amount)
-        .div(10 ** 18)
-        .toNumber(),
-  };
-};
-
-export default useAllBalances;

hooks/useTokenBalance.tsx

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query'
+import BigNumber from 'bignumber.js'
+
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { queryKeys } from 'types/query-keys-factory'
+
+type Result = {
+  balance: {
+    amount: number
+    denom: string
+  }
+}
+
+const useTokenBalance = (denom?: string) => {
+  const address = useWalletStore((state) => state.address)
+
+  const result = useQuery<Result>(
+    queryKeys.tokenBalance(address, denom || chain.stakeCurrency.coinMinimalDenom),
+    async () =>
+      fetch(
+        `${chain.rest}/cosmos/bank/v1beta1/balances/${address}/by_denom?denom=${
+          denom || chain.stakeCurrency.coinMinimalDenom
+        }`
+      ).then((res) => res.json()),
+    {
+      enabled: !!address,
+    }
+  )
+
+  return {
+    ...result,
+    data: result?.data
+      ? BigNumber(result.data.balance.amount)
+          .div(10 ** chain.stakeCurrency.coinDecimals)
+          .toNumber()
+      : 0,
+  }
+}
+
+export default useTokenBalance

next.config.js

@@ -1,4 +1,4 @@
-const { withSentryConfig } = require("@sentry/nextjs");
+const { withSentryConfig } = require('@sentry/nextjs')
 
 // This file sets a custom webpack configuration to use your Next.js app
 // with Sentry.
@@ -13,7 +13,7 @@ const nextConfig = {
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
     hideSourceMaps: true,
   },
-};
+}
 
 const sentryWebpackPluginOptions = {
   // Additional config options for the Sentry Webpack plugin. Keep in mind that
@@ -25,8 +25,8 @@ const sentryWebpackPluginOptions = {
   silent: true, // Suppresses all logs
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options.
-};
+}
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
+module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions)

package.json

@@ -9,10 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cosmjs/cosmwasm-stargate": "^0.29.0",
+    "@cosmjs/stargate": "^0.29.0",
     "@headlessui/react": "^1.7.0",
     "@heroicons/react": "^2.0.11",
     "@keplr-wallet/cosmos": "^0.10.24",
     "@metamask/detect-provider": "^1.2.0",
+    "@radix-ui/react-slider": "^1.0.0",
     "@sentry/nextjs": "^7.12.1",
     "@tanstack/react-query": "^4.3.4",
     "bech32": "^2.0.0",

pages/_app.tsx

@@ -1,34 +1,34 @@
-import type { AppProps } from "next/app";
+import type { AppProps } from 'next/app'
-import Head from "next/head";
+import Head from 'next/head'
-import { ToastContainer, Zoom } from "react-toastify";
+import { ToastContainer, Zoom } from 'react-toastify'
-import "react-toastify/dist/ReactToastify.min.css";
+import 'react-toastify/dist/ReactToastify.min.css'
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import detectEthereumProvider from "@metamask/detect-provider";
+import detectEthereumProvider from '@metamask/detect-provider'
 
-import "../styles/globals.css";
+import '../styles/globals.css'
-import Layout from "components/Layout";
+import Layout from 'components/Layout'
-import { useEffect } from "react";
+import { useEffect } from 'react'
-import useWalletStore from "stores/useWalletStore";
+import useWalletStore from 'stores/useWalletStore'
 
 async function isMetamaskInstalled(): Promise<boolean> {
-  const provider = await detectEthereumProvider();
+  const provider = await detectEthereumProvider()
 
-  return !!provider;
+  return !!provider
 }
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const actions = useWalletStore((state) => state.actions);
+  const actions = useWalletStore((state) => state.actions)
 
   // init store
   useEffect(() => {
     const verifyMetamask = async () => {
-      actions.setMetamaskInstalledStatus(await isMetamaskInstalled());
+      actions.setMetamaskInstalledStatus(await isMetamaskInstalled())
-    };
+    }
 
-    verifyMetamask();
+    verifyMetamask()
-  }, [actions]);
+  }, [actions])
 
   return (
     <>
@@ -51,7 +51,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
       </QueryClientProvider>
     </>
-  );
+  )
 }
 
-export default MyApp;
+export default MyApp

pages/_error.js

@@ -16,24 +16,24 @@
  *  - https://reactjs.org/docs/error-boundaries.html
  */
 
-import * as Sentry from '@sentry/nextjs';
+import * as Sentry from '@sentry/nextjs'
-import NextErrorComponent from 'next/error';
+import NextErrorComponent from 'next/error'
 
-const CustomErrorComponent = props => {
+const CustomErrorComponent = (props) => {
   // If you're using a Nextjs version prior to 12.2.1, uncomment this to
   // compensate for https://github.com/vercel/next.js/issues/8592
   // Sentry.captureUnderscoreErrorException(props);
 
-  return <NextErrorComponent statusCode={props.statusCode} />;
+  return <NextErrorComponent statusCode={props.statusCode} />
-};
+}
 
-CustomErrorComponent.getInitialProps = async contextData => {
+CustomErrorComponent.getInitialProps = async (contextData) => {
   // In case this is running in a serverless function, await this in order to give Sentry
   // time to send the error before the lambda exits
-  await Sentry.captureUnderscoreErrorException(contextData);
+  await Sentry.captureUnderscoreErrorException(contextData)
 
   // This will contain the status code of the response
-  return NextErrorComponent.getInitialProps(contextData);
+  return NextErrorComponent.getInitialProps(contextData)
-};
+}
 
-export default CustomErrorComponent;
+export default CustomErrorComponent

pages/borrow.tsx

@@ -1,13 +1,71 @@
-import React from "react";
+import React from 'react'
-import Container from "components/Container";
+import Image from 'next/image'
+
+import Container from 'components/Container'
+
+const AssetRow = () => {
+  return (
+    <div className="flex bg-[#D8DAEA] text-[#585A74] rounded-md p-2">
+      <div className="flex flex-1">
+        <Image src="/tokens/osmo.svg" alt="token" width={24} height={24} />
+        <div className="pl-2">
+          <div>DENOM</div>
+          <div className="text-xs">Name</div>
+        </div>
+      </div>
+      <div className="flex-1">10.00%</div>
+      <div className="flex-1">
+        <div>Amount</div>
+        <div>Value</div>
+      </div>
+      <div className="flex-1">
+        <div>Amount</div>
+        <div>Value</div>
+      </div>
+      <div className="w-[50px]">ACTION</div>
+    </div>
+  )
+}
 
 const Borrow = () => {
   return (
     <div className="flex gap-4">
-      <Container className="flex-1">Borrow Module</Container>
+      <Container className="flex-1">
-      <Container className="w-[450px]">Placeholder</Container>
+        <div className="mb-5">
+          <h3 className="font-medium uppercase text-center mb-1">Borrowed</h3>
+          <div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
+            <div className="flex-1">Asset</div>
+            <div className="flex-1">Borrow Rate</div>
+            <div className="flex-1">Borrowed</div>
+            <div className="flex-1">Liquidity Available</div>
+            <div className="w-[50px]">Manage</div>
+          </div>
+          <div className="flex flex-col gap-2">
+            {Array.from(Array(3).keys()).map(() => (
+              // eslint-disable-next-line react/jsx-key
+              <AssetRow />
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 className="font-medium uppercase text-center mb-1">Not Borrowed Yet</h3>
+          <div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
+            <div className="flex-1">Asset</div>
+            <div className="flex-1">Borrow Rate</div>
+            <div className="flex-1">Borrowed</div>
+            <div className="flex-1">Liquidity Available</div>
+            <div className="w-[50px]">Manage</div>
+          </div>
+          <div className="flex flex-col gap-2">
+            {Array.from(Array(5).keys()).map(() => (
+              // eslint-disable-next-line react/jsx-key
+              <AssetRow />
+            ))}
+          </div>
+        </div>
+      </Container>
     </div>
-  );
+  )
-};
+}
 
-export default Borrow;
+export default Borrow

pages/council.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react'
-import Container from "components/Container";
+import Container from 'components/Container'
 
 const Council = () => {
   return (
     <div>
       <Container>Council Placeholder</Container>
     </div>
-  );
+  )
-};
+}
 
-export default Council;
+export default Council

pages/index.tsx

@@ -1,12 +1,337 @@
-import type { NextPage } from "next";
+import React, { useEffect, useState } from 'react'
+import type { NextPage } from 'next'
 // import Head from "next/head";
 // import Image from "next/image";
 // import styles from "../styles/Home.module.css";
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+// import { Coin } from "@cosmjs/stargate";
+import { toast } from 'react-toastify'
+import BigNumber from 'bignumber.js'
+import { useQueryClient } from '@tanstack/react-query'
 
-// import Container from "components/Container";
+import Container from 'components/Container'
+import Button from 'components/Button'
+import useWalletStore from 'stores/useWalletStore'
+import { chain } from 'utils/chains'
+import { contractAddresses } from 'config/contracts'
+import { hardcodedFee } from 'utils/contants'
+import Spinner from 'components/Spinner'
+import useCreditManagerStore from 'stores/useCreditManagerStore'
+import { queryKeys } from 'types/query-keys-factory'
 
 const Home: NextPage = () => {
-  return <div>Home Page</div>;
+  const [sendAmount, setSendAmount] = useState('')
-};
+  const [recipientAddress, setRecipientAddress] = useState('')
 
-export default Home;
+  const [allTokens, setAllTokens] = useState<string[] | null>(null)
+  const [walletTokens, setWalletTokens] = useState<string[] | null>(null)
+
+  const [borrowAmount, setBorrowAmount] = useState(0)
+
+  const [error, setError] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const address = useWalletStore((state) => state.address)
+  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const queryClient = useQueryClient()
+
+  const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
+
+  useEffect(() => {
+    ;(async () => {
+      if (!window.keplr) return
+
+      const offlineSigner = window.keplr.getOfflineSigner(chain.chainId)
+      const clientInstance = await SigningCosmWasmClient.connectWithSigner(chain.rpc, offlineSigner)
+
+      setSigningClient(clientInstance)
+    })()
+  }, [address])
+
+  const handleSendClick = async () => {
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      // console.log(await signingClient.getHeight());
+
+      // console.log(
+      //   "contract info",
+      //   signingClient.getContract(
+      //     "osmo1zf26ahe5gqjtvnedh7ems7naf2wtw3z4ll6atf3t0hptal8ss4vq2mlx6w"
+      //   )
+      // );
+
+      const res = await signingClient?.sendTokens(
+        address,
+        recipientAddress,
+        [
+          {
+            denom: chain.stakeCurrency.coinMinimalDenom,
+            amount: BigNumber(sendAmount)
+              .times(10 ** chain.stakeCurrency.coinDecimals)
+              .toString(),
+          },
+        ],
+        hardcodedFee
+      )
+
+      console.log('txResponse', res)
+      toast.success(
+        <div>
+          <a
+            href={`https://testnet.mintscan.io/osmosis-testnet/txs/${res?.transactionHash}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Check transaction
+          </a>
+        </div>,
+        { autoClose: false }
+      )
+    } catch (e: any) {
+      console.log(e)
+      setError(e.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCreateCreditAccount = async () => {
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      // 200000 gas used
+      const executeMsg = {
+        create_credit_account: {},
+      }
+
+      const createResult = await signingClient?.execute(
+        address,
+        contractAddresses.creditManager,
+        executeMsg,
+        hardcodedFee
+      )
+
+      console.log('mint result', createResult)
+      toast.success(
+        <div>
+          <a
+            href={`https://testnet.mintscan.io/osmosis-testnet/txs/${createResult?.transactionHash}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Check transaction
+          </a>
+        </div>,
+        { autoClose: false }
+      )
+
+      queryClient.invalidateQueries(queryKeys.creditAccounts(address))
+    } catch (e: any) {
+      console.log(e)
+      setError(e.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // https://github.com/mars-protocol/rover/blob/master/scripts/types/generated/account-nft/AccountNft.types.ts
+  const handleGetCreditAccounts = async () => {
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      const allTokensQueryMsg = {
+        all_tokens: {},
+      }
+
+      const allTokensResponse = await signingClient?.queryContractSmart(
+        contractAddresses.accountNft,
+        allTokensQueryMsg
+      )
+
+      setAllTokens(allTokensResponse.tokens)
+
+      console.log('all tokens', allTokensResponse)
+
+      // Returns de owner of a specific "credit account"
+      // const ownerOfQueryMsg = {
+      //   owner_of: {
+      //     include_expired: false,
+      //     token_id: "1",
+      //   },
+      // };
+
+      // const ownerResponse = await signingClient.queryContractSmart(
+      //   contractAddresses.accountNft,
+      //   ownerOfQueryMsg
+      // );
+
+      // console.log("res owner", ownerResponse);
+
+      const tokensQueryMsg = {
+        tokens: {
+          owner: address,
+        },
+      }
+
+      const tokensResponse = await signingClient?.queryContractSmart(
+        contractAddresses.accountNft,
+        tokensQueryMsg
+      )
+
+      console.log('res tokens', tokensResponse)
+      setWalletTokens(tokensResponse.tokens)
+    } catch (e: any) {
+      console.log(e)
+      setError(e.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleBorrowClick = async () => {
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      if (!selectedAccount) return
+
+      const executeMsg = {
+        update_credit_account: {
+          account_id: selectedAccount,
+          actions: [
+            {
+              borrow: {
+                denom: 'uosmo',
+                amount: BigNumber(borrowAmount)
+                  .times(10 ** 6)
+                  .toString(),
+              },
+            },
+          ],
+        },
+      }
+
+      const borrowResult = await signingClient?.execute(
+        address,
+        contractAddresses.creditManager,
+        executeMsg,
+        hardcodedFee
+      )
+
+      console.log('borrow result', borrowResult)
+      toast.success(
+        <div>
+          <a
+            href={`https://testnet.mintscan.io/osmosis-testnet/txs/${borrowResult?.transactionHash}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Check transaction
+          </a>
+        </div>,
+        { autoClose: false }
+      )
+
+      queryClient.invalidateQueries(queryKeys.creditAccounts(address))
+      queryClient.invalidateQueries(queryKeys.creditAccountsPositions(selectedAccount))
+      queryClient.invalidateQueries(queryKeys.tokenBalance(address, 'uosmo'))
+    } catch (e: any) {
+      console.log(e)
+      setError(e.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-y-6 max-w-6xl mx-auto">
+      <Container>
+        <h4 className="text-xl mb-5">Send Tokens</h4>
+        <div className="flex flex-wrap gap-2 mb-5">
+          <div>
+            <p>Address:</p>
+            <input
+              className="rounded-lg px-3 py-1 bg-black/40"
+              value={recipientAddress}
+              placeholder="address"
+              onChange={(e) => setRecipientAddress(e.target.value)}
+            />
+          </div>
+          <div>
+            <p>Amount:</p>
+            <input
+              type="number"
+              className="rounded-lg px-3 py-1 bg-black/40"
+              value={sendAmount}
+              placeholder="amount"
+              onChange={(e) => setSendAmount(e.target.value)}
+            />
+          </div>
+        </div>
+        <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleSendClick}>
+          Send
+        </Button>
+      </Container>
+      <Container>
+        <h4 className="text-xl mb-5">Create Credit Account (Mint NFT)</h4>
+        <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleCreateCreditAccount}>
+          Create
+        </Button>
+      </Container>
+      <Container>
+        <h4 className="text-xl mb-5">Get all Credit Accounts</h4>
+        <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleGetCreditAccounts}>
+          Fetch
+        </Button>
+      </Container>
+      <Container>
+        <h4 className="text-xl mb-5">Borrow OSMO</h4>
+        <input
+          className="rounded-lg px-3 py-1 bg-black/40"
+          type="number"
+          onChange={(e) => setBorrowAmount(e.target.valueAsNumber)}
+        />
+        <Button className="bg-[#524bb1] hover:bg-[#6962cc] ml-4" onClick={handleBorrowClick}>
+          Borrow
+        </Button>
+      </Container>
+
+      <div>
+        {allTokens && (
+          <div className="mb-4">
+            <div className="flex items-end">
+              <h5 className="text-xl font-medium">All Tokens</h5>
+              <p className="text-sm ml-2">- {allTokens.length} total</p>
+            </div>
+            {allTokens.map((token) => (
+              <p key={token}>{token}</p>
+            ))}
+          </div>
+        )}
+        {walletTokens && (
+          <>
+            <div className="flex items-end">
+              <h5 className="text-xl font-medium">Your Tokens</h5>
+              <p className="text-sm ml-2">- {walletTokens.length} total</p>
+            </div>
+            {walletTokens.map((token) => (
+              <p key={token}>{token}</p>
+            ))}
+          </>
+        )}
+      </div>
+      {error && <div className="bg-white p-4 text-red-500 mt-8">{error}</div>}
+      {isLoading && (
+        <div>
+          <Spinner />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Home

pages/portfolio.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react'
 
-import Container from "components/Container";
+import Container from 'components/Container'
-import { formatCurrency } from "utils/formatters";
+import { formatCurrency } from 'utils/formatters'
 
 const mockedAccounts = [
   {
     id: 1,
-    label: "Subaccount 1",
+    label: 'Subaccount 1',
     networth: 100000,
     totalPositionValue: 150000,
     debt: 50000,
@@ -16,7 +16,7 @@ const mockedAccounts = [
   },
   {
     id: 2,
-    label: "Subaccount 2",
+    label: 'Subaccount 2',
     networth: 33000,
     totalPositionValue: 11000,
     debt: 20000,
@@ -26,7 +26,7 @@ const mockedAccounts = [
   },
   {
     id: 3,
-    label: "Subaccount 3",
+    label: 'Subaccount 3',
     networth: 0,
     totalPositionValue: 12938129,
     debt: 9999999999,
@@ -36,7 +36,7 @@ const mockedAccounts = [
   },
   {
     id: 4,
-    label: "Subaccount 4",
+    label: 'Subaccount 4',
     networth: 33653.22,
     totalPositionValue: 100000,
     debt: 50001.9,
@@ -44,7 +44,7 @@ const mockedAccounts = [
     leverage: 3,
     maxLeverage: 5,
   },
-];
+]
 
 const Portfolio = () => {
   return (
@@ -68,12 +68,8 @@ const Portfolio = () => {
                 <p className="text-sm text-white/40">Debt</p>
               </div>
               <div>
-                <p
+                <p className={`${account.profit > 0 ? 'text-green-400' : 'text-red-500'}`}>
-                  className={`${
+                  {account.profit > 0 && '+'}
-                    account.profit > 0 ? "text-green-400" : "text-red-500"
-                  }`}
-                >
-                  {account.profit > 0 && "+"}
                   {formatCurrency(account.profit)}
                 </p>
                 <p className="text-sm text-white/40">P&L</p>
@@ -91,7 +87,7 @@ const Portfolio = () => {
         ))}
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default Portfolio;
+export default Portfolio

pages/trade.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react'
-import Container from "components/Container";
+import Container from 'components/Container'
 
 const Trade = () => {
   return (
@@ -14,7 +14,7 @@ const Trade = () => {
       </div>
       <Container>Trader order overview</Container>
     </div>
-  );
+  )
-};
+}
 
-export default Trade;
+export default Trade

pages/yield.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react'
-import Container from "components/Container";
+import Container from 'components/Container'
 
 const Yield = () => {
   return (
@@ -7,7 +7,7 @@ const Yield = () => {
       <Container className="flex-1">Yield Module</Container>
       <Container className="w-[450px]">Placeholder</Container>
     </div>
-  );
+  )
-};
+}
 
-export default Yield;
+export default Yield

public/tokens/osmo.svg

@@ -0,0 +1,220 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 129.7 138.9" style="enable-background:new 0 0 129.7 138.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5E12A0;}
+	.st1{fill:url(#XMLID_35_);}
+	.st2{fill:url(#XMLID_36_);}
+	.st3{opacity:0.6;fill:#A98698;enable-background:new    ;}
+	.st4{opacity:0.6;fill:url(#XMLID_185_);enable-background:new    ;}
+	.st5{opacity:0.6;fill:url(#XMLID_186_);enable-background:new    ;}
+	.st6{fill:url(#XMLID_187_);}
+	.st7{opacity:0.6;}
+	.st8{opacity:0.6;fill:url(#XMLID_188_);enable-background:new    ;}
+	.st9{opacity:0.7;}
+	.st10{fill:url(#XMLID_189_);}
+	.st11{fill:url(#XMLID_190_);}
+	.st12{fill:#FFFFFF;}
+	.st13{fill:url(#XMLID_191_);}
+	.st14{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
+	.st15{opacity:0.4;}
+	.st16{opacity:0.6;fill:url(#XMLID_192_);enable-background:new    ;}
+	.st17{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
+	.st18{opacity:0.6;fill:url(#XMLID_193_);enable-background:new    ;}
+	.st19{opacity:0.6;fill:url(#XMLID_194_);enable-background:new    ;}
+	.st20{display:none;}
+	.st21{display:inline;opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
+	.st22{display:inline;opacity:0.4;}
+	.st23{opacity:0.6;fill:url(#XMLID_195_);enable-background:new    ;}
+	.st24{display:inline;opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
+	.st25{opacity:0.6;fill:url(#XMLID_196_);enable-background:new    ;}
+	.st26{opacity:0.6;fill:url(#XMLID_197_);enable-background:new    ;}
+</style>
+<g id="XMLID_2_">
+	<g id="XMLID_3_">
+		<g id="XMLID_66_">
+			<g id="XMLID_67_">
+				<path id="XMLID_68_" class="st0" d="M127.6,25.6c-1.4-5.3-5.9-10.6-14-16.5c-6.5-4.7-13.4-7.4-18.9-7.4c-1.1,0-2.1,0.1-3.1,0.3
+					c-2.5,0.5-4.7,2.3-6.1,5c-1.7,3.2-2.1,7.5-1,10.1c0.4,0.8,0.9,1.8,1.5,2.7c-5.3,3.2-8.3,4.1-8.7,4.2
+					c13.8,4.6,25.3,14.2,32.5,26.7l0.1-1.2c0.3-3.3,1.3-7.1,2.7-11c1.4,0.4,2.8,0.6,4.2,0.6l0,0c3.7,0,6.9-1.5,8.9-4.2
+					C127.7,32.2,128.5,28.6,127.6,25.6z"/>
+			</g>
+		</g>
+		<g id="XMLID_62_">
+			<g id="XMLID_64_">
+				
+					<radialGradient id="XMLID_35_" cx="122.976" cy="80.6785" r="44.6944" gradientTransform="matrix(1 0 0 -1 0 100.7784)" gradientUnits="userSpaceOnUse">
+					<stop  offset="0" style="stop-color:#FFEAFF;stop-opacity:0.6"/>
+					<stop  offset="0.6807" style="stop-color:#A087C9"/>
+					<stop  offset="1" style="stop-color:#10002F"/>
+				</radialGradient>
+				<path id="XMLID_65_" class="st1" d="M113.2,35.6c9.1,2.5,12.8-4.5,11.6-9.2c-1.3-4.7-5.5-9.5-12.9-14.9S97,3.9,92.2,4.9
+					s-6.2,8.3-5,11.1c0.5,1.1,1.6,2.7,3.1,4.5c-1.9,1.3-3.7,2.3-5.2,3.2c9.2,4.1,17.2,10.5,23.2,18.5c0.7-2.7,1.7-5.1,2.6-7.2
+					C111.6,35.1,112.4,35.3,113.2,35.6z"/>
+			</g>
+			
+				<radialGradient id="XMLID_36_" cx="98.1105" cy="61.6169" r="109.3511" gradientTransform="matrix(1 0 0 -1 0 100.7784)" gradientUnits="userSpaceOnUse">
+				<stop  offset="0" style="stop-color:#FFEAFF;stop-opacity:0.6"/>
+				<stop  offset="0.6807" style="stop-color:#A087C9"/>
+				<stop  offset="1" style="stop-color:#10002F"/>
+			</radialGradient>
+			<circle id="XMLID_63_" class="st2" cx="61.1" cy="77.7" r="55.9"/>
+		</g>
+		<path id="XMLID_61_" class="st3" d="M120.2,21.8c-7.6-8-14-10.1-21.7-11.8c-6-1.4-4.4-4.8,2.9-4.1c-3.5-1.2-6.8-1.5-9.2-1
+			c-4.8,1-6.2,8.3-5,11.1c0.5,1.1,1.6,2.7,3.1,4.5c-2.7,1.8-5,3.1-6.9,4.1c0.9,0.4,2,0.9,3.3,1.6c3.4,1.8,7.1,4.8,7.1,4.8
+			c-5.6-4.8-4.4-7,3.3-12.4c2.4-1.7,6.8-1.5,10.9,0.6c4.1,2.1,8.9,7.4,8.9,7.4l-4.6,8.8c0.3,0.1,0.6,0.2,0.9,0.3
+			c2.9,0.8,5.2,0.6,7-0.1C122.3,34.3,127.8,29.9,120.2,21.8z"/>
+		<g id="XMLID_56_">
+			<path id="XMLID_57_" class="st0" d="M98.4,14.8c2,0.8,4.6,2.2,7.8,4.3c3.8,2.5,7.1,5.3,9.2,7.5c-3.5,4.6-5.8,10.9-7.2,15.3
+				c0.7,1,1.5,2,2.2,3c0.7-2.5,1.9-6.2,3.5-9.9c0.4,0.1,0.9,0.1,1.4,0.1c1.2,0,2.6-0.2,3.7-1.1c0.8-0.6,1.7-1.7,1.6-3.7
+				c0-1.9-1.5-4.3-4.6-7.2c-2.2-2.1-5.2-4.4-8.2-6.5c-8.6-5.7-14.6-7.3-17.3-4.6c-1.8,1.8-1.6,4-1,5.6c-3.2,2.1-5.9,3.6-7.7,4.6
+				c1.2,0.4,2.3,0.9,3.5,1.4C88.5,21.9,93.1,19,98.4,14.8z M117.3,29.1c0.3,0.5,0.4,1,0.4,1.3c0,0.9-0.3,1.2-0.5,1.4
+				c-0.4,0.3-1.2,0.5-1.9,0.5C115.9,31.1,116.6,30.1,117.3,29.1z M92.6,14.2c0.3-0.3,1.1-0.5,2.4-0.3c-1,0.8-2,1.5-3,2.2
+				C91.9,15.4,92,14.7,92.6,14.2z"/>
+		</g>
+		<g id="XMLID_52_">
+			<path id="XMLID_53_" class="st0" d="M61.1,18.5C28.4,18.5,1.9,45,1.9,77.7s26.5,59.2,59.2,59.2s59.2-26.5,59.2-59.2
+				S93.7,18.5,61.1,18.5z M61.1,133.6c-30.9,0-55.9-25-55.9-55.9s25-55.9,55.9-55.9s55.9,25,55.9,55.9S91.9,133.6,61.1,133.6z"/>
+		</g>
+		
+			<linearGradient id="XMLID_185_" gradientUnits="userSpaceOnUse" x1="-1397.5299" y1="-1163.0492" x2="-1285.7112" y2="-1163.0492" gradientTransform="matrix(0.16 -0.9871 -0.9871 -0.16 -872.2866 -1432.7015)">
+			<stop  offset="0" style="stop-color:#81FFFF"/>
+			<stop  offset="0.6202" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</linearGradient>
+		<circle id="XMLID_51_" class="st4" cx="61.1" cy="77.7" r="55.9"/>
+		<g id="XMLID_49_">
+			<path id="XMLID_50_" class="st3" d="M60.7,126.8c-30.5-4.9-51.2-33.6-46.2-64.1c2.2-13.5,9-25,18.6-33.3
+				c-14,8.1-24.4,22.2-27.2,39.4C1,99.3,21.7,128,52.1,132.9c17,2.8,33.4-2.5,45.5-12.9C86.9,126.2,73.9,128.9,60.7,126.8z"/>
+		</g>
+		
+			<linearGradient id="XMLID_186_" gradientUnits="userSpaceOnUse" x1="100.4609" y1="61.0791" x2="54.2367" y2="18.6672" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+			<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+		</linearGradient>
+		<path id="XMLID_48_" class="st5" d="M70,22.6c-14.1-2.3-27.8,0.9-39,8c-0.2,0.2-0.4,0.4-0.4,0.4c4.3-2.6,10.6-4.9,10.6-4.9
+			C25,35.5,20,46.2,20,46.2C26.3,34,44.8,25.4,59.3,24.8c14.5-0.6,24,3.7,35.6,13c11.6,9.4,18.6,28.6,17.9,43.8
+			c-0.6,15.2-8.6,27.5-8.6,27.5c5.5-7.1,8.8-12.3,10.9-17.6c0.4-1.6,0.8-3.2,1-4.9C121.1,56.2,100.5,27.5,70,22.6z"/>
+		<g id="XMLID_41_">
+			
+				<linearGradient id="XMLID_187_" gradientUnits="userSpaceOnUse" x1="7.9" y1="-2.9716" x2="114.2" y2="-2.9716" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+				<stop  offset="0" style="stop-color:#0002E9"/>
+				<stop  offset="0.9952" style="stop-color:#FF00C7"/>
+			</linearGradient>
+			<path id="XMLID_47_" class="st6" d="M114.2,77.2c0,29.3-23.8,53.1-53.1,53.1S7.9,106.5,7.9,77.2H114.2z"/>
+			<g id="XMLID_45_" class="st7">
+				
+					<linearGradient id="XMLID_188_" gradientUnits="userSpaceOnUse" x1="119.2316" y1="18.8884" x2="61.4115" y2="-35.7548" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_46_" class="st8" d="M110,77.2c0,28.6-22.6,52-51,53.1c0.7,0,1.4,0,2.1,0c29.3,0,53.1-23.8,53.1-53.1H110z"/>
+			</g>
+			<g id="XMLID_43_" class="st9">
+				
+					<linearGradient id="XMLID_189_" gradientUnits="userSpaceOnUse" x1="7.9" y1="-2.9716" x2="64.7" y2="-2.9716" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0" style="stop-color:#000292"/>
+					<stop  offset="0.9952" style="stop-color:#7D00C7"/>
+				</linearGradient>
+				<path id="XMLID_44_" class="st10" d="M15.4,77.2H7.9c0,29.3,23.8,53.1,53.1,53.1c1.3,0,2.5,0,3.7-0.1
+					C37.2,128.2,15.4,105.2,15.4,77.2z"/>
+			</g>
+			
+				<linearGradient id="XMLID_190_" gradientUnits="userSpaceOnUse" x1="8.0163" y1="18.6995" x2="114.1029" y2="18.6995" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+				<stop  offset="0" style="stop-color:#000292"/>
+				<stop  offset="0.9952" style="stop-color:#BE00C7"/>
+			</linearGradient>
+			<path id="XMLID_42_" class="st11" d="M114.1,77.7c0-6.1-10.6-9.6-24.7-10.8c-10.2-0.8-20.5,0.2-32.3,3.8
+				c-10.2,3-19.4,2.5-26.1,1.7c-14.9-1.7-23.1-1.9-23.1,5.3c0,10.4,21.2,23.4,53,18.9c16.1-2.3,24.4-7,33.9-10.2
+				C105.1,83,114.1,83.1,114.1,77.7z"/>
+		</g>
+		<circle id="XMLID_40_" class="st12" cx="78.5" cy="43.5" r="9"/>
+		<circle id="XMLID_39_" class="st12" cx="93.2" cy="55.4" r="3.8"/>
+		<g id="XMLID_37_" class="st7">
+			
+				<linearGradient id="XMLID_191_" gradientUnits="userSpaceOnUse" x1="112.3861" y1="75.5507" x2="104.7615" y2="63.1607" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+				<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+				<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+			</linearGradient>
+			<path id="XMLID_38_" class="st13" d="M106.8,36.3c-0.1,0-0.2,0-0.2,0c-0.6-0.1-1-0.7-0.9-1.4c0.9-4.6,4.7-9,4.9-9.2
+				c0.4-0.5,1.2-0.5,1.6-0.1c0.5,0.4,0.5,1.2,0.1,1.6c-0.1,0.1-3.6,4.2-4.4,8.2C107.8,36,107.3,36.3,106.8,36.3z"/>
+		</g>
+		<g id="XMLID_29_">
+			<circle id="XMLID_33_" class="st14" cx="57.4" cy="116.6" r="2.8"/>
+			<g id="XMLID_31_" class="st15">
+				
+					<linearGradient id="XMLID_192_" gradientUnits="userSpaceOnUse" x1="54.575" y1="-15.8431" x2="58.8059" y2="-15.8431" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_32_" class="st16" d="M55.8,118.4c-1.1-1.1-1.1-2.9,0-4c0.2-0.2,0.4-0.3,0.6-0.5c-0.4,0.1-0.7,0.3-1,0.6
+					c-1.1,1.1-1.1,2.9,0,4c0.9,0.9,2.3,1.1,3.4,0.5C57.8,119.4,56.6,119.2,55.8,118.4z"/>
+			</g>
+			<circle id="XMLID_30_" class="st17" cx="58.4" cy="115.2" r="0.6"/>
+		</g>
+		<g id="XMLID_24_">
+			<circle id="XMLID_28_" class="st14" cx="72" cy="115.2" r="2.8"/>
+			<g id="XMLID_26_" class="st15">
+				
+					<linearGradient id="XMLID_193_" gradientUnits="userSpaceOnUse" x1="69.162" y1="-14.4431" x2="73.3929" y2="-14.4431" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_27_" class="st18" d="M70.4,117c-1.1-1.1-1.1-2.9,0-4c0.2-0.2,0.4-0.3,0.6-0.5c-0.4,0.1-0.7,0.3-1,0.6
+					c-1.1,1.1-1.1,2.9,0,4c0.9,0.9,2.3,1.1,3.4,0.5C72.4,118,71.2,117.8,70.4,117z"/>
+			</g>
+			<circle id="XMLID_25_" class="st17" cx="73" cy="113.8" r="0.6"/>
+		</g>
+		<g id="XMLID_19_">
+			<circle id="XMLID_23_" class="st14" cx="64.8" cy="122.4" r="2.1"/>
+			<g id="XMLID_21_" class="st15">
+				
+					<linearGradient id="XMLID_194_" gradientUnits="userSpaceOnUse" x1="62.6869" y1="-21.6779" x2="65.8632" y2="-21.6779" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_22_" class="st19" d="M63.6,123.7c-0.8-0.8-0.8-2.2,0-3c0.1-0.1,0.3-0.2,0.4-0.3c-0.3,0.1-0.5,0.3-0.7,0.5
+					c-0.8,0.8-0.8,2.2,0,3c0.7,0.7,1.7,0.8,2.6,0.3C65.1,124.5,64.2,124.3,63.6,123.7z"/>
+			</g>
+			<circle id="XMLID_20_" class="st17" cx="65.5" cy="121.3" r="0.4"/>
+		</g>
+		<g id="XMLID_14_" class="st20">
+			<circle id="XMLID_18_" class="st21" cx="77.7" cy="120.9" r="2.1"/>
+			<g id="XMLID_16_" class="st22">
+				
+					<linearGradient id="XMLID_195_" gradientUnits="userSpaceOnUse" x1="75.5437" y1="-20.1779" x2="78.72" y2="-20.1779" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_17_" class="st23" d="M76.5,122.2c-0.8-0.8-0.8-2.2,0-3c0.1-0.1,0.3-0.2,0.4-0.3c-0.3,0.1-0.5,0.3-0.7,0.5
+					c-0.8,0.8-0.8,2.2,0,3c0.7,0.7,1.7,0.8,2.6,0.3C78,123,77.1,122.8,76.5,122.2z"/>
+			</g>
+			<circle id="XMLID_15_" class="st24" cx="78.4" cy="119.8" r="0.4"/>
+		</g>
+		<g id="XMLID_9_">
+			<circle id="XMLID_13_" class="st14" cx="45.5" cy="113.8" r="4.6"/>
+			<g id="XMLID_11_" class="st15">
+				
+					<linearGradient id="XMLID_196_" gradientUnits="userSpaceOnUse" x1="40.9041" y1="-13.1521" x2="47.8135" y2="-13.1521" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_12_" class="st25" d="M42.9,116.7c-1.8-1.8-1.8-4.7,0-6.5c0.3-0.3,0.6-0.5,1-0.7c-0.6,0.2-1.1,0.6-1.6,1
+					c-1.8,1.8-1.8,4.7,0,6.5c1.5,1.5,3.8,1.8,5.6,0.7C46.2,118.4,44.2,118.1,42.9,116.7z"/>
+			</g>
+			<circle id="XMLID_10_" class="st17" cx="47.1" cy="111.4" r="1"/>
+		</g>
+		<g id="XMLID_4_">
+			<circle id="XMLID_8_" class="st14" cx="86.6" cy="102.5" r="4.6"/>
+			<g id="XMLID_6_" class="st15">
+				
+					<linearGradient id="XMLID_197_" gradientUnits="userSpaceOnUse" x1="81.9424" y1="-1.8521" x2="88.8518" y2="-1.8521" gradientTransform="matrix(1 0 0 -1 0 100.7784)">
+					<stop  offset="0.2888" style="stop-color:#FFFFFF"/>
+					<stop  offset="0.7796" style="stop-color:#FFFFFF;stop-opacity:0"/>
+				</linearGradient>
+				<path id="XMLID_7_" class="st26" d="M83.9,105.4c-1.8-1.8-1.8-4.7,0-6.5c0.3-0.3,0.6-0.5,1-0.7c-0.6,0.2-1.1,0.6-1.6,1
+					c-1.8,1.8-1.8,4.7,0,6.5c1.5,1.5,3.8,1.8,5.6,0.7C87.2,107.1,85.3,106.8,83.9,105.4z"/>
+			</g>
+			<circle id="XMLID_5_" class="st17" cx="88.2" cy="100.1" r="1"/>
+		</g>
+	</g>
+</g>
+</svg>

sentry.client.config.js

@@ -2,18 +2,18 @@
 // The config you add here will be used whenever a page is visited.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs'
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
 
 Sentry.init({
   dsn: SENTRY_DSN,
   environment: process.env.NEXT_PUBLIC_SENTRY_ENV,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 0.5,
-  enabled: process.env.NODE_ENV !== "development",
+  enabled: process.env.NODE_ENV !== 'development',
   // ...
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps
-});
+})

sentry.server.config.js

@@ -2,18 +2,18 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs'
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
 
 Sentry.init({
   dsn: SENTRY_DSN,
   environment: process.env.NEXT_PUBLIC_SENTRY_ENV,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 0.5,
-  enabled: process.env.NODE_ENV !== "development",
+  enabled: process.env.NODE_ENV !== 'development',
   // ...
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps
-});
+})

stores/useCreditManagerStore.tsx

@@ -0,0 +1,37 @@
+import create from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface CreditManagerStore {
+  isOpen: boolean
+  selectedAccount: string | null
+  actions: {
+    toggleCreditManager: () => void
+    setSelectedAccount: (id: string) => void
+  }
+}
+
+const useCreditManagerStore = create<CreditManagerStore>()(
+  persist(
+    (set, get) => ({
+      isOpen: false,
+      selectedAccount: null,
+      actions: {
+        toggleCreditManager: () => set(() => ({ isOpen: !get().isOpen })),
+        setSelectedAccount: (accountId: string) => {
+          set(() => ({
+            selectedAccount: accountId,
+          }))
+        },
+      },
+    }),
+    {
+      name: 'creditManager',
+      partialize: (state) =>
+        Object.fromEntries(
+          Object.entries(state).filter(([key]) => ['selectedAccount'].includes(key))
+        ),
+    }
+  )
+)
+
+export default useCreditManagerStore

stores/useWalletStore.tsx

@@ -1,52 +1,41 @@
-import create from "zustand";
+import create from 'zustand'
-import { persist } from "zustand/middleware";
+import { persist } from 'zustand/middleware'
 
-import { Wallet } from "types";
+import { Wallet } from 'types'
-
-const dummyStorageApi = {
-  getItem: () => null,
-  removeItem: () => undefined,
-  setItem: () => undefined,
-};
 
 interface WalletStore {
-  address: string;
+  address: string
-  injectiveAddress: string;
+  injectiveAddress: string
-  addresses: string[];
+  addresses: string[]
-  metamaskInstalled: boolean;
+  metamaskInstalled: boolean
-  wallet: Wallet;
+  wallet: Wallet
   actions: {
-    setAddress: (address: string) => void;
+    setAddress: (address: string) => void
-    setMetamaskInstalledStatus: (value: boolean) => void;
+    setMetamaskInstalledStatus: (value: boolean) => void
-  };
+  }
 }
 
 const useWalletStore = create<WalletStore>()(
   persist(
     (set, get) => ({
-      address: "",
+      address: '',
-      injectiveAddress: "",
+      injectiveAddress: '',
       addresses: [],
       metamaskInstalled: false,
       wallet: Wallet.Metamask,
       actions: {
         setAddress: (address: string) => set(() => ({ address })),
-        setMetamaskInstalledStatus: (value: boolean) =>
+        setMetamaskInstalledStatus: (value: boolean) => set(() => ({ metamaskInstalled: value })),
-          set(() => ({ metamaskInstalled: value })),
       },
     }),
     {
-      name: "wallet",
+      name: 'wallet',
       partialize: (state) =>
         Object.fromEntries(
-          Object.entries(state).filter(
+          Object.entries(state).filter(([key]) => !['metamaskInstalled', 'actions'].includes(key))
-            ([key]) => !["metamaskInstalled", "actions"].includes(key)
-          )
         ),
-      // getStorage: () =>
-      //   typeof window !== "undefined" ? localStorage : dummyStorageApi,
     }
   )
-);
+)
 
-export default useWalletStore;
+export default useWalletStore

tailwind.config.js

@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
+  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'background-2': '#585A74',
+      },
+    },
   },
   plugins: [],
-};
+}

types/generated/account-nft/AccountNft.client.ts

@@ -0,0 +1,635 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { Coin, StdFee } from '@cosmjs/amino'
+import {
+  InstantiateMsg,
+  ExecuteMsg,
+  Binary,
+  Expiration,
+  Timestamp,
+  Uint64,
+  QueryMsg,
+  AllNftInfoResponseForEmpty,
+  OwnerOfResponse,
+  Approval,
+  NftInfoResponseForEmpty,
+  Empty,
+  OperatorsResponse,
+  TokensResponse,
+  ApprovalResponse,
+  ApprovalsResponse,
+  ContractInfoResponse,
+  MinterResponse,
+  NumTokensResponse,
+  String,
+} from './AccountNft.types'
+export interface AccountNftReadOnlyInterface {
+  contractAddress: string
+  proposedNewOwner: () => Promise<String>
+  ownerOf: ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }) => Promise<OwnerOfResponse>
+  approval: ({
+    includeExpired,
+    spender,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    spender: string
+    tokenId: string
+  }) => Promise<ApprovalResponse>
+  approvals: ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }) => Promise<ApprovalsResponse>
+  allOperators: ({
+    includeExpired,
+    limit,
+    owner,
+    startAfter,
+  }: {
+    includeExpired?: boolean
+    limit?: number
+    owner: string
+    startAfter?: string
+  }) => Promise<OperatorsResponse>
+  numTokens: () => Promise<NumTokensResponse>
+  contractInfo: () => Promise<ContractInfoResponse>
+  nftInfo: ({ tokenId }: { tokenId: string }) => Promise<NftInfoResponseForEmpty>
+  allNftInfo: ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }) => Promise<AllNftInfoResponseForEmpty>
+  tokens: ({
+    limit,
+    owner,
+    startAfter,
+  }: {
+    limit?: number
+    owner: string
+    startAfter?: string
+  }) => Promise<TokensResponse>
+  allTokens: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }) => Promise<TokensResponse>
+  minter: () => Promise<MinterResponse>
+}
+export class AccountNftQueryClient implements AccountNftReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.proposedNewOwner = this.proposedNewOwner.bind(this)
+    this.ownerOf = this.ownerOf.bind(this)
+    this.approval = this.approval.bind(this)
+    this.approvals = this.approvals.bind(this)
+    this.allOperators = this.allOperators.bind(this)
+    this.numTokens = this.numTokens.bind(this)
+    this.contractInfo = this.contractInfo.bind(this)
+    this.nftInfo = this.nftInfo.bind(this)
+    this.allNftInfo = this.allNftInfo.bind(this)
+    this.tokens = this.tokens.bind(this)
+    this.allTokens = this.allTokens.bind(this)
+    this.minter = this.minter.bind(this)
+  }
+
+  proposedNewOwner = async (): Promise<String> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      proposed_new_owner: {},
+    })
+  }
+  ownerOf = async ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }): Promise<OwnerOfResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      owner_of: {
+        include_expired: includeExpired,
+        token_id: tokenId,
+      },
+    })
+  }
+  approval = async ({
+    includeExpired,
+    spender,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    spender: string
+    tokenId: string
+  }): Promise<ApprovalResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      approval: {
+        include_expired: includeExpired,
+        spender,
+        token_id: tokenId,
+      },
+    })
+  }
+  approvals = async ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }): Promise<ApprovalsResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      approvals: {
+        include_expired: includeExpired,
+        token_id: tokenId,
+      },
+    })
+  }
+  allOperators = async ({
+    includeExpired,
+    limit,
+    owner,
+    startAfter,
+  }: {
+    includeExpired?: boolean
+    limit?: number
+    owner: string
+    startAfter?: string
+  }): Promise<OperatorsResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_operators: {
+        include_expired: includeExpired,
+        limit,
+        owner,
+        start_after: startAfter,
+      },
+    })
+  }
+  numTokens = async (): Promise<NumTokensResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      num_tokens: {},
+    })
+  }
+  contractInfo = async (): Promise<ContractInfoResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      contract_info: {},
+    })
+  }
+  nftInfo = async ({ tokenId }: { tokenId: string }): Promise<NftInfoResponseForEmpty> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      nft_info: {
+        token_id: tokenId,
+      },
+    })
+  }
+  allNftInfo = async ({
+    includeExpired,
+    tokenId,
+  }: {
+    includeExpired?: boolean
+    tokenId: string
+  }): Promise<AllNftInfoResponseForEmpty> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_nft_info: {
+        include_expired: includeExpired,
+        token_id: tokenId,
+      },
+    })
+  }
+  tokens = async ({
+    limit,
+    owner,
+    startAfter,
+  }: {
+    limit?: number
+    owner: string
+    startAfter?: string
+  }): Promise<TokensResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      tokens: {
+        limit,
+        owner,
+        start_after: startAfter,
+      },
+    })
+  }
+  allTokens = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }): Promise<TokensResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_tokens: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  minter = async (): Promise<MinterResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      minter: {},
+    })
+  }
+}
+export interface AccountNftInterface extends AccountNftReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  proposeNewOwner: (
+    {
+      newOwner,
+    }: {
+      newOwner: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  acceptOwnership: (
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  mint: (
+    {
+      user,
+    }: {
+      user: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  transferNft: (
+    {
+      recipient,
+      tokenId,
+    }: {
+      recipient: string
+      tokenId: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  sendNft: (
+    {
+      contract,
+      msg,
+      tokenId,
+    }: {
+      contract: string
+      msg: Binary
+      tokenId: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  approve: (
+    {
+      expires,
+      spender,
+      tokenId,
+    }: {
+      expires?: Expiration
+      spender: string
+      tokenId: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  revoke: (
+    {
+      spender,
+      tokenId,
+    }: {
+      spender: string
+      tokenId: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  approveAll: (
+    {
+      expires,
+      operator,
+    }: {
+      expires?: Expiration
+      operator: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  revokeAll: (
+    {
+      operator,
+    }: {
+      operator: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  burn: (
+    {
+      tokenId,
+    }: {
+      tokenId: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class AccountNftClient extends AccountNftQueryClient implements AccountNftInterface {
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.proposeNewOwner = this.proposeNewOwner.bind(this)
+    this.acceptOwnership = this.acceptOwnership.bind(this)
+    this.mint = this.mint.bind(this)
+    this.transferNft = this.transferNft.bind(this)
+    this.sendNft = this.sendNft.bind(this)
+    this.approve = this.approve.bind(this)
+    this.revoke = this.revoke.bind(this)
+    this.approveAll = this.approveAll.bind(this)
+    this.revokeAll = this.revokeAll.bind(this)
+    this.burn = this.burn.bind(this)
+  }
+
+  proposeNewOwner = async (
+    {
+      newOwner,
+    }: {
+      newOwner: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        propose_new_owner: {
+          new_owner: newOwner,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  acceptOwnership = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        accept_ownership: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  mint = async (
+    {
+      user,
+    }: {
+      user: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        mint: {
+          user,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  transferNft = async (
+    {
+      recipient,
+      tokenId,
+    }: {
+      recipient: string
+      tokenId: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        transfer_nft: {
+          recipient,
+          token_id: tokenId,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  sendNft = async (
+    {
+      contract,
+      msg,
+      tokenId,
+    }: {
+      contract: string
+      msg: Binary
+      tokenId: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        send_nft: {
+          contract,
+          msg,
+          token_id: tokenId,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  approve = async (
+    {
+      expires,
+      spender,
+      tokenId,
+    }: {
+      expires?: Expiration
+      spender: string
+      tokenId: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        approve: {
+          expires,
+          spender,
+          token_id: tokenId,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  revoke = async (
+    {
+      spender,
+      tokenId,
+    }: {
+      spender: string
+      tokenId: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        revoke: {
+          spender,
+          token_id: tokenId,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  approveAll = async (
+    {
+      expires,
+      operator,
+    }: {
+      expires?: Expiration
+      operator: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        approve_all: {
+          expires,
+          operator,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  revokeAll = async (
+    {
+      operator,
+    }: {
+      operator: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        revoke_all: {
+          operator,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  burn = async (
+    {
+      tokenId,
+    }: {
+      tokenId: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        burn: {
+          token_id: tokenId,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/account-nft/AccountNft.react-query.ts

@@ -0,0 +1,535 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee, Coin } from '@cosmjs/amino'
+import {
+  InstantiateMsg,
+  ExecuteMsg,
+  Binary,
+  Expiration,
+  Timestamp,
+  Uint64,
+  QueryMsg,
+  AllNftInfoResponseForEmpty,
+  OwnerOfResponse,
+  Approval,
+  NftInfoResponseForEmpty,
+  Empty,
+  OperatorsResponse,
+  TokensResponse,
+  ApprovalResponse,
+  ApprovalsResponse,
+  ContractInfoResponse,
+  MinterResponse,
+  NumTokensResponse,
+  String,
+} from './AccountNft.types'
+import { AccountNftQueryClient, AccountNftClient } from './AccountNft.client'
+export const accountNftQueryKeys = {
+  contract: [
+    {
+      contract: 'accountNft',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...accountNftQueryKeys.contract[0], address: contractAddress }] as const,
+  proposedNewOwner: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...accountNftQueryKeys.address(contractAddress)[0], method: 'proposed_new_owner', args },
+    ] as const,
+  ownerOf: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'owner_of', args }] as const,
+  approval: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'approval', args }] as const,
+  approvals: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'approvals', args }] as const,
+  allOperators: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...accountNftQueryKeys.address(contractAddress)[0], method: 'all_operators', args },
+    ] as const,
+  numTokens: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'num_tokens', args }] as const,
+  contractInfo: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...accountNftQueryKeys.address(contractAddress)[0], method: 'contract_info', args },
+    ] as const,
+  nftInfo: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'nft_info', args }] as const,
+  allNftInfo: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'all_nft_info', args }] as const,
+  tokens: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'tokens', args }] as const,
+  allTokens: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'all_tokens', args }] as const,
+  minter: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...accountNftQueryKeys.address(contractAddress)[0], method: 'minter', args }] as const,
+}
+export interface AccountNftReactQuery<TResponse, TData = TResponse> {
+  client: AccountNftQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface AccountNftMinterQuery<TData> extends AccountNftReactQuery<MinterResponse, TData> {}
+export function useAccountNftMinterQuery<TData = MinterResponse>({
+  client,
+  options,
+}: AccountNftMinterQuery<TData>) {
+  return useQuery<MinterResponse, Error, TData>(
+    accountNftQueryKeys.minter(client?.contractAddress),
+    () => (client ? client.minter() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftAllTokensQuery<TData>
+  extends AccountNftReactQuery<TokensResponse, TData> {
+  args: {
+    limit?: number
+    startAfter?: string
+  }
+}
+export function useAccountNftAllTokensQuery<TData = TokensResponse>({
+  client,
+  args,
+  options,
+}: AccountNftAllTokensQuery<TData>) {
+  return useQuery<TokensResponse, Error, TData>(
+    accountNftQueryKeys.allTokens(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allTokens({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftTokensQuery<TData> extends AccountNftReactQuery<TokensResponse, TData> {
+  args: {
+    limit?: number
+    owner: string
+    startAfter?: string
+  }
+}
+export function useAccountNftTokensQuery<TData = TokensResponse>({
+  client,
+  args,
+  options,
+}: AccountNftTokensQuery<TData>) {
+  return useQuery<TokensResponse, Error, TData>(
+    accountNftQueryKeys.tokens(client?.contractAddress, args),
+    () =>
+      client
+        ? client.tokens({
+            limit: args.limit,
+            owner: args.owner,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftAllNftInfoQuery<TData>
+  extends AccountNftReactQuery<AllNftInfoResponseForEmpty, TData> {
+  args: {
+    includeExpired?: boolean
+    tokenId: string
+  }
+}
+export function useAccountNftAllNftInfoQuery<TData = AllNftInfoResponseForEmpty>({
+  client,
+  args,
+  options,
+}: AccountNftAllNftInfoQuery<TData>) {
+  return useQuery<AllNftInfoResponseForEmpty, Error, TData>(
+    accountNftQueryKeys.allNftInfo(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allNftInfo({
+            includeExpired: args.includeExpired,
+            tokenId: args.tokenId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftNftInfoQuery<TData>
+  extends AccountNftReactQuery<NftInfoResponseForEmpty, TData> {
+  args: {
+    tokenId: string
+  }
+}
+export function useAccountNftNftInfoQuery<TData = NftInfoResponseForEmpty>({
+  client,
+  args,
+  options,
+}: AccountNftNftInfoQuery<TData>) {
+  return useQuery<NftInfoResponseForEmpty, Error, TData>(
+    accountNftQueryKeys.nftInfo(client?.contractAddress, args),
+    () =>
+      client
+        ? client.nftInfo({
+            tokenId: args.tokenId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftContractInfoQuery<TData>
+  extends AccountNftReactQuery<ContractInfoResponse, TData> {}
+export function useAccountNftContractInfoQuery<TData = ContractInfoResponse>({
+  client,
+  options,
+}: AccountNftContractInfoQuery<TData>) {
+  return useQuery<ContractInfoResponse, Error, TData>(
+    accountNftQueryKeys.contractInfo(client?.contractAddress),
+    () => (client ? client.contractInfo() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftNumTokensQuery<TData>
+  extends AccountNftReactQuery<NumTokensResponse, TData> {}
+export function useAccountNftNumTokensQuery<TData = NumTokensResponse>({
+  client,
+  options,
+}: AccountNftNumTokensQuery<TData>) {
+  return useQuery<NumTokensResponse, Error, TData>(
+    accountNftQueryKeys.numTokens(client?.contractAddress),
+    () => (client ? client.numTokens() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftAllOperatorsQuery<TData>
+  extends AccountNftReactQuery<OperatorsResponse, TData> {
+  args: {
+    includeExpired?: boolean
+    limit?: number
+    owner: string
+    startAfter?: string
+  }
+}
+export function useAccountNftAllOperatorsQuery<TData = OperatorsResponse>({
+  client,
+  args,
+  options,
+}: AccountNftAllOperatorsQuery<TData>) {
+  return useQuery<OperatorsResponse, Error, TData>(
+    accountNftQueryKeys.allOperators(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allOperators({
+            includeExpired: args.includeExpired,
+            limit: args.limit,
+            owner: args.owner,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftApprovalsQuery<TData>
+  extends AccountNftReactQuery<ApprovalsResponse, TData> {
+  args: {
+    includeExpired?: boolean
+    tokenId: string
+  }
+}
+export function useAccountNftApprovalsQuery<TData = ApprovalsResponse>({
+  client,
+  args,
+  options,
+}: AccountNftApprovalsQuery<TData>) {
+  return useQuery<ApprovalsResponse, Error, TData>(
+    accountNftQueryKeys.approvals(client?.contractAddress, args),
+    () =>
+      client
+        ? client.approvals({
+            includeExpired: args.includeExpired,
+            tokenId: args.tokenId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftApprovalQuery<TData>
+  extends AccountNftReactQuery<ApprovalResponse, TData> {
+  args: {
+    includeExpired?: boolean
+    spender: string
+    tokenId: string
+  }
+}
+export function useAccountNftApprovalQuery<TData = ApprovalResponse>({
+  client,
+  args,
+  options,
+}: AccountNftApprovalQuery<TData>) {
+  return useQuery<ApprovalResponse, Error, TData>(
+    accountNftQueryKeys.approval(client?.contractAddress, args),
+    () =>
+      client
+        ? client.approval({
+            includeExpired: args.includeExpired,
+            spender: args.spender,
+            tokenId: args.tokenId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftOwnerOfQuery<TData>
+  extends AccountNftReactQuery<OwnerOfResponse, TData> {
+  args: {
+    includeExpired?: boolean
+    tokenId: string
+  }
+}
+export function useAccountNftOwnerOfQuery<TData = OwnerOfResponse>({
+  client,
+  args,
+  options,
+}: AccountNftOwnerOfQuery<TData>) {
+  return useQuery<OwnerOfResponse, Error, TData>(
+    accountNftQueryKeys.ownerOf(client?.contractAddress, args),
+    () =>
+      client
+        ? client.ownerOf({
+            includeExpired: args.includeExpired,
+            tokenId: args.tokenId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftProposedNewOwnerQuery<TData>
+  extends AccountNftReactQuery<String, TData> {}
+export function useAccountNftProposedNewOwnerQuery<TData = String>({
+  client,
+  options,
+}: AccountNftProposedNewOwnerQuery<TData>) {
+  return useQuery<String, Error, TData>(
+    accountNftQueryKeys.proposedNewOwner(client?.contractAddress),
+    () => (client ? client.proposedNewOwner() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface AccountNftBurnMutation {
+  client: AccountNftClient
+  msg: {
+    tokenId: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftBurnMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, AccountNftBurnMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftBurnMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.burn(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftRevokeAllMutation {
+  client: AccountNftClient
+  msg: {
+    operator: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftRevokeAllMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, AccountNftRevokeAllMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftRevokeAllMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.revokeAll(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftApproveAllMutation {
+  client: AccountNftClient
+  msg: {
+    expires?: Expiration
+    operator: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftApproveAllMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, AccountNftApproveAllMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftApproveAllMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.approveAll(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftRevokeMutation {
+  client: AccountNftClient
+  msg: {
+    spender: string
+    tokenId: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftRevokeMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, AccountNftRevokeMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftRevokeMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.revoke(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftApproveMutation {
+  client: AccountNftClient
+  msg: {
+    expires?: Expiration
+    spender: string
+    tokenId: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftApproveMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, AccountNftApproveMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftApproveMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.approve(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftSendNftMutation {
+  client: AccountNftClient
+  msg: {
+    contract: string
+    msg: Binary
+    tokenId: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftSendNftMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, AccountNftSendNftMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftSendNftMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.sendNft(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftTransferNftMutation {
+  client: AccountNftClient
+  msg: {
+    recipient: string
+    tokenId: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftTransferNftMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, AccountNftTransferNftMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftTransferNftMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.transferNft(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftMintMutation {
+  client: AccountNftClient
+  msg: {
+    user: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftMintMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, AccountNftMintMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftMintMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.mint(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftAcceptOwnershipMutation {
+  client: AccountNftClient
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftAcceptOwnershipMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, AccountNftAcceptOwnershipMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftAcceptOwnershipMutation>(
+    ({ client, args: { fee, memo, funds } = {} }) => client.acceptOwnership(fee, memo, funds),
+    options,
+  )
+}
+export interface AccountNftProposeNewOwnerMutation {
+  client: AccountNftClient
+  msg: {
+    newOwner: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useAccountNftProposeNewOwnerMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, AccountNftProposeNewOwnerMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, AccountNftProposeNewOwnerMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.proposeNewOwner(msg, fee, memo, funds),
+    options,
+  )
+}

types/generated/account-nft/AccountNft.types.ts

@@ -0,0 +1,187 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export interface InstantiateMsg {
+  minter: string
+  name: string
+  symbol: string
+}
+export type ExecuteMsg =
+  | {
+      propose_new_owner: {
+        new_owner: string
+      }
+    }
+  | {
+      accept_ownership: {}
+    }
+  | {
+      mint: {
+        user: string
+      }
+    }
+  | {
+      transfer_nft: {
+        recipient: string
+        token_id: string
+      }
+    }
+  | {
+      send_nft: {
+        contract: string
+        msg: Binary
+        token_id: string
+      }
+    }
+  | {
+      approve: {
+        expires?: Expiration | null
+        spender: string
+        token_id: string
+      }
+    }
+  | {
+      revoke: {
+        spender: string
+        token_id: string
+      }
+    }
+  | {
+      approve_all: {
+        expires?: Expiration | null
+        operator: string
+      }
+    }
+  | {
+      revoke_all: {
+        operator: string
+      }
+    }
+  | {
+      burn: {
+        token_id: string
+      }
+    }
+export type Binary = string
+export type Expiration =
+  | {
+      at_height: number
+    }
+  | {
+      at_time: Timestamp
+    }
+  | {
+      never: {}
+    }
+export type Timestamp = Uint64
+export type Uint64 = string
+export type QueryMsg =
+  | {
+      proposed_new_owner: {}
+    }
+  | {
+      owner_of: {
+        include_expired?: boolean | null
+        token_id: string
+      }
+    }
+  | {
+      approval: {
+        include_expired?: boolean | null
+        spender: string
+        token_id: string
+      }
+    }
+  | {
+      approvals: {
+        include_expired?: boolean | null
+        token_id: string
+      }
+    }
+  | {
+      all_operators: {
+        include_expired?: boolean | null
+        limit?: number | null
+        owner: string
+        start_after?: string | null
+      }
+    }
+  | {
+      num_tokens: {}
+    }
+  | {
+      contract_info: {}
+    }
+  | {
+      nft_info: {
+        token_id: string
+      }
+    }
+  | {
+      all_nft_info: {
+        include_expired?: boolean | null
+        token_id: string
+      }
+    }
+  | {
+      tokens: {
+        limit?: number | null
+        owner: string
+        start_after?: string | null
+      }
+    }
+  | {
+      all_tokens: {
+        limit?: number | null
+        start_after?: string | null
+      }
+    }
+  | {
+      minter: {}
+    }
+export interface AllNftInfoResponseForEmpty {
+  access: OwnerOfResponse
+  info: NftInfoResponseForEmpty
+}
+export interface OwnerOfResponse {
+  approvals: Approval[]
+  owner: string
+}
+export interface Approval {
+  expires: Expiration
+  spender: string
+}
+export interface NftInfoResponseForEmpty {
+  extension: Empty
+  token_uri?: string | null
+}
+export interface Empty {
+  [k: string]: unknown
+}
+export interface OperatorsResponse {
+  operators: Approval[]
+}
+export interface TokensResponse {
+  tokens: string[]
+}
+export interface ApprovalResponse {
+  approval: Approval
+}
+export interface ApprovalsResponse {
+  approvals: Approval[]
+}
+export interface ContractInfoResponse {
+  name: string
+  symbol: string
+}
+export interface MinterResponse {
+  minter: string
+}
+export interface NumTokensResponse {
+  count: number
+}
+export type String = string

types/generated/account-nft/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _0 from './AccountNft.types'
+import * as _1 from './AccountNft.client'
+import * as _2 from './AccountNft.react-query'
+export namespace contracts {
+  export const AccountNft = { ..._0, ..._1, ..._2 }
+}

types/generated/credit-manager/CreditManager.client.ts

@@ -0,0 +1,389 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  Decimal,
+  OracleBaseForString,
+  RedBankBaseForString,
+  SwapperBaseForString,
+  InstantiateMsg,
+  VaultBaseForString,
+  ExecuteMsg,
+  Action,
+  Uint128,
+  CallbackMsg,
+  Addr,
+  Coin,
+  ConfigUpdates,
+  VaultBaseForAddr,
+  QueryMsg,
+  ArrayOfCoinBalanceResponseItem,
+  CoinBalanceResponseItem,
+  ArrayOfSharesResponseItem,
+  SharesResponseItem,
+  ArrayOfDebtShares,
+  DebtShares,
+  ArrayOfVaultWithBalance,
+  VaultWithBalance,
+  ArrayOfVaultPositionResponseItem,
+  VaultPositionResponseItem,
+  VaultPosition,
+  VaultPositionState,
+  ArrayOfString,
+  ArrayOfVaultBaseForString,
+  ConfigResponse,
+  HealthResponse,
+  Positions,
+  DebtAmount,
+} from './CreditManager.types'
+export interface CreditManagerReadOnlyInterface {
+  contractAddress: string
+  config: () => Promise<ConfigResponse>
+  allowedVaults: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }) => Promise<ArrayOfVaultBaseForString>
+  allowedCoins: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }) => Promise<ArrayOfString>
+  positions: ({ accountId }: { accountId: string }) => Promise<Positions>
+  health: ({ accountId }: { accountId: string }) => Promise<HealthResponse>
+  allCoinBalances: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }) => Promise<ArrayOfCoinBalanceResponseItem>
+  allDebtShares: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }) => Promise<ArrayOfSharesResponseItem>
+  totalDebtShares: () => Promise<DebtShares>
+  allTotalDebtShares: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }) => Promise<ArrayOfDebtShares>
+  allVaultPositions: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }) => Promise<ArrayOfVaultPositionResponseItem>
+  totalVaultCoinBalance: ({ vault }: { vault: VaultBaseForString }) => Promise<Uint128>
+  allTotalVaultCoinBalances: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }) => Promise<ArrayOfVaultWithBalance>
+}
+export class CreditManagerQueryClient implements CreditManagerReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.config = this.config.bind(this)
+    this.allowedVaults = this.allowedVaults.bind(this)
+    this.allowedCoins = this.allowedCoins.bind(this)
+    this.positions = this.positions.bind(this)
+    this.health = this.health.bind(this)
+    this.allCoinBalances = this.allCoinBalances.bind(this)
+    this.allDebtShares = this.allDebtShares.bind(this)
+    this.totalDebtShares = this.totalDebtShares.bind(this)
+    this.allTotalDebtShares = this.allTotalDebtShares.bind(this)
+    this.allVaultPositions = this.allVaultPositions.bind(this)
+    this.totalVaultCoinBalance = this.totalVaultCoinBalance.bind(this)
+    this.allTotalVaultCoinBalances = this.allTotalVaultCoinBalances.bind(this)
+  }
+
+  config = async (): Promise<ConfigResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      config: {},
+    })
+  }
+  allowedVaults = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }): Promise<ArrayOfVaultBaseForString> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      allowed_vaults: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  allowedCoins = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }): Promise<ArrayOfString> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      allowed_coins: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  positions = async ({ accountId }: { accountId: string }): Promise<Positions> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      positions: {
+        account_id: accountId,
+      },
+    })
+  }
+  health = async ({ accountId }: { accountId: string }): Promise<HealthResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      health: {
+        account_id: accountId,
+      },
+    })
+  }
+  allCoinBalances = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }): Promise<ArrayOfCoinBalanceResponseItem> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_coin_balances: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  allDebtShares = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }): Promise<ArrayOfSharesResponseItem> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_debt_shares: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  totalDebtShares = async (): Promise<DebtShares> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      total_debt_shares: {},
+    })
+  }
+  allTotalDebtShares = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }): Promise<ArrayOfDebtShares> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_total_debt_shares: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  allVaultPositions = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }): Promise<ArrayOfVaultPositionResponseItem> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_vault_positions: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  totalVaultCoinBalance = async ({ vault }: { vault: VaultBaseForString }): Promise<Uint128> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      total_vault_coin_balance: {
+        vault,
+      },
+    })
+  }
+  allTotalVaultCoinBalances = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }): Promise<ArrayOfVaultWithBalance> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_total_vault_coin_balances: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+}
+export interface CreditManagerInterface extends CreditManagerReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  createCreditAccount: (
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  updateCreditAccount: (
+    {
+      accountId,
+      actions,
+    }: {
+      accountId: string
+      actions: Action[]
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  updateConfig: (
+    {
+      newConfig,
+    }: {
+      newConfig: ConfigUpdates
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  callback: (
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class CreditManagerClient
+  extends CreditManagerQueryClient
+  implements CreditManagerInterface
+{
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.createCreditAccount = this.createCreditAccount.bind(this)
+    this.updateCreditAccount = this.updateCreditAccount.bind(this)
+    this.updateConfig = this.updateConfig.bind(this)
+    this.callback = this.callback.bind(this)
+  }
+
+  createCreditAccount = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        create_credit_account: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  updateCreditAccount = async (
+    {
+      accountId,
+      actions,
+    }: {
+      accountId: string
+      actions: Action[]
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        update_credit_account: {
+          account_id: accountId,
+          actions,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  updateConfig = async (
+    {
+      newConfig,
+    }: {
+      newConfig: ConfigUpdates
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        update_config: {
+          new_config: newConfig,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  callback = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        callback: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/credit-manager/CreditManager.react-query.ts

@@ -0,0 +1,469 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  Decimal,
+  OracleBaseForString,
+  RedBankBaseForString,
+  SwapperBaseForString,
+  InstantiateMsg,
+  VaultBaseForString,
+  ExecuteMsg,
+  Action,
+  Uint128,
+  CallbackMsg,
+  Addr,
+  Coin,
+  ConfigUpdates,
+  VaultBaseForAddr,
+  QueryMsg,
+  ArrayOfCoinBalanceResponseItem,
+  CoinBalanceResponseItem,
+  ArrayOfSharesResponseItem,
+  SharesResponseItem,
+  ArrayOfDebtShares,
+  DebtShares,
+  ArrayOfVaultWithBalance,
+  VaultWithBalance,
+  ArrayOfVaultPositionResponseItem,
+  VaultPositionResponseItem,
+  VaultPosition,
+  VaultPositionState,
+  ArrayOfString,
+  ArrayOfVaultBaseForString,
+  ConfigResponse,
+  HealthResponse,
+  Positions,
+  DebtAmount,
+} from './CreditManager.types'
+import { CreditManagerQueryClient, CreditManagerClient } from './CreditManager.client'
+export const creditManagerQueryKeys = {
+  contract: [
+    {
+      contract: 'creditManager',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...creditManagerQueryKeys.contract[0], address: contractAddress }] as const,
+  config: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...creditManagerQueryKeys.address(contractAddress)[0], method: 'config', args }] as const,
+  allowedVaults: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...creditManagerQueryKeys.address(contractAddress)[0], method: 'allowed_vaults', args },
+    ] as const,
+  allowedCoins: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...creditManagerQueryKeys.address(contractAddress)[0], method: 'allowed_coins', args },
+    ] as const,
+  positions: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...creditManagerQueryKeys.address(contractAddress)[0], method: 'positions', args }] as const,
+  health: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...creditManagerQueryKeys.address(contractAddress)[0], method: 'health', args }] as const,
+  allCoinBalances: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...creditManagerQueryKeys.address(contractAddress)[0], method: 'all_coin_balances', args },
+    ] as const,
+  allDebtShares: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...creditManagerQueryKeys.address(contractAddress)[0], method: 'all_debt_shares', args },
+    ] as const,
+  totalDebtShares: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...creditManagerQueryKeys.address(contractAddress)[0], method: 'total_debt_shares', args },
+    ] as const,
+  allTotalDebtShares: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...creditManagerQueryKeys.address(contractAddress)[0],
+        method: 'all_total_debt_shares',
+        args,
+      },
+    ] as const,
+  allVaultPositions: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...creditManagerQueryKeys.address(contractAddress)[0],
+        method: 'all_vault_positions',
+        args,
+      },
+    ] as const,
+  totalVaultCoinBalance: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...creditManagerQueryKeys.address(contractAddress)[0],
+        method: 'total_vault_coin_balance',
+        args,
+      },
+    ] as const,
+  allTotalVaultCoinBalances: (
+    contractAddress: string | undefined,
+    args?: Record<string, unknown>,
+  ) =>
+    [
+      {
+        ...creditManagerQueryKeys.address(contractAddress)[0],
+        method: 'all_total_vault_coin_balances',
+        args,
+      },
+    ] as const,
+}
+export interface CreditManagerReactQuery<TResponse, TData = TResponse> {
+  client: CreditManagerQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface CreditManagerAllTotalVaultCoinBalancesQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfVaultWithBalance, TData> {
+  args: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }
+}
+export function useCreditManagerAllTotalVaultCoinBalancesQuery<TData = ArrayOfVaultWithBalance>({
+  client,
+  args,
+  options,
+}: CreditManagerAllTotalVaultCoinBalancesQuery<TData>) {
+  return useQuery<ArrayOfVaultWithBalance, Error, TData>(
+    creditManagerQueryKeys.allTotalVaultCoinBalances(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allTotalVaultCoinBalances({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerTotalVaultCoinBalanceQuery<TData>
+  extends CreditManagerReactQuery<Uint128, TData> {
+  args: {
+    vault: VaultBaseForString
+  }
+}
+export function useCreditManagerTotalVaultCoinBalanceQuery<TData = Uint128>({
+  client,
+  args,
+  options,
+}: CreditManagerTotalVaultCoinBalanceQuery<TData>) {
+  return useQuery<Uint128, Error, TData>(
+    creditManagerQueryKeys.totalVaultCoinBalance(client?.contractAddress, args),
+    () =>
+      client
+        ? client.totalVaultCoinBalance({
+            vault: args.vault,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllVaultPositionsQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfVaultPositionResponseItem, TData> {
+  args: {
+    limit?: number
+    startAfter?: string[][]
+  }
+}
+export function useCreditManagerAllVaultPositionsQuery<TData = ArrayOfVaultPositionResponseItem>({
+  client,
+  args,
+  options,
+}: CreditManagerAllVaultPositionsQuery<TData>) {
+  return useQuery<ArrayOfVaultPositionResponseItem, Error, TData>(
+    creditManagerQueryKeys.allVaultPositions(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allVaultPositions({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllTotalDebtSharesQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfDebtShares, TData> {
+  args: {
+    limit?: number
+    startAfter?: string
+  }
+}
+export function useCreditManagerAllTotalDebtSharesQuery<TData = ArrayOfDebtShares>({
+  client,
+  args,
+  options,
+}: CreditManagerAllTotalDebtSharesQuery<TData>) {
+  return useQuery<ArrayOfDebtShares, Error, TData>(
+    creditManagerQueryKeys.allTotalDebtShares(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allTotalDebtShares({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerTotalDebtSharesQuery<TData>
+  extends CreditManagerReactQuery<DebtShares, TData> {}
+export function useCreditManagerTotalDebtSharesQuery<TData = DebtShares>({
+  client,
+  options,
+}: CreditManagerTotalDebtSharesQuery<TData>) {
+  return useQuery<DebtShares, Error, TData>(
+    creditManagerQueryKeys.totalDebtShares(client?.contractAddress),
+    () => (client ? client.totalDebtShares() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllDebtSharesQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfSharesResponseItem, TData> {
+  args: {
+    limit?: number
+    startAfter?: string[][]
+  }
+}
+export function useCreditManagerAllDebtSharesQuery<TData = ArrayOfSharesResponseItem>({
+  client,
+  args,
+  options,
+}: CreditManagerAllDebtSharesQuery<TData>) {
+  return useQuery<ArrayOfSharesResponseItem, Error, TData>(
+    creditManagerQueryKeys.allDebtShares(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allDebtShares({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllCoinBalancesQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfCoinBalanceResponseItem, TData> {
+  args: {
+    limit?: number
+    startAfter?: string[][]
+  }
+}
+export function useCreditManagerAllCoinBalancesQuery<TData = ArrayOfCoinBalanceResponseItem>({
+  client,
+  args,
+  options,
+}: CreditManagerAllCoinBalancesQuery<TData>) {
+  return useQuery<ArrayOfCoinBalanceResponseItem, Error, TData>(
+    creditManagerQueryKeys.allCoinBalances(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allCoinBalances({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerHealthQuery<TData>
+  extends CreditManagerReactQuery<HealthResponse, TData> {
+  args: {
+    accountId: string
+  }
+}
+export function useCreditManagerHealthQuery<TData = HealthResponse>({
+  client,
+  args,
+  options,
+}: CreditManagerHealthQuery<TData>) {
+  return useQuery<HealthResponse, Error, TData>(
+    creditManagerQueryKeys.health(client?.contractAddress, args),
+    () =>
+      client
+        ? client.health({
+            accountId: args.accountId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerPositionsQuery<TData>
+  extends CreditManagerReactQuery<Positions, TData> {
+  args: {
+    accountId: string
+  }
+}
+export function useCreditManagerPositionsQuery<TData = Positions>({
+  client,
+  args,
+  options,
+}: CreditManagerPositionsQuery<TData>) {
+  return useQuery<Positions, Error, TData>(
+    creditManagerQueryKeys.positions(client?.contractAddress, args),
+    () =>
+      client
+        ? client.positions({
+            accountId: args.accountId,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllowedCoinsQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfString, TData> {
+  args: {
+    limit?: number
+    startAfter?: string
+  }
+}
+export function useCreditManagerAllowedCoinsQuery<TData = ArrayOfString>({
+  client,
+  args,
+  options,
+}: CreditManagerAllowedCoinsQuery<TData>) {
+  return useQuery<ArrayOfString, Error, TData>(
+    creditManagerQueryKeys.allowedCoins(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allowedCoins({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerAllowedVaultsQuery<TData>
+  extends CreditManagerReactQuery<ArrayOfVaultBaseForString, TData> {
+  args: {
+    limit?: number
+    startAfter?: VaultBaseForString
+  }
+}
+export function useCreditManagerAllowedVaultsQuery<TData = ArrayOfVaultBaseForString>({
+  client,
+  args,
+  options,
+}: CreditManagerAllowedVaultsQuery<TData>) {
+  return useQuery<ArrayOfVaultBaseForString, Error, TData>(
+    creditManagerQueryKeys.allowedVaults(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allowedVaults({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerConfigQuery<TData>
+  extends CreditManagerReactQuery<ConfigResponse, TData> {}
+export function useCreditManagerConfigQuery<TData = ConfigResponse>({
+  client,
+  options,
+}: CreditManagerConfigQuery<TData>) {
+  return useQuery<ConfigResponse, Error, TData>(
+    creditManagerQueryKeys.config(client?.contractAddress),
+    () => (client ? client.config() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface CreditManagerCallbackMutation {
+  client: CreditManagerClient
+  msg: CallbackMsg
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useCreditManagerCallbackMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, CreditManagerCallbackMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, CreditManagerCallbackMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.callback(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface CreditManagerUpdateConfigMutation {
+  client: CreditManagerClient
+  msg: {
+    newConfig: ConfigUpdates
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useCreditManagerUpdateConfigMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, CreditManagerUpdateConfigMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, CreditManagerUpdateConfigMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.updateConfig(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface CreditManagerUpdateCreditAccountMutation {
+  client: CreditManagerClient
+  msg: {
+    accountId: string
+    actions: Action[]
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useCreditManagerUpdateCreditAccountMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, CreditManagerUpdateCreditAccountMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, CreditManagerUpdateCreditAccountMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.updateCreditAccount(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface CreditManagerCreateCreditAccountMutation {
+  client: CreditManagerClient
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useCreditManagerCreateCreditAccountMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, CreditManagerCreateCreditAccountMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, CreditManagerCreateCreditAccountMutation>(
+    ({ client, args: { fee, memo, funds } = {} }) => client.createCreditAccount(fee, memo, funds),
+    options,
+  )
+}

types/generated/credit-manager/CreditManager.types.ts

@@ -0,0 +1,314 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export type Decimal = string
+export type OracleBaseForString = string
+export type RedBankBaseForString = string
+export type SwapperBaseForString = string
+export interface InstantiateMsg {
+  allowed_coins: string[]
+  allowed_vaults: VaultBaseForString[]
+  max_close_factor: Decimal
+  max_liquidation_bonus: Decimal
+  oracle: OracleBaseForString
+  owner: string
+  red_bank: RedBankBaseForString
+  swapper: SwapperBaseForString
+}
+export interface VaultBaseForString {
+  address: string
+}
+export type ExecuteMsg =
+  | {
+      create_credit_account: {}
+    }
+  | {
+      update_credit_account: {
+        account_id: string
+        actions: Action[]
+      }
+    }
+  | {
+      update_config: {
+        new_config: ConfigUpdates
+      }
+    }
+  | {
+      callback: CallbackMsg
+    }
+export type Action =
+  | {
+      deposit: Coin
+    }
+  | {
+      withdraw: Coin
+    }
+  | {
+      borrow: Coin
+    }
+  | {
+      repay: Coin
+    }
+  | {
+      vault_deposit: {
+        coins: Coin[]
+        vault: VaultBaseForString
+      }
+    }
+  | {
+      vault_withdraw: {
+        amount: Uint128
+        vault: VaultBaseForString
+      }
+    }
+  | {
+      liquidate_coin: {
+        debt_coin: Coin
+        liquidatee_account_id: string
+        request_coin_denom: string
+      }
+    }
+  | {
+      swap_exact_in: {
+        coin_in: Coin
+        denom_out: string
+        slippage: Decimal
+      }
+    }
+export type Uint128 = string
+export type CallbackMsg =
+  | {
+      withdraw: {
+        account_id: string
+        coin: Coin
+        recipient: Addr
+      }
+    }
+  | {
+      borrow: {
+        account_id: string
+        coin: Coin
+      }
+    }
+  | {
+      repay: {
+        account_id: string
+        coin: Coin
+      }
+    }
+  | {
+      assert_below_max_l_t_v: {
+        account_id: string
+      }
+    }
+  | {
+      vault_deposit: {
+        account_id: string
+        coins: Coin[]
+        vault: VaultBaseForAddr
+      }
+    }
+  | {
+      update_vault_coin_balance: {
+        account_id: string
+        previous_total_balance: Uint128
+        vault: VaultBaseForAddr
+      }
+    }
+  | {
+      vault_withdraw: {
+        account_id: string
+        amount: Uint128
+        vault: VaultBaseForAddr
+      }
+    }
+  | {
+      vault_force_withdraw: {
+        account_id: string
+        amount: Uint128
+        vault: VaultBaseForAddr
+      }
+    }
+  | {
+      liquidate_coin: {
+        debt_coin: Coin
+        liquidatee_account_id: string
+        liquidator_account_id: string
+        request_coin_denom: string
+      }
+    }
+  | {
+      assert_health_factor_improved: {
+        account_id: string
+        previous_health_factor: Decimal
+      }
+    }
+  | {
+      swap_exact_in: {
+        account_id: string
+        coin_in: Coin
+        denom_out: string
+        slippage: Decimal
+      }
+    }
+  | {
+      update_coin_balances: {
+        account_id: string
+        previous_balances: Coin[]
+      }
+    }
+export type Addr = string
+export interface Coin {
+  amount: Uint128
+  denom: string
+  [k: string]: unknown
+}
+export interface ConfigUpdates {
+  account_nft?: string | null
+  allowed_coins?: string[] | null
+  allowed_vaults?: VaultBaseForString[] | null
+  max_close_factor?: Decimal | null
+  max_liquidation_bonus?: Decimal | null
+  oracle?: OracleBaseForString | null
+  owner?: string | null
+  red_bank?: RedBankBaseForString | null
+  swapper?: SwapperBaseForString | null
+}
+export interface VaultBaseForAddr {
+  address: Addr
+}
+export type QueryMsg =
+  | {
+      config: {}
+    }
+  | {
+      allowed_vaults: {
+        limit?: number | null
+        start_after?: VaultBaseForString | null
+      }
+    }
+  | {
+      allowed_coins: {
+        limit?: number | null
+        start_after?: string | null
+      }
+    }
+  | {
+      positions: {
+        account_id: string
+      }
+    }
+  | {
+      health: {
+        account_id: string
+      }
+    }
+  | {
+      all_coin_balances: {
+        limit?: number | null
+        start_after?: [string, string] | null
+      }
+    }
+  | {
+      all_debt_shares: {
+        limit?: number | null
+        start_after?: [string, string] | null
+      }
+    }
+  | {
+      total_debt_shares: string
+    }
+  | {
+      all_total_debt_shares: {
+        limit?: number | null
+        start_after?: string | null
+      }
+    }
+  | {
+      all_vault_positions: {
+        limit?: number | null
+        start_after?: [string, string] | null
+      }
+    }
+  | {
+      total_vault_coin_balance: {
+        vault: VaultBaseForString
+      }
+    }
+  | {
+      all_total_vault_coin_balances: {
+        limit?: number | null
+        start_after?: VaultBaseForString | null
+      }
+    }
+export type ArrayOfCoinBalanceResponseItem = CoinBalanceResponseItem[]
+export interface CoinBalanceResponseItem {
+  account_id: string
+  amount: Uint128
+  denom: string
+}
+export type ArrayOfSharesResponseItem = SharesResponseItem[]
+export interface SharesResponseItem {
+  account_id: string
+  denom: string
+  shares: Uint128
+}
+export type ArrayOfDebtShares = DebtShares[]
+export interface DebtShares {
+  denom: string
+  shares: Uint128
+}
+export type ArrayOfVaultWithBalance = VaultWithBalance[]
+export interface VaultWithBalance {
+  balance: Uint128
+  vault: VaultBaseForAddr
+}
+export type ArrayOfVaultPositionResponseItem = VaultPositionResponseItem[]
+export interface VaultPositionResponseItem {
+  account_id: string
+  position: VaultPosition
+}
+export interface VaultPosition {
+  state: VaultPositionState
+  vault: VaultBaseForAddr
+}
+export interface VaultPositionState {
+  locked: Uint128
+  unlocked: Uint128
+}
+export type ArrayOfString = string[]
+export type ArrayOfVaultBaseForString = VaultBaseForString[]
+export interface ConfigResponse {
+  account_nft?: string | null
+  max_close_factor: Decimal
+  max_liquidation_bonus: Decimal
+  oracle: string
+  owner: string
+  red_bank: string
+  swapper: string
+}
+export interface HealthResponse {
+  above_max_ltv: boolean
+  liquidatable: boolean
+  liquidation_health_factor?: Decimal | null
+  liquidation_threshold_adjusted_collateral: Decimal
+  max_ltv_adjusted_collateral: Decimal
+  max_ltv_health_factor?: Decimal | null
+  total_collateral_value: Decimal
+  total_debt_value: Decimal
+}
+export interface Positions {
+  account_id: string
+  coins: Coin[]
+  debts: DebtAmount[]
+  vaults: VaultPosition[]
+}
+export interface DebtAmount {
+  amount: Uint128
+  denom: string
+  shares: Uint128
+}

types/generated/credit-manager/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _3 from './CreditManager.types'
+import * as _4 from './CreditManager.client'
+import * as _5 from './CreditManager.react-query'
+export namespace contracts {
+  export const CreditManager = { ..._3, ..._4, ..._5 }
+}

types/generated/mars-oracle-adapter/MarsOracleAdapter.client.ts

@@ -0,0 +1,138 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { Coin, StdFee } from '@cosmjs/amino'
+import {
+  OracleBaseForString,
+  Addr,
+  PricingMethod,
+  InstantiateMsg,
+  VaultPricingInfo,
+  ExecuteMsg,
+  ConfigUpdates,
+  QueryMsg,
+  ArrayOfVaultPricingInfo,
+  OracleBaseForAddr,
+  ConfigResponse,
+  Decimal,
+  PriceResponse,
+} from './MarsOracleAdapter.types'
+export interface MarsOracleAdapterReadOnlyInterface {
+  contractAddress: string
+  price: ({ denom }: { denom: string }) => Promise<PriceResponse>
+  config: () => Promise<ConfigResponse>
+  pricingInfo: ({ denom }: { denom: string }) => Promise<VaultPricingInfo>
+  allPricingInfo: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }) => Promise<ArrayOfVaultPricingInfo>
+}
+export class MarsOracleAdapterQueryClient implements MarsOracleAdapterReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.price = this.price.bind(this)
+    this.config = this.config.bind(this)
+    this.pricingInfo = this.pricingInfo.bind(this)
+    this.allPricingInfo = this.allPricingInfo.bind(this)
+  }
+
+  price = async ({ denom }: { denom: string }): Promise<PriceResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      price: {
+        denom,
+      },
+    })
+  }
+  config = async (): Promise<ConfigResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      config: {},
+    })
+  }
+  pricingInfo = async ({ denom }: { denom: string }): Promise<VaultPricingInfo> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      pricing_info: {
+        denom,
+      },
+    })
+  }
+  allPricingInfo = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string
+  }): Promise<ArrayOfVaultPricingInfo> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      all_pricing_info: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+}
+export interface MarsOracleAdapterInterface extends MarsOracleAdapterReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  updateConfig: (
+    {
+      newConfig,
+    }: {
+      newConfig: ConfigUpdates
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class MarsOracleAdapterClient
+  extends MarsOracleAdapterQueryClient
+  implements MarsOracleAdapterInterface
+{
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.updateConfig = this.updateConfig.bind(this)
+  }
+
+  updateConfig = async (
+    {
+      newConfig,
+    }: {
+      newConfig: ConfigUpdates
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        update_config: {
+          new_config: newConfig,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/mars-oracle-adapter/MarsOracleAdapter.react-query.ts

@@ -0,0 +1,165 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee, Coin } from '@cosmjs/amino'
+import {
+  OracleBaseForString,
+  Addr,
+  PricingMethod,
+  InstantiateMsg,
+  VaultPricingInfo,
+  ExecuteMsg,
+  ConfigUpdates,
+  QueryMsg,
+  ArrayOfVaultPricingInfo,
+  OracleBaseForAddr,
+  ConfigResponse,
+  Decimal,
+  PriceResponse,
+} from './MarsOracleAdapter.types'
+import { MarsOracleAdapterQueryClient, MarsOracleAdapterClient } from './MarsOracleAdapter.client'
+export const marsOracleAdapterQueryKeys = {
+  contract: [
+    {
+      contract: 'marsOracleAdapter',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...marsOracleAdapterQueryKeys.contract[0], address: contractAddress }] as const,
+  price: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...marsOracleAdapterQueryKeys.address(contractAddress)[0], method: 'price', args }] as const,
+  config: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...marsOracleAdapterQueryKeys.address(contractAddress)[0], method: 'config', args },
+    ] as const,
+  pricingInfo: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...marsOracleAdapterQueryKeys.address(contractAddress)[0], method: 'pricing_info', args },
+    ] as const,
+  allPricingInfo: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...marsOracleAdapterQueryKeys.address(contractAddress)[0],
+        method: 'all_pricing_info',
+        args,
+      },
+    ] as const,
+}
+export interface MarsOracleAdapterReactQuery<TResponse, TData = TResponse> {
+  client: MarsOracleAdapterQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface MarsOracleAdapterAllPricingInfoQuery<TData>
+  extends MarsOracleAdapterReactQuery<ArrayOfVaultPricingInfo, TData> {
+  args: {
+    limit?: number
+    startAfter?: string
+  }
+}
+export function useMarsOracleAdapterAllPricingInfoQuery<TData = ArrayOfVaultPricingInfo>({
+  client,
+  args,
+  options,
+}: MarsOracleAdapterAllPricingInfoQuery<TData>) {
+  return useQuery<ArrayOfVaultPricingInfo, Error, TData>(
+    marsOracleAdapterQueryKeys.allPricingInfo(client?.contractAddress, args),
+    () =>
+      client
+        ? client.allPricingInfo({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MarsOracleAdapterPricingInfoQuery<TData>
+  extends MarsOracleAdapterReactQuery<VaultPricingInfo, TData> {
+  args: {
+    denom: string
+  }
+}
+export function useMarsOracleAdapterPricingInfoQuery<TData = VaultPricingInfo>({
+  client,
+  args,
+  options,
+}: MarsOracleAdapterPricingInfoQuery<TData>) {
+  return useQuery<VaultPricingInfo, Error, TData>(
+    marsOracleAdapterQueryKeys.pricingInfo(client?.contractAddress, args),
+    () =>
+      client
+        ? client.pricingInfo({
+            denom: args.denom,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MarsOracleAdapterConfigQuery<TData>
+  extends MarsOracleAdapterReactQuery<ConfigResponse, TData> {}
+export function useMarsOracleAdapterConfigQuery<TData = ConfigResponse>({
+  client,
+  options,
+}: MarsOracleAdapterConfigQuery<TData>) {
+  return useQuery<ConfigResponse, Error, TData>(
+    marsOracleAdapterQueryKeys.config(client?.contractAddress),
+    () => (client ? client.config() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MarsOracleAdapterPriceQuery<TData>
+  extends MarsOracleAdapterReactQuery<PriceResponse, TData> {
+  args: {
+    denom: string
+  }
+}
+export function useMarsOracleAdapterPriceQuery<TData = PriceResponse>({
+  client,
+  args,
+  options,
+}: MarsOracleAdapterPriceQuery<TData>) {
+  return useQuery<PriceResponse, Error, TData>(
+    marsOracleAdapterQueryKeys.price(client?.contractAddress, args),
+    () =>
+      client
+        ? client.price({
+            denom: args.denom,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MarsOracleAdapterUpdateConfigMutation {
+  client: MarsOracleAdapterClient
+  msg: {
+    newConfig: ConfigUpdates
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMarsOracleAdapterUpdateConfigMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, MarsOracleAdapterUpdateConfigMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, MarsOracleAdapterUpdateConfigMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.updateConfig(msg, fee, memo, funds),
+    options,
+  )
+}

types/generated/mars-oracle-adapter/MarsOracleAdapter.types.ts

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export type OracleBaseForString = string
+export type Addr = string
+export type PricingMethod = 'preview_redeem'
+export interface InstantiateMsg {
+  oracle: OracleBaseForString
+  owner: string
+  vault_pricing: VaultPricingInfo[]
+}
+export interface VaultPricingInfo {
+  addr: Addr
+  denom: string
+  method: PricingMethod
+}
+export type ExecuteMsg = {
+  update_config: {
+    new_config: ConfigUpdates
+  }
+}
+export interface ConfigUpdates {
+  oracle?: OracleBaseForString | null
+  owner?: string | null
+  vault_pricing?: VaultPricingInfo[] | null
+}
+export type QueryMsg =
+  | {
+      price: {
+        denom: string
+      }
+    }
+  | {
+      config: {}
+    }
+  | {
+      pricing_info: {
+        denom: string
+      }
+    }
+  | {
+      all_pricing_info: {
+        limit?: number | null
+        start_after?: string | null
+      }
+    }
+export type ArrayOfVaultPricingInfo = VaultPricingInfo[]
+export type OracleBaseForAddr = string
+export interface ConfigResponse {
+  oracle: OracleBaseForAddr
+  owner: Addr
+}
+export type Decimal = string
+export interface PriceResponse {
+  denom: string
+  price: Decimal
+  [k: string]: unknown
+}

types/generated/mars-oracle-adapter/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _6 from './MarsOracleAdapter.types'
+import * as _7 from './MarsOracleAdapter.client'
+import * as _8 from './MarsOracleAdapter.react-query'
+export namespace contracts {
+  export const MarsOracleAdapter = { ..._6, ..._7, ..._8 }
+}

types/generated/mock-oracle/MockOracle.client.ts

@@ -0,0 +1,95 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { Coin, StdFee } from '@cosmjs/amino'
+import {
+  Decimal,
+  InstantiateMsg,
+  CoinPrice,
+  ExecuteMsg,
+  QueryMsg,
+  PriceResponse,
+} from './MockOracle.types'
+export interface MockOracleReadOnlyInterface {
+  contractAddress: string
+  price: ({ denom }: { denom: string }) => Promise<PriceResponse>
+}
+export class MockOracleQueryClient implements MockOracleReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.price = this.price.bind(this)
+  }
+
+  price = async ({ denom }: { denom: string }): Promise<PriceResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      price: {
+        denom,
+      },
+    })
+  }
+}
+export interface MockOracleInterface extends MockOracleReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  changePrice: (
+    {
+      denom,
+      price,
+    }: {
+      denom: string
+      price: Decimal
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class MockOracleClient extends MockOracleQueryClient implements MockOracleInterface {
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.changePrice = this.changePrice.bind(this)
+  }
+
+  changePrice = async (
+    {
+      denom,
+      price,
+    }: {
+      denom: string
+      price: Decimal
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        change_price: {
+          denom,
+          price,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/mock-oracle/MockOracle.react-query.ts

@@ -0,0 +1,80 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee, Coin } from '@cosmjs/amino'
+import {
+  Decimal,
+  InstantiateMsg,
+  CoinPrice,
+  ExecuteMsg,
+  QueryMsg,
+  PriceResponse,
+} from './MockOracle.types'
+import { MockOracleQueryClient, MockOracleClient } from './MockOracle.client'
+export const mockOracleQueryKeys = {
+  contract: [
+    {
+      contract: 'mockOracle',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...mockOracleQueryKeys.contract[0], address: contractAddress }] as const,
+  price: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...mockOracleQueryKeys.address(contractAddress)[0], method: 'price', args }] as const,
+}
+export interface MockOracleReactQuery<TResponse, TData = TResponse> {
+  client: MockOracleQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface MockOraclePriceQuery<TData> extends MockOracleReactQuery<PriceResponse, TData> {
+  args: {
+    denom: string
+  }
+}
+export function useMockOraclePriceQuery<TData = PriceResponse>({
+  client,
+  args,
+  options,
+}: MockOraclePriceQuery<TData>) {
+  return useQuery<PriceResponse, Error, TData>(
+    mockOracleQueryKeys.price(client?.contractAddress, args),
+    () =>
+      client
+        ? client.price({
+            denom: args.denom,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockOracleChangePriceMutation {
+  client: MockOracleClient
+  msg: CoinPrice
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockOracleChangePriceMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, MockOracleChangePriceMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, MockOracleChangePriceMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.changePrice(msg, fee, memo, funds),
+    options,
+  )
+}

types/generated/mock-oracle/MockOracle.types.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export type Decimal = string
+export interface InstantiateMsg {
+  coins: CoinPrice[]
+}
+export interface CoinPrice {
+  denom: string
+  price: Decimal
+}
+export type ExecuteMsg = {
+  change_price: CoinPrice
+}
+export type QueryMsg = {
+  price: {
+    denom: string
+  }
+}
+export interface PriceResponse {
+  denom: string
+  price: Decimal
+  [k: string]: unknown
+}

types/generated/mock-oracle/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _9 from './MockOracle.types'
+import * as _10 from './MockOracle.client'
+import * as _11 from './MockOracle.react-query'
+export namespace contracts {
+  export const MockOracle = { ..._9, ..._10, ..._11 }
+}

types/generated/mock-red-bank/MockRedBank.client.ts

@@ -0,0 +1,160 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  Decimal,
+  InstantiateMsg,
+  CoinMarketInfo,
+  ExecuteMsg,
+  Uint128,
+  Coin,
+  QueryMsg,
+  Market,
+  InterestRateModel,
+  UserAssetDebtResponse,
+} from './MockRedBank.types'
+export interface MockRedBankReadOnlyInterface {
+  contractAddress: string
+  userAssetDebt: ({
+    denom,
+    userAddress,
+  }: {
+    denom: string
+    userAddress: string
+  }) => Promise<UserAssetDebtResponse>
+  market: ({ denom }: { denom: string }) => Promise<Market>
+}
+export class MockRedBankQueryClient implements MockRedBankReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.userAssetDebt = this.userAssetDebt.bind(this)
+    this.market = this.market.bind(this)
+  }
+
+  userAssetDebt = async ({
+    denom,
+    userAddress,
+  }: {
+    denom: string
+    userAddress: string
+  }): Promise<UserAssetDebtResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      user_asset_debt: {
+        denom,
+        user_address: userAddress,
+      },
+    })
+  }
+  market = async ({ denom }: { denom: string }): Promise<Market> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      market: {
+        denom,
+      },
+    })
+  }
+}
+export interface MockRedBankInterface extends MockRedBankReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  borrow: (
+    {
+      coin,
+      recipient,
+    }: {
+      coin: Coin
+      recipient?: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  repay: (
+    {
+      denom,
+      onBehalfOf,
+    }: {
+      denom: string
+      onBehalfOf?: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class MockRedBankClient extends MockRedBankQueryClient implements MockRedBankInterface {
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.borrow = this.borrow.bind(this)
+    this.repay = this.repay.bind(this)
+  }
+
+  borrow = async (
+    {
+      coin,
+      recipient,
+    }: {
+      coin: Coin
+      recipient?: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        borrow: {
+          coin,
+          recipient,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  repay = async (
+    {
+      denom,
+      onBehalfOf,
+    }: {
+      denom: string
+      onBehalfOf?: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        repay: {
+          denom,
+          on_behalf_of: onBehalfOf,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/mock-red-bank/MockRedBank.react-query.ts

@@ -0,0 +1,132 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  Decimal,
+  InstantiateMsg,
+  CoinMarketInfo,
+  ExecuteMsg,
+  Uint128,
+  Coin,
+  QueryMsg,
+  Market,
+  InterestRateModel,
+  UserAssetDebtResponse,
+} from './MockRedBank.types'
+import { MockRedBankQueryClient, MockRedBankClient } from './MockRedBank.client'
+export const mockRedBankQueryKeys = {
+  contract: [
+    {
+      contract: 'mockRedBank',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...mockRedBankQueryKeys.contract[0], address: contractAddress }] as const,
+  userAssetDebt: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...mockRedBankQueryKeys.address(contractAddress)[0], method: 'user_asset_debt', args },
+    ] as const,
+  market: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...mockRedBankQueryKeys.address(contractAddress)[0], method: 'market', args }] as const,
+}
+export interface MockRedBankReactQuery<TResponse, TData = TResponse> {
+  client: MockRedBankQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface MockRedBankMarketQuery<TData> extends MockRedBankReactQuery<Market, TData> {
+  args: {
+    denom: string
+  }
+}
+export function useMockRedBankMarketQuery<TData = Market>({
+  client,
+  args,
+  options,
+}: MockRedBankMarketQuery<TData>) {
+  return useQuery<Market, Error, TData>(
+    mockRedBankQueryKeys.market(client?.contractAddress, args),
+    () =>
+      client
+        ? client.market({
+            denom: args.denom,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockRedBankUserAssetDebtQuery<TData>
+  extends MockRedBankReactQuery<UserAssetDebtResponse, TData> {
+  args: {
+    denom: string
+    userAddress: string
+  }
+}
+export function useMockRedBankUserAssetDebtQuery<TData = UserAssetDebtResponse>({
+  client,
+  args,
+  options,
+}: MockRedBankUserAssetDebtQuery<TData>) {
+  return useQuery<UserAssetDebtResponse, Error, TData>(
+    mockRedBankQueryKeys.userAssetDebt(client?.contractAddress, args),
+    () =>
+      client
+        ? client.userAssetDebt({
+            denom: args.denom,
+            userAddress: args.userAddress,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockRedBankRepayMutation {
+  client: MockRedBankClient
+  msg: {
+    denom: string
+    onBehalfOf?: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockRedBankRepayMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, MockRedBankRepayMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, MockRedBankRepayMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.repay(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface MockRedBankBorrowMutation {
+  client: MockRedBankClient
+  msg: {
+    coin: Coin
+    recipient?: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockRedBankBorrowMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, MockRedBankBorrowMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, MockRedBankBorrowMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.borrow(msg, fee, memo, funds),
+    options,
+  )
+}

types/generated/mock-red-bank/MockRedBank.types.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export type Decimal = string
+export interface InstantiateMsg {
+  coins: CoinMarketInfo[]
+}
+export interface CoinMarketInfo {
+  denom: string
+  liquidation_threshold: Decimal
+  max_ltv: Decimal
+}
+export type ExecuteMsg =
+  | {
+      borrow: {
+        coin: Coin
+        recipient?: string | null
+      }
+    }
+  | {
+      repay: {
+        denom: string
+        on_behalf_of?: string | null
+      }
+    }
+export type Uint128 = string
+export interface Coin {
+  amount: Uint128
+  denom: string
+  [k: string]: unknown
+}
+export type QueryMsg =
+  | {
+      user_asset_debt: {
+        denom: string
+        user_address: string
+      }
+    }
+  | {
+      market: {
+        denom: string
+      }
+    }
+export interface Market {
+  borrow_enabled: boolean
+  borrow_index: Decimal
+  borrow_rate: Decimal
+  collateral_total_scaled: Uint128
+  debt_total_scaled: Uint128
+  denom: string
+  deposit_cap: Uint128
+  deposit_enabled: boolean
+  indexes_last_updated: number
+  interest_rate_model: InterestRateModel
+  liquidation_bonus: Decimal
+  liquidation_threshold: Decimal
+  liquidity_index: Decimal
+  liquidity_rate: Decimal
+  max_loan_to_value: Decimal
+  reserve_factor: Decimal
+  [k: string]: unknown
+}
+export interface InterestRateModel {
+  base: Decimal
+  optimal_utilization_rate: Decimal
+  slope_1: Decimal
+  slope_2: Decimal
+  [k: string]: unknown
+}
+export interface UserAssetDebtResponse {
+  amount: Uint128
+  denom: string
+}

types/generated/mock-red-bank/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _12 from './MockRedBank.types'
+import * as _13 from './MockRedBank.client'
+import * as _14 from './MockRedBank.react-query'
+export namespace contracts {
+  export const MockRedBank = { ..._12, ..._13, ..._14 }
+}

types/generated/mock-vault/MockVault.client.ts

@@ -0,0 +1,134 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  OracleBaseForString,
+  InstantiateMsg,
+  ExecuteMsg,
+  QueryMsg,
+  Uint128,
+  VaultInfo,
+  Coin,
+  ArrayOfCoin,
+} from './MockVault.types'
+export interface MockVaultReadOnlyInterface {
+  contractAddress: string
+  info: () => Promise<VaultInfo>
+  previewRedeem: ({ amount }: { amount: Uint128 }) => Promise<ArrayOfCoin>
+  totalVaultCoinsIssued: () => Promise<Uint128>
+}
+export class MockVaultQueryClient implements MockVaultReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.info = this.info.bind(this)
+    this.previewRedeem = this.previewRedeem.bind(this)
+    this.totalVaultCoinsIssued = this.totalVaultCoinsIssued.bind(this)
+  }
+
+  info = async (): Promise<VaultInfo> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      info: {},
+    })
+  }
+  previewRedeem = async ({ amount }: { amount: Uint128 }): Promise<ArrayOfCoin> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      preview_redeem: {
+        amount,
+      },
+    })
+  }
+  totalVaultCoinsIssued = async (): Promise<Uint128> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      total_vault_coins_issued: {},
+    })
+  }
+}
+export interface MockVaultInterface extends MockVaultReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  deposit: (fee?: number | StdFee | 'auto', memo?: string, funds?: Coin[]) => Promise<ExecuteResult>
+  withdraw: (
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  forceWithdraw: (
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class MockVaultClient extends MockVaultQueryClient implements MockVaultInterface {
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.deposit = this.deposit.bind(this)
+    this.withdraw = this.withdraw.bind(this)
+    this.forceWithdraw = this.forceWithdraw.bind(this)
+  }
+
+  deposit = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        deposit: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  withdraw = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        withdraw: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  forceWithdraw = async (
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        force_withdraw: {},
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/mock-vault/MockVault.react-query.ts

@@ -0,0 +1,149 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  OracleBaseForString,
+  InstantiateMsg,
+  ExecuteMsg,
+  QueryMsg,
+  Uint128,
+  VaultInfo,
+  Coin,
+  ArrayOfCoin,
+} from './MockVault.types'
+import { MockVaultQueryClient, MockVaultClient } from './MockVault.client'
+export const mockVaultQueryKeys = {
+  contract: [
+    {
+      contract: 'mockVault',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...mockVaultQueryKeys.contract[0], address: contractAddress }] as const,
+  info: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...mockVaultQueryKeys.address(contractAddress)[0], method: 'info', args }] as const,
+  previewRedeem: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      { ...mockVaultQueryKeys.address(contractAddress)[0], method: 'preview_redeem', args },
+    ] as const,
+  totalVaultCoinsIssued: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...mockVaultQueryKeys.address(contractAddress)[0],
+        method: 'total_vault_coins_issued',
+        args,
+      },
+    ] as const,
+}
+export interface MockVaultReactQuery<TResponse, TData = TResponse> {
+  client: MockVaultQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface MockVaultTotalVaultCoinsIssuedQuery<TData>
+  extends MockVaultReactQuery<Uint128, TData> {}
+export function useMockVaultTotalVaultCoinsIssuedQuery<TData = Uint128>({
+  client,
+  options,
+}: MockVaultTotalVaultCoinsIssuedQuery<TData>) {
+  return useQuery<Uint128, Error, TData>(
+    mockVaultQueryKeys.totalVaultCoinsIssued(client?.contractAddress),
+    () => (client ? client.totalVaultCoinsIssued() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockVaultPreviewRedeemQuery<TData>
+  extends MockVaultReactQuery<ArrayOfCoin, TData> {
+  args: {
+    amount: Uint128
+  }
+}
+export function useMockVaultPreviewRedeemQuery<TData = ArrayOfCoin>({
+  client,
+  args,
+  options,
+}: MockVaultPreviewRedeemQuery<TData>) {
+  return useQuery<ArrayOfCoin, Error, TData>(
+    mockVaultQueryKeys.previewRedeem(client?.contractAddress, args),
+    () =>
+      client
+        ? client.previewRedeem({
+            amount: args.amount,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockVaultInfoQuery<TData> extends MockVaultReactQuery<VaultInfo, TData> {}
+export function useMockVaultInfoQuery<TData = VaultInfo>({
+  client,
+  options,
+}: MockVaultInfoQuery<TData>) {
+  return useQuery<VaultInfo, Error, TData>(
+    mockVaultQueryKeys.info(client?.contractAddress),
+    () => (client ? client.info() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface MockVaultForceWithdrawMutation {
+  client: MockVaultClient
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockVaultForceWithdrawMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, MockVaultForceWithdrawMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, MockVaultForceWithdrawMutation>(
+    ({ client, args: { fee, memo, funds } = {} }) => client.forceWithdraw(fee, memo, funds),
+    options,
+  )
+}
+export interface MockVaultWithdrawMutation {
+  client: MockVaultClient
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockVaultWithdrawMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, MockVaultWithdrawMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, MockVaultWithdrawMutation>(
+    ({ client, args: { fee, memo, funds } = {} }) => client.withdraw(fee, memo, funds),
+    options,
+  )
+}
+export interface MockVaultDepositMutation {
+  client: MockVaultClient
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useMockVaultDepositMutation(
+  options?: Omit<UseMutationOptions<ExecuteResult, Error, MockVaultDepositMutation>, 'mutationFn'>,
+) {
+  return useMutation<ExecuteResult, Error, MockVaultDepositMutation>(
+    ({ client, args: { fee, memo, funds } = {} }) => client.deposit(fee, memo, funds),
+    options,
+  )
+}

types/generated/mock-vault/MockVault.types.ts

@@ -0,0 +1,48 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export type OracleBaseForString = string
+export interface InstantiateMsg {
+  asset_denoms: string[]
+  lockup?: number | null
+  lp_token_denom: string
+  oracle: OracleBaseForString
+}
+export type ExecuteMsg =
+  | {
+      deposit: {}
+    }
+  | {
+      withdraw: {}
+    }
+  | {
+      force_withdraw: {}
+    }
+export type QueryMsg =
+  | {
+      info: {}
+    }
+  | {
+      preview_redeem: {
+        amount: Uint128
+      }
+    }
+  | {
+      total_vault_coins_issued: {}
+    }
+export type Uint128 = string
+export interface VaultInfo {
+  coins: Coin[]
+  lockup?: number | null
+  token_denom: string
+}
+export interface Coin {
+  amount: Uint128
+  denom: string
+  [k: string]: unknown
+}
+export type ArrayOfCoin = Coin[]

types/generated/mock-vault/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _15 from './MockVault.types'
+import * as _16 from './MockVault.client'
+import * as _17 from './MockVault.react-query'
+export namespace contracts {
+  export const MockVault = { ..._15, ..._16, ..._17 }
+}

types/generated/swapper-base/SwapperBase.client.ts

@@ -0,0 +1,292 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { CosmWasmClient, SigningCosmWasmClient, ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  InstantiateMsg,
+  ExecuteMsg,
+  Uint128,
+  Decimal,
+  Addr,
+  Empty,
+  Coin,
+  QueryMsg,
+  ConfigForString,
+  EstimateExactInSwapResponse,
+  RouteResponseForEmpty,
+  ArrayOfRouteResponseForEmpty,
+} from './SwapperBase.types'
+export interface SwapperBaseReadOnlyInterface {
+  contractAddress: string
+  config: () => Promise<ConfigForString>
+  route: ({
+    denomIn,
+    denomOut,
+  }: {
+    denomIn: string
+    denomOut: string
+  }) => Promise<RouteResponseForEmpty>
+  routes: ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }) => Promise<ArrayOfRouteResponseForEmpty>
+  estimateExactInSwap: ({
+    coinIn,
+    denomOut,
+  }: {
+    coinIn: Coin
+    denomOut: string
+  }) => Promise<EstimateExactInSwapResponse>
+}
+export class SwapperBaseQueryClient implements SwapperBaseReadOnlyInterface {
+  client: CosmWasmClient
+  contractAddress: string
+
+  constructor(client: CosmWasmClient, contractAddress: string) {
+    this.client = client
+    this.contractAddress = contractAddress
+    this.config = this.config.bind(this)
+    this.route = this.route.bind(this)
+    this.routes = this.routes.bind(this)
+    this.estimateExactInSwap = this.estimateExactInSwap.bind(this)
+  }
+
+  config = async (): Promise<ConfigForString> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      config: {},
+    })
+  }
+  route = async ({
+    denomIn,
+    denomOut,
+  }: {
+    denomIn: string
+    denomOut: string
+  }): Promise<RouteResponseForEmpty> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      route: {
+        denom_in: denomIn,
+        denom_out: denomOut,
+      },
+    })
+  }
+  routes = async ({
+    limit,
+    startAfter,
+  }: {
+    limit?: number
+    startAfter?: string[][]
+  }): Promise<ArrayOfRouteResponseForEmpty> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      routes: {
+        limit,
+        start_after: startAfter,
+      },
+    })
+  }
+  estimateExactInSwap = async ({
+    coinIn,
+    denomOut,
+  }: {
+    coinIn: Coin
+    denomOut: string
+  }): Promise<EstimateExactInSwapResponse> => {
+    return this.client.queryContractSmart(this.contractAddress, {
+      estimate_exact_in_swap: {
+        coin_in: coinIn,
+        denom_out: denomOut,
+      },
+    })
+  }
+}
+export interface SwapperBaseInterface extends SwapperBaseReadOnlyInterface {
+  contractAddress: string
+  sender: string
+  updateConfig: (
+    {
+      owner,
+    }: {
+      owner?: string
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  setRoute: (
+    {
+      denomIn,
+      denomOut,
+      route,
+    }: {
+      denomIn: string
+      denomOut: string
+      route: Empty
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  swapExactIn: (
+    {
+      coinIn,
+      denomOut,
+      slippage,
+    }: {
+      coinIn: Coin
+      denomOut: string
+      slippage: Decimal
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+  transferResult: (
+    {
+      denomIn,
+      denomOut,
+      recipient,
+    }: {
+      denomIn: string
+      denomOut: string
+      recipient: Addr
+    },
+    fee?: number | StdFee | 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ) => Promise<ExecuteResult>
+}
+export class SwapperBaseClient extends SwapperBaseQueryClient implements SwapperBaseInterface {
+  client: SigningCosmWasmClient
+  sender: string
+  contractAddress: string
+
+  constructor(client: SigningCosmWasmClient, sender: string, contractAddress: string) {
+    super(client, contractAddress)
+    this.client = client
+    this.sender = sender
+    this.contractAddress = contractAddress
+    this.updateConfig = this.updateConfig.bind(this)
+    this.setRoute = this.setRoute.bind(this)
+    this.swapExactIn = this.swapExactIn.bind(this)
+    this.transferResult = this.transferResult.bind(this)
+  }
+
+  updateConfig = async (
+    {
+      owner,
+    }: {
+      owner?: string
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        update_config: {
+          owner,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  setRoute = async (
+    {
+      denomIn,
+      denomOut,
+      route,
+    }: {
+      denomIn: string
+      denomOut: string
+      route: Empty
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        set_route: {
+          denom_in: denomIn,
+          denom_out: denomOut,
+          route,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  swapExactIn = async (
+    {
+      coinIn,
+      denomOut,
+      slippage,
+    }: {
+      coinIn: Coin
+      denomOut: string
+      slippage: Decimal
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        swap_exact_in: {
+          coin_in: coinIn,
+          denom_out: denomOut,
+          slippage,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+  transferResult = async (
+    {
+      denomIn,
+      denomOut,
+      recipient,
+    }: {
+      denomIn: string
+      denomOut: string
+      recipient: Addr
+    },
+    fee: number | StdFee | 'auto' = 'auto',
+    memo?: string,
+    funds?: Coin[],
+  ): Promise<ExecuteResult> => {
+    return await this.client.execute(
+      this.sender,
+      this.contractAddress,
+      {
+        transfer_result: {
+          denom_in: denomIn,
+          denom_out: denomOut,
+          recipient,
+        },
+      },
+      fee,
+      memo,
+      funds,
+    )
+  }
+}

types/generated/swapper-base/SwapperBase.react-query.ts

@@ -0,0 +1,237 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import { UseQueryOptions, useQuery, useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ExecuteResult } from '@cosmjs/cosmwasm-stargate'
+import { StdFee } from '@cosmjs/amino'
+import {
+  InstantiateMsg,
+  ExecuteMsg,
+  Uint128,
+  Decimal,
+  Addr,
+  Empty,
+  Coin,
+  QueryMsg,
+  ConfigForString,
+  EstimateExactInSwapResponse,
+  RouteResponseForEmpty,
+  ArrayOfRouteResponseForEmpty,
+} from './SwapperBase.types'
+import { SwapperBaseQueryClient, SwapperBaseClient } from './SwapperBase.client'
+export const swapperBaseQueryKeys = {
+  contract: [
+    {
+      contract: 'swapperBase',
+    },
+  ] as const,
+  address: (contractAddress: string | undefined) =>
+    [{ ...swapperBaseQueryKeys.contract[0], address: contractAddress }] as const,
+  config: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...swapperBaseQueryKeys.address(contractAddress)[0], method: 'config', args }] as const,
+  route: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...swapperBaseQueryKeys.address(contractAddress)[0], method: 'route', args }] as const,
+  routes: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [{ ...swapperBaseQueryKeys.address(contractAddress)[0], method: 'routes', args }] as const,
+  estimateExactInSwap: (contractAddress: string | undefined, args?: Record<string, unknown>) =>
+    [
+      {
+        ...swapperBaseQueryKeys.address(contractAddress)[0],
+        method: 'estimate_exact_in_swap',
+        args,
+      },
+    ] as const,
+}
+export interface SwapperBaseReactQuery<TResponse, TData = TResponse> {
+  client: SwapperBaseQueryClient | undefined
+  options?: Omit<
+    UseQueryOptions<TResponse, Error, TData>,
+    "'queryKey' | 'queryFn' | 'initialData'"
+  > & {
+    initialData?: undefined
+  }
+}
+export interface SwapperBaseEstimateExactInSwapQuery<TData>
+  extends SwapperBaseReactQuery<EstimateExactInSwapResponse, TData> {
+  args: {
+    coinIn: Coin
+    denomOut: string
+  }
+}
+export function useSwapperBaseEstimateExactInSwapQuery<TData = EstimateExactInSwapResponse>({
+  client,
+  args,
+  options,
+}: SwapperBaseEstimateExactInSwapQuery<TData>) {
+  return useQuery<EstimateExactInSwapResponse, Error, TData>(
+    swapperBaseQueryKeys.estimateExactInSwap(client?.contractAddress, args),
+    () =>
+      client
+        ? client.estimateExactInSwap({
+            coinIn: args.coinIn,
+            denomOut: args.denomOut,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface SwapperBaseRoutesQuery<TData>
+  extends SwapperBaseReactQuery<ArrayOfRouteResponseForEmpty, TData> {
+  args: {
+    limit?: number
+    startAfter?: string[][]
+  }
+}
+export function useSwapperBaseRoutesQuery<TData = ArrayOfRouteResponseForEmpty>({
+  client,
+  args,
+  options,
+}: SwapperBaseRoutesQuery<TData>) {
+  return useQuery<ArrayOfRouteResponseForEmpty, Error, TData>(
+    swapperBaseQueryKeys.routes(client?.contractAddress, args),
+    () =>
+      client
+        ? client.routes({
+            limit: args.limit,
+            startAfter: args.startAfter,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface SwapperBaseRouteQuery<TData>
+  extends SwapperBaseReactQuery<RouteResponseForEmpty, TData> {
+  args: {
+    denomIn: string
+    denomOut: string
+  }
+}
+export function useSwapperBaseRouteQuery<TData = RouteResponseForEmpty>({
+  client,
+  args,
+  options,
+}: SwapperBaseRouteQuery<TData>) {
+  return useQuery<RouteResponseForEmpty, Error, TData>(
+    swapperBaseQueryKeys.route(client?.contractAddress, args),
+    () =>
+      client
+        ? client.route({
+            denomIn: args.denomIn,
+            denomOut: args.denomOut,
+          })
+        : Promise.reject(new Error('Invalid client')),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface SwapperBaseConfigQuery<TData>
+  extends SwapperBaseReactQuery<ConfigForString, TData> {}
+export function useSwapperBaseConfigQuery<TData = ConfigForString>({
+  client,
+  options,
+}: SwapperBaseConfigQuery<TData>) {
+  return useQuery<ConfigForString, Error, TData>(
+    swapperBaseQueryKeys.config(client?.contractAddress),
+    () => (client ? client.config() : Promise.reject(new Error('Invalid client'))),
+    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) },
+  )
+}
+export interface SwapperBaseTransferResultMutation {
+  client: SwapperBaseClient
+  msg: {
+    denomIn: string
+    denomOut: string
+    recipient: Addr
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useSwapperBaseTransferResultMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, SwapperBaseTransferResultMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, SwapperBaseTransferResultMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.transferResult(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface SwapperBaseSwapExactInMutation {
+  client: SwapperBaseClient
+  msg: {
+    coinIn: Coin
+    denomOut: string
+    slippage: Decimal
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useSwapperBaseSwapExactInMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, SwapperBaseSwapExactInMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, SwapperBaseSwapExactInMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.swapExactIn(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface SwapperBaseSetRouteMutation {
+  client: SwapperBaseClient
+  msg: {
+    denomIn: string
+    denomOut: string
+    route: Empty
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useSwapperBaseSetRouteMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, SwapperBaseSetRouteMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, SwapperBaseSetRouteMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) => client.setRoute(msg, fee, memo, funds),
+    options,
+  )
+}
+export interface SwapperBaseUpdateConfigMutation {
+  client: SwapperBaseClient
+  msg: {
+    owner?: string
+  }
+  args?: {
+    fee?: number | StdFee | 'auto'
+    memo?: string
+    funds?: Coin[]
+  }
+}
+export function useSwapperBaseUpdateConfigMutation(
+  options?: Omit<
+    UseMutationOptions<ExecuteResult, Error, SwapperBaseUpdateConfigMutation>,
+    'mutationFn'
+  >,
+) {
+  return useMutation<ExecuteResult, Error, SwapperBaseUpdateConfigMutation>(
+    ({ client, msg, args: { fee, memo, funds } = {} }) =>
+      client.updateConfig(msg, fee, memo, funds),
+    options,
+  )
+}

types/generated/swapper-base/SwapperBase.types.ts

@@ -0,0 +1,82 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+export interface InstantiateMsg {
+  owner: string
+}
+export type ExecuteMsg =
+  | {
+      update_config: {
+        owner?: string | null
+      }
+    }
+  | {
+      set_route: {
+        denom_in: string
+        denom_out: string
+        route: Empty
+      }
+    }
+  | {
+      swap_exact_in: {
+        coin_in: Coin
+        denom_out: string
+        slippage: Decimal
+      }
+    }
+  | {
+      transfer_result: {
+        denom_in: string
+        denom_out: string
+        recipient: Addr
+      }
+    }
+export type Uint128 = string
+export type Decimal = string
+export type Addr = string
+export interface Empty {
+  [k: string]: unknown
+}
+export interface Coin {
+  amount: Uint128
+  denom: string
+  [k: string]: unknown
+}
+export type QueryMsg =
+  | {
+      config: {}
+    }
+  | {
+      route: {
+        denom_in: string
+        denom_out: string
+      }
+    }
+  | {
+      routes: {
+        limit?: number | null
+        start_after?: [string, string] | null
+      }
+    }
+  | {
+      estimate_exact_in_swap: {
+        coin_in: Coin
+        denom_out: string
+      }
+    }
+export interface ConfigForString {
+  owner: string
+}
+export interface EstimateExactInSwapResponse {
+  amount: Uint128
+}
+export interface RouteResponseForEmpty {
+  denom_in: string
+  denom_out: string
+  route: Empty
+}
+export type ArrayOfRouteResponseForEmpty = RouteResponseForEmpty[]

types/generated/swapper-base/bundle.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * This file was automatically generated by @cosmwasm/ts-codegen@0.16.5.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+ */
+
+import * as _18 from './SwapperBase.types'
+import * as _19 from './SwapperBase.client'
+import * as _20 from './SwapperBase.react-query'
+export namespace contracts {
+  export const SwapperBase = { ..._18, ..._19, ..._20 }
+}

types/index.ts

@@ -11,43 +11,43 @@ export enum EthereumChainId {
 }
 
 export enum ChainId {
-  Mainnet = "injective-1",
+  Mainnet = 'injective-1',
-  Testnet = "injective-888",
+  Testnet = 'injective-888',
-  Devnet = "injective-777",
+  Devnet = 'injective-777',
 }
 
 export enum Wallet {
-  Metamask = "metamask",
+  Metamask = 'metamask',
-  Ledger = "ledger",
+  Ledger = 'ledger',
-  LedgerLegacy = "ledger-legacy",
+  LedgerLegacy = 'ledger-legacy',
-  Trezor = "trezor",
+  Trezor = 'trezor',
-  Keplr = "keplr",
+  Keplr = 'keplr',
-  Torus = "torus",
+  Torus = 'torus',
-  WalletConnect = "wallet-connect",
+  WalletConnect = 'wallet-connect',
 }
 
 // COSMOS
 export enum CosmosChainId {
-  Injective = "injective-1",
+  Injective = 'injective-1',
-  Cosmoshub = "cosmoshub-4",
+  Cosmoshub = 'cosmoshub-4',
-  Juno = "juno-1",
+  Juno = 'juno-1',
-  Osmosis = "osmosis-1",
+  Osmosis = 'osmosis-1',
-  Terra = "columbus-5",
+  Terra = 'columbus-5',
-  TerraUST = "columbus-5",
+  TerraUST = 'columbus-5',
-  Chihuahua = "chihuahua-1",
+  Chihuahua = 'chihuahua-1',
-  Axelar = "axelar-dojo-1",
+  Axelar = 'axelar-dojo-1',
-  Evmos = "evmos_9001-2",
+  Evmos = 'evmos_9001-2',
-  Persistence = "core-1",
+  Persistence = 'core-1',
-  Secret = "secret-4",
+  Secret = 'secret-4',
-  Stride = "stride-1",
+  Stride = 'stride-1',
 }
 
 export enum TestnetCosmosChainId {
-  Injective = "injective-888",
+  Injective = 'injective-888',
-  Cosmoshub = "cosmoshub-testnet",
+  Cosmoshub = 'cosmoshub-testnet',
 }
 
 export enum DevnetCosmosChainId {
-  Injective = "injective-777",
+  Injective = 'injective-777',
-  Injective1 = "injective-777",
+  Injective1 = 'injective-777',
 }

types/keplr.d.ts

@@ -1,4 +1,4 @@
-import type { Window as KeplrWindow } from "@keplr-wallet/types";
+import type { Window as KeplrWindow } from '@keplr-wallet/types'
 
 declare global {
   interface Window extends KeplrWindow {}

types/query-keys-factory.ts

@@ -0,0 +1,7 @@
+export const queryKeys = {
+  allBalances: (address: string) => ['allBalances', address],
+  allowedCoins: () => ['allowedCoins'],
+  creditAccounts: (address: string) => ['creditAccounts', address],
+  creditAccountsPositions: (accountId: string) => ['creditAccountPositions', accountId],
+  tokenBalance: (address: string, denom: string) => ['tokenBalance', address, denom],
+}

utils/address.ts

@@ -1,18 +1,16 @@
-import { bech32 } from "bech32";
+import { bech32 } from 'bech32'
-import { Address } from "ethereumjs-util";
+import { Address } from 'ethereumjs-util'
 
 export const getInjectiveAddress = (address: string): string => {
-  const addressBuffer = Address.fromString(address.toString()).toBuffer();
+  const addressBuffer = Address.fromString(address.toString()).toBuffer()
 
-  return bech32.encode("inj", bech32.toWords(addressBuffer));
+  return bech32.encode('inj', bech32.toWords(addressBuffer))
-};
+}
 
 export const getAddressFromInjectiveAddress = (address: string): string => {
-  if (address.startsWith("0x")) {
+  if (address.startsWith('0x')) {
-    return address;
+    return address
   }
 
-  return `0x${Buffer.from(
+  return `0x${Buffer.from(bech32.fromWords(bech32.decode(address).words)).toString('hex')}`
-    bech32.fromWords(bech32.decode(address).words)
+}
-  ).toString("hex")}`;
-};

utils/chains.ts

@@ -0,0 +1,55 @@
+export const chainsInfo = {
+  Injective: {
+    chainId: 'injective-1',
+    rpc: 'https://tm.injective.network',
+    rest: 'https://lcd.injective.network',
+    stakeCurrency: {
+      coinDenom: 'INJ',
+      coinMinimalDenom: 'inj',
+      coinDecimals: 18,
+      coinGeckoId: 'injective-protocol',
+      coinImageUrl: '/tokens/injective.svg',
+    },
+    // works
+    // rest: "https://lcd.injective.network",
+  },
+  InjectiveTestnet: {
+    chainId: 'injective-888',
+    // need to check
+    rpc: 'https://testnet.tm.injective.dev',
+    rest: 'https://testnet.lcd.injective.dev',
+    stakeCurrency: {
+      coinDenom: 'INJ',
+      coinMinimalDenom: 'inj',
+      coinDecimals: 18,
+      coinGeckoId: 'injective-protocol',
+      coinImageUrl: '/tokens/injective.svg',
+    },
+  },
+  Osmosis: {
+    chainId: 'osmosis-1',
+    rpc: 'https://rpc.osmosis.zone',
+    rest: 'https://lcd.osmosis.zone',
+    stakeCurrency: {
+      coinDenom: 'OSMO',
+      coinMinimalDenom: 'uosmo',
+      coinDecimals: 6,
+      coinGeckoId: 'osmosis',
+      coinImageUrl: '/tokens/osmo.svg',
+    },
+  },
+  OsmosisTestnet: {
+    chainId: 'osmo-test-4',
+    rpc: 'https://rpc-test.osmosis.zone',
+    rest: 'https://lcd-test.osmosis.zone',
+    stakeCurrency: {
+      coinDenom: 'OSMO',
+      coinMinimalDenom: 'uosmo',
+      coinDecimals: 6,
+      coinGeckoId: 'osmosis',
+      coinImageUrl: '/tokens/osmo.svg',
+    },
+  },
+}
+
+export const chain = chainsInfo.OsmosisTestnet

utils/contants.ts

@@ -0,0 +1,13 @@
+import { chain } from 'utils/chains'
+
+// StdFee
+// TODO: decide some strategy to handle fees
+export const hardcodedFee = {
+  amount: [
+    {
+      denom: chain.stakeCurrency.coinMinimalDenom,
+      amount: '100000',
+    },
+  ],
+  gas: '750000',
+}

utils/experimental-chains.ts

@@ -1,10 +1,5 @@
-import { Bech32Address } from "@keplr-wallet/cosmos";
+import { Bech32Address } from '@keplr-wallet/cosmos'
-import {
+import { ChainId, CosmosChainId, DevnetCosmosChainId, TestnetCosmosChainId } from 'types'
-  ChainId,
-  CosmosChainId,
-  DevnetCosmosChainId,
-  TestnetCosmosChainId,
-} from "types";
 
 export const getEndpointsFromChainId = (
   chainId: TestnetCosmosChainId | CosmosChainId | ChainId | DevnetCosmosChainId
@@ -12,154 +7,154 @@ export const getEndpointsFromChainId = (
   switch (chainId) {
     case CosmosChainId.Cosmoshub:
       return {
-        rpc: "https://tm.cosmos.injective.network",
+        rpc: 'https://tm.cosmos.injective.network',
-        rest: "https://lcd.cosmos.injective.network",
+        rest: 'https://lcd.cosmos.injective.network',
-      };
+      }
     case CosmosChainId.Osmosis:
       return {
-        rpc: "https://tm.osmosis.injective.network",
+        rpc: 'https://tm.osmosis.injective.network',
-        rest: "https://lcd.osmosis.injective.network",
+        rest: 'https://lcd.osmosis.injective.network',
-      };
+      }
     case CosmosChainId.Injective:
       return {
-        rpc: "https://tm.injective.network",
+        rpc: 'https://tm.injective.network',
-        rest: "https://lcd.injective.network",
+        rest: 'https://lcd.injective.network',
-      };
+      }
     case CosmosChainId.Juno:
       return {
-        rpc: "https://tm.juno.injective.network",
+        rpc: 'https://tm.juno.injective.network',
-        rest: "https://lcd.juno.injective.network",
+        rest: 'https://lcd.juno.injective.network',
-      };
+      }
     case CosmosChainId.Terra:
       return {
-        rpc: "https://tm.terra.injective.network",
+        rpc: 'https://tm.terra.injective.network',
-        rest: "https://lcd.terra.injective.network",
+        rest: 'https://lcd.terra.injective.network',
-      };
+      }
     case CosmosChainId.TerraUST:
       return {
-        rpc: "https://tm.terra.injective.network",
+        rpc: 'https://tm.terra.injective.network',
-        rest: "https://lcd.terra.injective.network",
+        rest: 'https://lcd.terra.injective.network',
-      };
+      }
     case TestnetCosmosChainId.Cosmoshub:
       return {
-        rpc: "https://testnet.tm.cosmos.injective.dev",
+        rpc: 'https://testnet.tm.cosmos.injective.dev',
-        rest: "https://testnet.lcd.cosmos.injective.dev",
+        rest: 'https://testnet.lcd.cosmos.injective.dev',
-      };
+      }
     case TestnetCosmosChainId.Injective:
       return {
-        rpc: "https://testnet.tm.injective.dev",
+        rpc: 'https://testnet.tm.injective.dev',
-        rest: "https://testnet.lcd.injective.dev",
+        rest: 'https://testnet.lcd.injective.dev',
-      };
+      }
     case DevnetCosmosChainId.Injective:
       return {
-        rpc: "https://devnet.tm.injective.dev",
+        rpc: 'https://devnet.tm.injective.dev',
-        rest: "https://devnet.lcd.injective.dev",
+        rest: 'https://devnet.lcd.injective.dev',
-      };
+      }
     case CosmosChainId.Chihuahua:
       return {
-        rpc: "https://rpc.chihuahua.wtf",
+        rpc: 'https://rpc.chihuahua.wtf',
-        rest: "https://api.chihuahua.wtf",
+        rest: 'https://api.chihuahua.wtf',
-      };
+      }
     case CosmosChainId.Axelar:
       return {
-        rpc: "https://tm.axelar.injective.network",
+        rpc: 'https://tm.axelar.injective.network',
-        rest: "https://lcd.axelar.injective.network",
+        rest: 'https://lcd.axelar.injective.network',
-      };
+      }
     case CosmosChainId.Evmos:
       return {
-        rpc: "https://tm.evmos.injective.network",
+        rpc: 'https://tm.evmos.injective.network',
-        rest: "https://lcd.evmos.injective.network",
+        rest: 'https://lcd.evmos.injective.network',
-      };
+      }
     case CosmosChainId.Persistence:
       return {
-        rpc: "https://tm.persistence.injective.network",
+        rpc: 'https://tm.persistence.injective.network',
-        rest: "https://lcd.persistence.injective.network",
+        rest: 'https://lcd.persistence.injective.network',
-      };
+      }
     case CosmosChainId.Secret:
       return {
-        rpc: "https://tm.secret.injective.network",
+        rpc: 'https://tm.secret.injective.network',
-        rest: "https://lcd.secret.injective.network",
+        rest: 'https://lcd.secret.injective.network',
-      };
+      }
     case CosmosChainId.Stride:
       return {
-        rpc: "https://tm.stride.injective.network",
+        rpc: 'https://tm.stride.injective.network',
-        rest: "https://lcd.stride.injective.network",
+        rest: 'https://lcd.stride.injective.network',
-      };
+      }
     default:
-      throw new Error(`Endpoints for ${chainId} not found`);
+      throw new Error(`Endpoints for ${chainId} not found`)
   }
-};
+}
 
 export const experimentalChainsConfig = {
   [TestnetCosmosChainId.Cosmoshub]: {
     ...getEndpointsFromChainId(TestnetCosmosChainId.Cosmoshub),
     rpcConfig: undefined,
     restConfig: undefined,
-    chainId: "cosmoshub-testnet",
+    chainId: 'cosmoshub-testnet',
-    chainName: "Cosmos Testnet",
+    chainName: 'Cosmos Testnet',
     stakeCurrency: {
-      coinDenom: "UPHOTON",
+      coinDenom: 'UPHOTON',
-      coinMinimalDenom: "uphoton",
+      coinMinimalDenom: 'uphoton',
       coinDecimals: 6,
-      coinGeckoId: "cosmos",
+      coinGeckoId: 'cosmos',
     },
-    walletUrl: "https://wallet.keplr.app/#/cosmoshub/stake",
+    walletUrl: 'https://wallet.keplr.app/#/cosmoshub/stake',
-    walletUrlForStaking: "https://wallet.keplr.app/#/cosmoshub/stake",
+    walletUrlForStaking: 'https://wallet.keplr.app/#/cosmoshub/stake',
     bip44: {
       coinType: 118,
     },
-    bech32Config: Bech32Address.defaultBech32Config("cosmos"),
+    bech32Config: Bech32Address.defaultBech32Config('cosmos'),
     currencies: [
       {
-        coinDenom: "UPHOTON",
+        coinDenom: 'UPHOTON',
-        coinMinimalDenom: "uphoton",
+        coinMinimalDenom: 'uphoton',
         coinDecimals: 6,
-        coinGeckoId: "cosmos",
+        coinGeckoId: 'cosmos',
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "UPHOTON",
+        coinDenom: 'UPHOTON',
-        coinMinimalDenom: "uphoton",
+        coinMinimalDenom: 'uphoton',
         coinDecimals: 6,
-        coinGeckoId: "cosmos",
+        coinGeckoId: 'cosmos',
       },
     ],
     coinType: 118,
-    features: ["ibc-transfer"],
+    features: ['ibc-transfer'],
   },
   [TestnetCosmosChainId.Injective]: {
     ...getEndpointsFromChainId(TestnetCosmosChainId.Injective),
     rpcConfig: undefined,
     restConfig: undefined,
-    chainId: "injective-888",
+    chainId: 'injective-888',
-    chainName: "Injective Testnet",
+    chainName: 'Injective Testnet',
     stakeCurrency: {
-      coinDenom: "INJ",
+      coinDenom: 'INJ',
-      coinMinimalDenom: "inj",
+      coinMinimalDenom: 'inj',
       coinDecimals: 18,
-      coinGeckoId: "injective-protocol",
+      coinGeckoId: 'injective-protocol',
     },
-    walletUrl: "https://hub.injective.dev/",
+    walletUrl: 'https://hub.injective.dev/',
-    walletUrlForStaking: "https://hub.injective.dev/",
+    walletUrlForStaking: 'https://hub.injective.dev/',
     bip44: {
       coinType: 60,
     },
-    bech32Config: Bech32Address.defaultBech32Config("inj"),
+    bech32Config: Bech32Address.defaultBech32Config('inj'),
     currencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     gasPriceStep: {
@@ -168,40 +163,40 @@ export const experimentalChainsConfig = {
       high: 40000000000,
     },
     coinType: 60,
-    features: ["ibc-transfer", "ibc-go", "eth-address-gen", "eth-key-sign"],
+    features: ['ibc-transfer', 'ibc-go', 'eth-address-gen', 'eth-key-sign'],
   },
   [DevnetCosmosChainId.Injective]: {
     ...getEndpointsFromChainId(DevnetCosmosChainId.Injective),
     rpcConfig: undefined,
     restConfig: undefined,
-    chainId: "injective-777",
+    chainId: 'injective-777',
-    chainName: "Injective - Devnet",
+    chainName: 'Injective - Devnet',
     stakeCurrency: {
-      coinDenom: "INJ",
+      coinDenom: 'INJ',
-      coinMinimalDenom: "inj",
+      coinMinimalDenom: 'inj',
       coinDecimals: 18,
-      coinGeckoId: "injective-protocol",
+      coinGeckoId: 'injective-protocol',
     },
-    walletUrl: "https://hub.injective.dev/",
+    walletUrl: 'https://hub.injective.dev/',
-    walletUrlForStaking: "https://hub.injective.dev/",
+    walletUrlForStaking: 'https://hub.injective.dev/',
     bip44: {
       coinType: 60,
     },
-    bech32Config: Bech32Address.defaultBech32Config("inj"),
+    bech32Config: Bech32Address.defaultBech32Config('inj'),
     currencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     gasPriceStep: {
@@ -210,40 +205,40 @@ export const experimentalChainsConfig = {
       high: 40000000000,
     },
     coinType: 60,
-    features: ["ibc-transfer", "ibc-go", "eth-address-gen", "eth-key-sign"],
+    features: ['ibc-transfer', 'ibc-go', 'eth-address-gen', 'eth-key-sign'],
   },
   [CosmosChainId.Injective]: {
     ...getEndpointsFromChainId(CosmosChainId.Injective),
     rpcConfig: undefined,
     restConfig: undefined,
-    chainId: "injective-1",
+    chainId: 'injective-1',
-    chainName: "Injective - Beta",
+    chainName: 'Injective - Beta',
     stakeCurrency: {
-      coinDenom: "INJ",
+      coinDenom: 'INJ',
-      coinMinimalDenom: "inj",
+      coinMinimalDenom: 'inj',
       coinDecimals: 18,
-      coinGeckoId: "injective-protocol",
+      coinGeckoId: 'injective-protocol',
     },
-    walletUrl: "https://hub.injective.network/",
+    walletUrl: 'https://hub.injective.network/',
-    walletUrlForStaking: "https://hub.injective.network/",
+    walletUrlForStaking: 'https://hub.injective.network/',
     bip44: {
       coinType: 60,
     },
-    bech32Config: Bech32Address.defaultBech32Config("inj"),
+    bech32Config: Bech32Address.defaultBech32Config('inj'),
     currencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "INJ",
+        coinDenom: 'INJ',
-        coinMinimalDenom: "inj",
+        coinMinimalDenom: 'inj',
         coinDecimals: 18,
-        coinGeckoId: "injective-protocol",
+        coinGeckoId: 'injective-protocol',
       },
     ],
     gasPriceStep: {
@@ -251,52 +246,52 @@ export const experimentalChainsConfig = {
       average: 25000000000,
       high: 40000000000,
     },
-    features: ["ibc-transfer", "ibc-go", "eth-address-gen", "eth-key-sign"],
+    features: ['ibc-transfer', 'ibc-go', 'eth-address-gen', 'eth-key-sign'],
     beta: true,
   },
   [CosmosChainId.Terra]: {
     ...getEndpointsFromChainId(CosmosChainId.Terra),
     rpcConfig: undefined,
     restConfig: undefined,
-    chainId: "columbus-5",
+    chainId: 'columbus-5',
-    chainName: "Terra",
+    chainName: 'Terra',
     stakeCurrency: {
-      coinDenom: "LUNA",
+      coinDenom: 'LUNA',
-      coinMinimalDenom: "uluna",
+      coinMinimalDenom: 'uluna',
       coinDecimals: 6,
-      coinGeckoId: "terra-luna",
+      coinGeckoId: 'terra-luna',
     },
-    walletUrl: "https://station.terra.money/wallet",
+    walletUrl: 'https://station.terra.money/wallet',
-    walletUrlForStaking: "https://station.terra.money/wallet",
+    walletUrlForStaking: 'https://station.terra.money/wallet',
     bip44: {
       coinType: 118,
     },
-    bech32Config: Bech32Address.defaultBech32Config("terra"),
+    bech32Config: Bech32Address.defaultBech32Config('terra'),
     currencies: [
       {
-        coinDenom: "LUNA",
+        coinDenom: 'LUNA',
-        coinMinimalDenom: "uluna",
+        coinMinimalDenom: 'uluna',
         coinDecimals: 6,
-        coinGeckoId: "terra-luna",
+        coinGeckoId: 'terra-luna',
       },
       {
-        coinDenom: "UST",
+        coinDenom: 'UST',
-        coinMinimalDenom: "uusd",
+        coinMinimalDenom: 'uusd',
-        coinGeckoId: "terrausd",
+        coinGeckoId: 'terrausd',
         coinDecimals: 6,
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "LUNA",
+        coinDenom: 'LUNA',
-        coinMinimalDenom: "uluna",
+        coinMinimalDenom: 'uluna',
-        coinGeckoId: "terra-luna",
+        coinGeckoId: 'terra-luna',
         coinDecimals: 6,
       },
       {
-        coinDenom: "UST",
+        coinDenom: 'UST',
-        coinMinimalDenom: "uusd",
+        coinMinimalDenom: 'uusd',
-        coinGeckoId: "terrausd",
+        coinGeckoId: 'terrausd',
         coinDecimals: 6,
       },
     ],
@@ -306,32 +301,32 @@ export const experimentalChainsConfig = {
       average: 0.3,
       high: 0.04,
     },
-    features: ["ibc-transfer"],
+    features: ['ibc-transfer'],
   },
   [CosmosChainId.Chihuahua]: {
     ...getEndpointsFromChainId(CosmosChainId.Chihuahua),
-    chainId: "chihuahua-1",
+    chainId: 'chihuahua-1',
-    chainName: "Chihuahua",
+    chainName: 'Chihuahua',
     stakeCurrency: {
-      coinDenom: "HUAHUA",
+      coinDenom: 'HUAHUA',
-      coinMinimalDenom: "uhuahua",
+      coinMinimalDenom: 'uhuahua',
       coinDecimals: 6,
     },
     bip44: {
       coinType: 118,
     },
-    bech32Config: Bech32Address.defaultBech32Config("chihuahua"),
+    bech32Config: Bech32Address.defaultBech32Config('chihuahua'),
     currencies: [
       {
-        coinDenom: "HUAHUA",
+        coinDenom: 'HUAHUA',
-        coinMinimalDenom: "uhuahua",
+        coinMinimalDenom: 'uhuahua',
         coinDecimals: 6,
       },
     ],
     feeCurrencies: [
       {
-        coinDenom: "HUAHUA",
+        coinDenom: 'HUAHUA',
-        coinMinimalDenom: "uhuahua",
+        coinMinimalDenom: 'uhuahua',
         coinDecimals: 6,
       },
     ],
@@ -340,10 +335,9 @@ export const experimentalChainsConfig = {
       average: 0.03,
       high: 0.035,
     },
-    features: ["ibc-transfer", "ibc-go"],
+    features: ['ibc-transfer', 'ibc-go'],
   },
-} as Record<string, any>;
+} as Record<string, any>
 
-export const getExperimentalChainConfigBasedOnChainId = (
+export const getExperimentalChainConfigBasedOnChainId = (chainId: string): any | undefined =>
-  chainId: string
+  experimentalChainsConfig[chainId]
-): any | undefined => experimentalChainsConfig[chainId];

utils/formatters.ts

@@ -1,17 +1,17 @@
-export const formatWalletAddress = (
+export const formatWalletAddress = (address: string, substrLength = 6): string => {
-  address: string,
-  substrLength = 6
-): string => {
   if (address.length <= 10) {
-    return address;
+    return address
   }
 
   return `${address.slice(0, substrLength)}...${address.slice(
     address.length - substrLength,
     address.length
-  )}`;
+  )}`
-};
+}
 
 export const formatCurrency = (value: string | number) => {
-  return Number(value).toLocaleString();
+  return Number(value).toLocaleString('en-US', {
-};
+    style: 'currency',
+    currency: 'USD',
+  })
+}

utils/tokens.ts

@@ -0,0 +1,9 @@
+import tokenInfo from 'config/tokenInfo'
+
+export const getTokenSymbol = (denom: string) => {
+  return tokenInfo[denom]?.symbol ?? denom
+}
+
+export const getTokenDecimals = (denom: string) => {
+  return tokenInfo[denom]?.decimals ?? 6
+}

yarn.lock

@@ -336,6 +336,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.18.10", "@babel/template@^7.18.6":
   version "7.18.10"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz"
@@ -370,6 +377,41 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@confio/ics23@^0.6.8":
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@confio/ics23/-/ics23-0.6.8.tgz#2a6b4f1f2b7b20a35d9a0745bb5a446e72930b3d"
+  integrity sha512-wB6uo+3A50m0sW/EWcU64xpV/8wShZ6bMTa7pF8eYsTrSkQA7oLUIJcs/wb8g4y2Oyq701BaGiO6n/ak5WXO1w==
+  dependencies:
+    "@noble/hashes" "^1.0.0"
+    protobufjs "^6.8.8"
+
+"@cosmjs/amino@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.29.0.tgz#35873a580a6102e48415ed2b5b97477f146fb50d"
+  integrity sha512-/ZUVx6nRN5YE36H3SDq9+i8g2nZ8DJQnN9fVRC8rSHQKauNkoEuK4NxTNcQ2o2EBLUT0kyYAFY2550HVsPMrgw==
+  dependencies:
+    "@cosmjs/crypto" "^0.29.0"
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+
+"@cosmjs/cosmwasm-stargate@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.29.0.tgz#dea1c16fe80daf14072c3796574fe8cb34a3729b"
+  integrity sha512-KoNc0XpK6Gh4CITpyMXIuhIdZu59lF3wO1pHabeEZ0v7w3U0tFdCbDppe2RufCkERDZZCGFxnoRmr0KL2wK6Tw==
+  dependencies:
+    "@cosmjs/amino" "^0.29.0"
+    "@cosmjs/crypto" "^0.29.0"
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/proto-signing" "^0.29.0"
+    "@cosmjs/stargate" "^0.29.0"
+    "@cosmjs/tendermint-rpc" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+    cosmjs-types "^0.5.0"
+    long "^4.0.0"
+    pako "^2.0.2"
+
 "@cosmjs/crypto@^0.24.1":
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.24.1.tgz#62da59c32b26344f26b10dd31a02b93655586d04"
@@ -388,6 +430,19 @@
     sha.js "^2.4.11"
     unorm "^1.5.0"
 
+"@cosmjs/crypto@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.29.0.tgz#c914424a8b538f6624e505bc2015a71e3977c2fb"
+  integrity sha512-MPJoebRGh7AcZgbfR25ci7iV+XzJiKwVq4wL8n6M5P2QdrIv7DqqniyFXcBbn9dQjMLMHnOSgT9LRv+VXzUVCA==
+  dependencies:
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+    "@noble/hashes" "^1"
+    bn.js "^5.2.0"
+    elliptic "^6.5.3"
+    libsodium-wrappers "^0.7.6"
+
 "@cosmjs/encoding@^0.20.0":
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
@@ -406,6 +461,23 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
+"@cosmjs/encoding@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.29.0.tgz#75b1b41a2f31f71fcb0982cd1b210d6410739fd0"
+  integrity sha512-6HDBtid/YLbyXapY6PdMMIigAtGKyD1w0dUCLU1dOIkPf1q3y43kqoA7WnLkRw0g0/lZY1VGM2fX+2RWU0wxYg==
+  dependencies:
+    base64-js "^1.3.0"
+    bech32 "^1.1.4"
+    readonly-date "^1.0.0"
+
+"@cosmjs/json-rpc@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.29.0.tgz#481f282bcb3457c71f393342691e957a4fa56535"
+  integrity sha512-noCt91X+dSYjW1BYbp5jFaYaA/PWIQFXOgl4ZDW0ecGOAj8xh6/D/Vd8bDO97CQgJ1KVw0pyAqVhmrBOBUo1sA==
+  dependencies:
+    "@cosmjs/stream" "^0.29.0"
+    xstream "^11.14.0"
+
 "@cosmjs/launchpad@^0.24.0-alpha.25", "@cosmjs/launchpad@^0.24.1":
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/launchpad/-/launchpad-0.24.1.tgz#fe7e80734dfd60ea093429a646d7a38634c70134"
@@ -432,6 +504,13 @@
   dependencies:
     bn.js "^4.11.8"
 
+"@cosmjs/math@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.29.0.tgz#2c34f96d94055fe82ca310bec7b2d8a9f1c507cb"
+  integrity sha512-ufRRmyDQtJUrH8r1V4N7Q6rTOk9ZX7XIXjJto7cfXP8kcxm7IJXKYk+r0EfDnNHFkxTidYvW/1YXeeNoy8xZYw==
+  dependencies:
+    bn.js "^5.2.0"
+
 "@cosmjs/proto-signing@^0.24.0-alpha.25":
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.24.1.tgz#4ee38d4e0d29c626344fb832235fda8e8d645c28"
@@ -441,6 +520,70 @@
     long "^4.0.0"
     protobufjs "~6.10.2"
 
+"@cosmjs/proto-signing@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.29.0.tgz#4d9c10fc3a5c64b454bd2d9b407861fcffdfbbe0"
+  integrity sha512-zAdgDz5vRGAfJ5yyKYuTL7qg5UNUT7v4iV1/ZP8ZQn2fLh9QVxViAIovF4r/Y3EEI4JS5uYj/f8UeHMHQSu8hw==
+  dependencies:
+    "@cosmjs/amino" "^0.29.0"
+    "@cosmjs/crypto" "^0.29.0"
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+    cosmjs-types "^0.5.0"
+    long "^4.0.0"
+
+"@cosmjs/socket@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.29.0.tgz#6f8f56799e69ead02f9ffe8925c782804635ac89"
+  integrity sha512-y7cOBp6YJ2Sn/DZne1eiJ6PVkgZlAi48d0Bz6hVuZ6CliutG0BzM/F3bSLxdw8m2fXNU+lYsi4uLPd0epf5Hig==
+  dependencies:
+    "@cosmjs/stream" "^0.29.0"
+    isomorphic-ws "^4.0.1"
+    ws "^7"
+    xstream "^11.14.0"
+
+"@cosmjs/stargate@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.29.0.tgz#55263ed9d414f2c3073a451527576e4c3d6f04a6"
+  integrity sha512-BsV3iA3vMclMm/B1LYO0djBYCALr/UIvL6u9HGvM7QvpdtpQiAvskuS4PieVO/gtF9iCCBJLPqa0scwFIgvDyg==
+  dependencies:
+    "@confio/ics23" "^0.6.8"
+    "@cosmjs/amino" "^0.29.0"
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/proto-signing" "^0.29.0"
+    "@cosmjs/stream" "^0.29.0"
+    "@cosmjs/tendermint-rpc" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+    cosmjs-types "^0.5.0"
+    long "^4.0.0"
+    protobufjs "~6.11.3"
+    xstream "^11.14.0"
+
+"@cosmjs/stream@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.29.0.tgz#df2d7ea23293170bc192e91c0fa3e9f8d993b7cc"
+  integrity sha512-KAJ9sNoXhF19wtkoJf3O2y4YXfklDZgmXhDotgAejLrw2ixoVfTodMHvnl6tpw3ZnmXKibTfUaNXWZD++sG6uQ==
+  dependencies:
+    xstream "^11.14.0"
+
+"@cosmjs/tendermint-rpc@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.29.0.tgz#db71e743d2ee8dde706c09bc92ac47cc6197f672"
+  integrity sha512-G+42oGh+tw8/KV0gLAGzNCTe/6mkf7VUE5noSTbsxbeliFR7Lt4i6H2aqvWzmlZFeRxunR7AsQr4wakvlVNWyg==
+  dependencies:
+    "@cosmjs/crypto" "^0.29.0"
+    "@cosmjs/encoding" "^0.29.0"
+    "@cosmjs/json-rpc" "^0.29.0"
+    "@cosmjs/math" "^0.29.0"
+    "@cosmjs/socket" "^0.29.0"
+    "@cosmjs/stream" "^0.29.0"
+    "@cosmjs/utils" "^0.29.0"
+    axios "^0.21.2"
+    readonly-date "^1.0.0"
+    xstream "^11.14.0"
+
 "@cosmjs/utils@^0.20.0":
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.20.1.tgz#4d239b7d93c15523cdf109f225cbf61326fb69cd"
@@ -451,6 +594,11 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.24.1.tgz#0adfefe63b7f17222bc2bc12f71296f35e7ad378"
   integrity sha512-VA3WFx1lMFb7esp9BqHWkDgMvHoA3D9w+uDRvWhVRpUpDc7RYHxMbWExASjz+gNblTCg556WJGzF64tXnf9tdQ==
 
+"@cosmjs/utils@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.29.0.tgz#0a61e6d608e9f6f89a278cc71f4e7cee01199657"
+  integrity sha512-NiJk3ISX+FU1cQcTTgmJcY84A8mV/p8L5CRewp/2jc/lUmo8j9lMGbX17U7NxVQ9RX5RmrwgdjYnBASzhRCVmA==
+
 "@eslint/eslintrc@^1.3.1":
   version "1.3.1"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz"
@@ -770,6 +918,11 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz#20fed129b04a0d3f632c6d0de135345bb623b1e4"
   integrity sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==
 
+"@noble/hashes@^1", "@noble/hashes@^1.0.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.1.2.tgz#e9e035b9b166ca0af657a7848eb2718f0f22f183"
+  integrity sha512-KYRCASVTv6aeUi1tsF8/vpyR7zpfs3FUzy2Jqm+MU+LmUKhQ0y2FpfwqkCcxSg2ua4GALJd8k2R76WxwZGbQpA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -844,6 +997,123 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@radix-ui/number@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
+  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-collection@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
+  integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.0"
+
+"@radix-ui/react-slider@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e"
+  integrity sha512-LMZET7vn7HYwYSjsc9Jcen8Vn4cJXZZxQT7T+lGlqp+F+FofX+H86TBF2yDq+L51d99f1KLEsflTGBz9WRLSig==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-previous" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+
+"@radix-ui/react-slot@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-previous@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
+  integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-size@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@rollup/plugin-sucrase@4.0.4":
   version "4.0.4"
   resolved "https://registry.npmjs.org/@rollup/plugin-sucrase/-/plugin-sucrase-4.0.4.tgz"
@@ -1360,7 +1630,7 @@ axios@0.21.1:
   dependencies:
     follow-redirects "^1.10.0"
 
-axios@^0.21.1:
+axios@^0.21.1, axios@^0.21.2:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
@@ -1803,6 +2073,14 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cosmjs-types@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.5.1.tgz#f9bc35e78c32b687fb6018dc573eb454b3ae2587"
+  integrity sha512-NcC58xUIVLlKdIimWWQAmSlmCjiMrJnuHf4i3LiD8PCextfHR0fT3V5/WlXZZreyMgdmh6ML1zPUfGTbbo3Z5g==
+  dependencies:
+    long "^4.0.0"
+    protobufjs "~6.11.2"
+
 create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -2646,6 +2924,13 @@ globals@^13.15.0:
   dependencies:
     type-fest "^0.20.2"
 
+globalthis@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
 globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
@@ -3058,6 +3343,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isomorphic-ws@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz#55fd4cd6c5e6491e76dc125938dd863f5cd4f2dc"
+  integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
+
 js-crypto-env@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/js-crypto-env/-/js-crypto-env-0.3.2.tgz#02195723469da14449338ca2789fd7ff6784c533"
@@ -3724,6 +4014,11 @@ pako@1.0.11:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+pako@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d"
+  integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -3900,7 +4195,7 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-protobufjs@6.11.3, protobufjs@^6.11.2:
+protobufjs@6.11.3, protobufjs@^6.11.2, protobufjs@^6.8.8, protobufjs@~6.11.2, protobufjs@~6.11.3:
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74"
   integrity sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==
@@ -4519,6 +4814,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+symbol-observable@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-2.0.3.tgz#5b521d3d07a43c351055fa43b8355b62d33fd16a"
+  integrity sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==
+
 tailwindcss@^3.1.8:
   version "3.1.8"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz"
@@ -4822,6 +5122,19 @@ write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+ws@^7:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
+xstream@^11.14.0:
+  version "11.14.0"
+  resolved "https://registry.yarnpkg.com/xstream/-/xstream-11.14.0.tgz#2c071d26b18310523b6877e86b4e54df068a9ae5"
+  integrity sha512-1bLb+kKKtKPbgTK6i/BaoAn03g47PpFstlbe1BA+y3pNS/LfvcaghS5BFf9+EE1J+KwSQsEpfJvFN5GqFtiNmw==
+  dependencies:
+    globalthis "^1.0.1"
+    symbol-observable "^2.0.3"
+
 xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"