diff --git a/examples/chain-template/components/contract/InstantiateContract.tsx b/examples/chain-template/components/contract/InstantiateContract.tsx
index c87e8a5a6..0e07bd1d6 100644
--- a/examples/chain-template/components/contract/InstantiateContract.tsx
+++ b/examples/chain-template/components/contract/InstantiateContract.tsx
@@ -14,6 +14,7 @@ import { InstantiateResult } from '@cosmjs/cosmwasm-stargate';
 import { CodeIdField } from './CodeIdField';
 import {
   CodeInfo,
+  formatTxFee,
   resolvePermission,
   shortenAddress,
   validateChainAddress,
@@ -28,7 +29,7 @@ import {
   useInstantiateTx,
   useMyContracts,
 } from '@/hooks';
-import { TxInfoItem, TxSuccessCard } from './TxSuccessCard';
+import { TxInfoItem, TxSuccessDisplay } from './TxSuccessDisplay';
 import { TabLabel } from '@/pages/contract';
 import styles from '@/styles/comp.module.css';
 
@@ -61,7 +62,7 @@ export const InstantiateContract = ({
   const [txResult, setTxResult] = useState<InstantiateResult>();
 
   const { selectedChain } = useChainStore();
-  const { address, chain } = useChain(selectedChain);
+  const { address, chain, assets } = useChain(selectedChain);
   const { instantiateTx } = useInstantiateTx(selectedChain);
   const { refetch: updateMyContracts } = useMyContracts();
 
@@ -117,47 +118,58 @@ export const InstantiateContract = ({
   const { isMobile } = useDetectBreakpoints();
 
   if (txResult) {
+    const txFee =
+      txResult.events.find((e) => e.type === 'tx')?.attributes[0].value ?? '';
+
     const infoItems: TxInfoItem[] = [
       {
         label: 'Tx Hash',
-        displayValue: shortenAddress(txResult.transactionHash),
-        actualValue: txResult.transactionHash,
+        value: shortenAddress(txResult.transactionHash),
+        copyValue: txResult.transactionHash,
+        showCopy: true,
       },
       {
         label: 'Contract Address',
-        displayValue: shortenAddress(txResult.contractAddress),
-        actualValue: txResult.contractAddress,
+        value: shortenAddress(txResult.contractAddress),
+        copyValue: txResult.contractAddress,
+        showCopy: true,
+      },
+      {
+        label: 'Tx Fee',
+        value: formatTxFee(txFee, assets!),
       },
     ];
 
     return (
-      <TxSuccessCard
+      <TxSuccessDisplay
         show={show}
-        title="Contract Instantiated"
-        description={`"${label}" has been successfully created.`}
         infoItems={infoItems}
+        txResult={txResult}
         footer={
-          <Box width="$full" display="flex" flexDirection="column" gap="10px">
-            <Box display="flex" gap="10px">
-              <Button
-                width="$full"
-                variant="primary"
-                onClick={() => {
-                  switchTab?.(txResult.contractAddress, TabLabel.Query);
-                }}
-              >
-                Query
-              </Button>
-              <Button
-                width="$full"
-                variant="primary"
-                onClick={() => {
-                  switchTab?.(txResult.contractAddress, TabLabel.Execute);
-                }}
-              >
-                Execute
-              </Button>
-            </Box>
+          <Box
+            width="$full"
+            display="grid"
+            gridTemplateColumns="repeat(2, 1fr)"
+            gap="10px"
+          >
+            <Button
+              width="$full"
+              variant="primary"
+              onClick={() => {
+                switchTab?.(txResult.contractAddress, TabLabel.Query);
+              }}
+            >
+              Query
+            </Button>
+            <Button
+              width="$full"
+              variant="primary"
+              onClick={() => {
+                switchTab?.(txResult.contractAddress, TabLabel.Execute);
+              }}
+            >
+              Execute
+            </Button>
             <Button
               width="$full"
               onClick={() => {
diff --git a/examples/chain-template/components/contract/JsonEditor.tsx b/examples/chain-template/components/contract/JsonEditor.tsx
index 449206cc0..570a38cb2 100644
--- a/examples/chain-template/components/contract/JsonEditor.tsx
+++ b/examples/chain-template/components/contract/JsonEditor.tsx
@@ -1,17 +1,19 @@
 import AceEditor from 'react-ace';
 import { useTheme } from '@interchain-ui/react';
-
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-textmate';
 import 'ace-builds/src-noconflict/theme-cloud9_night';
 
+import { darkColors } from '@/config';
+
 type JsonEditorProps = {
   value: string;
   lines: number;
   setValue?: (value: string) => void;
   readOnly?: boolean;
   isValid?: boolean;
+  enableFolding?: boolean;
 };
 
 export const JsonEditor = ({
@@ -20,27 +22,44 @@ export const JsonEditor = ({
   lines,
   readOnly = false,
   isValid = true,
+  enableFolding = false,
 }: JsonEditorProps) => {
   const { theme } = useTheme();
 
+  const trackColor = darkColors!.blackAlpha50;
+  const thumbColor = darkColors!.blackAlpha400;
+
+  const editorStyle: React.CSSProperties = {
+    width: '100%',
+    background: 'transparent',
+    offset: 0,
+    ...(theme === 'dark' && {
+      scrollbarColor: `${thumbColor} ${trackColor}`,
+      '&::-webkit-scrollbar-track': {
+        background: trackColor,
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: thumbColor,
+      },
+    }),
+  };
+
   return (
     <AceEditor
       mode="json"
       theme={theme === 'light' ? 'textmate' : 'cloud9_night'}
       fontSize="14px"
       readOnly={readOnly}
-      style={{
-        width: '100%',
-        background: 'transparent',
-        offset: 0,
-      }}
+      style={editorStyle}
       setOptions={{
         useWorker: false,
         printMargin: false,
+        showFoldWidgets: enableFolding,
+        foldStyle: 'markbegin',
       }}
       tabSize={2}
       wrapEnabled={readOnly && !isValid}
-      showGutter={false}
+      showGutter={enableFolding}
       minLines={lines}
       maxLines={lines}
       highlightActiveLine={!readOnly}
diff --git a/examples/chain-template/components/contract/MyContractsTab.tsx b/examples/chain-template/components/contract/MyContractsTab.tsx
index fca89ab49..5e2d3b741 100644
--- a/examples/chain-template/components/contract/MyContractsTab.tsx
+++ b/examples/chain-template/components/contract/MyContractsTab.tsx
@@ -13,7 +13,7 @@ const ContentViews = {
   CREATE_FROM_CODE_ID: 'create_from_code_id',
 } as const;
 
-type ContentView = (typeof ContentViews)[keyof typeof ContentViews];
+type ContentView = typeof ContentViews[keyof typeof ContentViews];
 
 const contractCreationOptions = [
   { label: 'From Upload', value: ContentViews.CREATE_FROM_UPLOAD },
@@ -27,11 +27,11 @@ type MyContractsTabProps = {
 
 export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
   const [contentView, setContentView] = useState<ContentView>(
-    ContentViews.MY_CONTRACTS,
+    ContentViews.MY_CONTRACTS
   );
 
   return (
-    <Box display={show ? 'block' : 'none'} maxWidth="980px" mx="auto">
+    <Box display={show ? 'block' : 'none'}>
       <MyContractsTable
         title="My Contracts"
         show={contentView === ContentViews.MY_CONTRACTS}
diff --git a/examples/chain-template/components/contract/TxSuccessCard.tsx b/examples/chain-template/components/contract/TxSuccessCard.tsx
deleted file mode 100644
index 3fe196df4..000000000
--- a/examples/chain-template/components/contract/TxSuccessCard.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Box, Divider, Icon, Text } from '@interchain-ui/react';
-import { useCopyToClipboard } from '@/hooks';
-
-type TxSuccessCardProps = {
-  title: string;
-  description?: string;
-  infoItems: TxInfoItem[];
-  footer: React.ReactNode;
-  show?: boolean;
-};
-
-export const TxSuccessCard = ({
-  title,
-  description,
-  infoItems,
-  footer,
-  show = true,
-}: TxSuccessCardProps) => {
-  return (
-    <Box
-      display={show ? 'flex' : 'none'}
-      width="420px"
-      mx="auto"
-      p="20px"
-      flexDirection="column"
-      alignItems="center"
-      gap="20px"
-      borderRadius="4px"
-      borderWidth="1px"
-      borderStyle="solid"
-      borderColor="$blackAlpha200"
-    >
-      <Box position="relative">
-        <Box
-          width="50px"
-          height="50px"
-          borderRadius="$full"
-          bg="$green600"
-          opacity="0.1"
-        />
-        <Box
-          position="absolute"
-          top="50%"
-          left="50%"
-          transform="translate(-50%, -50%)"
-        >
-          <Icon name="checkLine" size="$6xl" color="$green400" />
-        </Box>
-      </Box>
-
-      <Box textAlign="center">
-        <Text color="$blackAlpha600" fontSize="24px" fontWeight="700">
-          {title}
-        </Text>
-
-        {description && (
-          <Text
-            color="$blackAlpha500"
-            fontSize="12px"
-            fontWeight="500"
-            attributes={{ mt: '8px' }}
-          >
-            {description}
-          </Text>
-        )}
-      </Box>
-
-      <Divider opacity="0.4" />
-
-      <Box width="$full">
-        {infoItems.map((item) => (
-          <TxInfoItem key={item.label} {...item} />
-        ))}
-      </Box>
-
-      <Divider opacity="0.4" />
-
-      {footer}
-    </Box>
-  );
-};
-
-export type TxInfoItem = {
-  label: string;
-  displayValue: string;
-  allowCopy?: boolean;
-  actualValue?: string;
-};
-
-const TxInfoItem = ({
-  label,
-  displayValue,
-  actualValue,
-  allowCopy = true,
-}: TxInfoItem) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
-
-  return (
-    <Box
-      display="flex"
-      p="10px"
-      justifyContent="space-between"
-      alignItems="center"
-    >
-      <Text color="$blackAlpha500" fontSize="16px" fontWeight="500">
-        {label}
-      </Text>
-      <Box display="flex" alignItems="center" gap="10px">
-        <Text color="$blackAlpha600" fontSize="16px" fontWeight="500">
-          {displayValue}
-        </Text>
-        {allowCopy && (
-          <Box
-            attributes={{
-              onClick: () => copyToClipboard(actualValue ?? displayValue),
-            }}
-            cursor="pointer"
-            display="flex"
-            alignItems="center"
-          >
-            <Icon
-              size="$lg"
-              name={isCopied ? 'checkLine' : 'copy'}
-              color={isCopied ? '$green600' : '$blackAlpha500'}
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-};
diff --git a/examples/chain-template/components/contract/TxSuccessDisplay.tsx b/examples/chain-template/components/contract/TxSuccessDisplay.tsx
new file mode 100644
index 000000000..5bb219a86
--- /dev/null
+++ b/examples/chain-template/components/contract/TxSuccessDisplay.tsx
@@ -0,0 +1,147 @@
+import { Box, Divider, Icon, Text } from '@interchain-ui/react';
+import { useCopyToClipboard, useDetectBreakpoints } from '@/hooks';
+import { JsonEditor } from './JsonEditor';
+
+type TxSuccessDisplayProps = {
+  title?: string;
+  infoItems?: TxInfoItem[];
+  footer?: React.ReactNode;
+  txResult?: object;
+  showStatus?: boolean;
+  showJson?: boolean;
+  show?: boolean;
+};
+
+export const TxSuccessDisplay = ({
+  title = 'Transaction Details',
+  infoItems,
+  txResult,
+  footer,
+  show = true,
+  showJson = true,
+  showStatus = true,
+}: TxSuccessDisplayProps) => {
+  const jsonTxResult = JSON.stringify(txResult, null, 2);
+  const { isTablet } = useDetectBreakpoints();
+
+  return (
+    <Box
+      display={show ? 'flex' : 'none'}
+      flexDirection="column"
+      gap="20px"
+      mx="auto"
+      width={isTablet ? '100%' : '60%'}
+    >
+      <Text color="$blackAlpha600" fontSize="24px" fontWeight="500">
+        {title}
+      </Text>
+
+      <Divider opacity="0.4" />
+
+      <Box width="$full">
+        {showStatus && (
+          <TxInfoItem
+            label="Status"
+            customValue={
+              <Box display="flex" alignItems="center" gap="6px">
+                <Text color="$green600" fontSize="16px" fontWeight="500">
+                  Success
+                </Text>
+                <Icon size="$lg" name="checkboxCircle" color="$green600" />
+              </Box>
+            }
+          />
+        )}
+
+        {infoItems &&
+          infoItems.map((item) => <TxInfoItem key={item.label} {...item} />)}
+
+        {showJson && (
+          <TxInfoItem
+            label="Raw JSON"
+            direction="column"
+            customValue={
+              <Box
+                width="$full"
+                borderWidth="1px"
+                borderStyle="solid"
+                borderColor="$blackAlpha300"
+                borderRadius="4px"
+              >
+                <JsonEditor
+                  value={jsonTxResult}
+                  lines={26}
+                  readOnly
+                  enableFolding
+                />
+              </Box>
+            }
+          />
+        )}
+      </Box>
+
+      {footer}
+    </Box>
+  );
+};
+
+export type TxInfoItem = {
+  label: string;
+  value?: string;
+  showCopy?: boolean;
+  copyValue?: string;
+  customValue?: React.ReactNode;
+  direction?: 'row' | 'column';
+};
+
+const TxInfoItem = ({
+  label,
+  value,
+  showCopy = false,
+  copyValue,
+  customValue,
+  direction = 'row',
+}: TxInfoItem) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+
+  return (
+    <Box
+      display="flex"
+      alignItems={direction === 'row' ? 'center' : 'flex-start'}
+      flexDirection={direction}
+      gap="20px"
+      py="10px"
+    >
+      <Box width={direction === 'row' ? '180px' : 'auto'}>
+        <Text color="$blackAlpha500" fontSize="16px" fontWeight="500">
+          {label}
+        </Text>
+      </Box>
+      {customValue ? (
+        customValue
+      ) : (
+        <Box display="flex" alignItems="center" gap="10px">
+          <Text color="$blackAlpha600" fontSize="16px" fontWeight="500">
+            {value}
+          </Text>
+          {showCopy && (
+            <Box
+              attributes={{
+                onClick: () => copyToClipboard(copyValue ?? value ?? ''),
+              }}
+              cursor="pointer"
+              display="flex"
+              alignItems="center"
+            >
+              <Icon
+                size="$lg"
+                name={isCopied ? 'checkLine' : 'copy'}
+                color={isCopied ? '$green600' : '$blackAlpha500'}
+              />
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/examples/chain-template/components/staking/Overview.tsx b/examples/chain-template/components/staking/Overview.tsx
index d70aaa561..a860e3a59 100644
--- a/examples/chain-template/components/staking/Overview.tsx
+++ b/examples/chain-template/components/staking/Overview.tsx
@@ -72,9 +72,9 @@ const Overview = ({
             ''
           }
           symbol={coin.symbol}
-          totalAmount={Number(totalAmount) || 0}
+          totalAmount={Number(totalAmount || 0)}
           totalPrice={calcDollarValue(coin.base, totalAmount, prices)}
-          available={Number(balance) || 0}
+          available={Number(balance || 0)}
           availablePrice={calcDollarValue(coin.base, balance, prices)}
         />
       </Box>
@@ -82,11 +82,11 @@ const Overview = ({
       <Box mb={{ mobile: '$12', tablet: '$14' }}>
         <StakingClaimHeader
           symbol={coin.symbol}
-          rewardsAmount={Number(rewards.total) || 0}
-          stakedAmount={Number(staked) || 0}
+          rewardsAmount={Number(rewards?.total || 0)}
+          stakedAmount={Number(staked || 0)}
           onClaim={onClaimRewardClick}
           isLoading={isClaiming}
-          isDisabled={!isGreaterThanZero(rewards.total)}
+          isDisabled={!isGreaterThanZero(rewards?.total || 0)}
         />
       </Box>
     </>
diff --git a/examples/chain-template/components/staking/StakingSection.tsx b/examples/chain-template/components/staking/StakingSection.tsx
index 67024c1b7..acd8d9cd2 100644
--- a/examples/chain-template/components/staking/StakingSection.tsx
+++ b/examples/chain-template/components/staking/StakingSection.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useChain } from '@cosmos-kit/react';
 import { ChainName } from 'cosmos-kit';
 import { Box, Spinner, Text } from '@interchain-ui/react';
@@ -13,13 +12,9 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
   const { data, isLoading, refetch } = useStakingData(chainName);
   const { data: logos, isLoading: isFetchingLogos } = useValidatorLogos(
     chainName,
-    data?.allValidators || [],
+    data?.allValidators || []
   );
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   return (
     <Box my="$16" maxWidth="$containerMd" mx="auto">
       {!isWalletConnected ? (
diff --git a/examples/chain-template/hooks/staking/useStakingData.ts b/examples/chain-template/hooks/staking/useStakingData.ts
index f23a70808..10bcec768 100644
--- a/examples/chain-template/hooks/staking/useStakingData.ts
+++ b/examples/chain-template/hooks/staking/useStakingData.ts
@@ -65,6 +65,7 @@ export const useStakingData = (chainName: string) => {
     options: {
       enabled: isDataQueryEnabled,
       select: ({ balance }) => shiftDigits(balance?.amount || '0', -exp),
+      refetchOnMount: 'always',
     },
   });
 
diff --git a/examples/chain-template/utils/contract.ts b/examples/chain-template/utils/contract.ts
index 3511318c3..1946a7090 100644
--- a/examples/chain-template/utils/contract.ts
+++ b/examples/chain-template/utils/contract.ts
@@ -1,14 +1,14 @@
-import { Asset, Chain } from '@chain-registry/types';
+import { Asset, AssetList, Chain } from '@chain-registry/types';
 import { toBech32, fromBech32 } from '@cosmjs/encoding';
 import { DeliverTxResponse } from '@cosmjs/cosmwasm-stargate';
-import { logs } from '@cosmjs/stargate';
+import { Coin, logs, parseCoins } from '@cosmjs/stargate';
 import { CodeInfoResponse } from 'interchain-query/cosmwasm/wasm/v1/query';
 import { AccessType } from 'interchain-query/cosmwasm/wasm/v1/types';
 import BigNumber from 'bignumber.js';
 
 export const validateContractAddress = (
   address: string,
-  bech32Prefix: string,
+  bech32Prefix: string
 ) => {
   if (!bech32Prefix)
     return 'Cannot retrieve bech32 prefix of the current network.';
@@ -70,7 +70,7 @@ export const bytesToKb = (bytes: number) => {
 export const findAttr = (
   events: logs.Log['events'],
   eventType: string,
-  attrKey: string,
+  attrKey: string
 ) => {
   const mimicLog: logs.Log = {
     msg_index: 0,
@@ -93,7 +93,7 @@ export type PrettyTxResult = {
 };
 
 export const prettyStoreCodeTxResult = (
-  txResponse: DeliverTxResponse,
+  txResponse: DeliverTxResponse
 ): PrettyTxResult => {
   const events = txResponse.events;
   const codeId = findAttr(events, 'store_code', 'code_id') ?? '0';
@@ -110,6 +110,29 @@ export const prettyStoreCodeTxResult = (
   };
 };
 
+export const formatTxFee = (txFee: string, assets: AssetList) => {
+  let coins: Coin[] = [];
+
+  try {
+    coins = parseCoins(txFee);
+  } catch (e) {
+    console.error(e);
+  }
+
+  if (coins.length === 0) return '--';
+
+  const denom = coins[0].denom;
+  const amount = coins[0].amount;
+  const asset = assets.assets.find((asset) => asset.base === denom);
+  if (!asset) return '--';
+
+  const exponent = getExponentFromAsset(asset);
+  if (!exponent) return '--';
+
+  const displayAmount = BigNumber(amount).shiftedBy(-exponent).toFixed();
+  return `${displayAmount} ${asset.symbol}`;
+};
+
 export const splitCamelCase = (text: string): string => {
   return text.replace(/([A-Z])/g, ' $1').trim();
 };
@@ -117,7 +140,7 @@ export const splitCamelCase = (text: string): string => {
 export const resolvePermission = (
   address: string,
   permission: AccessType,
-  permissionAddresses: string[] = [],
+  permissionAddresses: string[] = []
 ): boolean =>
   permission === AccessType.ACCESS_TYPE_EVERYBODY ||
   (address ? permissionAddresses.includes(address) : false);
diff --git a/examples/chain-template/utils/staking/math.ts b/examples/chain-template/utils/staking/math.ts
index cc6887791..bec54f515 100644
--- a/examples/chain-template/utils/staking/math.ts
+++ b/examples/chain-template/utils/staking/math.ts
@@ -22,7 +22,10 @@ export const toNumber = (val: string, decimals: number = 6) => {
 
 export const sum = (...args: string[]) => {
   return args
-    .reduce((prev, cur) => prev.plus(cur), new BigNumber(0))
+    .reduce(
+      (prev, cur) => prev.plus(new BigNumber(cur).isNaN() ? 0 : cur),
+      new BigNumber(0)
+    )
     .toString();
 };
 
@@ -37,12 +40,9 @@ export const calcDollarValue = (
     .toNumber();
 };
 
-export const toBaseAmount = (
-  num: string | number,
-  places: number
-) => {
+export const toBaseAmount = (num: string | number, places: number) => {
   return new BigNumber(num)
     .shiftedBy(places)
     .integerValue(BigNumber.ROUND_DOWN)
     .toString();
-};
\ No newline at end of file
+};
diff --git a/examples/spawn/components/contract/MyContractsTab.tsx b/examples/spawn/components/contract/MyContractsTab.tsx
index a91438945..5e2d3b741 100644
--- a/examples/spawn/components/contract/MyContractsTab.tsx
+++ b/examples/spawn/components/contract/MyContractsTab.tsx
@@ -31,7 +31,7 @@ export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
   );
 
   return (
-    <Box display={show ? 'block' : 'none'} mx="auto">
+    <Box display={show ? 'block' : 'none'}>
       <MyContractsTable
         title="My Contracts"
         show={contentView === ContentViews.MY_CONTRACTS}
diff --git a/examples/spawn/utils/contract.ts b/examples/spawn/utils/contract.ts
index 28444c969..5c827efc4 100644
--- a/examples/spawn/utils/contract.ts
+++ b/examples/spawn/utils/contract.ts
@@ -1,4 +1,4 @@
-import { Asset, AssetList, Chain } from '@chain-registry/types';
+import { AssetList, Chain } from '@chain-registry/types';
 import { toBech32, fromBech32 } from '@cosmjs/encoding';
 import { DeliverTxResponse } from '@cosmjs/cosmwasm-stargate';
 import { Coin, logs, parseCoins } from '@cosmjs/stargate';