From 22bfa2feaf83cba54a6932d2b8568fd7e4e632af Mon Sep 17 00:00:00 2001
From: Satyam Bansal <satyamsgsits1994@gmail.com>
Date: Mon, 2 Sep 2024 14:23:28 +0530
Subject: [PATCH 1/4] Fix tab switch issue

---
 plugin/src/atoms/deployment.ts           |  95 ++++--
 plugin/src/features/Deployment/index.tsx | 369 +++++++++++++----------
 2 files changed, 270 insertions(+), 194 deletions(-)

diff --git a/plugin/src/atoms/deployment.ts b/plugin/src/atoms/deployment.ts
index da5c3e74..9d4d3f53 100644
--- a/plugin/src/atoms/deployment.ts
+++ b/plugin/src/atoms/deployment.ts
@@ -1,13 +1,14 @@
 import { atom } from 'jotai'
 import { type CallDataObject, type Input } from '../utils/types/contracts'
 
+export type Status = 'IDLE' | 'IN_PROGRESS' | 'ERROR' | 'DONE'
 const isDeployingAtom = atom<boolean>(false)
 
-const deployStatusAtom = atom<string>('')
+const deployStatusAtom = atom<Status>('IDLE')
 
 const isDelcaringAtom = atom<boolean>(false)
 
-const declStatusAtom = atom<string>('')
+const declStatusAtom = atom<Status>('IDLE')
 
 const constructorCalldataAtom = atom<CallDataObject>({})
 
@@ -19,38 +20,78 @@ const declTxHashAtom = atom<string>('')
 
 const deployTxHashAtom = atom<string>('')
 
-type Key = 'isDeploying' | 'deployStatus' | 'isDeclaring' | 'declStatus' | 'constructorCalldata' | 'constructorInputs' | 'notEnoughInputs' | 'declTxHash' | 'deployTxHash'
+type Key =
+  | 'isDeploying'
+  | 'deployStatus'
+  | 'isDeclaring'
+  | 'declStatus'
+  | 'constructorCalldata'
+  | 'constructorInputs'
+  | 'notEnoughInputs'
+  | 'declTxHash'
+  | 'deployTxHash'
 
 interface SetDeploymentAtom {
   key: Key
   value: string | boolean | CallDataObject | Input[]
 }
 
