Fix spawn example issues

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={() => {

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}

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}