chore: update Namadillo to work with new 4.0.3 indexer client (#2296)

Co-authored-by: Mateusz Jasiuk <[email protected]>

Author: neocybereth

apps/namadillo/package.json

@@ -11,7 +11,7 @@
     "@cosmjs/encoding": "^0.32.3",
     "@keplr-wallet/types": "^0.12.136",
     "@namada/chain-registry": "^1.3.0",
-    "@namada/indexer-client": "3.3.2",
+    "@namada/indexer-client": "4.0.3",
     "@namada/sdk-multicore": "^0.20.8",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/query-core": "^5.40.0",

apps/namadillo/src/App/Common/GasFeeModal.tsx

@@ -25,8 +25,8 @@ import { TokenCurrency } from "./TokenCurrency";
 const useSortByNativeToken = () => {
   const nativeToken = useAtomValue(nativeTokenAddressAtom).data;
   return (a: GasPriceTableItem, b: GasPriceTableItem) =>
-    a.token === nativeToken ? -1
-    : b.token === nativeToken ? 1
+    a.token.address === nativeToken ? -1
+    : b.token.address === nativeToken ? 1
     : 0;
 };
 
@@ -41,7 +41,7 @@ const useBuildGasOption = ({
 }) => {
   const gasDollarMap =
     useAtomValue(
-      tokenPricesFamily(gasPriceTable?.map((item) => item.token) ?? [])
+      tokenPricesFamily(gasPriceTable?.map((item) => item.token.address) ?? [])
     ).data ?? {};
 
   return (
@@ -126,19 +126,19 @@ export const GasFeeModal = ({
       isShielded ?
         shieldedAmount.data?.map((balance) => ({
           minDenomAmount: balance.minDenomAmount,
-          tokenAddress: balance.address,
+          token: balance.address,
         }))
       : transparentAmount.data;
 
     return new BigNumber(
-      balances?.find((token) => token.tokenAddress === tokenAddres)
-        ?.minDenomAmount || "0"
+      balances?.find((token) => token.token === tokenAddres)?.minDenomAmount ||
+        "0"
     );
   };
 
   const filterAvailableTokensOnly = (item: GasPriceTableItem): boolean => {
-    if (item.token === nativeToken) return true; // we should always keep the native token
-    return findUserBalanceByTokenAddress(item.token).gt(0);
+    if (item.token.address === nativeToken) return true; // we should always keep the native token
+    return findUserBalanceByTokenAddress(item.token.address).gt(0);
   };
 
   const isLoading = isShielded && !shieldedAmount.data;
@@ -252,25 +252,25 @@ export const GasFeeModal = ({
                   totalInDollars,
                   unitValueInDollars,
                 } = buildGasOption({
-                  gasPriceInMinDenom: item.gasPrice,
-                  gasToken: item.token,
+                  gasPriceInMinDenom: item.gasPriceInMinDenom,
+                  gasToken: item.token.address,
                 });
 
                 const availableAmount = toDisplayAmount(
                   asset,
-                  findUserBalanceByTokenAddress(item.token)
+                  findUserBalanceByTokenAddress(item.token.address)
                 );
 
                 return {
-                  id: item.token,
+                  id: item.token.address,
                   value: (
                     <div
                       className={clsx(
                         "grid grid-cols-[1.5fr_1fr_1fr] items-center gap-4",
                         "justify-between w-full min-h-[42px] mr-5"
                       )}
                     >
-                      <TokenCard address={item.token} asset={asset} />
+                      <TokenCard address={item.token.address} asset={asset} />
                       <div>
                         <div className="text-white text-sm text-right">
                           {unitValueInDollars && (

apps/namadillo/src/App/Governance/GovernanceOverview.tsx

@@ -29,12 +29,14 @@ export const GovernanceOverview: React.FC = () => {
   const activeAtoms = [allProposals, ...extensionAtoms];
 
   const liveProposals =
-    allProposals.data?.filter((proposal) => proposal.status === "ongoing") ||
-    [];
+    allProposals.data?.proposals?.filter(
+      (proposal) => proposal.status === "ongoing"
+    ) || [];
 
   const upcomingProposals =
-    allProposals.data?.filter((proposal) => proposal.status === "pending") ||
-    [];
+    allProposals.data?.proposals?.filter(
+      (proposal) => proposal.status === "pending"
+    ) || [];
 
   useNotifyOnAtomError(activeAtoms, [
     allProposals.isError,
@@ -86,7 +88,9 @@ export const GovernanceOverview: React.FC = () => {
             <SkeletonLoading height="150px" width="100%" />
           )}
           {atomsAreLoaded(allProposals) && (
-            <ProposalsSummary allProposals={allProposals.data!} />
+            <ProposalsSummary
+              allProposals={allProposals.data?.proposals || []}
+            />
           )}
         </Panel>
         <LearnAboutGovernance />

apps/namadillo/src/App/Governance/ProposalHeader.tsx

@@ -4,7 +4,12 @@ import {
   ProgressBar as ProgressBarComponent,
   Stack,
 } from "@namada/components";
-import { Proposal, UnknownVoteType, VoteType } from "@namada/types";
+import {
+  EncodedProposalData,
+  Proposal,
+  UnknownVoteType,
+  VoteType,
+} from "@namada/types";
 import { routes } from "App/routes";
 import {
   canVoteAtom,
@@ -142,14 +147,13 @@ const JsonButton: React.FC<{
 
 const WasmButton: React.FC<{
   proposal: AtomWithQueryResult<Proposal>;
-  proposalData: AtomWithQueryResult<string>;
+  proposalData: AtomWithQueryResult<EncodedProposalData>;
 }> = ({ proposal, proposalData }) => {
   const { disabled, href, filename } = (() => {
     if (proposal.status === "success" && proposalData.status === "success") {
-      const { proposalType } = proposal.data;
       const wasmCode =
-        proposalType.type === "default_with_wasm" ?
-          fromHex(proposalData.data)
+        proposalData.data.type === "default_with_wasm" ?
+          fromHex(proposalData.data.data!)
         : undefined;
 
       if (typeof wasmCode !== "undefined") {

apps/namadillo/src/App/Governance/ProposalLabels.tsx

@@ -75,6 +75,6 @@ export const TypeLabel: React.FC<
   } & React.ComponentProps<typeof InsetLabel>
 > = ({ proposalType, ...rest }) => (
   <InsetLabel className="text-xs leading-[1.65em]" {...rest}>
-    {proposalTypeStringToString(proposalType.type)}
+    {proposalTypeStringToString(proposalType)}
   </InsetLabel>
 );

apps/namadillo/src/App/Governance/ViewJson.tsx

@@ -2,11 +2,16 @@ import { useAtomValue } from "jotai";
 import { generatePath, useNavigate } from "react-router-dom";
 
 import { Modal } from "@namada/components";
-import { PgfIbcTarget, PgfTarget, Proposal } from "@namada/types";
+import {
+  PgfIbcTarget,
+  PgfTarget,
+  ProposalData,
+  ProposalWithData,
+} from "@namada/types";
 import { assertNever, copyToClipboard } from "@namada/utils";
 import { ModalContainer } from "App/Common/ModalContainer";
 import { routes } from "App/routes";
-import { proposalFamily } from "atoms/proposals";
+import { proposalWithDataFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useProposalIdParam } from "hooks";
 import { useState } from "react";
@@ -70,16 +75,16 @@ const formatIbcPgfTarget = (value: PgfIbcTarget): PgfIbcTargetJson => ({
   },
 });
 
-const formatData = (proposal: Proposal): DataJson => {
-  switch (proposal.proposalType.type) {
+const formatData = (proposalData: ProposalData): DataJson => {
+  switch (proposalData.type) {
     case "default":
       return undefined;
 
     case "default_with_wasm":
-      return proposal.proposalType.data;
+      return proposalData.data;
 
     case "pgf_steward":
-      const addRemove = proposal.proposalType.data;
+      const addRemove = proposalData.data;
 
       // deliberately specify keys to ensure no unwanted data is printed
       return {
@@ -88,7 +93,7 @@ const formatData = (proposal: Proposal): DataJson => {
       };
 
     case "pgf_payment":
-      const pgfActions = proposal.proposalType.data;
+      const pgfActions = proposalData.data;
 
       const continuous = [
         ...pgfActions.continuous.add,
@@ -113,11 +118,12 @@ const formatData = (proposal: Proposal): DataJson => {
       return { continuous, retro };
 
     default:
-      return assertNever(proposal.proposalType);
+      return assertNever(proposalData);
   }
 };
 
-const getProposalJsonString = (proposal: Proposal): string => {
+const getProposalJsonString = (proposalWithData: ProposalWithData): string => {
+  const { proposal, decodedData } = proposalWithData;
   const proposalJson: ProposalJson = {
     proposal: {
       id: proposal.id,
@@ -127,7 +133,7 @@ const getProposalJsonString = (proposal: Proposal): string => {
       voting_end_epoch: proposal.endEpoch,
       activation_epoch: proposal.activationEpoch,
     },
-    data: formatData(proposal),
+    data: formatData(decodedData),
   };
 
   const stringified = JSON.stringify(
@@ -151,7 +157,7 @@ const getProposalJsonString = (proposal: Proposal): string => {
     2
   );
 
-  const { type } = proposal.proposalType;
+  const { type } = decodedData;
 
   if (type === "default_with_wasm") {
     // remove double quotes around WASM data
@@ -187,17 +193,24 @@ export const ViewJson: React.FC = () => {
 };
 
 const WithProposalId: React.FC<{ proposalId: bigint }> = ({ proposalId }) => {
-  const proposal = useAtomValue(proposalFamily(proposalId));
+  const proposalWithDataQuery = useAtomValue(
+    proposalWithDataFamily(proposalId)
+  );
 
-  return proposal.status === "pending" || proposal.status === "error" ?
+  return (
+      proposalWithDataQuery.status === "pending" ||
+        proposalWithDataQuery.status === "error"
+    ) ?
       null
-    : <Loaded proposal={proposal.data} />;
+    : <Loaded proposalWithData={proposalWithDataQuery.data} />;
 };
 
-const Loaded: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
+const Loaded: React.FC<{ proposalWithData: ProposalWithData }> = ({
+  proposalWithData,
+}) => {
   const [copied, setCopied] = useState(false);
 
-  const jsonString = getProposalJsonString(proposal);
+  const jsonString = getProposalJsonString(proposalWithData);
 
   const onCopy = (): void => {
     if (!copied) {

apps/namadillo/src/App/Governance/VoteInfoCards.tsx

@@ -7,10 +7,10 @@ import {
   PgfActions,
   PgfIbcTarget,
   PgfTarget,
-  Proposal,
+  ProposalWithData,
 } from "@namada/types";
 
-import { proposalFamily } from "atoms/proposals";
+import { proposalWithDataFamily } from "atoms/proposals";
 import BigNumber from "bignumber.js";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
@@ -150,18 +150,23 @@ const PgfPaymentInfoCards: React.FC<{
 export const VoteInfoCards: React.FC<{
   proposalId: bigint;
 }> = ({ proposalId }) => {
-  const proposal = useAtomValue(proposalFamily(proposalId));
+  const proposalWithDataQuery = useAtomValue(
+    proposalWithDataFamily(proposalId)
+  );
 
   return (
     <div className="grid grid-cols-6 gap-2 m-4">
-      {proposal.status === "pending" || proposal.status === "error" ?
+      {(
+        proposalWithDataQuery.status === "pending" ||
+        proposalWithDataQuery.status === "error"
+      ) ?
         <>
           <LoadingCard className="col-span-2" />
           <LoadingCard className="col-span-2" />
           <LoadingCard className="col-span-2" />
           <LoadingCard className="col-span-full" />
         </>
-      : <Loaded proposal={proposal.data} />}
+      : <Loaded proposalWithData={proposalWithDataQuery.data} />}
     </div>
   );
 };
@@ -185,16 +190,17 @@ const DateTimeEpoch: React.FC<{ date: bigint; epoch: bigint }> = ({
 );
 
 const Loaded: React.FC<{
-  proposal: Proposal;
-}> = ({ proposal }) => {
+  proposalWithData: ProposalWithData;
+}> = ({ proposalWithData }) => {
+  const { proposal, decodedData, encodedData } = proposalWithData;
   const [dataHash, setDataHash] = useState<string>();
 
   useEffect(() => {
     if (
-      proposal.proposalType.type === "default_with_wasm" &&
-      proposal.proposalType.data.length > 0
+      encodedData?.type === "default_with_wasm" &&
+      encodedData.data!.length > 0
     ) {
-      setDataHash(proposal.proposalType.data);
+      setDataHash(encodedData.hash);
     }
   }, [proposal.proposalType]);
 
@@ -239,11 +245,11 @@ const Loaded: React.FC<{
           className="col-span-full"
         />
       )}
-      {proposal.proposalType.type === "pgf_steward" && (
-        <PgfStewardInfoCards addRemove={proposal.proposalType.data} />
+      {decodedData.type === "pgf_steward" && (
+        <PgfStewardInfoCards addRemove={decodedData.data} />
       )}
-      {proposal.proposalType.type === "pgf_payment" && (
-        <PgfPaymentInfoCards pgfActions={proposal.proposalType.data} />
+      {decodedData.type === "pgf_payment" && (
+        <PgfPaymentInfoCards pgfActions={decodedData.data} />
       )}
     </>
   );

apps/namadillo/src/App/Transactions/TransactionHistory.tsx

@@ -221,8 +221,8 @@ export const TransactionHistory = (): JSX.Element => {
   ): TableRow => {
     const key =
       transaction.type === "bundled" ?
-        `${transaction.revealPkTx.tx?.txId}-${transaction.mainTx.tx?.txId}`
-      : transaction.tx.tx?.txId || index.toString();
+        `${transaction.revealPkTx.tx?.id}-${transaction.mainTx.tx?.id}`
+      : transaction.tx.tx?.id || index.toString();
 
     return {
       key,

apps/namadillo/src/atoms/accounts/atoms.ts

@@ -105,9 +105,9 @@ export const accountBalanceAtom = atomWithQuery<BigNumber>((get) => {
     queryKey: ["balances", tokenAddress.data, transparentBalanceQuery.data],
     ...queryDependentFn(async (): Promise<BigNumber> => {
       const balance = transparentBalanceQuery.data
-        ?.filter(({ tokenAddress: ta }) => ta === tokenAddress.data)
-        .map(({ tokenAddress, minDenomAmount }) => ({
-          token: tokenAddress,
+        ?.filter(({ token: ta }) => ta.address === tokenAddress.data)
+        .map(({ token, minDenomAmount }) => ({
+          token,
           amount: toDisplayAmount(namadaAsset(), new BigNumber(minDenomAmount)),
         }))
         .at(0);

apps/namadillo/src/atoms/balance/atoms.ts

@@ -218,8 +218,10 @@ export const namadaShieldedAssetsAtom = atomWithQuery((get) => {
 
       return mapNamadaAddressesToAssets({
         balances:
-          shieldedBalance?.map((i) => ({ ...i, tokenAddress: i.address })) ??
-          [],
+          shieldedBalance?.map((i) => ({
+            minDenomAmount: i.minDenomAmount,
+            token: { address: i.address },
+          })) ?? [],
         assets: Object.values(chainAssetsMap.data),
       });
     }, [viewingKeysQuery, chainTokensQuery, chainAssetsMap]),