feat: make spawn compatible with staking, gov and asset-list examples

cosmology-tech · Aug 26, 2024 · e1af358 · e1af358
1 parent 9308b23
commit e1af358
Show file tree

Hide file tree

Showing 19 changed files with 238 additions and 156 deletions.
diff --git a/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx b/examples/chain-template-spawn/components/common/Header/ChainDropdown.tsx
@@ -6,6 +6,7 @@ import { Box, Combobox, Skeleton, Stack, Text } from '@interchain-ui/react';
 import { useDetectBreakpoints, useSpawnChains } from '@/hooks';
 import { chainStore, useChainStore } from '@/contexts';
 import { chainOptions } from '@/config';
+import { getSignerOptions } from '@/utils';
 
 export const ChainDropdown = () => {
   const { selectedChain } = useChainStore();
@@ -23,7 +24,7 @@ export const ChainDropdown = () => {
       spawnChains?.assets?.length &&
       !isChainsAdded
     ) {
-      addChains(spawnChains.chains, spawnChains.assets);
+      addChains(spawnChains.chains, spawnChains.assets, getSignerOptions());
       setIsChainsAdded(true);
     }
   }, [spawnChains, isChainsAdded]);

diff --git a/examples/chain-template-spawn/components/staking/AllValidatorsList.tsx b/examples/chain-template-spawn/components/staking/AllValidatorsList.tsx
@@ -1,8 +1,5 @@
 import React, { Dispatch, SetStateAction, useMemo } from 'react';
 import { ChainName } from 'cosmos-kit';
