chore: sprint 2 fixes (#1230)

chore: fixes

frontend/src/app/(routes)/cosmwasm/components/ContractInfo.tsx

@@ -26,7 +26,7 @@ const ContractInfo = ({ chainID }: { chainID: string }) => {
         <div className="pb-4 border-b-[1px] border-[#ffffff1e] font-bold text-[18px]">
           {selectedContractInfo.label || selectedContractAddress}
         </div>
-        <div className="flex gap-10 bg-[#FFFFFF0D] p-10 rounded-2xl">
+        <div className="flex gap-10 bg-[#FFFFFF0D] p-10 rounded-2xl flex-wrap">
           <ContractInfoAttribute name="Network" value={chainID} />
           <ContractInfoAttribute
             name="From Code"

frontend/src/app/(routes)/transfers/components/IBCSwap.tsx

@@ -30,6 +30,7 @@ import { fromBech32 } from '@cosmjs/encoding';
 import { shortenAddress } from '@/utils/util';
 import { setError } from '@/store/features/common/commonSlice';
 import RoutePreview from './RoutePreview';
+import { SWAP_ROUTE_ERROR } from '@/utils/constants';
 
 const emptyBalance = {
   amount: 0,
@@ -643,17 +644,27 @@ const IBCSwap = () => {
               Fetching route <span className="dots-flashing"></span>{' '}
             </div>
           ) : routeError ? (
-            <div>{routeError}</div>
+            <div className="flex justify-between">
+              <div className='text-red-400'>{routeError}</div>
+              {routeError === SWAP_ROUTE_ERROR ? (
+                <div
+                  onClick={fetchSwapRoute}
+                  className="text-[14px] underline font-extralight underline-offset-[3px] cursor-pointer"
+                >
+                  Retry
+                </div>
+              ) : null}
+            </div>
           ) : (
             <div>
               {!routeLoading && swapRoute ? (
                 <div className="flex justify-between">
                   <div>Route found</div>
                   <div
-                    className="underline font-light underline-offset-[3px] cursor-pointer"
+                    className="text-[14px] underline font-extralight underline-offset-[3px] cursor-pointer"
                     onClick={() => setShowRoute((prev) => !prev)}
                   >
-                    {showRoute ? 'Close' : 'View route'}
+                    {showRoute ? 'Close Preview' : 'View route'}
                   </div>
                 </div>
               ) : (

frontend/src/app/(routes)/transfers/components/MultiTransfer.tsx

@@ -11,18 +11,9 @@ import useGetChainInfo from '../../../../custom-hooks/useGetChainInfo';
 import { multiTxns } from '@/store/features/bank/bankSlice';
 import { TxStatus } from '@/types/enums';
 import { setError } from '@/store/features/common/commonSlice';
-import { TransfersTab } from './TransfersPage';
 import NotSupported from '@/components/illustrations/NotSupported';
 
-const MultiTransfer = ({
-  chainID,
-  tab,
-  handleTabChange,
-}: {
-  chainID: string;
-  tab: TransfersTab;
-  handleTabChange: () => void;
-}) => {
+const MultiTransfer = ({ chainID }: { chainID: string }) => {
   const [msgs, setMsgs] = useState<Msg[]>([]);
   const txPendingStatus = useAppSelector((state) => state.bank.tx.status);
   const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
@@ -98,8 +89,6 @@ const MultiTransfer = ({
         <Summary
           chainIDs={[chainID]}
           borderStyle="rounded-[16px_16px_0px_0px]"
-          tab={tab}
-          handleTabChange={handleTabChange}
         />
       </div>
       {isAuthzMode ? (

frontend/src/app/(routes)/transfers/components/SingleTransfer.tsx

@@ -1,27 +1,17 @@
 import React from 'react';
 import Summary from './Summary';
 import SendPage from '../SendPage';
-import { TransfersTab } from './TransfersPage';
 
 const SingleTransfer = ({
   sortedAssets,
   chainIDs,
-  tab,
-  handleTabChange,
 }: {
   sortedAssets: ParsedAsset[];
   chainIDs: string[];
-  tab: TransfersTab;
-  handleTabChange: () => void;
 }) => {
   return (
     <div className="w-full h-full space-y-6 flex flex-col flex-1">
-      <Summary
-        chainIDs={chainIDs}
-        borderStyle="rounded-[16px_16px_0px_0px]"
-        tab={tab}
-        handleTabChange={handleTabChange}
-      />
+      <Summary chainIDs={chainIDs} borderStyle="rounded-[16px_16px_0px_0px]" />
       <div className="px-6 pb-6 flex flex-col flex-1">
         <SendPage sortedAssets={sortedAssets} />
       </div>

frontend/src/app/(routes)/transfers/components/Summary.tsx

@@ -1,18 +1,13 @@
 import Image from 'next/image';
 import React from 'react';
 import { useAppSelector } from '@/custom-hooks/StateHooks';
-import { TransfersTab } from './TransfersPage';
 
 const Summary = ({
   chainIDs,
   borderStyle,
-  tab,
-  handleTabChange,
 }: {
   chainIDs: string[];
   borderStyle: string;
-  tab: TransfersTab;
-  handleTabChange: () => void;
 }) => {
   const nameToChainIDs = useAppSelector((state) => state.wallet.nameToChainIDs);
   let chainName = 'All Networks';
@@ -59,14 +54,6 @@ const Summary = ({
           className="object-cover h-full w-full mr-[360px]"
         />
       </div>
-      {chainIDs.length === 1 && (
-        <button
-          className="secondary-custom-btn ml-auto"
-          onClick={handleTabChange}
-        >
-          {tab.to}
-        </button>
-      )}
     </div>
   );
 };

frontend/src/app/(routes)/transfers/components/TransfersPage.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import MainTopNav from '@/components/MainTopNav';
 import TransfersHistory from './TransfersHistory';
-import { TRANSFERS_TAB2 } from '../../../../utils/constants';
-import { TRANSFERS_TAB1 } from '@/utils/constants';
 import SingleTransfer from './SingleTransfer';
 import MultiTransfer from './MultiTransfer';
 import useInitBalances from '@/custom-hooks/useInitBalances';
@@ -25,36 +23,43 @@ const TransfersPage = ({ chainIDs }: { chainIDs: string[] }) => {
     AuthzSkipIBC: true,
   });
 
-  const [tab, setTab] = useState<TransfersTab>(TRANSFERS_TAB1);
   const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled);
   const isFeegrantMode = useAppSelector(
     (state) => state.feegrant.feegrantModeEnabled
   );
 
-  const changeTab = (tab: TransfersTab) => {
-    if (tab === TRANSFERS_TAB1) setTab(TRANSFERS_TAB2);
-    else setTab(TRANSFERS_TAB1);
-  };
-
   useInitBalances({ chainIDs });
 
-  const handleTabChange = () => {
-    if (chainIDs.length > 1) {
+  const tabs = ['Send', 'Multi Send', 'Swap'];
+  const [selectedTab, setSelectedTab] = useState('Send');
+
+  const handleTabchange = (tab: string) => {
+    if (tab.toLowerCase() === 'multi send' && chainIDs.length > 1) {
       dispatch(
         setError({
           type: 'error',
           message: 'Multi transfer is not available for All networks!',
         })
       );
-
-      return;
+    } else if (isAuthzMode) {
+      dispatch(
+        setError({
+          type: 'error',
+          message: 'Swap is not suppported in Authz Mode',
+        })
+      );
+    } else if (isFeegrantMode) {
+      dispatch(
+        setError({
+          type: 'error',
+          message: 'Swap is not suppported in Feegrant Mode',
+        })
+      );
+    } else {
+      setSelectedTab(tab);
     }
-    changeTab(tab);
   };
 
-  const tabs = ['Send', 'Multi Send', 'Swap'];
-  const [selectedTab, setSelectedTab] = useState('Send');
-
   return (
     <div className="w-full flex justify-between max-h-screen text-white flex-1">
       <AuthzExecLoader chainIDs={chainIDs} />
@@ -71,36 +76,7 @@ const TransfersPage = ({ chainIDs }: { chainIDs: string[] }) => {
                     ? 'send-menu-item font-semibold'
                     : 'send-menu-item font-normal'
                 }
-                onClick={() => {
-                  if (
-                    tab.toLowerCase() === 'multi send' &&
-                    chainIDs.length > 1
-                  ) {
-                    dispatch(
-                      setError({
-                        type: 'error',
-                        message:
-                          'Multi transfer is not available for All networks!',
-                      })
-                    );
-                  } else if (isAuthzMode) {
-                    dispatch(
-                      setError({
-                        type: 'error',
-                        message: 'Swap is not suppported in Authz Mode',
-                      })
-                    );
-                  } else if (isFeegrantMode) {
-                    dispatch(
-                      setError({
-                        type: 'error',
-                        message: 'Swap is not suppported in Feegrant Mode',
-                      })
-                    );
-                  } else {
-                    setSelectedTab(tab);
-                  }
-                }}
+                onClick={() => handleTabchange(tab)}
               >
                 {tab}
               </div>
@@ -120,17 +96,11 @@ const TransfersPage = ({ chainIDs }: { chainIDs: string[] }) => {
               <SingleTransfer
                 sortedAssets={isAuthzMode ? authzSortedAssets : sortedAssets}
                 chainIDs={chainIDs}
-                tab={tab}
-                handleTabChange={handleTabChange}
               />
             </div>
           ) : selectedTab === 'Multi Send' ? (
             <div className="bg-[#0e0b26] rounded-2xl flex flex-col flex-1">
-              <MultiTransfer
-                chainID={chainIDs[0]}
-                tab={tab}
-                handleTabChange={handleTabChange}
-              />
+              <MultiTransfer chainID={chainIDs[0]} />
             </div>
           ) : (
             <IBCSwap />

frontend/src/custom-hooks/useContracts.ts

@@ -106,10 +106,7 @@ const useContracts = () => {
       /* eslint-disable @typescript-eslint/no-explicit-any */
     } catch (error: any) {
       const errMsg = error.message;
-      if (
-        errMsg?.includes('expected one of') ||
-        errMsg?.includes('missing field')
-      ) {
+      if (errMsg?.includes('expected') || errMsg?.includes('missing field')) {
         messages = extractContractMessages(error.message);
       } else {
         messages = [];
@@ -144,7 +141,7 @@ const useContracts = () => {
     } catch (error: any) {
       const errMsg = error.message;
       if (
-        errMsg?.includes('expected one of') ||
+        errMsg?.includes('expected') ||
         errMsg?.includes('missing field')
       ) {
         messages = extractContractMessages(error.message);