From e83661a7520554530549249fc39e2353dbf70194 Mon Sep 17 00:00:00 2001
From: Florin Dzeladini <florin.dzeladini@consensys.net>
Date: Tue, 28 Jan 2025 00:28:59 +0100
Subject: [PATCH] chore: fix comments

---
 .../src/components/pages/Home/Home.view.tsx   |  32 +-
 .../ui/Framework/Framework.view.tsx           |  28 +-
 .../atom/LoadingSmall/LoadingSmall.view.tsx   |  10 +-
 .../AccountAddress/AccountAddress.view.tsx    |  42 ++-
 .../ui/molecule/DropDown/DropDown.view.tsx    |  26 +-
 .../TransactionListItem.view.tsx              |  66 ++--
 .../AccountDetailsModal.view.tsx              |  60 ++--
 .../AddTokenModal/AddTokenModal.view.tsx      | 142 ++++----
 .../ConnectInfoModal.view.tsx                 |  54 ++-
 .../ConnectModal/ConnectModal.view.tsx        |  47 ++-
 .../organism/DeployModal/DeployModal.view.tsx |  90 +++--
 .../ui/organism/Footer/Footer.view.tsx        |  35 +-
 .../ui/organism/Header/Header.view.tsx        |  60 ++--
 .../Header/ReceiveModal/ReceiveModal.view.tsx |  12 +-
 .../Header/SendModal/SendModal.view.tsx       | 156 +++++----
 .../SendSummaryModal.view.tsx                 | 190 ++++++-----
 .../components/ui/organism/Menu/Menu.view.tsx | 312 +++++++++---------
 .../MinVersionModal/MinVersionModal.view.tsx  |  67 ++--
 .../NoFlaskModal/NoFlaskModal.view.tsx        |  46 ++-
 .../NoMetamaskModal/NoMetamaskModal.view.tsx  |  34 +-
 .../ui/organism/SideBar/SideBar.view.tsx      | 134 ++++----
 .../UpgradeModel/UpgradeModel.view.tsx        |  82 ++---
 22 files changed, 820 insertions(+), 905 deletions(-)