-
-import { getCoin } from '@/utils';
-import { shiftDigits, type ExtendedValidator as Validator } from '@/utils';
 import {
   Text,
   Button,
@@ -11,6 +8,13 @@ import {
   ValidatorTokenAmountCell,
   GridColumn,
 } from '@interchain-ui/react';
+import { useChain } from '@cosmos-kit/react';
+
+import {
+  shiftDigits,
+  getNativeAsset,
+  type ExtendedValidator as Validator,
+} from '@/utils';
 
 const AllValidatorsList = ({
   validators,
@@ -27,7 +31,8 @@ const AllValidatorsList = ({
     [key: string]: string;
   };
 }) => {
-  const coin = getCoin(chainName);
+  const { assets } = useChain(chainName);
+  const coin = getNativeAsset(assets!);
 
   const columns = useMemo(() => {
     const _columns: GridColumn[] = [

diff --git a/examples/chain-template-spawn/components/staking/DelegateModal.tsx b/examples/chain-template-spawn/components/staking/DelegateModal.tsx
@@ -20,8 +20,8 @@ import {
   isGreaterThanZero,
   shiftDigits,
   calcDollarValue,
-  getCoin,
-  getExponent,
+  getNativeAsset,
+  getExponentFromAsset,
   toBaseAmount,
 } from '@/utils';
 import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
@@ -59,15 +59,15 @@ export const DelegateModal = ({
   showDescription?: boolean;
 }) => {
   const { isOpen, onClose } = modalControl;
-  const { address, estimateFee } = useChain(chainName);
+  const { address, estimateFee, assets } = useChain(chainName);
 
   const [amount, setAmount] = useState<number | undefined>(0);
   const [isDelegating, setIsDelegating] = useState(false);
   const [isSimulating, setIsSimulating] = useState(false);
   const [maxAmountAndFee, setMaxAmountAndFee] = useState<MaxAmountAndFee>();
 
-  const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
+  const coin = getNativeAsset(assets!);
+  const exp = getExponentFromAsset(coin);
   const { tx } = useTx(chainName);
 
   const onModalClose = () => {
@@ -197,8 +197,8 @@ export const DelegateModal = ({
             minValue: 0,
             maxValue: maxAmountAndFee?.maxAmount ?? Number(balance),
             value: amount,
-            onValueChange: (val) => {
-              setAmount(val);
+            onValueInput: (val) => {
+              setAmount(Number(val));
             },
             partials: [
               {
@@ -222,7 +222,8 @@ export const DelegateModal = ({
               },
               {
                 label: 'Max',
-                onClick: () => setAmount(Number(balance)),
+                onClick: handleMaxClick,
+                isLoading: isSimulating,
               },
             ],
           }}

diff --git a/examples/chain-template-spawn/components/staking/MyValidatorsList.tsx b/examples/chain-template-spawn/components/staking/MyValidatorsList.tsx
@@ -7,8 +7,9 @@ import {
   ValidatorTokenAmountCell,
 } from '@interchain-ui/react';
 import { ChainName } from 'cosmos-kit';
-import { getCoin } from '@/utils';
+import { getNativeAsset } from '@/utils';
 import { type ExtendedValidator as Validator } from '@/utils';
+import { useChain } from '@cosmos-kit/react';
 
 const MyValidatorsList = ({
   myValidators,
@@ -25,7 +26,8 @@ const MyValidatorsList = ({
     [key: string]: string;
   };
 }) => {
-  const coin = getCoin(chainName);
+  const { assets } = useChain(chainName);
+  const coin = getNativeAsset(assets!);
 
   return (
     <ValidatorList

diff --git a/examples/chain-template-spawn/components/staking/Overview.tsx b/examples/chain-template-spawn/components/staking/Overview.tsx
@@ -8,7 +8,7 @@ import { useChain } from '@cosmos-kit/react';
 import { ChainName } from 'cosmos-kit';
 import { cosmos } from 'interchain-query';
 
-import { getCoin } from '@/utils';
+import { getNativeAsset } from '@/utils';
 import { Prices, useTx } from '@/hooks';
 import {
   sum,
@@ -36,11 +36,11 @@ const Overview = ({
   prices: Prices;
 }) => {
   const [isClaiming, setIsClaiming] = useState(false);
-  const { address } = useChain(chainName);
+  const { address, assets } = useChain(chainName);
   const { tx } = useTx(chainName);
 
   const totalAmount = sum(balance, staked, rewards?.total ?? 0);
-  const coin = getCoin(chainName);
+  const coin = getNativeAsset(assets!);
 
   const onClaimRewardClick = async () => {
     setIsClaiming(true);

diff --git a/examples/chain-template-spawn/components/staking/RedelegateModal.tsx b/examples/chain-template-spawn/components/staking/RedelegateModal.tsx
@@ -20,7 +20,7 @@ import {
   toBaseAmount,
   type ExtendedValidator as Validator,
 } from '@/utils';
-import { getCoin, getExponent } from '@/utils';
+import { getNativeAsset, getExponentFromAsset } from '@/utils';
 import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
 
 const { beginRedelegate } = cosmos.staking.v1beta1.MessageComposer.fromPartial;
@@ -40,14 +40,13 @@ export const RedelegateModal = ({
   modalControl: UseDisclosureReturn;
   prices: Prices;
 }) => {
-  const { address } = useChain(chainName);
+  const { address, assets } = useChain(chainName);
 
   const [amount, setAmount] = useState<number | undefined>(0);
   const [isRedelegating, setIsRedelegating] = useState(false);
-  const [, forceUpdate] = useState(0);
 
-  const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
+  const coin = getNativeAsset(assets!);
+  const exp = getExponentFromAsset(coin);
 
   const { tx } = useTx(chainName);
 

diff --git a/examples/chain-template-spawn/components/staking/SelectValidatorModal.tsx b/examples/chain-template-spawn/components/staking/SelectValidatorModal.tsx
@@ -11,9 +11,10 @@ import {
   Box,
 } from '@interchain-ui/react';
 
-import { getCoin } from '@/utils';
+import { getNativeAsset } from '@/utils';
 import { UseDisclosureReturn } from '@/hooks';
 import { shiftDigits, type ExtendedValidator as Validator } from '@/utils';
+import { useChain } from '@cosmos-kit/react';
 
 export const SelectValidatorModal = ({
   allValidators,
@@ -30,7 +31,8 @@ export const SelectValidatorModal = ({
     [key: string]: string;
   };
 }) => {
-  const coin = getCoin(chainName);
+  const { assets } = useChain(chainName);
+  const coin = getNativeAsset(assets!);
 
   const columns = useMemo(() => {
     const hasApr = !!allValidators[0]?.apr;

diff --git a/examples/chain-template-spawn/components/staking/UndelegateModal.tsx b/examples/chain-template-spawn/components/staking/UndelegateModal.tsx
@@ -11,7 +11,7 @@ import {
   Button,
 } from '@interchain-ui/react';
 
-import { getCoin, getExponent } from '@/utils';
+import { getNativeAsset, getExponentFromAsset } from '@/utils';
 import { Prices, UseDisclosureReturn, useTx } from '@/hooks';
 import {
   calcDollarValue,
@@ -46,13 +46,11 @@ export const UndelegateModal = ({
 }) => {
   const [amount, setAmount] = useState<number | undefined>(0);
   const [isUndelegating, setIsUndelegating] = useState(false);
-  const [, forceUpdate] = useState(0);
-
-  const { address } = useChain(chainName);
+  const { address, assets } = useChain(chainName);
   const { tx } = useTx(chainName);
 
-  const coin = getCoin(chainName);
-  const exp = getExponent(chainName);
+  const coin = getNativeAsset(assets!);
+  const exp = getExponentFromAsset(coin);
 
   const closeUndelegateModal = () => {
     setAmount(0);

diff --git a/examples/chain-template-spawn/components/staking/ValidatorInfoModal.tsx b/examples/chain-template-spawn/components/staking/ValidatorInfoModal.tsx
@@ -1,4 +1,4 @@
-import { getCoin } from '@/utils';
+import { getNativeAsset } from '@/utils';
 import { ChainName } from 'cosmos-kit';
 import {
   formatValidatorMetaInfo,
@@ -12,6 +12,7 @@ import {
   Text,
 } from '@interchain-ui/react';
 import { UseDisclosureReturn } from '@/hooks';
+import { useChain } from '@cosmos-kit/react';
 
 export const ValidatorInfoModal = ({
   chainName,
@@ -30,7 +31,8 @@ export const ValidatorInfoModal = ({
   };
   logoUrl: string;
 }) => {
-  const coin = getCoin(chainName);
+  const { assets } = useChain(chainName);
+  const coin = getNativeAsset(assets!);
 
   const { isOpen, onClose } = modalControl;
   const { openDelegateModal, openSelectValidatorModal, openUndelegateModal } =

diff --git a/examples/chain-template-spawn/components/voting/Proposal.tsx b/examples/chain-template-spawn/components/voting/Proposal.tsx
@@ -17,13 +17,14 @@ import {
 import {
   exponentiate,
   formatDate,
-  getCoin,
-  getExponent,
+  getNativeAsset,
+  getExponentFromAsset,
   percent,
 } from '@/utils';
 import Markdown from 'react-markdown';
 import { useEffect, useState } from 'react';
 import { useVoting, Votes } from '@/hooks';
+import { useChain } from '@cosmos-kit/react';
 
 // export declare enum VoteOption {
 //   /** VOTE_OPTION_UNSPECIFIED - VOTE_OPTION_UNSPECIFIED defines a no-op vote option. */
@@ -56,15 +57,16 @@ export function Proposal({
   proposal,
   chainName,
   bondedTokens,
-  onVoteSuccess = () => { },
+  onVoteSuccess = () => {},
 }: ProposalProps) {
   const vote = votes?.[proposal.id.toString()];
 
   const [showMore, setShowMore] = useState(false);
   const [voteType, setVoteType] = useState<GovernanceVoteType>();
 
-  const coin = getCoin(chainName);
-  const exponent = getExponent(chainName);
+  const { assets } = useChain(chainName);
+  const coin = getNativeAsset(assets!);
+  const exponent = getExponentFromAsset(coin);
   const { isVoting, onVote } = useVoting({ chainName, proposal });
 
   const toggleShowMore = () => setShowMore((v) => !v);
@@ -92,9 +94,9 @@ export function Proposal({
 
   const total = proposal.finalTallyResult
     ? Object.values(proposal.finalTallyResult).reduce(
-      (sum, val) => sum + Number(val),
-      0
-    )
+        (sum, val) => sum + Number(val),
+        0
+      )
     : 0;
 
   const turnout = total / Number(bondedTokens);
@@ -248,8 +250,9 @@ export function Proposal({
                 px: '$2',
               }}
             >
-              {`Minimum of staked ${minStakedTokens} ${coin.symbol}(${quorum * 100
-                }%) need to vote
+              {`Minimum of staked ${minStakedTokens} ${coin.symbol}(${
+                quorum * 100
+              }%) need to vote
             for this proposal to pass.`}
             </Text>
           </Text>