Repository: Consensys/starknet-snap
Pull request #527: chore(wallet-ui): fix snap upgrade workflow
Author: login: stanleyyconsensys
Created: 2025-03-03T10:29:15Z | Merged: 2025-03-04T09:37:34Z

This PR is to fix the SNAP upgrade workflow

### Changes:
- Remove min snap version from .env.production, as it will impact the deployment
- Adding force upgrade modal for UI, in case the SNAP cant be upgraded for some reason
- Adding upgrade workflow on min snap version modal



Diff:
diff --git a/packages/wallet-ui/.env.production b/packages/wallet-ui/.env.production
index 85f8868be..5029b9fdf 100644
--- a/packages/wallet-ui/.env.production
+++ b/packages/wallet-ui/.env.production
@@ -1,2 +1 @@
-REACT_APP_SNAP_ID=npm:@consensys/starknet-snap
-REACT_APP_MIN_SNAP_VERSION=2.2.0
\ No newline at end of file
+REACT_APP_SNAP_ID=npm:@consensys/starknet-snap
\ No newline at end of file
diff --git a/packages/wallet-ui/src/App.tsx b/packages/wallet-ui/src/App.tsx
index e4784467e..29950816e 100644
--- a/packages/wallet-ui/src/App.tsx
+++ b/packages/wallet-ui/src/App.tsx
@@ -22,12 +22,12 @@ import { MinVersionModal } from 'components/ui/organism/MinVersionModal';
 import { DeployModal } from 'components/ui/organism/DeployModal';
 import { MinMetamaskVersionModal } from 'components/ui/organism/MinMetamaskVersionModal';
 import { Home } from 'components/pages/Home';
+import { ForceUpgadeModal } from 'components/ui/organism/ForceUpgadeModal';
 
 library.add(fas, far);
 
 function App() {
-  const { initSnap, initWalletData, checkConnection, loadLocale } =
-    useStarkNetSnap();
+  const { initSnap, initWalletData, checkConnection } = useStarkNetSnap();
   const connected = useAppSelector((state) => state.wallet.connected);
   const forceReconnect = useAppSelector((state) => state.wallet.forceReconnect);
   const provider = useAppSelector((state) => state.wallet.provider);
@@ -38,6 +38,7 @@ function App() {
     minMMVersionModalVisible,
     upgradeModalVisible,
     deployModalVisible,
+    forceReconnectModalVisible,
   } = useAppSelector((state) => state.modals);
   const { loader } = useAppSelector((state) => state.UI);
   const networks = useAppSelector((state) => state.networks);
@@ -65,12 +66,6 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [networks.activeNetwork, provider, chainId]);
 
-  useEffect(() => {
-    if (connected) {
-      loadLocale();
-    }
-  }, [connected, loadLocale]);
-
   const loading = loader.isLoading;
   const isModalEligibleToShow =
     !minVersionModalVisible && !minMMVersionModalVisible;