diff --git a/packages/wallet-ui/src/components/pages/Home/Home.view.tsx b/packages/wallet-ui/src/components/pages/Home/Home.view.tsx
index d1a43f05..091a6a5c 100644
--- a/packages/wallet-ui/src/components/pages/Home/Home.view.tsx
+++ b/packages/wallet-ui/src/components/pages/Home/Home.view.tsx
@@ -17,22 +17,20 @@ export const HomeView = ({ address }: Props) => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <SideBar address={address} />
-        <RightPart>
-          {!upgradeModalVisible &&
-            Object.keys(erc20TokenBalanceSelected).length > 0 && (
-              <Header address={address} />
-            )}
-          {!upgradeModalVisible && <TransactionsList transactions={[]} />}
-          {!upgradeModalVisible &&
-            Object.keys(transactions).length === 0 &&
-            !loader.isLoading && (
-              <NoTransactions>{translate('noTransactions')}</NoTransactions>
-            )}
-        </RightPart>
-      </Wrapper>
-    )
+    <Wrapper>
+      <SideBar address={address} />
+      <RightPart>
+        {!upgradeModalVisible &&
+          Object.keys(erc20TokenBalanceSelected).length > 0 && (
+            <Header address={address} />
+          )}
+        {!upgradeModalVisible && <TransactionsList transactions={[]} />}
+        {!upgradeModalVisible &&
+          Object.keys(transactions).length === 0 &&
+          !loader.isLoading && (
+            <NoTransactions>{translate('noTransactions')}</NoTransactions>
+          )}
+      </RightPart>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx b/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx
index 8c14f6ec..42dfd487 100644
--- a/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx
+++ b/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx
@@ -20,20 +20,18 @@ export const FrameworkView = ({ connected, children }: Props) => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <ColMiddle>
-          <MenuStyled connected={connected} />
-          <Content>{children}</Content>
-          <Footer />
-        </ColMiddle>
-        {bannerOpen && (
-          <Banner>
-            {translate('openBetaVersion')}{' '}
-            <CloseIcon icon={'close'} onClick={() => setBannerOpen(false)} />
-          </Banner>
-        )}
-      </Wrapper>
-    )
+    <Wrapper>
+      <ColMiddle>
+        <MenuStyled connected={connected} />
+        <Content>{children}</Content>
+        <Footer />
+      </ColMiddle>
+      {bannerOpen && (
+        <Banner>
+          {translate('openBetaVersion')}{' '}
+          <CloseIcon icon={'close'} onClick={() => setBannerOpen(false)} />
+        </Banner>
+      )}
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/atom/LoadingSmall/LoadingSmall.view.tsx b/packages/wallet-ui/src/components/ui/atom/LoadingSmall/LoadingSmall.view.tsx
index 52204628..2ed43b24 100644
--- a/packages/wallet-ui/src/components/ui/atom/LoadingSmall/LoadingSmall.view.tsx
+++ b/packages/wallet-ui/src/components/ui/atom/LoadingSmall/LoadingSmall.view.tsx
@@ -8,11 +8,9 @@ export const LoadingSmallView = ({ ...otherProps }: Props) => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper {...otherProps}>
-        <LoadingSpinner icon="spinner" pulse />
-        <LoadingText>{translate('loading')}</LoadingText>
-      </Wrapper>
-    )
+    <Wrapper {...otherProps}>
+      <LoadingSpinner icon="spinner" pulse />
+      <LoadingText>{translate('loading')}</LoadingText>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountAddress/AccountAddress.view.tsx b/packages/wallet-ui/src/components/ui/molecule/AccountAddress/AccountAddress.view.tsx
index 16d5ebb7..a1daab0b 100644
--- a/packages/wallet-ui/src/components/ui/molecule/AccountAddress/AccountAddress.view.tsx
+++ b/packages/wallet-ui/src/components/ui/molecule/AccountAddress/AccountAddress.view.tsx
@@ -23,32 +23,30 @@ export const AccountAddressView = ({
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <>
+    <>
+      <PopperTooltip
+        content={translate('copied')}
+        closeTrigger="click"
+        placement={placement}
+      >
         <PopperTooltip
-          content={translate('copied')}
-          closeTrigger="click"
+          content={translate('copyToClipboard')}
+          closeTrigger="hover"
           placement={placement}
         >
-          <PopperTooltip
-            content={translate('copyToClipboard')}
-            closeTrigger="hover"
-            placement={placement}
+          <Wrapper
+            iconRight="clone"
+            onClick={handleAddressClick}
+            backgroundTransparent
           >
-            <Wrapper
-              iconRight="clone"
-              onClick={handleAddressClick}
-              backgroundTransparent
-            >
-              {full
-                ? starkName ?? address
-                : starkName
-                ? shortenDomain(starkName)
-                : shortenAddress(address)}
-            </Wrapper>
-          </PopperTooltip>
+            {full
+              ? starkName ?? address
+              : starkName
+              ? shortenDomain(starkName)
+              : shortenAddress(address)}
+          </Wrapper>
         </PopperTooltip>
-      </>
-    )
+      </PopperTooltip>
+    </>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/molecule/DropDown/DropDown.view.tsx b/packages/wallet-ui/src/components/ui/molecule/DropDown/DropDown.view.tsx
index 11785895..d1ff00a0 100644
--- a/packages/wallet-ui/src/components/ui/molecule/DropDown/DropDown.view.tsx
+++ b/packages/wallet-ui/src/components/ui/molecule/DropDown/DropDown.view.tsx
@@ -25,20 +25,18 @@ export const DropDownView = ({
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <Label error={error}>{label}</Label>
-        <DropdownStyled
-          error={error}
-          disabled={disabled}
-          options={options}
-          value={value}
-          placeholder={translate('selectAnOption')}
-          {...otherProps}
-        />
+    <Wrapper>
+      <Label error={error}>{label}</Label>
+      <DropdownStyled
+        error={error}
+        disabled={disabled}
+        options={options}
+        value={value}
+        placeholder={translate('selectAnOption')}
+        {...otherProps}
+      />
 
-        {helperText && <HelperText>{helperText}</HelperText>}
-      </Wrapper>
-    )
+      {helperText && <HelperText>{helperText}</HelperText>}
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx
index fd85acbd..ba4fc311 100644
--- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx
+++ b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx
@@ -79,39 +79,37 @@ export const TransactionListItemView = ({ transaction }: Props) => {
   const txnToFromLabel = '';
   const txnFailureReason = getTxnFailureReason(transaction);
   return (
-    translate && (
-      <Wrapper
-        onClick={() =>
-          openExplorerTab(transaction.txnHash, 'tx', transaction.chainId)
-        }
-      >
-        <Left>
-          <LeftIcon>
-            <IconStyled transactionname={txnName} icon={getIcon(txnName)} />
-          </LeftIcon>
-          <Column>
-            <Label>{translate(toCamelCase(txnName))}</Label>
-            <Description>
-              {txnDate}
-              <br />
-              <Status status={transaction.executionStatus}>
-                {txnStatus}
-                {txnFailureReason}
-              </Status>
-            </Description>
-          </Column>
-        </Left>
-        <Middle>{txnToFromLabel} </Middle>
-        <Right>
-          {txnName === 'Send' && (
-            <AssetQuantity
-              currency={currencySymbol}
-              currencyValue={txnValue}
-              USDValue={txnUsdValue}
-            />
-          )}
-        </Right>
-      </Wrapper>
-    )
+    <Wrapper
+      onClick={() =>
+        openExplorerTab(transaction.txnHash, 'tx', transaction.chainId)
+      }
+    >
+      <Left>
+        <LeftIcon>
+          <IconStyled transactionname={txnName} icon={getIcon(txnName)} />
+        </LeftIcon>
+        <Column>
+          <Label>{translate(toCamelCase(txnName))}</Label>
+          <Description>
+            {txnDate}
+            <br />
+            <Status status={transaction.executionStatus}>
+              {txnStatus}
+              {txnFailureReason}
+            </Status>
+          </Description>
+        </Column>
+      </Left>
+      <Middle>{txnToFromLabel} </Middle>
+      <Right>
+        {txnName === 'Send' && (
+          <AssetQuantity
+            currency={currencySymbol}
+            currencyValue={txnValue}
+            USDValue={txnUsdValue}
+          />
+        )}
+      </Right>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx
index fb68ba98..ac5e3416 100644
--- a/packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx
@@ -24,36 +24,34 @@ export const AccountDetailsModalView = ({ address }: Props) => {
 
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
   return (
-    translate && (
-      <div>
-        <AccountImageDiv>
-          <AccountImageStyled size={64} address={address} />
-        </AccountImageDiv>
-        <Wrapper>
-          <TitleDiv>
-            <Title>{translate('myAccount')}</Title>
-            {/* <ModifyIcon /> */}
-          </TitleDiv>
-          <AddressQrCode value={address} />
-          <AddressCopy address={address} />
-        </Wrapper>
-        <ButtonDiv>
-          <ButtonStyled
-            backgroundTransparent
-            borderVisible
-            onClick={() => openExplorerTab(address, 'contract', chainId)}
-          >
-            {translate('viewOnExplorer').toUpperCase()}
-          </ButtonStyled>
-          <ButtonStyled
-            backgroundTransparent
-            borderVisible
-            onClick={() => getPrivateKeyFromAddress(address, chainId)}
-          >
-            {translate('exportPrivateKey')}
-          </ButtonStyled>
-        </ButtonDiv>
-      </div>
-    )
+    <div>
+      <AccountImageDiv>
+        <AccountImageStyled size={64} address={address} />
+      </AccountImageDiv>
+      <Wrapper>
+        <TitleDiv>
+          <Title>{translate('myAccount')}</Title>
+          {/* <ModifyIcon /> */}
+        </TitleDiv>
+        <AddressQrCode value={address} />
+        <AddressCopy address={address} />
+      </Wrapper>
+      <ButtonDiv>
+        <ButtonStyled
+          backgroundTransparent
+          borderVisible
+          onClick={() => openExplorerTab(address, 'contract', chainId)}
+        >
+          {translate('viewOnExplorer').toUpperCase()}
+        </ButtonStyled>
+        <ButtonStyled
+          backgroundTransparent
+          borderVisible
+          onClick={() => getPrivateKeyFromAddress(address, chainId)}
+        >
+          {translate('exportPrivateKey')}
+        </ButtonStyled>
+      </ButtonDiv>
+    </div>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/AddTokenModal/AddTokenModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/AddTokenModal/AddTokenModal.view.tsx
index e69ccfe9..38bd9798 100644
--- a/packages/wallet-ui/src/components/ui/organism/AddTokenModal/AddTokenModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/AddTokenModal/AddTokenModal.view.tsx
@@ -51,80 +51,74 @@ export const AddTokenModalView = ({ closeModal }: Props) => {
   }, [fields, isValidAddress]);
 
   return (
-    translate && (
-      <>
-        <Wrapper>
-          <Title>{translate('addToken')}</Title>
-          <Alert text={translate('tokenCreationWarning')} variant="warning" />
-          <Space />
-          <FormGroup>
-            <AddressInput
-              label={translate('contractAddress')}
-              placeholder=""
-              onChange={(event) => handleChange('address', event.target.value)}
-              setIsValidAddress={setIsValidAddress}
-            />
-          </FormGroup>
-          <FormGroup>
-            <InputWithLabel
-              label={translate('name')}
-              onChange={(event) => handleChange('name', event.target.value)}
-            />
-          </FormGroup>
-          <FormGroup>
-            <InputWithLabel
-              label={translate('symbol')}
-              onChange={(event) => handleChange('symbol', event.target.value)}
-            />
-          </FormGroup>
-          <FormGroup>
-            <InputWithLabel
-              label={translate('decimal')}
-              placeholder="0"
-              type="number"
-              onChange={(event) =>
-                handleChange(
-                  'decimal',
-                  isNaN(Number(event.target.value)) ? '' : event.target.value,
-                )
+    <>
+      <Wrapper>
+        <Title>{translate('addToken')}</Title>
+        <Alert text={translate('tokenCreationWarning')} variant="warning" />
+        <Space />
+        <FormGroup>
+          <AddressInput
+            label={translate('contractAddress')}
+            placeholder=""
+            onChange={(event) => handleChange('address', event.target.value)}
+            setIsValidAddress={setIsValidAddress}
+          />
+        </FormGroup>
+        <FormGroup>
+          <InputWithLabel
+            label={translate('name')}
+            onChange={(event) => handleChange('name', event.target.value)}
+          />
+        </FormGroup>
+        <FormGroup>
+          <InputWithLabel
+            label={translate('symbol')}
+            onChange={(event) => handleChange('symbol', event.target.value)}
+          />
+        </FormGroup>
+        <FormGroup>
+          <InputWithLabel
+            label={translate('decimal')}
+            placeholder="0"
+            type="number"
+            onChange={(event) =>
+              handleChange(
+                'decimal',
+                isNaN(Number(event.target.value)) ? '' : event.target.value,
+              )
+            }
+          />
+        </FormGroup>
+      </Wrapper>
+      <ButtonsWrapper>
+        <ButtonStyled onClick={closeModal} backgroundTransparent borderVisible>
+          {translate('cancel')}
+        </ButtonStyled>
+        <ButtonStyled
+          enabled={enabled}
+          onClick={async () => {
+            try {
+              const newToken = await addErc20Token(
+                fields.address,
+                fields.name,
+                fields.symbol,
+                parseFloat(fields.decimal),
+                chain,
+                accounts[0] as unknown as string,
+              );
+              if (newToken) {
+                setErc20TokenBalance(newToken);
+                toastr.success(translate('tokenAddedSuccessfully'));
               }
-            />
-          </FormGroup>
-        </Wrapper>
-        <ButtonsWrapper>
-          <ButtonStyled
-            onClick={closeModal}
-            backgroundTransparent
-            borderVisible
-          >
-            {translate('cancel')}
-          </ButtonStyled>
-          <ButtonStyled
-            enabled={enabled}
-            onClick={async () => {
-              try {
-                const newToken = await addErc20Token(
-                  fields.address,
-                  fields.name,
-                  fields.symbol,
-                  parseFloat(fields.decimal),
-                  chain,
-                  accounts[0] as unknown as string,
-                );
-                if (newToken) {
-                  setErc20TokenBalance(newToken);
-                  toastr.success(translate('tokenAddedSuccessfully'));
-                }
-                closeModal();
-              } catch (err) {
-                toastr.error(translate('errorAddingToken'));
-              }
-            }}
-          >
-            {translate('add')}
-          </ButtonStyled>
-        </ButtonsWrapper>
-      </>
-    )
+              closeModal();
+            } catch (err) {
+              toastr.error(translate('errorAddingToken'));
+            }
+          }}
+        >
+          {translate('add')}
+        </ButtonStyled>
+      </ButtonsWrapper>
+    </>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/ConnectInfoModal/ConnectInfoModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/ConnectInfoModal/ConnectInfoModal.view.tsx
index a6fa3c40..a5e3f85b 100644
--- a/packages/wallet-ui/src/components/ui/organism/ConnectInfoModal/ConnectInfoModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/ConnectInfoModal/ConnectInfoModal.view.tsx
@@ -16,33 +16,31 @@ export const ConnectInfoModalView = ({ address, onButtonClick }: Props) => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <div>
-        <Wrapper>
-          <div>
-            <Normal>{translate('network')}</Normal>
-            <Bold>{networks.items[networks.activeNetwork].name}</Bold>
-          </div>
-          <div>
-            <Normal>{translate('starknetAccount')}</Normal>
-            <Bold>{address}</Bold>
-          </div>
-          <Alert
-            variant="info"
-            text={translate('accountGeneratedWithRecoveryPhrase')}
-          />
-        </Wrapper>
-        <ButtonDiv>
-          <Button
-            onClick={() => {
-              dispatch(setInfoModalVisible(false));
-              onButtonClick && onButtonClick();
-            }}
-          >
-            {translate('gotIt')}
-          </Button>
-        </ButtonDiv>
-      </div>
-    )
+    <div>
+      <Wrapper>
+        <div>
+          <Normal>{translate('network')}</Normal>
+          <Bold>{networks.items[networks.activeNetwork].name}</Bold>
+        </div>
+        <div>
+          <Normal>{translate('starknetAccount')}</Normal>
+          <Bold>{address}</Bold>
+        </div>
+        <Alert
+          variant="info"
+          text={translate('accountGeneratedWithRecoveryPhrase')}
+        />
+      </Wrapper>
+      <ButtonDiv>
+        <Button
+          onClick={() => {
+            dispatch(setInfoModalVisible(false));
+            onButtonClick && onButtonClick();
+          }}
+        >
+          {translate('gotIt')}
+        </Button>
+      </ButtonDiv>
+    </div>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/ConnectModal/ConnectModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/ConnectModal/ConnectModal.view.tsx
index f7445019..f543da44 100644
--- a/packages/wallet-ui/src/components/ui/organism/ConnectModal/ConnectModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/ConnectModal/ConnectModal.view.tsx
@@ -23,31 +23,26 @@ export const ConnectModalView = () => {
   };
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        <Title>
-          {translate('connectTo')} MetaMask
-          <br />
-          Starknet Snap
-        </Title>
-        <DescriptionCentered>
-          {translate('starknetSnapInstallationPrompt')}
-        </DescriptionCentered>
-        <WhatIsSnapDiv>
-          <WhatIsSnap>{translate('whatIsASnap')}</WhatIsSnap>
-          <Description>{translate('snapsExtendMetaMask')}</Description>
-          <ReadMore onClick={handleReadMoreClick}>
-            {translate('readMore')}
-          </ReadMore>
-        </WhatIsSnapDiv>
-        <ConnectButton
-          customIconLeft={<MetamaskIcon />}
-          onClick={connectToSnap}
-        >
-          {translate('connectWithMetaMask')}
-        </ConnectButton>
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      <Title>
+        {translate('connectTo')} MetaMask
+        <br />
+        Starknet Snap
+      </Title>
+      <DescriptionCentered>
+        {translate('starknetSnapInstallationPrompt')}
+      </DescriptionCentered>
+      <WhatIsSnapDiv>
+        <WhatIsSnap>{translate('whatIsASnap')}</WhatIsSnap>
+        <Description>{translate('snapsExtendMetaMask')}</Description>
+        <ReadMore onClick={handleReadMoreClick}>
+          {translate('readMore')}
+        </ReadMore>
+      </WhatIsSnapDiv>
+      <ConnectButton customIconLeft={<MetamaskIcon />} onClick={connectToSnap}>
+        {translate('connectWithMetaMask')}
+      </ConnectButton>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/DeployModal/DeployModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/DeployModal/DeployModal.view.tsx
index add18427..8ebd2c11 100644
--- a/packages/wallet-ui/src/components/ui/organism/DeployModal/DeployModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/DeployModal/DeployModal.view.tsx
@@ -84,69 +84,59 @@ export const DeployModalView = ({ address }: Props) => {
     switch (stage) {
       case Stage.INIT:
         return (
-          translate && (
-            <>
-              <DescriptionCentered>
-                {translate('nonZeroBalanceOnCairo0')}
-                <br />
-                <br />
-                <center>
-                  <AccountAddressView address={address}></AccountAddressView>
-                </center>
-                <br />
-                {translate('deploymentNecessaryToProceedPart1')} <br />
-                <br />
-                {translate('deploymentNecessaryToProceedPart2')} <br />
-                <br />
-                {translate('deploymentNecessaryToProceedPart3')}
-              </DescriptionCentered>
-              <DeployButton onClick={onDeploy}>Deploy</DeployButton>
-            </>
-          )
+          <>
+            <DescriptionCentered>
+              {translate('nonZeroBalanceOnCairo0')}
+              <br />
+              <br />
+              <center>
+                <AccountAddressView address={address}></AccountAddressView>
+              </center>
+              <br />
+              {translate('deploymentNecessaryToProceedPart1')} <br />
+              <br />
+              {translate('deploymentNecessaryToProceedPart2')} <br />
+              <br />
+              {translate('deploymentNecessaryToProceedPart3')}
+            </DescriptionCentered>
+            <DeployButton onClick={onDeploy}>Deploy</DeployButton>
+          </>
         );
       case Stage.WAITING_FOR_TXN:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('waitingForTransaction')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('waitingForTransaction')}
+          </DescriptionCentered>
         );
       case Stage.SUCCESS:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('accountDeployedSuccessfully')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('accountDeployedSuccessfully')}
+          </DescriptionCentered>
         );
       default:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('transactionHash')} <br />{' '}
-              <Txnlink onClick={() => openExplorerTab(txnHash, 'tx', chainId)}>
-                {shortenAddress(txnHash)}{' '}
-              </Txnlink>
-              <br />
-              {translate('deployTransactionPendingPart1')} <br />
-              <br />
-              {translate('deployTransactionPendingPart2')} <br />
-              <br />
-              {translate('deployTransactionPendingPart3')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('transactionHash')} <br />{' '}
+            <Txnlink onClick={() => openExplorerTab(txnHash, 'tx', chainId)}>
+              {shortenAddress(txnHash)}{' '}
+            </Txnlink>
+            <br />
+            {translate('deployTransactionPendingPart1')} <br />
+            <br />
+            {translate('deployTransactionPendingPart2')} <br />
+            <br />
+            {translate('deployTransactionPendingPart3')}
+          </DescriptionCentered>
         );
     }
   };
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        <Title>{translate('deployAccount')}</Title>
-        {renderComponent()}
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      <Title>{translate('deployAccount')}</Title>
+      {renderComponent()}
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Footer/Footer.view.tsx b/packages/wallet-ui/src/components/ui/organism/Footer/Footer.view.tsx
index cd2d62da..1a1ab92e 100644
--- a/packages/wallet-ui/src/components/ui/organism/Footer/Footer.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Footer/Footer.view.tsx
@@ -13,26 +13,21 @@ export const FooterView = () => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <>
-        <Wrapper>
-          <PoweredBy>{translate('poweredBy')}</PoweredBy>
-          <MetamaskSnaps>MetaMask Snaps</MetamaskSnaps>
+    <>
+      <Wrapper>
+        <PoweredBy>{translate('poweredBy')}</PoweredBy>
+        <MetamaskSnaps>MetaMask Snaps</MetamaskSnaps>
 
