Merge branch 'chore/fix-ui-redux-state-over-listen' into feat/account…

…-drawer-ui
Consensys · Feb 25, 2025 · 1c73a46 · 1c73a46
2 parents a3b94e3 + 3d63038
commit 1c73a46
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 53 deletions.
diff --git a/packages/get-starknet/webpack.config.local.js b/packages/get-starknet/webpack.config.local.js
@@ -16,5 +16,10 @@ module.exports = (env) =>
       static: path.join(__dirname, 'dist/webpack'),
       compress: true,
       port: 8082,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+      }
     },
   });
diff --git a/packages/wallet-ui/src/App.tsx b/packages/wallet-ui/src/App.tsx
@@ -20,24 +20,26 @@ import { NoMetamaskModal } from 'components/ui/organism/NoMetamaskModal';
 import { MinVersionModal } from './components/ui/organism/MinVersionModal';
 import { useHasMetamask } from 'hooks/useHasMetamask';
 import { DeployModal } from 'components/ui/organism/DeployModal';
+import { MinMetamaskVersionModal } from 'components/ui/organism/MinMetamaskVersionModal';
 
 library.add(fas, far);
 
 function App() {
   const { initSnap, initWalletData, checkConnection, loadLocale } =
     useStarkNetSnap();
-  const { connected, forceReconnect, provider } = useAppSelector(
-    (state) => state.wallet,
-  );
+  const connected = useAppSelector((state) => state.wallet.connected);
+  const forceReconnect = useAppSelector((state) => state.wallet.forceReconnect);
+  const provider = useAppSelector((state) => state.wallet.provider);
+  const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
   const {
     infoModalVisible,
     minVersionModalVisible,
+    minMMVersionModalVisible,
     upgradeModalVisible,
     deployModalVisible,
   } = useAppSelector((state) => state.modals);
   const { loader } = useAppSelector((state) => state.UI);
   const networks = useAppSelector((state) => state.networks);
-  const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
   const { hasMetamask } = useHasMetamask();
   const chainId = networks.items?.[networks.activeNetwork]?.chainId;
   const address = currentAccount.address;
@@ -69,6 +71,9 @@ function App() {
   }, [connected, loadLocale]);
 
   const loading = loader.isLoading;