@@ -90,6 +85,9 @@ function App() {
         <PopIn isOpen={minMMVersionModalVisible} showClose={false}>
           <MinMetamaskVersionModal />
         </PopIn>
+        <PopIn isOpen={forceReconnectModalVisible} showClose={false}>
+          <ForceUpgadeModal />
+        </PopIn>
         <PopIn
           isOpen={!loading && !!hasMetamask && !connected}
           showClose={false}
diff --git a/packages/wallet-ui/src/assets/locales/en.json b/packages/wallet-ui/src/assets/locales/en.json
index 03ec64022..f8131e04e 100644
--- a/packages/wallet-ui/src/assets/locales/en.json
+++ b/packages/wallet-ui/src/assets/locales/en.json
@@ -307,6 +307,9 @@
     "upgradeAccountFailed": {
       "message": "Upgrade account failed"
     },
+    "upgradeLatestSnapVersion": {
+      "message": "To use this dapp, please upgrade to the latest version by clicking the button below:"
+    },
     "upgradeTransactionPendingPart1": {
       "message": "Your upgrade transaction is still pending and has reached the maximum retry limit for status checks. Please wait for the transaction to complete."
     },
diff --git a/packages/wallet-ui/src/assets/locales/fr.json b/packages/wallet-ui/src/assets/locales/fr.json
index 970cdbdd2..c47a74f40 100644
--- a/packages/wallet-ui/src/assets/locales/fr.json
+++ b/packages/wallet-ui/src/assets/locales/fr.json
@@ -301,6 +301,9 @@
     "upgradeAccountFailed": {
       "message": "Échec de la mise à jour du compte"
     },
+    "upgradeLatestSnapVersion": {
+      "message": "Pour utiliser cette dapp, veuillez passer à la dernière version en cliquant sur le bouton ci-dessous:"
+    },
     "upgradeTransactionPendingPart1": {
       "message": "Votre transaction de mise à jour est toujours en attente et a atteint la limite maximale de tentatives pour vérifier son statut. Veuillez attendre la fin de la transaction."
     },
diff --git a/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.style.ts b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.style.ts
new file mode 100644
index 000000000..9740bfd6a
--- /dev/null
+++ b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.style.ts
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import starknetSrc from 'assets/images/starknet-logo.svg';
+import metamaskSrc from 'assets/images/metamask-fox-icon.svg';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.theme.palette.grey.white};
+  width: ${(props) => props.theme.modal.base};
+  padding: ${(props) => props.theme.spacing.base};
+  padding-top: ${(props) => props.theme.spacing.large};
+  border-radius: ${(props) => props.theme.spacing.base};
+  align-items: center;
+  a {
+    all: unset;
+  }
+`;
+
+export const StarknetLogo = styled.img.attrs(() => ({
+  src: starknetSrc,
+}))`
+  height: ${(props) => props.theme.spacing.medium};
+  margin-bottom: ${(props) => props.theme.spacing.medium};
+`;
+
+export const MetaMaskLogo = styled.img.attrs(() => ({
+  src: metamaskSrc,
+}))`
+  width: ${(props) => props.theme.spacing.medium};
+  height: ${(props) => props.theme.spacing.medium};
+`;
+
+export const Title = styled.div`
+  text-align: center;
+  font-size: ${(props) => props.theme.typography.h3.fontSize};
+  font-weight: ${(props) => props.theme.typography.h3.fontWeight};
+  font-family: ${(props) => props.theme.typography.h3.fontFamily};
+  line-height: ${(props) => props.theme.typography.h3.lineHeight};
+  margin-bottom: 8px;
+`;
+
+export const Description = styled.div`
+  font-size: ${(props) => props.theme.typography.p2.fontSize};
+  color: ${(props) => props.theme.palette.grey.grey1};
+`;
diff --git a/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.view.tsx
new file mode 100644
index 000000000..41a7e2a90
--- /dev/null
+++ b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/ForceUpgadeModal.view.tsx
@@ -0,0 +1,29 @@
+import {
+  Description,
+  StarknetLogo,
+  Title,
+  Wrapper,
+} from './ForceUpgadeModal.style';
+import { useMultiLanguage } from 'services';
+
+export const ForceUpgadeModalView = () => {
+  const { translate } = useMultiLanguage();
+
+  return (
+    <Wrapper>
+      <StarknetLogo />
+      <>
+        <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/ForceUpgadeModal/index.ts b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/index.ts
new file mode 100644
index 000000000..4ed4ec930
--- /dev/null
+++ b/packages/wallet-ui/src/components/ui/organism/ForceUpgadeModal/index.ts
@@ -0,0 +1 @@
+export { ForceUpgadeModalView as ForceUpgadeModal } from './ForceUpgadeModal.view';
diff --git a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.stories.tsx b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.stories.tsx
deleted file mode 100644
index 266a4a058..000000000
--- a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/react';
-import { useState } from 'react';
-import { PopIn } from 'components/ui/molecule/PopIn';
-import { MinVersionModalView } from './MinVersionModal.view';
-
-export default {
-  title: 'Organism/MinVersionModal',
-  component: MinVersionModalView,
-} as Meta;
-
-export const ContentOnly = () => <MinVersionModalView />;
-
-export const WithModal = () => {
-  let [isOpen, setIsOpen] = useState(false);
-  return (
-    <>
-      <button onClick={() => setIsOpen(!isOpen)}>Open Modal</button>
-      <PopIn isOpen={isOpen} setIsOpen={setIsOpen} showClose={false}>
-        <MinVersionModalView></MinVersionModalView>
-      </PopIn>
-    </>
-  );
-};
diff --git a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.style.ts b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.style.ts
index b6582d83d..32760961b 100644
--- a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.style.ts
+++ b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.style.ts
@@ -8,8 +8,8 @@ export const Wrapper = styled.div`
   background-color: ${(props) => props.theme.palette.grey.white};
   width: ${(props) => props.theme.modal.base};
   padding: ${(props) => props.theme.spacing.base};