-const deploymentAtom = atom((get) => {
-  return {
-    isDeploying: get(isDeployingAtom),
-    deployStatus: get(deployStatusAtom),
-    isDeclaring: get(isDelcaringAtom),
-    declStatus: get(declStatusAtom),
-    constructorCalldata: get(constructorCalldataAtom),
-    constructorInputs: get(constructorInputsAtom),
-    notEnoughInputs: get(notEnoughInputsAtom),
-    declTxHash: get(declTxHashAtom),
-    deployTxHash: get(deployTxHashAtom)
+const deploymentAtom = atom(
+  (get) => {
+    return {
+      isDeploying: get(isDeployingAtom),
+      deployStatus: get(deployStatusAtom),
+      isDeclaring: get(isDelcaringAtom),
+      declStatus: get(declStatusAtom),
+      constructorCalldata: get(constructorCalldataAtom),
+      constructorInputs: get(constructorInputsAtom),
+      notEnoughInputs: get(notEnoughInputsAtom),
+      declTxHash: get(declTxHashAtom),
+      deployTxHash: get(deployTxHashAtom)
+    }
+  },
+  (_get, set, newValue: SetDeploymentAtom) => {
+    switch (newValue?.key) {
+      case 'isDeploying':
+        typeof newValue?.value === 'boolean' &&
+          set(isDeployingAtom, newValue?.value)
+        break
+      case 'deployStatus':
+        typeof newValue?.value === 'string' &&
+          set(deployStatusAtom, newValue?.value as Status)
+        break
+      case 'isDeclaring':
+        typeof newValue?.value === 'boolean' &&
+          set(isDelcaringAtom, newValue?.value)
+        break
+      case 'declStatus':
+        typeof newValue?.value === 'string' &&
+          set(declStatusAtom, newValue?.value as Status)
+        break
+      case 'constructorCalldata':
+        typeof newValue?.value === 'object' &&
+          !Array.isArray(newValue?.value) &&
+          set(constructorCalldataAtom, newValue?.value)
+        break
+      case 'constructorInputs':
+        Array.isArray(newValue?.value) &&
+          set(constructorInputsAtom, newValue?.value)
+        break
+      case 'notEnoughInputs':
+        typeof newValue?.value === 'boolean' &&
+          set(notEnoughInputsAtom, newValue?.value)
+        break
+      case 'declTxHash':
+        typeof newValue?.value === 'string' &&
+          set(declTxHashAtom, newValue?.value)
+        break
+      case 'deployTxHash':
+        typeof newValue?.value === 'string' &&
+          set(deployTxHashAtom, newValue?.value)
+        break
+    }
   }
-}, (_get, set, newValue: SetDeploymentAtom) => {
-  switch (newValue?.key) {
-    case 'isDeploying': typeof newValue?.value === 'boolean' && set(isDeployingAtom, newValue?.value); break
-    case 'deployStatus': typeof newValue?.value === 'string' && set(deployStatusAtom, newValue?.value); break
-    case 'isDeclaring': typeof newValue?.value === 'boolean' && set(isDelcaringAtom, newValue?.value); break
-    case 'declStatus': typeof newValue?.value === 'string' && set(declStatusAtom, newValue?.value); break
-    case 'constructorCalldata': typeof newValue?.value === 'object' && !Array.isArray(newValue?.value) && set(constructorCalldataAtom, newValue?.value); break
-    case 'constructorInputs': Array.isArray(newValue?.value) && set(constructorInputsAtom, newValue?.value); break
-    case 'notEnoughInputs': typeof newValue?.value === 'boolean' && set(notEnoughInputsAtom, newValue?.value); break
-    case 'declTxHash': typeof newValue?.value === 'string' && set(declTxHashAtom, newValue?.value); break
-    case 'deployTxHash': typeof newValue?.value === 'string' && set(deployTxHashAtom, newValue?.value); break
-  }
-})
+)
 
 export {
   isDeployingAtom,
diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx
index f24f83d1..a5b4078b 100644
--- a/plugin/src/features/Deployment/index.tsx
+++ b/plugin/src/features/Deployment/index.tsx
@@ -1,16 +1,13 @@
 import React, { useEffect, useState } from 'react'
-
 import { type BigNumberish } from 'ethers'
+import { constants } from 'starknet'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import CompiledContracts from '../../components/CompiledContracts'
-import {
-  type Contract
-} from '../../utils/types/contracts'
+import { type Contract } from '../../utils/types/contracts'
 import { getConstructor, getShortenedHash } from '../../utils/utils'
 import Container from '../../components/ui_components/Container'
 
 import { type AccordianTabs } from '../Plugin'
-import { constants } from 'starknet'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import transactionsAtom from '../../atoms/transactions'
 
 import './styles.css'
@@ -78,7 +75,10 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
   const env = useAtomValue(envAtom)
 
   const declTxStatus = useWaitForTransaction({ hash: declTxHash, watch: true })
-  const deployTxStatus = useWaitForTransaction({ hash: deployTxHash, watch: true })
+  const deployTxStatus = useWaitForTransaction({
+    hash: deployTxHash,
+    watch: true
+  })
 
   const [chainId, setChainId] = useState<constants.StarknetChainId>(
     constants.StarknetChainId.SN_GOERLI
@@ -108,52 +108,68 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
     console.log('declTxHash', declTxHash, declTxStatus.status, env)
     if (declTxHash === '') {
       setIsDeclaring(false)
-      setDeclStatus('')
+      setDeclStatus('IDLE')
       return
     }
     if (env !== 'wallet') return
     if (declTxStatus.status === 'success') {
-      setDeclStatus('done')
+      setDeclStatus('DONE')
       setIsDeclaring(false)
       remixClient.emit('statusChanged', {
         key: 'succeed',
         type: 'success',
         title: `Contract ${selectedContract?.name ?? ''} declared!`
       })
-      remixClient.call('terminal', 'log', {
-        value: JSON.stringify(declTxStatus.data, null, 2),
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: JSON.stringify(declTxStatus.data, null, 2),
+          type: 'info'
+        })
+        .catch(() => {})
 
-      remixClient.call('terminal', 'log', {
-        value: `--------------------- End getting declare contract: ${selectedContract?.name ?? ''} tx receipt ------------------`,
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: `--------------------- End getting declare contract: ${
+            selectedContract?.name ?? ''
+          } tx receipt ------------------`,
+          type: 'info'
+        })
+        .catch(() => {})
     }
     if (declTxStatus.status === 'error') {
-      setDeclStatus('error')
+      setDeclStatus('ERROR')
       remixClient.emit('statusChanged', {
         key: 'failed',
         type: 'error',
         title: 'Declaration failed'
       })
-      remixClient.call('terminal', 'log', {
-        value: JSON.stringify(declTxStatus, null, 2),
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: JSON.stringify(declTxStatus, null, 2),
+          type: 'info'
+        })
+        .catch(() => {})
 
-      remixClient.call('terminal', 'log', {
-        value: `--------------------- End getting declare contract: ${selectedContract?.name ?? ''} tx receipt ------------------`,
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: `--------------------- End getting declare contract: ${
+            selectedContract?.name ?? ''
+          } tx receipt ------------------`,
+          type: 'info'
+        })
+        .catch(() => {})
       setIsDeclaring(false)
     }
     if (declTxStatus.status === 'pending') {
       if (isDeclaring) {
-        remixClient.call('terminal', 'log', {
-          value: `--------------------- Getting declare contract: ${selectedContract?.name ?? ''} tx receipt --------------------`,
-          type: 'info'
-        }).catch(() => {})
+        remixClient
+          .call('terminal', 'log', {
+            value: `--------------------- Getting declare contract: ${
+              selectedContract?.name ?? ''
+            } tx receipt --------------------`,
+            type: 'info'
+          })
+          .catch(() => {})
       }
     }
   }, [declTxHash, declTxStatus.status])
@@ -162,67 +178,76 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
     console.log('deployTxHash', deployTxHash, deployTxStatus.status, env)
     if (deployTxHash === '') {
       setIsDeploying(false)
-      setDeployStatus('')
+      setDeployStatus('IDLE')
       return
     }
     if (env !== 'wallet') return
     if (deployTxStatus.status === 'success') {
-      setDeployStatus('done')
+      setDeployStatus('DONE')
       setIsDeploying(false)
       remixClient.emit('statusChanged', {
         key: 'succeed',
         type: 'success',
         title: `Contract ${selectedContract?.name ?? ''} deployed!`
       })
-      remixClient.call('terminal', 'log', {
-        value: JSON.stringify(deployTxStatus.data, null, 2),
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: JSON.stringify(deployTxStatus.data, null, 2),
+          type: 'info'
+        })
+        .catch(() => {})
 
-      remixClient.call('terminal', 'log', {
-        value: `--------------------- End getting deploy contract: ${selectedContract?.name ?? ''} tx receipt ------------------`,
-        type: 'info'
-      }).catch(() => {})
-      setActiveTab('interaction')
+      remixClient
+        .call('terminal', 'log', {
+          value: `--------------------- End getting deploy contract: ${
+            selectedContract?.name ?? ''
+          } tx receipt ------------------`,
+          type: 'info'
+        })
+        .catch(() => {})
     }
     if (deployTxStatus.status === 'error') {
-      setDeployStatus('error')
+      setDeployStatus('ERROR')
       remixClient.emit('statusChanged', {
         key: 'failed',
         type: 'error',
         title: 'Deployment failed'
       })
-      remixClient.call('terminal', 'log', {
-        value: JSON.stringify(deployTxStatus, null, 2),
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: JSON.stringify(deployTxStatus, null, 2),
+          type: 'info'
+        })
+        .catch(() => {})
 
-      remixClient.call('terminal', 'log', {
-        value: `--------------------- End getting deploy contract: ${selectedContract?.name ?? ''} tx receipt ------------------`,
-        type: 'info'
-      }).catch(() => {})
+      remixClient
+        .call('terminal', 'log', {
+          value: `--------------------- End getting deploy contract: ${
+            selectedContract?.name ?? ''
+          } tx receipt ------------------`,
+          type: 'info'
+        })
+        .catch(() => {})
       setIsDeploying(false)
     }
     if (deployTxStatus.status === 'pending') {
       if (isDeploying) {
-        remixClient.call('terminal', 'log', {
-          value: `--------------------- Getting deploy contract: ${selectedContract?.name ?? ''} tx receipt --------------------`,
-          type: 'info'
-        }).catch(() => {})
+        remixClient
+          .call('terminal', 'log', {
+            value: `--------------------- Getting deploy contract: ${
+              selectedContract?.name ?? ''
+            } tx receipt --------------------`,
+            type: 'info'
+          })
+          .catch(() => {})
       }
     }
   }, [deployTxHash, deployTxStatus.status])
 
   const declareContract = async (): Promise<void> => {
+    setDeclStatus('IDLE')
     setIsDeclaring(true)
-    remixClient.emit('statusChanged', {
-      key: 'loading',
-      type: 'info',
-      title: `Declaring ${selectedContract?.name ?? ''} ...`
-    })
-
     let updatedTransactions = transactions
-
     try {
       if (account === null || provider === null) {
         throw new Error('No account or provider selected!')
@@ -231,7 +256,12 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
       if (selectedContract === null) {
         throw new Error('No contract selected for deployment!')
       }
-      setDeclStatus('Declaring...')
+      remixClient.emit('statusChanged', {
+        key: 'loading',
+        type: 'info',
+        title: `Declaring ${selectedContract?.name ?? ''} ...`
+      })
+      setDeclStatus('IN_PROGRESS')
       try {
         try {
           await account.getClassByHash(selectedContract.classHash)
@@ -245,7 +275,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
             )} already has been declared, you can proceed to deployment`
           )
           setIsDeclaring(false)
-          setDeclStatus('done')
+          setDeclStatus('DONE')
           remixClient.emit('statusChanged', {
             key: 'succeed',
             type: 'success',
@@ -256,11 +286,14 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
             value: `------------------------ Declaring contract: ${selectedContract.name} ------------------------`,
             type: 'info'
           })
-          const declareResponse = await account.declare({
-            contract: selectedContract.sierra,
-            classHash: selectedContract.classHash,
-            compiledClassHash: selectedContract.compiledClassHash
-          }, { maxFee: 1e18 })
+          const declareResponse = await account.declare(
+            {
+              contract: selectedContract.sierra,
+              classHash: selectedContract.classHash,
+              compiledClassHash: selectedContract.compiledClassHash
+            },
+            { maxFee: 1e18 }
+          )
           await remixClient.call('terminal', 'log', {
             value: JSON.stringify(declareResponse, null, 2),
             type: 'info'
@@ -287,7 +320,9 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
               value: `--------------------- Getting declare contract: ${selectedContract.name} tx receipt --------------------`,
               type: 'info'
             })
-            const txReceipt = await account.waitForTransaction(declareResponse.transaction_hash)
+            const txReceipt = await account.waitForTransaction(
+              declareResponse.transaction_hash
+            )
             await remixClient.call('terminal', 'log', {
               value: JSON.stringify(txReceipt, null, 2),
               type: 'info'
@@ -296,13 +331,13 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
               value: `--------------------- End getting declare contract: ${selectedContract.name} tx receipt ------------------`,
               type: 'info'
             })
-            setDeclStatus('done')
+            setDeclStatus('DONE')
             setIsDeclaring(false)
           }
         }
         setContractDeclaration(selectedContract)
       } catch (error) {
-        setDeclStatus('error')
+        setDeclStatus('ERROR')
         setIsDeclaring(false)
         if (error instanceof Error) {
           await remixClient.call('terminal', 'log', {
@@ -317,7 +352,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         }
       }
     } catch (error) {
-      setDeclStatus('error')
+      setDeclStatus('ERROR')
       setIsDeclaring(false)
       if (error instanceof Error) {
         await remixClient.call('terminal', 'log', {
@@ -334,12 +369,8 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
   }
 
   const deploy = async (calldata: BigNumberish[]): Promise<void> => {
+    setDeployStatus('IDLE')
     setIsDeploying(true)
-    remixClient.emit('statusChanged', {
-      key: 'loading',
-      type: 'info',
-      title: `Deploying ${selectedContract?.name ?? ''} ...`
-    })
     const classHash = selectedContract?.classHash
     const updatedTransactions = transactions
     try {
@@ -350,18 +381,25 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
       if (selectedContract === null) {
         throw new Error('No contract selected for deployment!')
       }
+      remixClient.emit('statusChanged', {
+        key: 'loading',
+        type: 'info',
+        title: `Deploying ${selectedContract?.name ?? ''} ...`
+      })
 
-      setDeployStatus('Deploying...')
-
+      setDeployStatus('IN_PROGRESS')
       await remixClient.call('terminal', 'log', {
         value: `------------------------ Deploying contract: ${selectedContract.name} ------------------------`,
         type: 'info'
       })
 
-      const deployResponse = await account.deploy({
-        classHash: classHash ?? selectedContract.classHash,
-        constructorCalldata: calldata
-      }, { maxFee: 1e18 })
+      const deployResponse = await account.deploy(
+        {
+          classHash: classHash ?? selectedContract.classHash,
+          constructorCalldata: calldata
+        },
+        { maxFee: 1e18 }
+      )
 
       await remixClient.call('terminal', 'log', {
         value: JSON.stringify(deployResponse, null, 2),
@@ -385,14 +423,16 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
       ])
       if (env === 'wallet') setDeployTxHash(deployResponse.transaction_hash)
       else {
-        setDeployStatus('done')
+        setDeployStatus('DONE')
         setIsDeploying(false)
         await remixClient.call('terminal', 'log', {
           value: `--------------------- Getting deploy contract: ${selectedContract.name} tx receipt --------------------`,
           type: 'info'
         })
 
-        const txReceipt = await account.waitForTransaction(deployResponse.transaction_hash)
+        const txReceipt = await account.waitForTransaction(
+          deployResponse.transaction_hash
+        )
         await remixClient.call('terminal', 'log', {
           value: JSON.stringify(txReceipt, null, 2),
           type: 'info'
@@ -404,9 +444,12 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         })
         setActiveTab('interaction')
       }
-      setContractDeployment(selectedContract, deployResponse.contract_address[0])
+      setContractDeployment(
+        selectedContract,
+        deployResponse.contract_address[0]
+      )
     } catch (error) {
-      setDeployStatus('error')
+      setDeployStatus('ERROR')
       setIsDeploying(false)
       if (error instanceof Error) {
         await remixClient.call('terminal', 'log', {
@@ -443,10 +486,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
     if (account == null) return
     const declaredContract = {
       ...currentContract,
-      declaredInfo: [
-        ...currentContract.declaredInfo,
-        { chainId, env }
-      ]
+      declaredInfo: [...currentContract.declaredInfo, { chainId, env }]
     }
     const updatedContracts = contracts.map((contract) => {
       if (contract.classHash === declaredContract.classHash) {
@@ -470,7 +510,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
       deployedInfo: [
         ...currentContract.deployedInfo,
         { address: account.address, chainId }
-      ].flatMap(deployment => {
+      ].flatMap((deployment) => {
         const key = `${deployment.address}-${deployment.chainId}`
         if (deployedInfoMap.has(key)) {
           return []
@@ -496,89 +536,81 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         {contracts.length > 0 && selectedContract != null
           ? (
           <div className="">
-            <div className={'compilation-info flex-col text-center align-items-center mb-2'}>
+            <div
+              className={
+                'compilation-info flex-col text-center align-items-center mb-2'
+              }
+            >
               <div className={'icon'}>
-                <img src={useIcon('deploy-icon.svg')} alt={'deploy-icon'}/>
+                <img src={useIcon('deploy-icon.svg')} alt={'deploy-icon'} />
               </div>
               <span className={'mt-1 mb-1'}>Deploy your selected contract</span>
             </div>
             <CompiledContracts show={'class'} />
             <button
-                className="btn btn-warning btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3 px-0 rounded"
-                style={{
-                  cursor: `${
-                    isDeclaring ||
-                    account == null ||
-                    selectedContract.declaredInfo.some(
-                      (info) =>
-                        info.chainId === chainId && info.env === env
-                    )
-                      ? 'not-allowed'
-                      : 'pointer'
-                  }`
-                }}
-                disabled={
-                  isDeclaring ||
-                  account == null ||
-                  selectedContract.declaredInfo.some(
-                    (info) =>
-                      info.chainId === chainId && info.env === env
-                  )
-                }
-                aria-disabled={
+              className="btn btn-warning btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3 px-0 rounded"
+              style={{
+                cursor: `${
                   isDeclaring ||
                   account == null ||
                   selectedContract.declaredInfo.some(
-                    (info) =>
-                      info.chainId === chainId && info.env === env
+                    (info) => info.chainId === chainId && info.env === env
                   )
-                }
-                title={
-                  isDeclaring
-                    ? 'Declaration in progress...'
-                    : account == null
-                      ? 'Account not connected'
-                      : selectedContract.declaredInfo.some(
+                    ? 'not-allowed'
+                    : 'pointer'
+                }`
+              }}
+              disabled={
+                isDeclaring ||
+                account == null ||
+                selectedContract.declaredInfo.some(
+                  (info) => info.chainId === chainId && info.env === env
+                )
+              }
+              aria-disabled={
+                isDeclaring ||
+                account == null ||
+                selectedContract.declaredInfo.some(
+                  (info) => info.chainId === chainId && info.env === env
+                )
+              }
+              onClick={handleDeclare}
+            >
+              <div className="d-flex align-items-center justify-content-center">
+                <div className="text-truncate overflow-hidden text-nowrap">
+                  {isDeclaring
+                    ? (
+                    <>
+                      <span style={{ paddingLeft: '0.5rem' }}>
+                        {declStatus}
+                      </span>
+                    </>
+                      )
+                    : (
+                    <div className="text-truncate overflow-hidden text-nowrap">
+                      {account !== null &&
+                      selectedContract.declaredInfo.some(
                         (info) => info.chainId === chainId && info.env === env
                       )
-                        ? `Declared ${selectedContract.name}`
-                        : `Declare ${selectedContract.name}`
-                }
-
-                onClick={handleDeclare}
-              >
-                <div className="d-flex align-items-center justify-content-center">
-                  <div className="text-truncate overflow-hidden text-nowrap">
-                    {isDeclaring
-                      ? (
-                      <>
-                        <span style={{ paddingLeft: '0.5rem' }}>
-                          {declStatus}
+                        ? (
+                        <span>
+                          {' '}
+                          Declared {selectedContract.name}{' '}
+                          <i className="bi bi-check"></i>
                         </span>
-                      </>
-                        )
-                      : (
-                      <div className="text-truncate overflow-hidden text-nowrap">
-                        {account !== null &&
-                        selectedContract.declaredInfo.some(
-                          (info) =>
-                            info.chainId === chainId && info.env === env
-                        )
-                          ? (
-                          <span>
-                            {' '}
-                            Declared {selectedContract.name} <i className="bi bi-check"></i>
-                          </span>
-                            )
-                          : (
-                          <span> Declare {selectedContract.name}</span>
-                            )}
-                      </div>
-                        )}
-                  </div>
+                          )
+                        : (
+                        <span> Declare {selectedContract.name}</span>
+                          )}
+                    </div>
+                      )}
                 </div>
-              </button>
-            <ConstructorForm abi={selectedContract.abi} callBackFn={handleDeploySubmit} />
+              </div>
+            </button>
+            <ConstructorForm
+              abi={selectedContract.abi}
+              callBackFn={handleDeploySubmit}
+            />
             {account != null &&
               selectedContract.deployedInfo.some(
                 (info) =>
@@ -607,16 +639,19 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
           </div>
             )
           : (
-              <div className={'flex flex-column justify-content-center align-items-center'}>
-                <div className={'icon mb-2'}>
-                  <img src={useIcon('deploy-icon.svg')} alt={'deploy-icon'}/>
-                </div>
-                <p>No contracts ready for deployment yet, compile a cairo contract</p>
-              </div>
+          <NoContractReadyView />
             )}
       </Container>
     </>
   )
 }
 
+const NoContractReadyView = (): JSX.Element => (
+  <div className={'flex flex-column justify-content-center align-items-center'}>
+    <div className={'icon mb-2'}>
+      <img src={useIcon('deploy-icon.svg')} alt={'deploy-icon'} />
+    </div>
+    <p>No contracts ready for deployment yet, compile a cairo contract</p>
+  </div>
+)
 export default Deployment

From e2f48968fa6ed2fb935b04c65658d46d3c6c53bb Mon Sep 17 00:00:00 2001
From: Satyam Bansal <satyamsgsits1994@gmail.com>
Date: Mon, 2 Sep 2024 14:34:04 +0530
Subject: [PATCH 2/4] Fix typescript issue

---
 plugin/src/features/Plugin/index.tsx | 213 ++++++++++++++-------------
 1 file changed, 111 insertions(+), 102 deletions(-)

diff --git a/plugin/src/features/Plugin/index.tsx b/plugin/src/features/Plugin/index.tsx
index 1f76bd01..1b4f0ee0 100644
--- a/plugin/src/features/Plugin/index.tsx
+++ b/plugin/src/features/Plugin/index.tsx
@@ -15,9 +15,7 @@ import TransactionHistory from '../TransactionHistory'
 import Footer from '../Footer'
 import StateAction from '../../components/StateAction'
 import BackgroundNotices from '../../components/BackgroundNotices'
-import {
-  useCurrentExplorer
-} from '../../components/ExplorerSelector'
+import { useCurrentExplorer } from '../../components/ExplorerSelector'
 import { useAtomValue, useSetAtom, useAtom } from 'jotai'
 import { isCompilingAtom, statusAtom } from '../../atoms/compilation'
 import { deploymentAtom, isDelcaringAtom } from '../../atoms/deployment'
@@ -40,17 +38,16 @@ const Plugin: React.FC = () => {
   const isCompiling = useAtomValue(isCompilingAtom)
   const status = useAtomValue(statusAtom)
 
-  const {
-    isDeploying,
-    deployStatus
-  } = useAtomValue(deploymentAtom)
+  const { isDeploying, deployStatus } = useAtomValue(deploymentAtom)
 
   const isDeclaring = useAtomValue(isDelcaringAtom)
 
   const isDeclaringOrDeploying = isDeploying || isDeclaring
 
   // Interaction state variables
-  const [interactionStatus, setInteractionStatus] = useState<'loading' | 'success' | 'error' | ''>('')
+  const [interactionStatus, setInteractionStatus] = useState<
+    'loading' | 'success' | 'error' | ''
+  >('')
 
   const [currentAccordian, setCurrentAccordian] =
     useState<AccordianTabs>('compile')
@@ -69,30 +66,36 @@ const Plugin: React.FC = () => {
   const { remixClient } = useRemixClient()
 
   const envViteVersion: string | undefined = import.meta.env.VITE_VERSION
-  const pluginVersion = envViteVersion !== undefined ? `v${envViteVersion}` : 'v0.2.5'
+  const pluginVersion =
+    envViteVersion !== undefined ? `v${envViteVersion}` : 'v0.2.5'
 
   useEffect(() => {
     const fetchCairoVersions = async (): Promise<void> => {
       try {
         if (apiUrl !== undefined) {
-          const response = await fetch(
-              `${apiUrl}/cairo_versions`,
-              {
-                method: 'GET',
-                headers: {
-                  'Content-Type': 'application/octet-stream'
-                },
-                redirect: 'follow'
-              }
-          )
+          const response = await fetch(`${apiUrl}/cairo_versions`, {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/octet-stream'
+            },
+            redirect: 'follow'
+          })
           const versions = JSON.parse(await response.text())
           versions.sort()
           setVersions(versions)
         }
       } catch (e) {
-        await remixClient.call('notification' as any, 'toast', '🔴 Failed to fetch cairo versions from the compilation server')
+        await remixClient.call(
+          'notification' as any,
+          'toast',
+          '🔴 Failed to fetch cairo versions from the compilation server'
+        )
         console.error(e)
-        await remixClient.terminal.log(`🔴 Failed to fetch cairo versions from the compilation server ${e as string}` as any)
+        await remixClient.terminal.log(
+          `🔴 Failed to fetch cairo versions from the compilation server ${
+            e as string
+          }` as any
+        )
       }
     }
 
@@ -104,7 +107,9 @@ const Plugin: React.FC = () => {
           setCairoVersion(getVersions[getVersions.length - 1])
         }
       }
-      fetchCairo().catch(e => { console.error(e) })
+      fetchCairo().catch((e) => {
+        console.error(e)
+      })
     }, 10000)
   }, [remixClient])
 
@@ -194,15 +199,11 @@ const Plugin: React.FC = () => {
 
   return (
     <StarknetProvider>
-      <div className='plugin-wrapper'>
-        <div className='plugin-main-wrapper'>
+      <div className="plugin-wrapper">
+        <div className="plugin-main-wrapper">
           <div className={'plugin-version-wrapper'}>
-            <div className={'plugin-version-label'}>
-              ALPHA
-            </div>
-            <div className={'plugin-version'}>
-              Using {pluginVersion}
-            </div>
+            <div className={'plugin-version-label'}>ALPHA</div>
+            <div className={'plugin-version'}>Using {pluginVersion}</div>
           </div>
           <div>
             <Environment />
@@ -218,115 +219,123 @@ const Plugin: React.FC = () => {
             {/* apply styles */}
             <Tabs.List className={'flex justify-between rounded tab-list'}>
               <div className={'tabs-trigger'}></div>
-              <Tabs.Trigger value={'home'} className={'tabs-trigger'}>Home</Tabs.Trigger>
-              <Tabs.Trigger value={'transactions'} className={'tabs-trigger'}>Transactions</Tabs.Trigger>
-              <Tabs.Trigger value={'info'} className={'tabs-trigger'}>Info</Tabs.Trigger>
-              <Tabs.Trigger value={'settings'} className={'tabs-trigger'}>Settings</Tabs.Trigger>
+              <Tabs.Trigger value={'home'} className={'tabs-trigger'}>
+                Home
+              </Tabs.Trigger>
+              <Tabs.Trigger value={'transactions'} className={'tabs-trigger'}>
+                Transactions
+              </Tabs.Trigger>
+              <Tabs.Trigger value={'info'} className={'tabs-trigger'}>
+                Info
+              </Tabs.Trigger>
+              <Tabs.Trigger value={'settings'} className={'tabs-trigger'}>
+                Settings
+              </Tabs.Trigger>
               <div className={'tabs-trigger'}></div>
             </Tabs.List>
 
-            <Tabs.Content value='home'>
+            <Tabs.Content value="home">
               <Accordian
-                  type='single'
-                  value={currentAccordian}
-                  defaultValue={'compile'}
+                type="single"
+                value={currentAccordian}
+                defaultValue={'compile'}
               >
-                <AccordianItem value='compile'>
+                <AccordianItem value="compile">
                   <AccordionTrigger
-                      onClick={() => {
-                        handleTabView('compile')
-                      }}
+                    onClick={() => {
+                      handleTabView('compile')
+                    }}
                   >
-                  <span
-                      className='d-flex align-items-center'
+                    <span
+                      className="d-flex align-items-center"
                       style={{ gap: '0.5rem' }}
-                  >
-                    <span className={'accordian-list-number'}>1</span>
-                    <p style={{ all: 'unset' }}>Compile</p>
-                    <StateAction
+                    >
+                      <span className={'accordian-list-number'}>1</span>
+                      <p style={{ all: 'unset' }}>Compile</p>
+                      <StateAction
                         value={
                           isCompiling
                             ? 'loading'
                             : status === 'done'
-                              ? 'success'
-                              : status === 'failed' ? 'error' : ''
+                            ? 'success'
+                            : status === 'failed'
+                            ? 'error'
+                            : ''
                         }
-                    />
-                  </span>
+                      />
+                    </span>
                   </AccordionTrigger>
                   <AccordionContent>
                     <Compilation setAccordian={setCurrentAccordian} />
                   </AccordionContent>
                 </AccordianItem>
 
-                <AccordianItem value='deploy'>
+                <AccordianItem value="deploy">
                   <AccordionTrigger
-                      onClick={() => {
-                        handleTabView('deploy')
-                      }}
+                    onClick={() => {
+                      handleTabView('deploy')
+                    }}
                   >
-                  <span
-                      className='d-flex align-items-center'
+                    <span
+                      className="d-flex align-items-center"
                       style={{ gap: '0.5rem' }}
-                  >
-                    <span className={'accordian-list-number'}>2</span>
-                    <p style={{ all: 'unset' }}>Deploy</p>
-                    <StateAction
+                    >
+                      <span className={'accordian-list-number'}>2</span>
+                      <p style={{ all: 'unset' }}>Deploy</p>
+                      <StateAction
                         value={
                           isDeclaringOrDeploying
                             ? 'loading'
-                            : deployStatus === 'error'
-                              ? 'error'
-                              : deployStatus === 'done'
-                                ? 'success'
-                                : ''
+                            : deployStatus === 'ERROR'
+                            ? 'error'
+                            : deployStatus === 'DONE'
+                            ? 'success'
+                            : ''
                         }
-                    />
-                  </span>
+                      />
+                    </span>
                   </AccordionTrigger>
                   <AccordionContent>
                     <Deployment setActiveTab={setCurrentAccordian} />
                   </AccordionContent>
                 </AccordianItem>
-                <AccordianItem value='interaction'>
+                <AccordianItem value="interaction">
                   <AccordionTrigger
-                      onClick={() => {
-                        handleTabView('interaction')
-                      }}
-                    >
+                    onClick={() => {
+                      handleTabView('interaction')
+                    }}
+                  >
                     <span
-                        className='d-flex align-items-center'
-                        style={{ gap: '0.5rem' }}
+                      className="d-flex align-items-center"
+                      style={{ gap: '0.5rem' }}
                     >
                       <span className={'accordian-list-number'}>3</span>
                       <p style={{ all: 'unset' }}>Interact</p>
-                      <StateAction
-                          value={interactionStatus}
-                      />
+                      <StateAction value={interactionStatus} />
                     </span>
-                    </AccordionTrigger>
-                    <AccordionContent>
-                      <Interaction setInteractionStatus={setInteractionStatus} />
-                    </AccordionContent>
-                  </AccordianItem>
-                </Accordian>
-              </Tabs.Content>
-
-              <Tabs.Content value='transactions'>
-                <TransactionHistory controlHook={explorerHook} />
-              </Tabs.Content>
-
-              <Tabs.Content value='info'>
-                <BackgroundNotices />
-              </Tabs.Content>
-
-              <Tabs.Content value={'settings'}>
-                <Settings />
-              </Tabs.Content>
-            </Tabs.Root>
-            <div className={'blank-placeholder'}></div>
-          </div>
-          <Footer />
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <Interaction setInteractionStatus={setInteractionStatus} />
+                  </AccordionContent>
+                </AccordianItem>
+              </Accordian>
+            </Tabs.Content>
+
+            <Tabs.Content value="transactions">
+              <TransactionHistory controlHook={explorerHook} />
+            </Tabs.Content>
+
+            <Tabs.Content value="info">
+              <BackgroundNotices />
+            </Tabs.Content>
+
+            <Tabs.Content value={'settings'}>
+              <Settings />
+            </Tabs.Content>
+          </Tabs.Root>
+          <div className={'blank-placeholder'}></div>
+        </div>
+        <Footer />
       </div>
     </StarknetProvider>
   )

From e295e6a0c3e6e31f389b8d1181621447c48005fa Mon Sep 17 00:00:00 2001
From: Satyam Bansal <satyamsgsits1994@gmail.com>
Date: Mon, 2 Sep 2024 16:20:45 +0530
Subject: [PATCH 3/4] Fix indentation issue

---
 plugin/src/features/Plugin/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/plugin/src/features/Plugin/index.tsx b/plugin/src/features/Plugin/index.tsx
index 1b4f0ee0..7d5dabe3 100644
--- a/plugin/src/features/Plugin/index.tsx
+++ b/plugin/src/features/Plugin/index.tsx
@@ -46,7 +46,7 @@ const Plugin: React.FC = () => {
 
   // Interaction state variables
   const [interactionStatus, setInteractionStatus] = useState<
-    'loading' | 'success' | 'error' | ''
+  'loading' | 'success' | 'error' | ''
   >('')
 
   const [currentAccordian, setCurrentAccordian] =
@@ -257,10 +257,10 @@ const Plugin: React.FC = () => {
                           isCompiling
                             ? 'loading'
                             : status === 'done'
-                            ? 'success'
-                            : status === 'failed'
-                            ? 'error'
-                            : ''
+                              ? 'success'
+                              : status === 'failed'
+                                ? 'error'
+                                : ''
                         }
                       />
                     </span>
@@ -287,10 +287,10 @@ const Plugin: React.FC = () => {
                           isDeclaringOrDeploying
                             ? 'loading'
                             : deployStatus === 'ERROR'
-                            ? 'error'
-                            : deployStatus === 'DONE'
-                            ? 'success'
-                            : ''
+                              ? 'error'
+                              : deployStatus === 'DONE'
+                                ? 'success'
+                                : ''
                         }
                       />
                     </span>

From 2abe57b19d494b9effd982bb1c25c830d5266a92 Mon Sep 17 00:00:00 2001
From: Satyam Bansal <satyamsgsits1994@gmail.com>
Date: Mon, 2 Sep 2024 22:31:11 +0530
Subject: [PATCH 4/4] Show proper status labels

---
 plugin/src/features/Deployment/index.tsx |  3 ++-
 plugin/src/utils/constants.ts            | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx
index a5b4078b..79575763 100644
--- a/plugin/src/features/Deployment/index.tsx
+++ b/plugin/src/features/Deployment/index.tsx
@@ -33,6 +33,7 @@ import {
 import { useWaitForTransaction } from '@starknet-react/core'
 import { type CallbackReturnType, ConstructorForm } from 'starknet-abi-forms'
 import { useIcon } from '../../hooks/useIcons'
+import { DeclareStatusLabels } from '../../utils/constants'
 interface DeploymentProps {
   setActiveTab: (tab: AccordianTabs) => void
 }
@@ -582,7 +583,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
                     ? (
                     <>
                       <span style={{ paddingLeft: '0.5rem' }}>
-                        {declStatus}
+                        {DeclareStatusLabels[declStatus]}
                       </span>
                     </>
                       )
diff --git a/plugin/src/utils/constants.ts b/plugin/src/utils/constants.ts
index e0ae9003..842b9bed 100644
--- a/plugin/src/utils/constants.ts
+++ b/plugin/src/utils/constants.ts
@@ -1,11 +1,9 @@
 import { constants } from 'starknet'
+import { type Status } from '../atoms/deployment'
 
 const devnetUrl = 'http://127.0.0.1:5050'
 
-type Network =
-  | 'goerli'
-  | 'sepolia'
-  | 'mainnet'
+type Network = 'goerli' | 'sepolia' | 'mainnet'
 
 const networks = [
   { name: 'Testnet', value: 'goerli' },
@@ -82,3 +80,17 @@ export {
 }
 
 export type { Network }
+
+export const DeclareStatusLabels: Record<Status, string> = {
+  IDLE: 'Idle',
+  IN_PROGRESS: 'Declaring...',
+  ERROR: 'Error',
+  DONE: 'Done'
+}
+
+export const DeployStatusLabels: Record<Status, string> = {
+  IDLE: 'Idle',
+  IN_PROGRESS: 'Deploying...',
+  ERROR: 'Error',
+  DONE: 'Done'
+}