Update Unsupported Network modal

api3dao · Nov 21, 2024 · a44fcaf · a44fcaf
1 parent 6571d21
commit a44fcaf
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 28 deletions.
diff --git a/public/exclamation-triangle-fill.svg b/public/exclamation-triangle-fill.svg
diff --git a/public/unsupported-network.svg b/public/unsupported-network.svg
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -85,17 +85,19 @@ type ModalHeaderProps =
       children: string;
       tooltipText?: null;
       size?: null;
+      noMargin?: boolean;
     }
   | {
       children: string;
       tooltipText: string;
       size: 'large';
+      noMargin?: boolean;
     };
 
-export const ModalHeader = ({ children, tooltipText, size }: ModalHeaderProps) => {
+export const ModalHeader = ({ children, tooltipText, size, noMargin = false }: ModalHeaderProps) => {
   if (size === 'large') {
     return (
-      <div className={classNames(styles.modalHeader, styles.modalHeaderLarge)}>
+      <div className={classNames(styles.modalHeader, styles.modalHeaderLarge, { [styles.noMargin]: noMargin })}>
         <h5>{children}</h5>
 
         <Tooltip overlay={tooltipText}>
@@ -109,7 +111,7 @@ export const ModalHeader = ({ children, tooltipText, size }: ModalHeaderProps) =
   }
 
   return (
-    <div className={classNames(styles.modalHeader, styles.modalHeaderNormal)}>
+    <div className={classNames(styles.modalHeader, styles.modalHeaderNormal, { [styles.noMargin]: noMargin })}>
       <h5>{children}</h5>
     </div>
   );

diff --git a/src/components/sign-in/sign-in.module.scss b/src/components/sign-in/sign-in.module.scss
@@ -116,6 +116,52 @@
   }
 }
 
+.unsupportedModalContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .unsupportedNetworkIcon {
-  margin: $space-lg;
+  margin-top: 80px;
+
+  @media (min-width: $sm) {
+    margin-top: 0;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.unsupportedModalContent {
+  padding-top: 16px;
+  color: $color-dark-blue-400;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  * {
+    text-wrap: pretty;
+  }
+
+  p {
+    @include font-body-9;
+  }
+
+  span {
+    @include font-body-7;
+  }
+
+  @media (min-width: $sm) {
+    p {
+      @include font-body-6;
+    }
+
+    span {
+      @include font-body-4;
+    }
+  }
 }
diff --git a/src/components/sign-in/sign-in.tsx b/src/components/sign-in/sign-in.tsx
@@ -4,10 +4,9 @@ import { Address, useDisconnect, useEnsName } from 'wagmi';
 import { useChainData } from '../../chain-data';
 import { abbrStr } from '../../chain-data/helpers';
 import ConnectButton from '../connect-button';
-import { Modal as GenericModal } from '../../components/modal';
+import { Modal as GenericModal, ModalHeader } from '../../components/modal';
 import Dropdown, { DropdownMenu, DropdownMenuItem } from '../../components/dropdown';
 import styles from './sign-in.module.scss';
-import globalStyles from '../../styles/global-styles.module.scss';
 import { images } from '../../utils';
 import { SUPPORTED_NETWORKS, useProviderSubscriptions } from '../../contracts';
 import DisconnectIcon from './disconnect-icon';
@@ -97,26 +96,35 @@ const SignIn = ({ dark, position }: Props) => {
       )}
       {provider && <ConnectedStatus dark={dark} position={position} />}
       <GenericModal open={!isSupportedNetwork} onClose={() => {}} hideCloseButton>
-        <div className={globalStyles.textCenter}>
-          <img className={styles.unsupportedNetworkIcon} src={images.unsupportedNetwork} alt="network not supported" />
-          <h5>Unsupported chain!</h5>
+        <div className={styles.unsupportedModalContainer}>
+          <img
+            className={styles.unsupportedNetworkIcon}
+            src={images.exclamationTriangleFill}
+            alt="network not supported"
+          />
 
-          <p className={globalStyles.mtXl}>
-            Supported networks:{' '}
-            {supportedNetworks
-              .map((network) => <b>{network}</b>)
-              .map((Component, i) => (
-                <Fragment key={i}>
-                  {i !== 0 && ', '}
-                  {Component}
-                </Fragment>
-              ))}
-          </p>
-          <p className={globalStyles.mtXl}>
-            Current network: <b>{networkName}</b>
-          </p>
+          <ModalHeader noMargin>Unsupported chain!</ModalHeader>
 
-          <p className={globalStyles.mtXl}>Please connect your wallet to a supported network.</p>
+          <div className={styles.unsupportedModalContent}>
+            <div>
+              <p>
+                Supported networks:{' '}
+                {supportedNetworks
+                  .map((network) => <span>{network}</span>)
+                  .map((Component, i) => (
+                    <Fragment key={i}>
+                      {i !== 0 && ', '}
+                      {Component}
+                    </Fragment>
+                  ))}
+              </p>
+              <p>
+                Current network: <b>{networkName}</b>
+              </p>
+            </div>
+
+            <p>Please use your wallet and connect to one of the supported networks.</p>
+          </div>
         </div>
       </GenericModal>
     </>

diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts
@@ -16,6 +16,7 @@ export const images = {
   connectedDark: '/connected-dark.svg',
   disconnect: '/disconnect.svg',
   dropdown: '/dropdown.svg',
+  exclamationTriangleFill: '/exclamation-triangle-fill.svg',
   error: '/error.svg',
   externalLink: '/external-link.svg',
   hamburgerMenu: '/hamburger-menu.svg',
@@ -34,7 +35,6 @@ export const images = {
   votedAgainst: '/voted-against.svg',
   votedFor: '/voted-for.svg',
   warning: '/warning.svg',
-  unsupportedNetwork: '/unsupported-network.svg',
 };
 
 // We only want to 'preload' certain images that will definitely be displayed immediately.