-          <TandCWrapper>
-            <CopyText>&copy;{currentYr} Consensys</CopyText>
-            <TandCLink href="https://consensys.io/terms-of-use" target="_blank">
-              {translate('termsOfUse')}
-            </TandCLink>
-            <TandCLink
-              href="https://consensys.io/privacy-policy"
-              target="_blank"
-            >
-              {translate('privacyPolicy')}
-            </TandCLink>
-          </TandCWrapper>
-        </Wrapper>
-      </>
-    )
+        <TandCWrapper>
+          <CopyText>&copy;{currentYr} Consensys</CopyText>
+          <TandCLink href="https://consensys.io/terms-of-use" target="_blank">
+            {translate('termsOfUse')}
+          </TandCLink>
+          <TandCLink href="https://consensys.io/privacy-policy" target="_blank">
+            {translate('privacyPolicy')}
+          </TandCLink>
+        </TandCWrapper>
+      </Wrapper>
+    </>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Header/Header.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/Header.view.tsx
index bb555089..faac3f56 100644
--- a/packages/wallet-ui/src/components/ui/organism/Header/Header.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Header/Header.view.tsx
@@ -62,36 +62,34 @@ export const HeaderView = ({ address }: Props) => {
   };
 
   return (
-    translate && (
-      <Wrapper>
-        <AssetQuantity
-          USDValue={getUSDValue()}
-          currencyValue={getSpendableTotalBalance(
-            wallet.erc20TokenBalanceSelected,
-          )}
-          currency={wallet.erc20TokenBalanceSelected.symbol}
-          size="big"
-          centered
-        />
-        <Buttons>
-          <HeaderButton onClick={() => setReceiveOpen(true)}>
-            {translate('receive')}
-          </HeaderButton>
-          <Button
-            onClick={() => handleSendClick()}
-            backgroundTransparent
-            borderVisible
-          >
-            {translate('send')}
-          </Button>
-        </Buttons>
-        <PopIn isOpen={receiveOpen} setIsOpen={setReceiveOpen}>
-          <ReceiveModal address={address} />
-        </PopIn>
-        <PopIn isOpen={sendOpen} setIsOpen={setSendOpen}>
-          <SendModal closeModal={() => setSendOpen(false)} />
-        </PopIn>
-      </Wrapper>
-    )
+    <Wrapper>
+      <AssetQuantity
+        USDValue={getUSDValue()}
+        currencyValue={getSpendableTotalBalance(
+          wallet.erc20TokenBalanceSelected,
+        )}
+        currency={wallet.erc20TokenBalanceSelected.symbol}
+        size="big"
+        centered
+      />
+      <Buttons>
+        <HeaderButton onClick={() => setReceiveOpen(true)}>
+          {translate('receive')}
+        </HeaderButton>
+        <Button
+          onClick={() => handleSendClick()}
+          backgroundTransparent
+          borderVisible
+        >
+          {translate('send')}
+        </Button>
+      </Buttons>
+      <PopIn isOpen={receiveOpen} setIsOpen={setReceiveOpen}>
+        <ReceiveModal address={address} />
+      </PopIn>
+      <PopIn isOpen={sendOpen} setIsOpen={setSendOpen}>
+        <SendModal closeModal={() => setSendOpen(false)} />
+      </PopIn>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Header/ReceiveModal/ReceiveModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/ReceiveModal/ReceiveModal.view.tsx
index fc9900e4..58b46800 100644
--- a/packages/wallet-ui/src/components/ui/organism/Header/ReceiveModal/ReceiveModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Header/ReceiveModal/ReceiveModal.view.tsx
@@ -14,12 +14,10 @@ export const ReceiveModalView = ({ address }: Props) => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <Title>{translate('receive')}</Title>
-        <AddressQrCode value={address} />
-        <AddressCopy address={address} placement="top" />
-      </Wrapper>
-    )
+    <Wrapper>
+      <Title>{translate('receive')}</Title>
+      <AddressQrCode value={address} />
+      <AddressCopy address={address} placement="top" />
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx
index d3bdf260..3a9fa90d 100644
--- a/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Header/SendModal/SendModal.view.tsx
@@ -129,87 +129,83 @@ export const SendModalView = ({ closeModal }: Props) => {
   };
 
   return (
-    translate && (
-      <>
-        {!summaryModalOpen && (
-          <div>
-            <Wrapper>
-              <Header>
-                <Title>{translate('send')}</Title>
-              </Header>
-              <Network>
-                <Normal>{translate('network')}</Normal>
-                <Bold>{networks.items[networks.activeNetwork].name}</Bold>
-              </Network>
-              <AddressInput
-                label={translate('to')}
-                placeholder={translate('pasteRecipientAddress')}
-                onChange={(value) =>
-                  handleChange('address', value.target.value)
-                }
-                disableValidate
-                validateError={errors.address}
+    <>
+      {!summaryModalOpen && (
+        <div>
+          <Wrapper>
+            <Header>
+              <Title>{translate('send')}</Title>
+            </Header>
+            <Network>
+              <Normal>{translate('network')}</Normal>
+              <Bold>{networks.items[networks.activeNetwork].name}</Bold>
+            </Network>
+            <AddressInput
+              label={translate('to')}
+              placeholder={translate('pasteRecipientAddress')}
+              onChange={(value) => handleChange('address', value.target.value)}
+              disableValidate
+              validateError={errors.address}
+            />
+            {isValidStarkName(fields.address) && resolvedAddress && (
+              <InfoText>{shortenAddress(resolvedAddress, 12)}</InfoText>
+            )}
+            <SeparatorSmall />
+            <MessageAlert
+              variant="info"
+              text={translate('validStarknetAddressOnly')}
+            />
+            <Separator />
+            <AmountInput
+              label={translate('amount')}
+              onChangeCustom={(value) => handleChange('amount', value)}
+              error={errors.amount !== '' ? true : false}
+              helperText={errors.amount}
+              decimalsMax={wallet.erc20TokenBalanceSelected.decimals}
+              asset={wallet.erc20TokenBalanceSelected}
+            />
+            <SeparatorSmall />
+            <div>
+              <label htmlFor="feeToken">
+                {translate('selectTokenForTransactionFees')}
+              </label>
+              <DropDown
+                value={fields.feeToken}
+                options={Object.values(FeeToken).map((token) => ({
+                  label: token,
+                  value: token,
+                }))}
+                onChange={(e) => handleChange('feeToken', e.value)}
               />
-              {isValidStarkName(fields.address) && resolvedAddress && (
-                <InfoText>{shortenAddress(resolvedAddress, 12)}</InfoText>
-              )}
-              <SeparatorSmall />
-              <MessageAlert
-                variant="info"
-                text={translate('validStarknetAddressOnly')}
-              />
-              <Separator />
-              <AmountInput
-                label={translate('amount')}
-                onChangeCustom={(value) => handleChange('amount', value)}
-                error={errors.amount !== '' ? true : false}
-                helperText={errors.amount}
-                decimalsMax={wallet.erc20TokenBalanceSelected.decimals}
-                asset={wallet.erc20TokenBalanceSelected}
-              />
-              <SeparatorSmall />
-              <div>
-                <label htmlFor="feeToken">
-                  {translate('selectTokenForTransactionFees')}
-                </label>
-                <DropDown
-                  value={fields.feeToken}
-                  options={Object.values(FeeToken).map((token) => ({
-                    label: token,
-                    value: token,
-                  }))}
-                  onChange={(e) => handleChange('feeToken', e.value)}
-                />
-              </div>
-            </Wrapper>
-            <Buttons>
-              <ButtonStyled
-                onClick={closeModal}
-                backgroundTransparent
-                borderVisible
-              >
-                {translate('cancel')}
-              </ButtonStyled>
-              <ButtonStyled
-                onClick={() => setSummaryModalOpen(true)}
-                enabled={confirmEnabled()}
-              >
-                {translate('confirm')}
-              </ButtonStyled>
-            </Buttons>
-          </div>
-        )}
+            </div>
+          </Wrapper>
+          <Buttons>
+            <ButtonStyled
+              onClick={closeModal}
+              backgroundTransparent
+              borderVisible
+            >
+              {translate('cancel')}
+            </ButtonStyled>
+            <ButtonStyled
+              onClick={() => setSummaryModalOpen(true)}
+              enabled={confirmEnabled()}
+            >
+              {translate('confirm')}
+            </ButtonStyled>
+          </Buttons>
+        </div>
+      )}
 
-        {summaryModalOpen && (
-          <SendSummaryModal
-            closeModal={closeModal}
-            address={resolvedAddress}
-            amount={fields.amount}
-            chainId={fields.chainId}
-            selectedFeeToken={fields.feeToken} // Pass the selected fee token
-          />
-        )}
-      </>
-    )
+      {summaryModalOpen && (
+        <SendSummaryModal
+          closeModal={closeModal}
+          address={resolvedAddress}
+          amount={fields.amount}
+          chainId={fields.chainId}
+          selectedFeeToken={fields.feeToken} // Pass the selected fee token
+        />
+      )}
+    </>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx
index 11defa33..e3baf5b1 100644
--- a/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx
@@ -235,105 +235,99 @@ export const SendSummaryModalView = ({
   };
 
   return (
-    translate && (
-      <div>
-        <Wrapper>
-          <Header>
-            <Title>{translate('send')}</Title>
-          </Header>
-          <ToDiv>To</ToDiv>
-          <AddressDiv>{shortenAddress(address)}</AddressDiv>
-          <AssetQuantity
-            currency={wallet.erc20TokenBalanceSelected.symbol}
-            currencyValue={getMaxDecimalsReadable(
-              wallet.erc20TokenBalanceSelected,
-              amount,
+    <div>
+      <Wrapper>
+        <Header>
+          <Title>{translate('send')}</Title>
+        </Header>
+        <ToDiv>To</ToDiv>
+        <AddressDiv>{shortenAddress(address)}</AddressDiv>
+        <AssetQuantity
+          currency={wallet.erc20TokenBalanceSelected.symbol}
+          currencyValue={getMaxDecimalsReadable(
+            wallet.erc20TokenBalanceSelected,
+            amount,
+          )}
+          USDValue={amountUsdPrice}
+          size="medium"
+          centered
+        />
+        <Summary>
+          <LeftSummary>
+            <PopperTooltip
+              placement="top"
+              closeTrigger="hover"
+              content={
+                <EstimatedFeesTooltip>
+                  {translate('gasFeesDefinition')}
+                  <br></br>
+                  <br></br>
+                </EstimatedFeesTooltip>
+              }
+            >
+              {translate('estimatedFee')}
+            </PopperTooltip>
+          </LeftSummary>
+          <RightSummary>
+            {estimatingGas && <LoadingWrapper />}
+            {!estimatingGas && (
+              <>
+                <CurrencyAmount>
+                  {gasFeesAmount} {selectedFeeToken}
+                </CurrencyAmount>
+                <USDAmount>{gasFeesAmountUSD} USD</USDAmount>
+              </>
             )}
-            USDValue={amountUsdPrice}
-            size="medium"
-            centered
+          </RightSummary>
+        </Summary>
+        {!estimatingGas && (
+          <TotalAmount>
+            {translate('maximumFees')} {gasFeesAmount} {selectedFeeToken}
+          </TotalAmount>
+        )}
+        {gasFees.includeDeploy && (
+          <IncludeDeploy>
+            *{translate('feesIncludeOneTimeDeploymentFee')}
+          </IncludeDeploy>
+        )}
+        <Summary>
+          <LeftSummary>
+            <PopperTooltip
+              placement="right"
+              closeTrigger="hover"
+              content="Amount + Fee"
+            >
+              {translate('total')}
+            </PopperTooltip>
+          </LeftSummary>
+          <RightSummary>
+            <CurrencyAmount>{totalAmountDisplay()}</CurrencyAmount>
+            <USDAmount>{totalAmountUSD} USD</USDAmount>
+          </RightSummary>
+        </Summary>
+        {totalAmount && (
+          <TotalAmount>
+            {translate('maximumAmount')} {totalAmount} {selectedFeeToken}
+          </TotalAmount>
+        )}
+        {totalExceedsBalance && (
+          <AlertTotalExceedsAmount
+            text={translate('insufficientFundsForFees')}
+            variant="warning"
           />
-          <Summary>
-            <LeftSummary>
-              <PopperTooltip
-                placement="top"
-                closeTrigger="hover"
-                content={
-                  <EstimatedFeesTooltip>
-                    {translate('gasFeesDefinition')}
-                    <br></br>
-                    <br></br>
-                  </EstimatedFeesTooltip>
-                }
-              >
-                {translate('estimatedFee')}
-              </PopperTooltip>
-            </LeftSummary>
-            <RightSummary>
-              {estimatingGas && <LoadingWrapper />}
-              {!estimatingGas && (
-                <>
-                  <CurrencyAmount>
-                    {gasFeesAmount} {selectedFeeToken}
-                  </CurrencyAmount>
-                  <USDAmount>{gasFeesAmountUSD} USD</USDAmount>
-                </>
-              )}
-            </RightSummary>
-          </Summary>
-          {!estimatingGas && (
-            <TotalAmount>
-              {translate('maximumFees')} {gasFeesAmount} {selectedFeeToken}
-            </TotalAmount>
-          )}
-          {gasFees.includeDeploy && (
-            <IncludeDeploy>
-              *{translate('feesIncludeOneTimeDeploymentFee')}
-            </IncludeDeploy>
-          )}
-          <Summary>
-            <LeftSummary>
-              <PopperTooltip
-                placement="right"
-                closeTrigger="hover"
-                content="Amount + Fee"
-              >
-                {translate('total')}
-              </PopperTooltip>
-            </LeftSummary>
-            <RightSummary>
-              <CurrencyAmount>{totalAmountDisplay()}</CurrencyAmount>
-              <USDAmount>{totalAmountUSD} USD</USDAmount>
-            </RightSummary>
-          </Summary>
-          {totalAmount && (
-            <TotalAmount>
-              {translate('maximumAmount')} {totalAmount} {selectedFeeToken}
-            </TotalAmount>
-          )}
-          {totalExceedsBalance && (
-            <AlertTotalExceedsAmount
-              text={translate('insufficientFundsForFees')}
-              variant="warning"
-            />
-          )}
-        </Wrapper>
-        <Buttons>
-          <ButtonStyled
-            onClick={closeModal}
-            backgroundTransparent
-            borderVisible
-          >
-            {translate('reject')}
-          </ButtonStyled>
-          <ButtonStyled
-            enabled={!estimatingGas && !gasFeesError && !totalExceedsBalance}
-            onClick={handleConfirmClick}
-          >
-            {translate('confirm')}
-          </ButtonStyled>
-        </Buttons>
-      </div>
-    )
+        )}
+      </Wrapper>
+      <Buttons>
+        <ButtonStyled onClick={closeModal} backgroundTransparent borderVisible>
+          {translate('reject')}
+        </ButtonStyled>
+        <ButtonStyled
+          enabled={!estimatingGas && !gasFeesError && !totalExceedsBalance}
+          onClick={handleConfirmClick}
+        >
+          {translate('confirm')}
+        </ButtonStyled>
+      </Buttons>
+    </div>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/Menu/Menu.view.tsx b/packages/wallet-ui/src/components/ui/organism/Menu/Menu.view.tsx
index 650f73bb..2e870ae4 100644
--- a/packages/wallet-ui/src/components/ui/organism/Menu/Menu.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/Menu/Menu.view.tsx
@@ -58,183 +58,179 @@ export const MenuView = ({ connected, ...otherProps }: IProps) => {
   }
 
   return (
-    translate && (
-      <Wrapper {...otherProps}>
-        <Left>
-          <img src={logo} alt="logo" />
-        </Left>
-        <Right>
-          <Menu
+    <Wrapper {...otherProps}>
+      <Left>
+        <img src={logo} alt="logo" />
+      </Left>
+      <Right>
+        <Menu
+          as="div"
+          style={{
+            display: 'inline-block',
+            position: 'relative',
+            textAlign: 'left',
+          }}
+        >
+          <Menu.Button
             as="div"
             style={{
-              display: 'inline-block',
-              position: 'relative',
-              textAlign: 'left',
+              cursor: 'pointer',
+              border: 'none',
+              background: 'transparent',
             }}
           >
-            <Menu.Button
-              as="div"
-              style={{
-                cursor: 'pointer',
-                border: 'none',
-                background: 'transparent',
-              }}
-            >
-              <NetworkPill iconRight="angle-down" backgroundTransparent>
-                {networks.items[networks.activeNetwork] ? (
-                  networks.items[networks.activeNetwork].name
-                ) : (
-                  <Skeleton variant="text" width={100} height={16} />
-                )}
-              </NetworkPill>
-            </Menu.Button>
-            <MenuItems>
-              <MenuSection>
-                <Menu.Item disabled>
-                  <div style={{ padding: '8px 0px 0px 8px' }}>
-                    <Bold>{translate('network')}</Bold>
-                  </div>
+            <NetworkPill iconRight="angle-down" backgroundTransparent>
+              {networks.items[networks.activeNetwork] ? (
+                networks.items[networks.activeNetwork].name
+              ) : (
+                <Skeleton variant="text" width={100} height={16} />
+              )}
+            </NetworkPill>
+          </Menu.Button>
+          <MenuItems>
+            <MenuSection>
+              <Menu.Item disabled>
+                <div style={{ padding: '8px 0px 0px 8px' }}>
+                  <Bold>{translate('network')}</Bold>
+                </div>
+              </Menu.Item>
+            </MenuSection>
+            <MenuSection>
+              {networks.items.map((network, index) => (
+                <Menu.Item key={network.chainId + '_' + index}>
+                  <NetworkMenuItem
+                    onClick={() => changeNetwork(index, network.chainId)}
+                  >
+                    <Radio
+                      checked={Number(networks.activeNetwork) === index}
+                      name="radio-buttons"
+                      inputProps={{ 'aria-label': network.name }}
+                      sx={{
+                        color: theme.palette.grey.grey1,
+                        '&.Mui-checked': {
+                          color: theme.palette.secondary.main,
+                        },
+                      }}
+                    />
+                    <MenuItemText>{network.name}</MenuItemText>
+                  </NetworkMenuItem>
                 </Menu.Item>
-              </MenuSection>
-              <MenuSection>
-                {networks.items.map((network, index) => (
-                  <Menu.Item key={network.chainId + '_' + index}>
-                    <NetworkMenuItem
-                      onClick={() => changeNetwork(index, network.chainId)}
-                    >
-                      <Radio
-                        checked={Number(networks.activeNetwork) === index}
-                        name="radio-buttons"
-                        inputProps={{ 'aria-label': network.name }}
-                        sx={{
-                          color: theme.palette.grey.grey1,
-                          '&.Mui-checked': {
-                            color: theme.palette.secondary.main,
-                          },
-                        }}
-                      />
-                      <MenuItemText>{network.name}</MenuItemText>
-                    </NetworkMenuItem>
-                  </Menu.Item>
-                ))}
-              </MenuSection>
-            </MenuItems>
-          </Menu>
-          <Menu
-            as="div"
+              ))}
+            </MenuSection>
+          </MenuItems>
+        </Menu>
+        <Menu
+          as="div"
+          style={{
+            display: 'inline-block',
+            position: 'relative',
+            textAlign: 'left',
+          }}
+        >
+          <Menu.Button
+            disabled={!connected}
             style={{
-              display: 'inline-block',
-              position: 'relative',
-              textAlign: 'left',
+              cursor: 'pointer',
+              border: 'none',
+              background: 'transparent',
             }}
           >
-            <Menu.Button
-              disabled={!connected}
-              style={{
-                cursor: 'pointer',
-                border: 'none',
-                background: 'transparent',
-              }}
-            >
-              <MenuIcon>
-                <FontAwesomeIcon icon={['fas', 'bars']} />
-                {connected ? (
-                  <Badge
-                    style={{ background: theme.palette.success.main }}
-                  ></Badge>
-                ) : (
-                  <Badge
+            <MenuIcon>
+              <FontAwesomeIcon icon={['fas', 'bars']} />
+              {connected ? (
+                <Badge
+                  style={{ background: theme.palette.success.main }}
+                ></Badge>
+              ) : (
+                <Badge
+                  style={{
+                    background: theme.palette.grey.grey4,
+                    border: '1px solid #ffffff',
+                  }}
+                ></Badge>
+              )}
+            </MenuIcon>
+          </Menu.Button>
+          <MenuItems>
+            <MenuSection>
+              <Menu.Item disabled>
+                <div style={{ padding: '8px 0px' }}>
+                  <FontAwesomeIcon
+                    icon="circle"
+                    color={theme.palette.success.main}
                     style={{
-                      background: theme.palette.grey.grey4,
-                      border: '1px solid #ffffff',
+                      fontSize: '12px',
+                      lineHeight: '12px',
+                      padding: '0px 10px',
                     }}
-                  ></Badge>
-                )}
-              </MenuIcon>
-            </Menu.Button>
-            <MenuItems>
-              <MenuSection>
-                <Menu.Item disabled>
-                  <div style={{ padding: '8px 0px' }}>
+                  />
+                  <MenuItemText>
+                    {translate('connectedToStarknetSnap')}
+                  </MenuItemText>
+                </div>
+              </Menu.Item>
+            </MenuSection>
+            <MenuDivider />
+            <MenuSection>
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    style={{
+                      padding: '8px 0px',
+                      background: active
+                        ? theme.palette.grey.grey4
+                        : theme.palette.grey.white,
+                      cursor: 'pointer',
+                    }}
+                  >
                     <FontAwesomeIcon
-                      icon="circle"
-                      color={theme.palette.success.main}
+                      icon="info-circle"
+                      color={theme.palette.grey.grey1}
                       style={{
                         fontSize: '12px',
                         lineHeight: '12px',
                         padding: '0px 10px',
                       }}
                     />
-                    <MenuItemText>
-                      {translate('connectedToStarknetSnap')}
-                    </MenuItemText>
-                  </div>
-                </Menu.Item>
-              </MenuSection>
-              <MenuDivider />
-              <MenuSection>
-                <Menu.Item>
-                  {({ active }) => (
-                    <div
-                      style={{
-                        padding: '8px 0px',
-                        background: active
-                          ? theme.palette.grey.grey4
-                          : theme.palette.grey.white,
-                        cursor: 'pointer',
-                      }}
+                    <a
+                      href="https://consensys.net/blog/metamask/metamask-integrates-starkware-into-first-of-its-kind-zk-rollup-snap/"
+                      target="_blank"
+                      rel="noreferrer"
                     >
-                      <FontAwesomeIcon
-                        icon="info-circle"
-                        color={theme.palette.grey.grey1}
-                        style={{
-                          fontSize: '12px',
-                          lineHeight: '12px',
-                          padding: '0px 10px',
-                        }}
-                      />
-                      <a
-                        href="https://consensys.net/blog/metamask/metamask-integrates-starkware-into-first-of-its-kind-zk-rollup-snap/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <MenuItemText>
-                          {translate('aboutThisSnap')}
-                        </MenuItemText>
-                      </a>
-                    </div>
-                  )}
-                </Menu.Item>
-                <Menu.Item>
-                  {({ active }) => (
-                    <div
-                      onClick={disconnect}
+                      <MenuItemText>{translate('aboutThisSnap')}</MenuItemText>
+                    </a>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    onClick={disconnect}
+                    style={{
+                      padding: '8px 0px',
+                      background: active
+                        ? theme.palette.grey.grey4
+                        : theme.palette.grey.white,
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      icon="sign-out"
+                      color={theme.palette.grey.grey1}
                       style={{
-                        padding: '8px 0px',
-                        background: active
-                          ? theme.palette.grey.grey4
-                          : theme.palette.grey.white,
-                        cursor: 'pointer',
+                        fontSize: '12px',
+                        lineHeight: '12px',
+                        padding: '0px 10px',
                       }}
-                    >
-                      <FontAwesomeIcon
-                        icon="sign-out"
-                        color={theme.palette.grey.grey1}
-                        style={{
-                          fontSize: '12px',
-                          lineHeight: '12px',
-                          padding: '0px 10px',
-                        }}
-                      />
-                      <MenuItemText>{translate('disconnect')}</MenuItemText>
-                    </div>
-                  )}
-                </Menu.Item>
-              </MenuSection>
-            </MenuItems>
-          </Menu>
-        </Right>
-      </Wrapper>
-    )
+                    />
+                    <MenuItemText>{translate('disconnect')}</MenuItemText>
+                  </div>
+                )}
+              </Menu.Item>
+            </MenuSection>
+          </MenuItems>
+        </Menu>
+      </Right>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
index 9985aae3..68118540 100644
--- a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
@@ -15,41 +15,36 @@ export const MinVersionModalView = () => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        {metaMaskUpgradeRequired ? (
-          <>
-            <Title>{translate('metaMaskUpgradeNeeded')}</Title>
-            <br />
-            <Description>
-              {translate('updateMetaMaskVersion', MIN_METAMASK_VERSION)}
-            </Description>
-            <br />
-            <a href="https://metamask.io" target="_blank" rel="noreferrer">
-              <ConnectButton
-                customIconLeft={<MetaMaskLogo />}
-                onClick={() => {}}
-              >
-                {translate('goToMetaMaskWebsite')}
-              </ConnectButton>
-            </a>
-          </>
-        ) : (
-          <>
-            <Title>{translate('newVersionAvailable')}</Title>
-            <Description>
-              {translate('installLatestVersion')}
-              <ul>
-                <li>{translate('deleteCurrentVersionMetaMask')}</li>
-                <li>{translate('refreshPage')}</li>
-                <li>{translate('connectToMetaMask')}</li>
-              </ul>
-              {translate('accountRecoveryInfo')}
-            </Description>
-          </>
-        )}
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      {metaMaskUpgradeRequired ? (
+        <>
+          <Title>{translate('metaMaskUpgradeNeeded')}</Title>
+          <br />
+          <Description>
+            {translate('updateMetaMaskVersion', MIN_METAMASK_VERSION)}
+          </Description>
+          <br />
+          <a href="https://metamask.io" target="_blank" rel="noreferrer">
+            <ConnectButton customIconLeft={<MetaMaskLogo />} onClick={() => {}}>
+              {translate('goToMetaMaskWebsite')}
+            </ConnectButton>
+          </a>
+        </>
+      ) : (
+        <>
+          <Title>{translate('newVersionAvailable')}</Title>
+          <Description>
+            {translate('installLatestVersion')}
+            <ul>
+              <li>{translate('deleteCurrentVersionMetaMask')}</li>
+              <li>{translate('refreshPage')}</li>
+              <li>{translate('connectToMetaMask')}</li>
+            </ul>
+            {translate('accountRecoveryInfo')}
+          </Description>
+        </>
+      )}
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/NoFlaskModal/NoFlaskModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/NoFlaskModal/NoFlaskModal.view.tsx
index 69a6bf47..e1bc7a83 100644
--- a/packages/wallet-ui/src/components/ui/organism/NoFlaskModal/NoFlaskModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/NoFlaskModal/NoFlaskModal.view.tsx
@@ -13,29 +13,27 @@ export const NoFlaskModalView = () => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        <Title>{translate('metaMaskFlaskExtensionRequired')}</Title>
-        <DescriptionCentered>
-          {translate('installMetaMaskFlaskToUseSnap')}
-          <br />
-          <br />
-          <AlertView
-            text={translate('disableMetaMaskExtension')}
-            variant="warning"
-          />
-        </DescriptionCentered>
-        <a
-          href="https://metamask.io/flask"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <ConnectButton customIconLeft={<FlaskIcon />} onClick={() => {}}>
-            {translate('downloadMetaMaskFlask')}
-          </ConnectButton>
-        </a>
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      <Title>{translate('metaMaskFlaskExtensionRequired')}</Title>
+      <DescriptionCentered>
+        {translate('installMetaMaskFlaskToUseSnap')}
+        <br />
+        <br />
+        <AlertView
+          text={translate('disableMetaMaskExtension')}
+          variant="warning"
+        />
+      </DescriptionCentered>
+      <a
+        href="https://metamask.io/flask"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <ConnectButton customIconLeft={<FlaskIcon />} onClick={() => {}}>
+          {translate('downloadMetaMaskFlask')}
+        </ConnectButton>
+      </a>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/NoMetamaskModal/NoMetamaskModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/NoMetamaskModal/NoMetamaskModal.view.tsx
index a5ba2eff..554ba94b 100644
--- a/packages/wallet-ui/src/components/ui/organism/NoMetamaskModal/NoMetamaskModal.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/NoMetamaskModal/NoMetamaskModal.view.tsx
@@ -12,25 +12,19 @@ export const NoMetamaskModalView = () => {
   const { translate } = useMultiLanguage();
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        <Title>{translate('metaMaskExtensionRequired')}</Title>
-        <DescriptionCentered>
-          {translate('installMetaMaskToUseSnap')}
-          <br />
-          <br />
-        </DescriptionCentered>
-        <a
-          href="https://metamask.io/"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <ConnectButton customIconLeft={<MetamaskIcon />} onClick={() => {}}>
-            {translate('downloadMetaMask')}
-          </ConnectButton>
-        </a>
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      <Title>{translate('metaMaskExtensionRequired')}</Title>
+      <DescriptionCentered>
+        {translate('installMetaMaskToUseSnap')}
+        <br />
+        <br />
+      </DescriptionCentered>
+      <a href="https://metamask.io/" target="_blank" rel="noreferrer noopener">
+        <ConnectButton customIconLeft={<MetamaskIcon />} onClick={() => {}}>
+          {translate('downloadMetaMask')}
+        </ConnectButton>
+      </a>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx b/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
index 37b0e8cf..4cd3ffe4 100644
--- a/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
@@ -68,74 +68,72 @@ export const SideBarView = ({ address }: Props) => {
   }, [address, chainId]);
 
   return (
-    translate && (
-      <Wrapper>
-        <PopInStyled
-          isOpen={accountDetailsOpen}
-          setIsOpen={setAccountDetailsOpen}
-        >
-          <AccountDetailsModal address={address} />
-        </PopInStyled>
-        <PopIn
-          isOpen={infoModalOpen}
-          setIsOpen={setInfoModalOpen}
-          showClose={false}
-        >
-          <ConnectInfoModal
-            onButtonClick={() => setInfoModalOpen(false)}
-            address={address}
-          />
-        </PopIn>
-        <AccountDetails
-          arrowVisible={false}
-          closeTrigger="click"
-          offSet={[60, 0]}
-          content={
-            <AccountDetailsContent>
-              <AccountDetailButton
-                backgroundTransparent
-                iconLeft="qrcode"
-                onClick={() => setAccountDetailsOpen(true)}
-              >
-                {translate('accountDetails')}
-              </AccountDetailButton>
-              <AccountDetailButton
-                backgroundTransparent
-                iconLeft="external-link"
-                onClick={() => openExplorerTab(address, 'contract', chainId)}
-              >
-                {translate('viewOnExplorer')}
-              </AccountDetailButton>
-            </AccountDetailsContent>
-          }
-        >
-          <AccountImageStyled address={address} connected={wallet.connected} />
-        </AccountDetails>
+    <Wrapper>
+      <PopInStyled
+        isOpen={accountDetailsOpen}
+        setIsOpen={setAccountDetailsOpen}
+      >
+        <AccountDetailsModal address={address} />
+      </PopInStyled>
+      <PopIn
+        isOpen={infoModalOpen}
+        setIsOpen={setInfoModalOpen}
+        showClose={false}
+      >
+        <ConnectInfoModal
+          onButtonClick={() => setInfoModalOpen(false)}
+          address={address}
+        />
+      </PopIn>
+      <AccountDetails
+        arrowVisible={false}
+        closeTrigger="click"
+        offSet={[60, 0]}
+        content={
+          <AccountDetailsContent>
+            <AccountDetailButton
+              backgroundTransparent
+              iconLeft="qrcode"
+              onClick={() => setAccountDetailsOpen(true)}
+            >
+              {translate('accountDetails')}
+            </AccountDetailButton>
+            <AccountDetailButton
+              backgroundTransparent
+              iconLeft="external-link"
+              onClick={() => openExplorerTab(address, 'contract', chainId)}
+            >
+              {translate('viewOnExplorer')}
+            </AccountDetailButton>
+          </AccountDetailsContent>
+        }
+      >
+        <AccountImageStyled address={address} connected={wallet.connected} />
+      </AccountDetails>
 
-        <AccountLabel>{translate('myAccount')}</AccountLabel>
-        <RowDiv>
-          <InfoIcon onClick={() => setInfoModalOpen(true)}>i</InfoIcon>
-          <AccountAddress address={address} starkName={starkName} />
-        </RowDiv>
-        <DivList ref={ref as any}>
-          <AssetsList />
-        </DivList>
-        <AddTokenButton
-          customIconLeft={
-            <RoundedIcon>
-              <FontAwesomeIcon icon={['fas', 'plus']} />
-            </RoundedIcon>
-          }
-          backgroundTransparent
-          shadowVisible={listOverflow}
-          onClick={() => setAddTokenOpen(true)}
-        >
-          {translate('addToken').toUpperCase()}
-        </AddTokenButton>
-        <PopIn isOpen={addTokenOpen} setIsOpen={setAddTokenOpen}>
-          <AddTokenModal closeModal={() => setAddTokenOpen(false)} />
-        </PopIn>
-      </Wrapper>
-    )
+      <AccountLabel>{translate('myAccount')}</AccountLabel>
+      <RowDiv>
+        <InfoIcon onClick={() => setInfoModalOpen(true)}>i</InfoIcon>
+        <AccountAddress address={address} starkName={starkName} />
+      </RowDiv>
+      <DivList ref={ref as any}>
+        <AssetsList />
+      </DivList>
+      <AddTokenButton
+        customIconLeft={
+          <RoundedIcon>
+            <FontAwesomeIcon icon={['fas', 'plus']} />
+          </RoundedIcon>
+        }
+        backgroundTransparent
+        shadowVisible={listOverflow}
+        onClick={() => setAddTokenOpen(true)}
+      >
+        {translate('addToken').toUpperCase()}
+      </AddTokenButton>
+      <PopIn isOpen={addTokenOpen} setIsOpen={setAddTokenOpen}>
+        <AddTokenModal closeModal={() => setAddTokenOpen(false)} />
+      </PopIn>
+    </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/organism/UpgradeModel/UpgradeModel.view.tsx b/packages/wallet-ui/src/components/ui/organism/UpgradeModel/UpgradeModel.view.tsx
index 58926df1..9e6d111e 100644
--- a/packages/wallet-ui/src/components/ui/organism/UpgradeModel/UpgradeModel.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/UpgradeModel/UpgradeModel.view.tsx
@@ -82,65 +82,55 @@ export const UpgradeModelView = ({ address }: Props) => {
     switch (stage) {
       case Stage.INIT:
         return (
-          translate && (
-            <>
-              <DescriptionCentered>
-                {translate('newVersionOfSmartContractNecessaryPart1')} <br />
-                <br />
-                {translate('newVersionOfSmartContractNecessaryPart2')} <br />
-                <br />
-                {translate('newVersionOfSmartContractNecessaryPart3')} <br />
-                {translate('newVersionOfSmartContractNecessaryPart4')}
-              </DescriptionCentered>
-              <UpgradeButton onClick={onUpgrade}>
-                {translate('upgrade')}
-              </UpgradeButton>
-            </>
-          )
+          <>
+            <DescriptionCentered>
+              {translate('newVersionOfSmartContractNecessaryPart1')} <br />
+              <br />
+              {translate('newVersionOfSmartContractNecessaryPart2')} <br />
+              <br />
+              {translate('newVersionOfSmartContractNecessaryPart3')} <br />
+              {translate('newVersionOfSmartContractNecessaryPart4')}
+            </DescriptionCentered>
+            <UpgradeButton onClick={onUpgrade}>
+              {translate('upgrade')}
+            </UpgradeButton>
+          </>
         );
       case Stage.WAITING_FOR_TXN:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('waitingForTransaction')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('waitingForTransaction')}
+          </DescriptionCentered>
         );
       case Stage.SUCCESS:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('accountUpgradedSuccessfully')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('accountUpgradedSuccessfully')}
+          </DescriptionCentered>
         );
       default:
         return (
-          translate && (
-            <DescriptionCentered>
-              {translate('transactionHash')} <br />{' '}
-              <Txnlink onClick={() => openExplorerTab(txnHash, 'tx', chainId)}>
-                {shortenAddress(txnHash)}{' '}
-              </Txnlink>
-              <br />
-              {translate('upgradeTransactionPendingPart1')} <br />
-              <br />
-              {translate('upgradeTransactionPendingPart2')} <br />
-              <br />
-              {translate('upgradeTransactionPendingPart3')}
-            </DescriptionCentered>
-          )
+          <DescriptionCentered>
+            {translate('transactionHash')} <br />{' '}
+            <Txnlink onClick={() => openExplorerTab(txnHash, 'tx', chainId)}>
+              {shortenAddress(txnHash)}{' '}
+            </Txnlink>
+            <br />
+            {translate('upgradeTransactionPendingPart1')} <br />
+            <br />
+            {translate('upgradeTransactionPendingPart2')} <br />
+            <br />
+            {translate('upgradeTransactionPendingPart3')}
+          </DescriptionCentered>
         );
     }
   };
 
   return (
-    translate && (
-      <Wrapper>
-        <StarknetLogo />
-        <Title>{translate('upgradeAccount')}</Title>
-        {renderComponent()}
-      </Wrapper>
-    )
+    <Wrapper>
+      <StarknetLogo />
+      <Title>{translate('upgradeAccount')}</Title>
+      {renderComponent()}
+    </Wrapper>
   );
 };