-  padding-top: 40px;
-  border-radius: 8px;
+  padding-top: ${(props) => props.theme.spacing.large};
+  border-radius: ${(props) => props.theme.spacing.base};
   align-items: center;
   a {
     all: unset;
@@ -19,16 +19,15 @@ export const Wrapper = styled.div`
 export const StarknetLogo = styled.img.attrs(() => ({
   src: starknetSrc,
 }))`
-  width: 158px;
-  height: 32px;
-  margin-bottom: 32px;
+  height: ${(props) => props.theme.spacing.medium};
+  margin-bottom: ${(props) => props.theme.spacing.medium};
 `;
 
 export const MetaMaskLogo = styled.img.attrs(() => ({
   src: metamaskSrc,
 }))`
-  width: 32px;
-  height: 32px;
+  width: ${(props) => props.theme.spacing.medium};
+  height: ${(props) => props.theme.spacing.medium};
 `;
 
 export const Title = styled.div`
@@ -37,16 +36,12 @@ export const Title = styled.div`
   font-weight: ${(props) => props.theme.typography.h3.fontWeight};
   font-family: ${(props) => props.theme.typography.h3.fontFamily};
   line-height: ${(props) => props.theme.typography.h3.lineHeight};
-  margin-bottom: 8px;
+  margin-bottom: ${(props) => props.theme.spacing.base};
 `;
 
 export const Description = styled.div`
   font-size: ${(props) => props.theme.typography.p2.fontSize};
   color: ${(props) => props.theme.palette.grey.grey1};
-`;
-
-export const DescriptionCentered = styled(Description)`
+  margin-bottom: ${(props) => props.theme.spacing.base};
   text-align: center;
-  margin-bottom: 20px;
-  width: 264px;
 `;
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 fc1b69c5f..2b780d20c 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
@@ -1,28 +1,29 @@
 import {
-  Description,
   StarknetLogo,
+  MetaMaskLogo,
   Title,
   Wrapper,
+  Description,
 } from './MinVersionModal.style';
-import { useMultiLanguage } from 'services';
+
+import { ConnectButton } from '../ConnectModal/ConnectModal.style';
+import { useMultiLanguage, useStarkNetSnap } from 'services';
 
 export const MinVersionModalView = () => {
   const { translate } = useMultiLanguage();
-
+  const { completeUpgradeSnap } = useStarkNetSnap();
   return (
     <Wrapper>
       <StarknetLogo />
       <>
         <Title>{translate('newVersionAvailable')}</Title>
-        <Description>
-          {translate('installLatestVersion')}
-          <ul>
-            <li>{translate('deleteCurrentVersionMetaMask')}</li>
-            <li>{translate('refreshPage')}</li>
-            <li>{translate('connectToMetaMask')}</li>
-          </ul>
-          {translate('accountRecoveryInfo')}
-        </Description>
+        <Description>{translate('upgradeLatestSnapVersion')}</Description>
+        <ConnectButton
+          customIconLeft={<MetaMaskLogo />}
+          onClick={completeUpgradeSnap}
+        >
+          {translate('upgrade')}
+        </ConnectButton>
       </>
     </Wrapper>
   );
diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts
index e4a328473..19a00078e 100644
--- a/packages/wallet-ui/src/services/useStarkNetSnap.ts
+++ b/packages/wallet-ui/src/services/useStarkNetSnap.ts
@@ -13,6 +13,7 @@ import {
   setMinVersionModalVisible,
   setUpgradeModalVisible,
   setDeployModalVisible,
+  setForceReconnectModalVisible,
 } from 'slices/modalSlice';
 import {
   setErc20TokenBalanceSelected,
@@ -60,31 +61,29 @@ export const useStarkNetSnap = () => {
   );
   const accounts = useAppSelector((state) => state.wallet.accounts);
 
-  const connectToSnap = () => {
+  const connectToSnap = async () => {
     dispatch(enableLoadingWithMessage('Connecting...'));
-    requestSnap()
-      .then(() => {
-        dispatch(setWalletConnection(true));
-        dispatch(setForceReconnect(false));
-      })
-      .catch(() => {
-        dispatch(setWalletConnection(false));
-        dispatch(disableLoading());
-      });
+    try {
+      await requestSnap();
+      dispatch(setWalletConnection(true));
+      dispatch(setForceReconnect(false));
+    } catch (error) {
+      dispatch(setWalletConnection(false));
+    } finally {
+      dispatch(disableLoading());
+    }
   };
 
-  const checkConnection = () => {
-    dispatch(enableLoadingWithMessage('Connecting...'));
-    ping()
-      .then(() => {
-        dispatch(setWalletConnection(true));
-      })
-      .catch((error: any) => {
-        dispatch(setWalletConnection(false));
-        dispatch(disableLoading());
-        //eslint-disable-next-line no-console
-        console.log(error);
-      });
+  const checkConnection = async () => {
+    dispatch(enableLoadingWithMessage('checking connection...'));
+    try {
+      await ping();
+      dispatch(setWalletConnection(true));
+    } catch (error) {
+      dispatch(setWalletConnection(false));
+    } finally {
+      dispatch(disableLoading());
+    }
   };
 
   const loadLocale = async () => {
@@ -130,17 +129,28 @@ export const useStarkNetSnap = () => {
     });
   };
 
+  const requestUpgradeSnap = () => {
+    dispatch(setMinVersionModalVisible(true));
+  };
+
+  const completeUpgradeSnap = async () => {
+    dispatch(setMinVersionModalVisible(false));
+    await connectToSnap();
+    await initSnap();
+  };
+
   const initSnap = async () => {
     if (await isSnapRequireUpdate()) {
-      // If the SNAP requires an update,
-      // re-connect with the SNAP to kick off the update process
-      await connectToSnap();
+      requestUpgradeSnap();
       return;
     }
+
     if (!loader.isLoading) {
       dispatch(enableLoadingWithMessage('Initializing wallet ...'));
     }
     try {
+      await loadLocale();
+
       const networks = await getNetworks();
       if (networks.length === 0) {
         console.error('No networks found');
@@ -167,7 +177,7 @@ export const useStarkNetSnap = () => {
         //We have to make the user reinstall the snap after the flask update to 10.25.0
         //following the breaking change : snap_manageState now uses SIP-6 algorithm for encryption
         //This change breaks the old snap state, hence the reinstallation
-        dispatch(setMinVersionModalVisible(true));
+        dispatch(setForceReconnectModalVisible(true));
       }
       //eslint-disable-next-line no-console
       console.error('Error while Initializing wallet', err);
@@ -931,6 +941,7 @@ export const useStarkNetSnap = () => {
   };
 
   return {
+    completeUpgradeSnap,
     connectToSnap,
     loadLocale,
     getNetworks,
diff --git a/packages/wallet-ui/src/slices/UISlice.ts b/packages/wallet-ui/src/slices/UISlice.ts
index ae746234d..c8624b510 100644
--- a/packages/wallet-ui/src/slices/UISlice.ts
+++ b/packages/wallet-ui/src/slices/UISlice.ts
@@ -14,7 +14,7 @@ const initialState: UIState = {
   },
 };
 
-export const networkSlice = createSlice({
+export const uiSlice = createSlice({
   name: 'UI',
   initialState,
   reducers: {
@@ -29,7 +29,6 @@ export const networkSlice = createSlice({
   },
 });
 
-export const { enableLoadingWithMessage, disableLoading } =
-  networkSlice.actions;
+export const { enableLoadingWithMessage, disableLoading } = uiSlice.actions;
 
-export default networkSlice.reducer;
+export default uiSlice.reducer;
diff --git a/packages/wallet-ui/src/slices/modalSlice.ts b/packages/wallet-ui/src/slices/modalSlice.ts
index 822b64387..0bca4aaf2 100644
--- a/packages/wallet-ui/src/slices/modalSlice.ts
+++ b/packages/wallet-ui/src/slices/modalSlice.ts
@@ -6,6 +6,7 @@ export interface modalState {
   minMMVersionModalVisible: boolean;
   upgradeModalVisible: boolean;
   deployModalVisible: boolean;
+  forceReconnectModalVisible: boolean;
 }
 
 const initialState: modalState = {
@@ -14,6 +15,7 @@ const initialState: modalState = {
   minMMVersionModalVisible: false,
   upgradeModalVisible: false,
   deployModalVisible: false,
+  forceReconnectModalVisible: false,
 };
 
 export const modalSlice = createSlice({
@@ -33,6 +35,9 @@ export const modalSlice = createSlice({
     setMinVersionModalVisible: (state, { payload }) => {
       state.minVersionModalVisible = payload;
     },
+    setForceReconnectModalVisible: (state, { payload }) => {
+      state.forceReconnectModalVisible = payload;
+    },
     setMinMMVersionModalVisible: (state, { payload }) => {
       state.minMMVersionModalVisible = payload;
     },
@@ -45,6 +50,7 @@ export const {
   setUpgradeModalVisible,
   setDeployModalVisible,
   setMinMMVersionModalVisible,
+  setForceReconnectModalVisible,
 } = modalSlice.actions;
 
 export default modalSlice.reducer;


Reviews:
user: login: khanti42
body: one minor comment
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-03T11:48:42Z
user: login: stanleyyconsensys
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-04T01:15:32Z
user: login: khanti42
body: LGTM!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-04T09:30:00Z

Review comments:
diff_hunk: @@ -1,28 +1,28 @@
 import {
-  Description,
   StarknetLogo,
+  MetaMaskLogo,
   Title,
   Wrapper,
 } from './MinVersionModal.style';
-import { useMultiLanguage } from 'services';
+
+import { ConnectButton } from '../ConnectModal/ConnectModal.style';
+import { useMultiLanguage, useStarkNetSnap } from 'services';
 
 export const MinVersionModalView = () => {
   const { translate } = useMultiLanguage();
-
+  const { completeUpgradeSnap } = useStarkNetSnap();
   return (
     <Wrapper>
       <StarknetLogo />
       <>
         <Title>{translate('newVersionAvailable')}</Title>
-        <Description>
-          {translate('installLatestVersion')}
-          <ul>
-            <li>{translate('deleteCurrentVersionMetaMask')}</li>
-            <li>{translate('refreshPage')}</li>
-            <li>{translate('connectToMetaMask')}</li>
-          </ul>
-          {translate('accountRecoveryInfo')}
-        </Description>
+
path: packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
user: login: khanti42
body: We should maybe keep a small description 

```suggestion
<Description>
          {translate('upgradeLatestVersion')}
</Description>
```

And then adding 

en.json
```json
    "upgradeLatestVersion": {
      "message": "To use this dapp, please upgrade to the latest version by clicking the link below:"
    },
```

fr.json
```json
      "upgradeLatestVersion": {
        "message": "Pour utiliser cette dApp, veuillez mettre à jour vers la dernière version en cliquant sur le lien ci-dessous :"
      }
```

wdyt ? 
created_at: 2025-03-03T11:46:28Z
author_association: COLLABORATOR
diff_hunk: @@ -1,28 +1,28 @@
 import {
-  Description,
   StarknetLogo,
+  MetaMaskLogo,
   Title,
   Wrapper,
 } from './MinVersionModal.style';
-import { useMultiLanguage } from 'services';
+
+import { ConnectButton } from '../ConnectModal/ConnectModal.style';
+import { useMultiLanguage, useStarkNetSnap } from 'services';
 
 export const MinVersionModalView = () => {
   const { translate } = useMultiLanguage();
-
+  const { completeUpgradeSnap } = useStarkNetSnap();
   return (
     <Wrapper>
       <StarknetLogo />
       <>
         <Title>{translate('newVersionAvailable')}</Title>
-        <Description>
-          {translate('installLatestVersion')}
-          <ul>
-            <li>{translate('deleteCurrentVersionMetaMask')}</li>
-            <li>{translate('refreshPage')}</li>
-            <li>{translate('connectToMetaMask')}</li>
-          </ul>
-          {translate('accountRecoveryInfo')}
-        </Description>
+
path: packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
user: login: stanleyyconsensys
body: good idea, just change a bit , instead of link, but button
created_at: 2025-03-04T01:15:32Z
author_association: COLLABORATOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-04T01:50:50Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=consensys_starknet-snap-starknet-snap&pullRequest=527) **Quality Gate passed for 'consensys_starknet-snap-starknet-snap'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=consensys_starknet-snap-starknet-snap&pullRequest=527&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=consensys_starknet-snap-starknet-snap&pullRequest=527&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=consensys_starknet-snap-starknet-snap&pullRequest=527&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=consensys_starknet-snap-starknet-snap&pullRequest=527&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=consensys_starknet-snap-starknet-snap&pullRequest=527&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=consensys_starknet-snap-starknet-snap&pullRequest=527)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-03-04T01:51:15Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=consensys_starknet-snap-wallet-ui&pullRequest=527) **Quality Gate passed for 'consensys_starknet-snap-wallet-ui'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=consensys_starknet-snap-wallet-ui&pullRequest=527&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=consensys_starknet-snap-wallet-ui&pullRequest=527&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=consensys_starknet-snap-wallet-ui&pullRequest=527&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=consensys_starknet-snap-wallet-ui&pullRequest=527&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [19.3% Duplication on New Code](https://sonarcloud.io/component_measures?id=consensys_starknet-snap-wallet-ui&pullRequest=527&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=consensys_starknet-snap-wallet-ui&pullRequest=527)


author_association: NONE