From 935a0e12bb4a0735e3b1f636e635494fd8bfa45a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladan=20Tomi=C4=87?= <tomic.vladan.mail@gmail.com>
Date: Wed, 27 Sep 2023 12:27:22 +0200
Subject: [PATCH] fix: passphrase modal info

---
 .../Disclosure/Disclosure.module.scss         |  8 +++
 src/components/Disclosure/Disclosure.tsx      | 68 +++++++++++++++++++
 .../Modals/PasswordModal/PasswordModal.tsx    | 18 ++++-
 src/utils/localStorage.ts                     | 21 ++++++
 4 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Disclosure/Disclosure.module.scss
 create mode 100644 src/components/Disclosure/Disclosure.tsx

diff --git a/src/components/Disclosure/Disclosure.module.scss b/src/components/Disclosure/Disclosure.module.scss
new file mode 100644
index 00000000..43e19ccb
--- /dev/null
+++ b/src/components/Disclosure/Disclosure.module.scss
@@ -0,0 +1,8 @@
+.arrow {
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(90deg);
+}
+
+.arrowOpen {
+  transform: rotate(270deg);
+}
diff --git a/src/components/Disclosure/Disclosure.tsx b/src/components/Disclosure/Disclosure.tsx
new file mode 100644
index 00000000..eb7c9235
--- /dev/null
+++ b/src/components/Disclosure/Disclosure.tsx
@@ -0,0 +1,68 @@
+import {
+  Disclosure as DisclosureComponent,
+  Transition,
+} from '@headlessui/react';
+
+import ArrowRightLight from '@media/UI/arrow-right-light.svg';
+import ArrowRightDark from '@media/UI/arrow-right-dark.svg';
+import React, { Fragment, useContext } from 'react';
+import ThemeContext from '@context/ThemeContext';
+
+import classes from './Disclosure.module.scss';
+
+interface DisclosureProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  buttonClassName?: string;
+  conentClassName?: string;
+}
+
+export default function Disclosure({
+  title,
+  children,
+  defaultOpen,
+  buttonClassName,
+  conentClassName,
+}: DisclosureProps) {
+  const { theme } = useContext(ThemeContext);
+
+  const getArrowClasses = (open: boolean) =>
+    `absolute right-4 top-5 ${classes.arrow} ${open ? classes.arrowOpen : ''}`;
+
+  return (
+    <DisclosureComponent defaultOpen={defaultOpen}>
+      {({ open }) => (
+        <>
+          <DisclosureComponent.Button
+            className={`flex relative w-full justify-between py-2 text-left text-sm font-medium bg-color-shade-white-night dark:bg-color-shade-dark-1-night text-color-accents-purple-black dark:text-color-accents-grey-lavendar text-base py-3 px-8 dark:text-color-shade-light-2-night bg-none text-color-shade-light-3-night rounded ${buttonClassName}`}
+          >
+            <span>{title}</span>
+            {theme === 'light' ? (
+              <ArrowRightLight className={getArrowClasses(open)} />
+            ) : (
+              <ArrowRightDark className={getArrowClasses(open)} />
+            )}
+          </DisclosureComponent.Button>
+          <div className="overflow-hidden">
+            <Transition
+              as={Fragment}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="-translate-y-full"
+              enterTo="translate-y-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-y-0"
+              leaveTo="-translate-y-full"
+            >
+              <DisclosureComponent.Panel
+                className={`px-4 pt-4 pb-2 text-sm text-gray-500 ${conentClassName}`}
+              >
+                {children}
+              </DisclosureComponent.Panel>
+            </Transition>
+          </div>
+        </>
+      )}
+    </DisclosureComponent>
+  );
+}
diff --git a/src/components/Modals/PasswordModal/PasswordModal.tsx b/src/components/Modals/PasswordModal/PasswordModal.tsx
index b7681bb9..1f0b44c9 100644
--- a/src/components/Modals/PasswordModal/PasswordModal.tsx
+++ b/src/components/Modals/PasswordModal/PasswordModal.tsx
@@ -2,12 +2,16 @@ import { FC, useState } from 'react';
 import { Modal } from '@components/Modals';
 import { Button } from '@components/Buttons';
 import FeedbackMessage from '@components/FeedbackMessage/FeedbackMessage';
-import Spinner from '@components/Spinner/Spinner';
 import AuthenticationInput from '../../Inputs/AuthenticationInput/AuthenticationInput';
 import { useForm } from 'react-hook-form';
 import { FieldError } from 'react-hook-form/dist/types/errors';
 import { MIN_PASSWORD_LENGTH } from '@utils/password';
 import { useLocales } from '@context/LocalesContext';
+import Disclosure from '@components/Disclosure/Disclosure';
+import {
+  getMetamaskPassphraseExplanation,
+  setMetamaskPassphraseExplanation,
+} from '@utils/localStorage';
 
 interface PasswordModalProps {
   showModal: boolean;
@@ -32,6 +36,7 @@ const PasswordModal: FC<PasswordModalProps> = ({
     setLoading(true);
     try {
       await handleSubmitForm(data.password);
+      setMetamaskPassphraseExplanation(false);
       closeModal();
     } catch (e) {
       setErrorMessage(intl.get('GENERIC_ERROR', { message: e.message }));
@@ -68,7 +73,16 @@ const PasswordModal: FC<PasswordModalProps> = ({
 
         <p className="text-sm mb-5">{intl.get('PASSPHRASE_EXPLANATION')}</p>
 
-        <p className="text-sm mb-5">{intl.get('PASSPHRASE_EXPLANATION_2')}</p>
+        <div className="my-5">
+          <Disclosure
+            title={intl.get('READ_MORE')}
+            defaultOpen={!getMetamaskPassphraseExplanation()}
+          >
+            <p className="text-sm mb-5">
+              {intl.get('PASSPHRASE_EXPLANATION_2')}
+            </p>
+          </Disclosure>
+        </div>
 
         <div className="text-center">
           <Button
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
index 9e70c613..aa380836 100644
--- a/src/utils/localStorage.ts
+++ b/src/utils/localStorage.ts
@@ -1,6 +1,7 @@
 export enum LocalStorageKeys {
   NETWORK = 'network',
   METAMASK_MIGRATION_DIALOG = 'metamask-migration-dialog',
+  METAMASK_PASSPHRASE_EXPLANATION_HIDE = 'metamask-migration-explanation-hide',
 }
 
 /**
@@ -17,3 +18,23 @@ export function setDefaultNetwork(network: string): void {
 export function getDefaultNetwork(): string | null {
   return localStorage.getItem(LocalStorageKeys.NETWORK);
 }
+
+/**
+ * Sets default network to local storage
+ * @param network Network id
+ */
+export function setMetamaskPassphraseExplanation(seen: boolean): void {
+  localStorage.setItem(
+    LocalStorageKeys.METAMASK_PASSPHRASE_EXPLANATION_HIDE,
+    String(seen)
+  );
+}
+
+/**
+ * Gets default network from local storage
+ */
+export function getMetamaskPassphraseExplanation(): boolean {
+  return Boolean(
+    localStorage.getItem(LocalStorageKeys.METAMASK_PASSPHRASE_EXPLANATION_HIDE)
+  );
+}