Merge pull request #401 from WalletConnect/refactor/website-link-esca…

…pe-hatch

refactor: website link escape hatch

src/components/utils/PwaModal/PwaModal.scss

@@ -1,5 +1,6 @@
 .PwaModal {
-  padding: 3em;
+  padding: 3rem;
+  padding-bottom: 2rem;
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -47,4 +48,20 @@
       display: inline-block;
     }
   }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 0.5rem;
+
+    &__title {
+      color: var(--fg-color-2);
+    }
+
+    &__link {
+      color: var(--accent-color-1);
+      text-decoration: none;
+    }
+  }
 }

src/components/utils/PwaModal/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 
 import { detect } from 'detect-browser'
+import { Link } from 'react-router-dom'
 
 import BackgroundImage from '@/assets/IntroBackground.png'
 import AndroidShareIcon from '@/components/general/Icon/AndroidShare'
 import IShareIcon from '@/components/general/Icon/IShare'
-import WalletConnectIcon from '@/components/general/Icon/WalletConnectIcon'
 import { Modal } from '@/components/general/Modal/Modal'
 import Text from '@/components/general/Text'
+import { web3InboxURLs } from '@/constants/navigation'
 import { pwaModalService } from '@/utils/store'
 
 import './PwaModal.scss'
@@ -40,7 +41,7 @@ export const getPlatformInstallText = () => {
       return 'Install App'
     case 'safari':
     case 'ios':
-      return 'Add to homescreen'
+      return 'Add to Home Screen'
     default:
       return 'Install'
   }
@@ -70,6 +71,19 @@ export const PwaModal: React.FC = () => {
           <span className="PwaModal__share-icon">{getMobilePlatformIcon()}</span>
           <Text variant="small-500"> and “{getPlatformInstallText()}”</Text>
         </div>
+        <div className="PwaModal__footer">
+          <Text className="PwaModal__footer__title" variant="small-400">
+            Learn more at&nbsp;
+          </Text>
+          <Link
+            className="PwaModal__footer__link"
+            to={web3InboxURLs.website}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <Text variant="small-400">web3inbox.com</Text>
+          </Link>
+        </div>
       </div>
     </Modal>
   )

src/pages/Login/Login.scss

@@ -28,8 +28,10 @@
     overflow-x: hidden;
     padding: 1rem 0.085em;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    gap: 4rem;
 
     @supports (height: 100dvh) {
       height: 100dvh;
@@ -38,6 +40,21 @@
     &__connect-button {
       min-width: fit-content;
     }
+
+    &__footer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &__title {
+        color: var(--fg-color-2);
+      }
+
+      &__link {
+        color: var(--accent-color-1);
+        text-decoration: none;
+      }
+    }
   }
 }
 

src/pages/Login/index.tsx

@@ -1,13 +1,15 @@
 import React, { useContext, useEffect } from 'react'
 
 import { useWeb3Modal } from '@web3modal/wagmi/react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import Button from '@/components/general/Button'
 import IntroWallet from '@/components/general/Icon/IntroWallet'
 import IntroContent from '@/components/general/IntroContent'
+import Text from '@/components/general/Text'
 import TransitionDiv from '@/components/general/TransitionDiv'
 import Sidebar from '@/components/layout/Sidebar'
+import { web3InboxURLs } from '@/constants/navigation'
 import W3iContext from '@/contexts/W3iContext/context'
 
 import './Login.scss'
@@ -55,6 +57,19 @@ const Login: React.FC = () => {
           }
           icon={<IntroWallet />}
         />
+        <div className="Main__footer">
+          <Text className="Main__footer__title" variant="small-400">
+            Learn more at
+          </Text>
+          <Link
+            className="Main__footer__link"
+            to={web3InboxURLs.website}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <Text variant="small-400">web3inbox.com</Text>
+          </Link>
+        </div>
       </main>
     </TransitionDiv>
   )