fix: restore login popup

RabbyHub · Jan 3, 2025 · a5c3526 · a5c3526
1 parent 1c3f965
commit a5c3526
Showing 1 changed file with 50 additions and 2 deletions.
diff --git a/src/ui/views/GasAccount/components/LoginPopup.tsx b/src/ui/views/GasAccount/components/LoginPopup.tsx
@@ -85,15 +85,58 @@ export const GasACcountCurrentAddress = ({
   );
 };
 
-const GasAccountLoginContent = ({ onClose }: { onClose: () => void }) => {
+const GasAccountLoginContent = ({
+  onClose,
+  showConfirm,
+  setToConfirm,
+}: {
+  onClose: () => void;
+  showConfirm: boolean;
+  setToConfirm: (value: boolean) => void;
+}) => {
   const { t } = useTranslation();
 
   const { login } = useGasAccountMethods();
 
   const gotoLogin = () => {
+    setToConfirm(true);
+  };
+
+  const confirmAddress = () => {
     login();
   };
 
+  if (showConfirm) {
+    return (
+      <div className="w-full h-full flex flex-col justify-center items-center">
+        <div className="text-20 font-medium text-r-neutral-title1 mt-20 mb-[24px]">
+          {t('page.gasAccount.loginConfirmModal.title')}
+        </div>
+        <GasACcountCurrentAddress />
+        <div
+          className={clsx(
+            'flex items-center justify-center gap-16',
+            'w-full mt-auto px-20 py-16 border-t-[0.5px] border-solid border-rabby-neutral-line'
+          )}
+        >
+          <GasAccountBlueBorderedButton onClick={onClose} block>
+            {t('global.Cancel')}
+          </GasAccountBlueBorderedButton>
+
+          <Button
+            onClick={confirmAddress}
+            block
+            size="large"
+            type="primary"
+            className="h-[48px] text-r-neutral-title2 text-15 font-medium"
+          >
+            {t('global.Confirm')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <GasAccountWrapperBg className="w-full h-full flex flex-col justify-center items-center relative">
       <GasAccountBlueLogo className="w-[60px] h-[60px] my-24" />
@@ -126,10 +169,13 @@ const GasAccountLoginContent = ({ onClose }: { onClose: () => void }) => {
 };
 
 export const GasAccountLoginPopup = (props: PopupProps) => {
+  const [toConfirm, setToConfirm] = useState(false);
+  const currentAccount = useCurrentAccount();
+
   return (
     <Popup
       placement="bottom"
-      height={280}
+      height={toConfirm ? 240 : 280}
       isSupportDarkMode
       bodyStyle={{
         padding: 0,
@@ -139,6 +185,8 @@ export const GasAccountLoginPopup = (props: PopupProps) => {
     >
       <GasAccountLoginContent
         onClose={props.onCancel || props.onClose || noop}
+        showConfirm={toConfirm && Boolean(currentAccount)}
+        setToConfirm={setToConfirm}
       />
     </Popup>
   );