+  const isModalEligibleToShow =
+    !minVersionModalVisible && !minMMVersionModalVisible;
+
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
@@ -79,26 +84,29 @@ function App() {
         <PopIn isOpen={minVersionModalVisible} showClose={false}>
           <MinVersionModal />
         </PopIn>
+        <PopIn isOpen={minMMVersionModalVisible} showClose={false}>
+          <MinMetamaskVersionModal />
+        </PopIn>
         <PopIn
           isOpen={!loading && !!hasMetamask && !connected}
           showClose={false}
         >
           <ConnectModal />
         </PopIn>
         <PopIn
-          isOpen={infoModalVisible && !minVersionModalVisible}
+          isOpen={isModalEligibleToShow && infoModalVisible}
           showClose={false}
         >
           <ConnectInfoModal address={address} />
         </PopIn>
         <PopIn
-          isOpen={!minVersionModalVisible && upgradeModalVisible}
+          isOpen={isModalEligibleToShow && upgradeModalVisible}
           showClose={false}
         >
           <UpgradeModel address={address} />
         </PopIn>
         <PopIn
-          isOpen={!minVersionModalVisible && deployModalVisible}
+          isOpen={isModalEligibleToShow && deployModalVisible}
           showClose={false}
         >
           <DeployModal address={address} />

diff --git a/packages/wallet-ui/src/components/pages/Home/Home.view.tsx b/packages/wallet-ui/src/components/pages/Home/Home.view.tsx
@@ -6,12 +6,12 @@ import { useAppSelector } from 'hooks/redux';
 import { useMultiLanguage } from 'services';
 
 export const HomeView = () => {
-  const { erc20TokenBalanceSelected, transactions } = useAppSelector(
-    (state) => state.wallet,
+  const erc20TokenBalanceSelected = useAppSelector(
+    (state) => state.wallet.erc20TokenBalanceSelected,
   );
+  const transactions = useAppSelector((state) => state.wallet.transactions);
+  const { address } = useAppSelector((state) => state.wallet.currentAccount);
   const loader = useAppSelector((state) => state.UI.loader);
-  const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
-  const address = currentAccount.address;
   const { upgradeModalVisible } = useAppSelector((state) => state.modals);
   const { translate } = useMultiLanguage();
 

diff --git a/...et-ui/src/components/ui/organism/MinMetamaskVersionModal/MinMetamaskVersionModal.style.ts b/...et-ui/src/components/ui/organism/MinMetamaskVersionModal/MinMetamaskVersionModal.style.ts
@@ -0,0 +1,46 @@
+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: 40px;
+  border-radius: 8px;
+  align-items: center;
+  a {
+    all: unset;
+  }
+`;
+
+export const StarknetLogo = styled.img.attrs(() => ({
+  src: starknetSrc,
+}))`
+  width: 158px;
+  height: 32px;
+  margin-bottom: 32px;
+`;
+
+export const MetaMaskLogo = styled.img.attrs(() => ({
+  src: metamaskSrc,
+}))`
+  width: 32px;
+  height: 32px;
+`;
+
+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/...et-ui/src/components/ui/organism/MinMetamaskVersionModal/MinMetamaskVersionModal.view.tsx b/...et-ui/src/components/ui/organism/MinMetamaskVersionModal/MinMetamaskVersionModal.view.tsx
@@ -0,0 +1,33 @@
+import { MIN_METAMASK_VERSION } from 'utils/constants';
+import {
+  Description,
+  MetaMaskLogo,
+  StarknetLogo,
+  Title,
+  Wrapper,
+} from './MinMetamaskVersionModal.style';
+import { ConnectButton } from '../ConnectModal/ConnectModal.style';
+import { useMultiLanguage } from 'services';
+
+export const MinMetamaskVersionModalView = () => {
+  const { translate } = useMultiLanguage();
+
+  return (
+    <Wrapper>
+      <StarknetLogo />
+      <>
+        <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>
+      </>
+    </Wrapper>
+  );
+};
diff --git a/packages/wallet-ui/src/components/ui/organism/MinMetamaskVersionModal/index.ts b/packages/wallet-ui/src/components/ui/organism/MinMetamaskVersionModal/index.ts
@@ -0,0 +1 @@
+export { MinMetamaskVersionModalView as MinMetamaskVersionModal } from './MinMetamaskVersionModal.view';
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
@@ -1,50 +1,29 @@
-import { MIN_METAMASK_VERSION } from 'utils/constants';
 import {
   Description,
-  MetaMaskLogo,
   StarknetLogo,
   Title,
   Wrapper,
 } from './MinVersionModal.style';
-import { useHasMetamask } from 'hooks/useHasMetamask';
-import { ConnectButton } from '../ConnectModal/ConnectModal.style';
 import { useMultiLanguage } from 'services';
 
 export const MinVersionModalView = () => {
-  const { metaMaskUpgradeRequired } = useHasMetamask();
   const { translate } = useMultiLanguage();
 
   return (
     <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>
-        </>
-      )}
+      <>
+        <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/hooks/useHasMetamask.ts b/packages/wallet-ui/src/hooks/useHasMetamask.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useAppDispatch } from 'hooks/redux';
 import { setProvider } from 'slices/walletSlice';
-import { setMinVersionModalVisible } from 'slices/modalSlice';
+import { setMinMMVersionModalVisible } from 'slices/modalSlice';
 import { enableLoadingWithMessage, disableLoading } from 'slices/UISlice';
 import { MIN_METAMASK_VERSION } from 'utils/constants';
 import semver from 'semver/preload';
@@ -92,9 +92,6 @@ async function detectMetamaskSupport(windowObject: Window & typeof globalThis) {
 export const useHasMetamask = () => {
   const dispatch = useAppDispatch();
   const [hasMetamask, setHasMetamask] = useState<boolean | null>(null);
-  const [metaMaskUpgradeRequired, setMetaMaskUpgradeRequired] = useState<
-    boolean | null
-  >(null);
 
   useEffect(() => {
     const init = async () => {
@@ -106,8 +103,7 @@ export const useHasMetamask = () => {
           dispatch(setProvider(provider));
           setHasMetamask(provider != null);
           if (await isMetaMaskUpgradeRequired(provider)) {
-            dispatch(setMinVersionModalVisible(true));
-            setMetaMaskUpgradeRequired(true);
+            dispatch(setMinMMVersionModalVisible(true));
           }
         } else {
           dispatch(setProvider(null));
@@ -125,7 +121,6 @@ export const useHasMetamask = () => {
 
   return {
     hasMetamask,
-    metaMaskUpgradeRequired,
   };
 };
 

diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts
@@ -58,9 +58,10 @@ export const useStarkNetSnap = () => {
     snapId,
   } = useSnap();
   const { loader } = useAppSelector((state) => state.UI);
-  const { erc20TokenBalances, accounts } = useAppSelector(
-    (state) => state.wallet,
+  const erc20TokenBalances = useAppSelector(
+    (state) => state.wallet.erc20TokenBalances,
   );
+  const accounts = useAppSelector((state) => state.wallet.accounts);
 
   const connectToSnap = () => {
     dispatch(enableLoadingWithMessage('Connecting...'));

diff --git a/packages/wallet-ui/src/slices/modalSlice.ts b/packages/wallet-ui/src/slices/modalSlice.ts
@@ -3,13 +3,15 @@ import { createSlice } from '@reduxjs/toolkit';
 export interface modalState {
   infoModalVisible: boolean;
   minVersionModalVisible: boolean;
+  minMMVersionModalVisible: boolean;
   upgradeModalVisible: boolean;
   deployModalVisible: boolean;
 }
 
 const initialState: modalState = {
   infoModalVisible: false,
   minVersionModalVisible: false,
+  minMMVersionModalVisible: false,
   upgradeModalVisible: false,
   deployModalVisible: false,
 };
@@ -31,6 +33,9 @@ export const modalSlice = createSlice({
     setMinVersionModalVisible: (state, { payload }) => {
       state.minVersionModalVisible = payload;
     },
+    setMinMMVersionModalVisible: (state, { payload }) => {
+      state.minMMVersionModalVisible = payload;
+    },
   },
 });
 
@@ -39,6 +44,7 @@ export const {
   setMinVersionModalVisible,
   setUpgradeModalVisible,
   setDeployModalVisible,
+  setMinMMVersionModalVisible,
 } = modalSlice.actions;
 
 export default modalSlice.reducer;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { MinMetamaskVersionModalView as MinMetamaskVersionModal } from './MinMetamaskVersionModal.view';