Merge pull request #270 from near/SQAC-128-migrate-to-custom-alerts

feat: Replaced alert with custom modal
near · Apr 22, 2022 · 11fe784 · 11fe784
2 parents e9c6562 + 748a7c2
commit 11fe784
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 7 deletions.
diff --git a/packages/core/src/lib/modal/components/AlertModal.tsx b/packages/core/src/lib/modal/components/AlertModal.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+interface AlertModalProps {
+  message: string;
+  setAlertMessage: (message: string | null) => void;
+}
+
+export const AlertModal: React.FC<AlertModalProps> = ({
+  message,
+  setAlertMessage,
+}) => {
+  const close = () => {
+    setAlertMessage(null);
+  };
+
+  return (
+    <div className="Modal-alert">
+      <div className="Modal-alert-window">
+        <div className="Modal-alert-close">
+          <button onClick={close}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              fill="#A7A7A7"
+            >
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
+          </button>
+        </div>
+        <div className="Modal-alert-message">{message}</div>
+        <button onClick={close}>OK</button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/lib/modal/components/Modal.styles.ts b/packages/core/src/lib/modal/components/Modal.styles.ts
@@ -1,7 +1,7 @@
 export default `
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
 
-.Modal {
+#near-wallet-selector-modal {
   --backdrop-bg: #26262630;
   --black: #262626;
   --black-rgb: 38, 38, 38;
@@ -272,6 +272,43 @@ export default `
   align-items: center;
 }
 
+.Modal-alert {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+.Modal-alert-window {
+  width: 80%;
+  max-width: 500px;
+  margin: 0 auto;
+  margin-top: 2em;
+  background: white;
+  border-radius: 5px;
+  padding: 1.5em;
+  box-shadow: 0 2px 10px 0 var(--backdrop-bg);
+}
+
+.Modal-alert-close {
+  text-align: right;
+}
+
+.Modal-alert-close button {
+  border: 0;
+  cursor: pointer;
+  height: 24px;
+  padding: 0px;
+  background-color: transparent;
+}
+
+.Modal-alert-message {
+  margin-bottom: 1.5em;
+  font-size: 16px;
+}
+
 .Modal-dark-theme .Modal-content {
   background-color: var(--dark-gray);
   color: var(--white);
@@ -315,6 +352,11 @@ export default `
     border-color: var(--black);
 }
 
+.Modal-dark-theme .Modal-alert-window {
+  background-color: var(--dark-gray);
+  color: white;
+}
+
 @media (prefers-color-scheme: dark) {
   .Modal .Modal-content {
     background-color: var(--dark-gray);
@@ -359,6 +401,11 @@ export default `
       background-color: rgba(var(--black-rgb), 0.8);
       border-color: var(--black);
   }
+
+  .Modal-alert-window {
+    background-color: var(--dark-gray);
+    color: white;
+  }
 }
 
 @keyframes outAnimation {

diff --git a/packages/core/src/lib/modal/components/Modal.tsx b/packages/core/src/lib/modal/components/Modal.tsx
@@ -7,6 +7,7 @@ import { LedgerDerivationPath } from "./LedgerDerivationPath";
 import { WalletNotInstalled } from "./WalletNotInstalled";
 import { WalletNetworkChanged } from "./WalletNetworkChanged";
 import { WalletOptions } from "./WalletOptions";
+import { AlertModal } from "./AlertModal";
 
 interface ModalProps {
   // TODO: Remove omit once modal is a separate package.
@@ -45,6 +46,7 @@ export const Modal: React.FC<ModalProps> = ({
   const [notInstalledWallet, setNotInstalledWallet] = useState<Wallet | null>(
     null
   );
+  const [alertMessage, setAlertMessage] = useState<string | null>(null);
 
   useEffect(() => {
     setRouteName("WalletOptions");
@@ -98,12 +100,12 @@ export const Modal: React.FC<ModalProps> = ({
   }
 
   return (
-    <div>
+    <div className={getThemeClass(options?.theme)}>
       <style>{styles}</style>
-      <div
-        className={`Modal ${getThemeClass(options?.theme)}`}
-        onClick={handleDismissOutsideClick}
-      >
+      {alertMessage !== null && (
+        <AlertModal message={alertMessage} setAlertMessage={setAlertMessage} />
+      )}
+      <div className="Modal" onClick={handleDismissOutsideClick}>
         <div className="Modal-content">
           <div className="Modal-header">
             <h2>Connect Wallet</h2>
@@ -129,6 +131,7 @@ export const Modal: React.FC<ModalProps> = ({
               setRouteName={setRouteName}
               setNotInstalledWallet={setNotInstalledWallet}
               hide={hide}
+              setAlertMessage={setAlertMessage}
             />
           )}
           {routeName === "LedgerDerivationPath" && (

diff --git a/packages/core/src/lib/modal/components/WalletOptions.tsx b/packages/core/src/lib/modal/components/WalletOptions.tsx
@@ -15,6 +15,7 @@ interface WalletOptionsProps {
   setRouteName: (routeName: ModalRouteName) => void;
   setNotInstalledWallet: (wallet: Wallet | null) => void;
   hide: () => void;
+  setAlertMessage: (message: string | null) => void;
 }
 
 export const WalletOptions: React.FC<WalletOptionsProps> = ({
@@ -25,6 +26,7 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
   setRouteName,
   setNotInstalledWallet,
   hide,
+  setAlertMessage,
 }) => {
   const [disabled, setDisabled] = useState(false);
   const [wallets, setWallets] = useState(selector.store.getState().wallets);
@@ -58,7 +60,7 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
       logger.log(`Failed to select ${wallet.name}`);
       logger.error(err);
 
-      alert(`Failed to sign in with ${wallet.name}: ${err.message}`);
+      setAlertMessage(`Failed to sign in with ${wallet.name}: ${err.message}`);
     });
 
     if (response) {