diff --git a/templates/chain-admin/components/asset-list/AssetListSection.tsx b/templates/chain-admin/components/asset-list/AssetListSection.tsx
index e4189f1e..ac78f049 100644
--- a/templates/chain-admin/components/asset-list/AssetListSection.tsx
+++ b/templates/chain-admin/components/asset-list/AssetListSection.tsx
@@ -1,20 +1,20 @@
import React from 'react';
import { Text, Box } from '@interchain-ui/react';
+import { useChain } from '@interchain-kit/react';
+
import AssetsOverview from './AssetsOverview';
-import { useChain } from '@cosmos-kit/react';
import { useAssets } from '@/hooks';
-import { ChainName } from 'cosmos-kit';
interface AssetListSectionProps {
- chainName: ChainName;
+ chainName: string;
children?: React.ReactNode;
}
export const AssetListSection = ({ chainName }: AssetListSectionProps) => {
- const { isWalletConnected } = useChain(chainName);
+ const { address } = useChain(chainName);
const { data, isLoading, refetch } = useAssets(chainName);
- if (!isWalletConnected) {
+ if (!address) {
return (
;
- selectedChainName: ChainName;
+ selectedChainName: string;
refetch?: () => void;
}
@@ -150,13 +148,13 @@ const AssetsOverview = ({
0}
showWithdraw={hasBalance}
onDeposit={onDepositAsset}
onWithdraw={onWithdrawAsset}
singleChainHeader={{
- label: `Total on ${chain.pretty_name}`,
+ label: `Total on ${chain.prettyName}`,
value: `${data?.total ?? 0}`,
}}
list={assetsToShow}
diff --git a/templates/chain-admin/components/asset-list/DropdownTransferModal.tsx b/templates/chain-admin/components/asset-list/DropdownTransferModal.tsx
index fde312b7..da0e33dd 100644
--- a/templates/chain-admin/components/asset-list/DropdownTransferModal.tsx
+++ b/templates/chain-admin/components/asset-list/DropdownTransferModal.tsx
@@ -4,14 +4,22 @@ import {
OverviewTransfer,
OverviewTransferProps,
} from '@interchain-ui/react';
-import { useChainWallet, useManager } from '@cosmos-kit/react';
+import { useChainWallet, useWalletManager } from '@interchain-kit/react';
import BigNumber from 'bignumber.js';
-import { ibc } from 'osmo-query';
-import { StdFee, coins } from '@cosmjs/amino';
-import { ChainName } from 'cosmos-kit';
-import { keplrWalletName } from '@/config';
-import { useDisclosure, useChainUtils, useTx, useBalance } from '@/hooks';
+import { useTransfer } from '@interchainjs/react/ibc/applications/transfer/v1/tx.rpc.react';
+import { MsgTransfer } from '@interchainjs/react/ibc/applications/transfer/v1/tx';
+import { defaultContext } from '@tanstack/react-query';
+import { StdFee } from '@interchainjs/react/types';
+
import { truncDecimals } from '@/utils';
+import { keplrWalletName } from '@/config';
+import {
+ useDisclosure,
+ useChainUtils,
+ useBalance,
+ useToastHandlers,
+ useSigningClient,
+} from '@/hooks';
import {
PrettyAsset,
@@ -21,8 +29,6 @@ import {
Unpacked,
} from './types';
-const { transfer } = ibc.applications.transfer.v1.MessageComposer.withTypeUrl;
-
const ZERO_AMOUNT = '0';
interface OverviewTransferWrapperProps {
@@ -36,13 +42,11 @@ interface OverviewTransferWrapperProps {
React.SetStateAction
>;
};
- selectedChainName: ChainName;
+ selectedChainName: string;
}
const OverviewTransferWrapper = (
props: OverviewTransferWrapperProps & {
- isLoading: boolean;
- setIsLoading: React.Dispatch>;
inputValue: string;
setInputValue: React.Dispatch>;
}
@@ -54,8 +58,6 @@ const OverviewTransferWrapper = (
transferInfoState,
updateData,
selectedChainName,
- isLoading,
- setIsLoading,
inputValue,
setInputValue,
} = props;
@@ -92,8 +94,17 @@ const OverviewTransferWrapper = (
keplrWalletName
);
- const { getChainLogo } = useManager();
- const { tx } = useTx(sourceChainName);
+ const { getChainLogoUrl } = useWalletManager();
+
+ const toastHandlers = useToastHandlers();
+ const { data: signingClient } = useSigningClient(sourceChainName);
+ const { mutate: transfer, isLoading } = useTransfer({
+ clientResolver: signingClient,
+ options: {
+ context: defaultContext,
+ ...toastHandlers,
+ },
+ });
const availableAmount = useMemo((): number => {
if (!isDeposit) {
@@ -125,12 +136,10 @@ const OverviewTransferWrapper = (
const closeModal = () => {
modalControl.onClose();
setInputValue('');
- setIsLoading(false);
};
const handleTransferSubmit = async () => {
if (!sourceAddress || !destAddress) return;
- setIsLoading(true);
const transferAmount = new BigNumber(inputValue)
.shiftedBy(getExponentByDenom(symbolToDenom(transferToken.symbol)))
@@ -142,7 +151,7 @@ const OverviewTransferWrapper = (
);
const fee: StdFee = {
- amount: coins('1000', transferToken.denom ?? ''),
+ amount: [{ denom: transferToken.denom ?? '', amount: '0' }],
gas: '250000',
};
@@ -154,49 +163,55 @@ const OverviewTransferWrapper = (
const stamp = Date.now();
const timeoutInNanos = (stamp + 1.2e6) * 1e6;
- const msg = transfer({
+ const msg = MsgTransfer.fromPartial({
sourcePort,
sourceChannel,
sender: sourceAddress,
receiver: destAddress,
token,
- // @ts-ignore
timeoutHeight: undefined,
timeoutTimestamp: BigInt(timeoutInNanos),
});
- await tx([msg], {
- fee,
- onSuccess: () => {
- updateData();
- closeModal();
+ transfer(
+ {
+ signerAddress: sourceAddress,
+ message: msg,
+ fee,
+ memo: 'Transfer',
},
- });
-
- setIsLoading(false);
+ {
+ onSuccess: () => {
+ updateData();
+ closeModal();
+ },
+ }
+ );
};
const assetOptions: OverviewTransferProps['dropdownList'] = useMemo(() => {
- return assets
- .filter((asset) => {
- if (isDeposit) {
- return true;
- }
- return new BigNumber(asset.amount).gt(0);
- })
- // .filter((asset) => {
- // return asset.symbol !== transferToken.symbol;
- // })
- .map((asset) => ({
- available: new BigNumber(asset.displayAmount).toNumber(),
- symbol: asset.symbol,
- name: asset.prettyChainName,
- denom: asset.denom,
- imgSrc: asset.logoUrl ?? '',
- priceDisplayAmount: new BigNumber(
- truncDecimals(asset.dollarValue, 2)
- ).toNumber(),
- }));
+ return (
+ assets
+ .filter((asset) => {
+ if (isDeposit) {
+ return true;
+ }
+ return new BigNumber(asset.amount).gt(0);
+ })
+ // .filter((asset) => {
+ // return asset.symbol !== transferToken.symbol;
+ // })
+ .map((asset) => ({
+ available: new BigNumber(asset.displayAmount).toNumber(),
+ symbol: asset.symbol,
+ name: asset.prettyChainName,
+ denom: asset.denom,
+ imgSrc: asset.logoUrl ?? '',
+ priceDisplayAmount: new BigNumber(
+ truncDecimals(asset.dollarValue, 2)
+ ).toNumber(),
+ }))
+ );
}, [assets, isDeposit, transferToken]);
console.log('assetOptions', assetOptions);
@@ -240,8 +255,10 @@ const OverviewTransferWrapper = (
new BigNumber(inputValue).isEqualTo(0) ||
isNaN(Number(inputValue))
}
- fromChainLogoUrl={getChainLogo(transferInfo?.sourceChainName ?? '') ?? ''}
- toChainLogoUrl={getChainLogo(transferInfo?.destChainName ?? '') ?? ''}
+ fromChainLogoUrl={
+ getChainLogoUrl(transferInfo?.sourceChainName ?? '') ?? ''
+ }
+ toChainLogoUrl={getChainLogoUrl(transferInfo?.destChainName ?? '') ?? ''}
dropdownList={assetOptions}
onTransfer={() => {
handleTransferSubmit();
@@ -259,12 +276,10 @@ export const DropdownTransferModal = (props: OverviewTransferWrapperProps) => {
const { modalControl, transferInfoState } = props;
const [inputValue, setInputValue] = useState('');
- const [isLoading, setIsLoading] = useState(false);
const closeModal = () => {
modalControl.onClose();
setInputValue('');
- setIsLoading(false);
};
return (
@@ -280,8 +295,6 @@ export const DropdownTransferModal = (props: OverviewTransferWrapperProps) => {
...props.modalControl,
onClose: closeModal,
}}
- isLoading={isLoading}
- setIsLoading={setIsLoading}
inputValue={inputValue}
setInputValue={setInputValue}
/>
diff --git a/templates/chain-admin/components/asset-list/RowTransferModal.tsx b/templates/chain-admin/components/asset-list/RowTransferModal.tsx
index 0d7ff494..c42fe775 100644
--- a/templates/chain-admin/components/asset-list/RowTransferModal.tsx
+++ b/templates/chain-admin/components/asset-list/RowTransferModal.tsx
@@ -1,29 +1,33 @@
import React, { useEffect, useMemo, useState } from 'react';
import { BasicModal, AssetWithdrawTokens } from '@interchain-ui/react';
-import { useChainWallet, useManager } from '@cosmos-kit/react';
+import { useChainWallet, useWalletManager } from '@interchain-kit/react';
import BigNumber from 'bignumber.js';
-import { ChainName } from 'cosmos-kit';
-import { coins, StdFee } from '@cosmjs/amino';
-import { useDisclosure, useChainUtils, useBalance, useTx } from '@/hooks';
+import { useTransfer } from '@interchainjs/react/ibc/applications/transfer/v1/tx.rpc.react';
+import { MsgTransfer } from '@interchainjs/react/ibc/applications/transfer/v1/tx';
+import { defaultContext } from '@tanstack/react-query';
+import { StdFee } from '@interchainjs/react/types';
+
+import {
+ useDisclosure,
+ useChainUtils,
+ useBalance,
+ useToastHandlers,
+ useSigningClient,
+} from '@/hooks';
import { keplrWalletName } from '@/config';
-import { ibc } from 'osmo-query';
import { PriceHash, TransferInfo, Transfer } from './types';
-const { transfer } = ibc.applications.transfer.v1.MessageComposer.withTypeUrl;
-
interface IProps {
prices: PriceHash;
transferInfo: TransferInfo;
modalControl: ReturnType;
updateData: () => void;
- selectedChainName: ChainName;
+ selectedChainName: string;
}
const TransferModalBody = (
props: IProps & {
- isLoading: boolean;
- setIsLoading: React.Dispatch>;
inputValue: string;
setInputValue: React.Dispatch>;
}
@@ -34,8 +38,6 @@ const TransferModalBody = (
transferInfo,
modalControl,
updateData,
- isLoading,
- setIsLoading,
inputValue,
setInputValue,
} = props;
@@ -70,8 +72,17 @@ const TransferModalBody = (
transferInfo.token.symbol
);
- const { getChainLogo } = useManager();
- const { tx } = useTx(sourceChainName);
+ const { getChainLogoUrl } = useWalletManager();
+
+ const toastHandlers = useToastHandlers();
+ const { data: signingClient } = useSigningClient(sourceChainName);
+ const { mutate: transfer, isLoading } = useTransfer({
+ clientResolver: signingClient,
+ options: {
+ context: defaultContext,
+ ...toastHandlers,
+ },
+ });
const availableAmount = useMemo(() => {
if (!isDeposit) return transferToken.available ?? 0;
@@ -107,74 +118,25 @@ const TransferModalBody = (
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [modalControl.isOpen]);
- const handleClick = async () => {
- if (!sourceAddress || !destAddress) return;
- setIsLoading(true);
-
- const transferAmount = new BigNumber(inputValue)
- .shiftedBy(getExponentByDenom(symbolToDenom(transferToken.symbol)))
- .toString();
-
- const { sourcePort, sourceChannel } = getIbcInfo(
- sourceChainName,
- destChainName
- );
-
- const fee: StdFee = {
- amount: coins('1000', transferToken.denom ?? ''),
- gas: '250000',
- };
-
- const token = {
- denom: transferToken.denom ?? '',
- amount: transferAmount,
- };
-
- const stamp = Date.now();
- const timeoutInNanos = (stamp + 1.2e6) * 1e6;
-
- const msg = transfer({
- sourcePort,
- sourceChannel,
- sender: sourceAddress,
- receiver: destAddress,
- token,
- // @ts-ignore
- timeoutHeight: undefined,
- timeoutTimestamp: BigInt(timeoutInNanos),
- });
-
- await tx([msg], {
- fee,
- onSuccess: () => {
- updateData();
- modalControl.onClose();
- },
- });
-
- setIsLoading(false);
- };
-
const sourceChain = useMemo(() => {
return {
- name: sourceChainInfo.pretty_name,
+ name: sourceChainInfo.prettyName,
address: sourceAddress ?? '',
- imgSrc: getChainLogo(sourceChainName) ?? '',
+ imgSrc: getChainLogoUrl(sourceChainName) ?? '',
};
- }, [getChainLogo, sourceAddress, sourceChainInfo, sourceChainName]);
+ }, [sourceAddress, sourceChainInfo, sourceChainName]);
const destChain = useMemo(() => {
return {
- symbol: destChainInfo.chain_name.toUpperCase(),
- name: destChainInfo.pretty_name,
+ symbol: destChainInfo.chainName.toUpperCase(),
+ name: destChainInfo.prettyName,
address: destAddress ?? '',
- imgSrc: getChainLogo(destChainName) ?? '',
+ imgSrc: getChainLogoUrl(destChainName) ?? '',
};
- }, [destChainInfo, destAddress, getChainLogo, destChainName]);
+ }, [destChainInfo, destAddress, destChainName]);
const handleSubmitTransfer = async () => {
if (!sourceAddress || !destAddress) return;
- setIsLoading(true);
const transferAmount = new BigNumber(inputValue)
.shiftedBy(getExponentByDenom(symbolToDenom(transferToken.symbol)))
@@ -186,7 +148,7 @@ const TransferModalBody = (
);
const fee: StdFee = {
- amount: coins('1000', transferToken.denom ?? ''),
+ amount: [{ denom: transferToken.denom ?? '', amount: '0' }],
gas: '250000',
};
@@ -198,36 +160,40 @@ const TransferModalBody = (
const stamp = Date.now();
const timeoutInNanos = (stamp + 1.2e6) * 1e6;
- const msg = transfer({
+ const msg = MsgTransfer.fromPartial({
sourcePort,
sourceChannel,
sender: sourceAddress,
receiver: destAddress,
token,
- // @ts-ignore
timeoutHeight: undefined,
timeoutTimestamp: BigInt(timeoutInNanos),
});
- await tx([msg], {
- fee,
- onSuccess: () => {
- updateData();
- modalControl.onClose();
+ transfer(
+ {
+ signerAddress: sourceAddress,
+ message: msg,
+ fee,
+ memo: 'Transfer',
},
- });
-
- setIsLoading(false);
+ {
+ onSuccess: () => {
+ updateData();
+ modalControl.onClose();
+ },
+ }
+ );
};
return (
{
const { modalControl, transferInfo } = props;
const [inputValue, setInputValue] = useState('');
- const [isLoading, setIsLoading] = useState(false);
const closeModal = () => {
modalControl.onClose();
@@ -276,8 +241,6 @@ export const RowTransferModal = (props: IProps) => {
{...props}
inputValue={inputValue}
setInputValue={setInputValue}
- isLoading={isLoading}
- setIsLoading={setIsLoading}
modalControl={{
...modalControl,
onClose: closeModal,
diff --git a/templates/chain-admin/components/common/Footer.tsx b/templates/chain-admin/components/common/Footer.tsx
index 269def2b..de5b463f 100644
--- a/templates/chain-admin/components/common/Footer.tsx
+++ b/templates/chain-admin/components/common/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
gap="4px"
>
- © {new Date().getFullYear()} Cosmology
+ © {new Date().getFullYear()} Hyperweb
{isMobile ? : }
diff --git a/templates/chain-admin/components/common/Header/AddressButton.tsx b/templates/chain-admin/components/common/Header/AddressButton.tsx
index 40001579..06265e18 100644
--- a/templates/chain-admin/components/common/Header/AddressButton.tsx
+++ b/templates/chain-admin/components/common/Header/AddressButton.tsx
@@ -4,7 +4,7 @@ import {
PopoverTrigger,
useColorModeValue,
} from '@interchain-ui/react';
-import { useChain } from '@cosmos-kit/react';
+import { useChain } from '@interchain-kit/react';
import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
import { Button, WalletConnect } from '@/components';
diff --git a/templates/chain-admin/components/common/Header/ChainDropdown.tsx b/templates/chain-admin/components/common/Header/ChainDropdown.tsx
index e31633a9..a84188af 100644
--- a/templates/chain-admin/components/common/Header/ChainDropdown.tsx
+++ b/templates/chain-admin/components/common/Header/ChainDropdown.tsx
@@ -1,6 +1,6 @@
import Image from 'next/image';
import { useState } from 'react';
-import { useChain, useManager } from '@cosmos-kit/react';
+import { useChain, useWalletManager } from '@interchain-kit/react';
import { Box, Combobox, Skeleton, Stack, Text } from '@interchain-ui/react';
import { useStarshipChains, useDetectBreakpoints } from '@/hooks';
@@ -9,9 +9,9 @@ import { chainStore, useChainStore } from '@/contexts';
export const ChainDropdown = () => {
const { selectedChain } = useChainStore();
const { chain } = useChain(selectedChain);
- const [input, setInput] = useState(chain.pretty_name);
+ const [input, setInput] = useState(chain.prettyName ?? '');
const { data: starshipChains } = useStarshipChains();
- const { getChainLogo } = useManager();
+ const { getChainLogoUrl } = useWalletManager();
const { isMobile } = useDetectBreakpoints();
@@ -29,10 +29,10 @@ export const ChainDropdown = () => {
}}
inputAddonStart={
- {input === chain.pretty_name ? (
+ {input === chain.prettyName ? (
{
width: isMobile ? '130px' : '260px',
}}
>
- {(starshipChains?.chains ?? []).map((c) => (
-
+ {(starshipChains?.v2.chains ?? []).map((c) => (
+
{
}}
/>
- {c.pretty_name}
+ {c.prettyName}
diff --git a/templates/chain-admin/components/common/Sidebar/SidebarContent.tsx b/templates/chain-admin/components/common/Sidebar/SidebarContent.tsx
index 74c32caa..b5dc5f35 100644
--- a/templates/chain-admin/components/common/Sidebar/SidebarContent.tsx
+++ b/templates/chain-admin/components/common/Sidebar/SidebarContent.tsx
@@ -2,22 +2,19 @@ import Image from 'next/image';
import { Box, useColorModeValue, Text } from '@interchain-ui/react';
import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
import { FiLogOut } from 'react-icons/fi';
+import { useChain } from '@interchain-kit/react';
import { NavItems } from './NavItems';
import { Button } from '@/components';
import { useChainStore } from '@/contexts';
import { shortenAddress } from '@/utils';
-import {
- useCopyToClipboard,
- useConnectChain,
- useAddHyperwebChain,
-} from '@/hooks';
+import { useCopyToClipboard, useAddHyperwebChain } from '@/hooks';
export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
const { isHyperwebAdded } = useAddHyperwebChain();
const poweredByLogoSrc = useColorModeValue(
- '/logos/cosmology.svg',
- '/logos/cosmology-dark.svg'
+ '/logos/hyperweb-logo.svg',
+ '/logos/hyperweb-logo-dark.svg'
);
return (
@@ -47,7 +44,7 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
alt="cosmology"
width="0"
height="0"
- style={{ width: '100px', height: 'auto' }}
+ style={{ width: '90px', height: 'auto' }}
/>
@@ -58,12 +55,17 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
const ConnectButton = () => {
const { selectedChain } = useChainStore();
const { isCopied, copyToClipboard } = useCopyToClipboard();
- const { connect, disconnect, address, isWalletConnected, wallet } =
- useConnectChain(selectedChain);
+ const { connect, disconnect, address, wallet } = useChain(selectedChain);
+
+ const walletInfo = wallet?.info;
+ const walletLogo =
+ typeof walletInfo?.logo === 'string'
+ ? walletInfo.logo
+ : walletInfo.logo.major || walletInfo.logo.minor;
return (
<>
- {isWalletConnected && address ? (
+ {address ? (