New landing page

packages/ui/src/components/ConnectCreateOrWatch.tsx

@@ -1,73 +1,30 @@
 import { styled } from '@mui/material'
 import { useAccounts } from '../contexts/AccountsContext'
-import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'
-import { Button } from './library'
-import { WATCH_ACCOUNT_ANCHOR } from '../pages/Settings/Settings'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
 import { useNetwork } from '../contexts/NetworkContext'
+import { ConnectButtons } from './LandingComponents/ConnectButtons'
+import { Landing } from './LandingComponents/Landing'
 
 export const ConnectOrWatch = () => {
-  const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
+  const { isAllowedToConnectToExtension } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
-  const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
+
   const { selectedNetwork } = useNetwork()
 
   return (
-    <WrapperStyled>
+    <>
       {isAllowedToConnectToExtension || watchedAddresses.length !== 0 ? (
-        <div data-cy="label-no-multisig-found">
-          No multisig found for your accounts or watched accounts on{' '}
-          <NetworkNameStyled>{selectedNetwork}</NetworkNameStyled>.
-        </div>
-      ) : (
-        <>
-          <h1 data-cy="header-multix-introduction">
-            Multix is an interface to easily manage complex multisigs.
-          </h1>
-          <div data-cy="label-interaction-prompt">
-            Connect a wallet to interact with Multix or watch an account.
+        <WrapperStyled>
+          <div data-cy="label-no-multisig-found">
+            No multisig found for your accounts or watched accounts on{' '}
+            <NetworkNameStyled>{selectedNetwork}</NetworkNameStyled>.
+            <ConnectButtons />
           </div>
-        </>
+        </WrapperStyled>
+      ) : (
+        <Landing />
       )}
-      <ButtonWrapperStyled>
-        {isAllowedToConnectToExtension ? (
-          <Button
-            variant="primary"
-            onClick={() => {
-              navigate({
-                pathname: '/create',
-                search: createSearchParams(searchParams).toString()
-              })
-            }}
-            data-cy="button-create-one"
-          >
-            Create one
-          </Button>
-        ) : (
-          <Button
-            variant="primary"
-            onClick={allowConnectionToExtension}
-            data-cy="button-connect-wallet"
-          >
-            Connect Wallet
-          </Button>
-        )}
-        or
-        <Button
-          onClick={() => {
-            navigate({
-              pathname: '/settings',
-              search: createSearchParams(searchParams).toString(),
-              hash: WATCH_ACCOUNT_ANCHOR
-            })
-          }}
-          data-cy="button-watch-account"
-        >
-          Watch account
-        </Button>
-      </ButtonWrapperStyled>
-    </WrapperStyled>
+    </>
   )
 }
 
@@ -82,17 +39,6 @@ const WrapperStyled = styled('div')`
   }
 `
 
-const ButtonWrapperStyled = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 0;
-
-  button {
-    margin: 0 0.5rem;
-  }
-`
-
 const NetworkNameStyled = styled('span')`
   text-transform: capitalize;
 `

packages/ui/src/components/LandingComponents/ConnectButtons.tsx

@@ -0,0 +1,62 @@
+import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'
+import { Button } from '../library'
+import { WATCH_ACCOUNT_ANCHOR } from '../../pages/Settings/Settings'
+import { useAccounts } from '../../contexts/AccountsContext'
+import { styled } from '@mui/material'
+
+export const ConnectButtons = () => {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
+
+  return (
+    <ButtonWrapperStyled>
+      {isAllowedToConnectToExtension ? (
+        <Button
+          variant="primary"
+          onClick={() => {
+            navigate({
+              pathname: '/create',
+              search: createSearchParams(searchParams).toString()
+            })
+          }}
+          data-cy="button-create-one"
+        >
+          Create one
+        </Button>
+      ) : (
+        <Button
+          variant="primary"
+          onClick={allowConnectionToExtension}
+          data-cy="button-connect-wallet"
+        >
+          Connect Wallet
+        </Button>
+      )}
+      or
+      <Button
+        onClick={() => {
+          navigate({
+            pathname: '/settings',
+            search: createSearchParams(searchParams).toString(),
+            hash: WATCH_ACCOUNT_ANCHOR
+          })
+        }}
+        data-cy="button-watch-account"
+      >
+        Watch account
+      </Button>
+    </ButtonWrapperStyled>
+  )
+}
+
+const ButtonWrapperStyled = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+
+  button {
+    margin: 0 0.5rem;
+  }
+`

packages/ui/src/components/LandingComponents/Hero.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+export const Hero = ({ children }: Props) => {
+  return <StyledHero>{children}</StyledHero>
+}
+
+const StyledHero = styled('div')`
+  background-color: ${({ theme }) => theme.palette.primary.main};
+  color: white;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
+  display: flex;
+  border-radius: 1rem;
+  flex-direction: column;
+  justify-items: center;
+  padding: 2rem;
+`

packages/ui/src/components/LandingComponents/Landing.tsx

@@ -0,0 +1,30 @@
+import { styled } from '@mui/material'
+import { ConnectButtons } from './ConnectButtons'
+import { Hero } from './Hero'
+
+export const Landing = () => {
+  return (
+    <WrapperStyled>
+      <Hero>
+        <h1 data-cy="header-multix-introduction">
+          Multix is an interface to easily manage complex multisigs.
+        </h1>
+        <div data-cy="label-interaction-prompt">
+          Connect a wallet to interact with Multix or watch an account.
+        </div>
+        <ConnectButtons />
+      </Hero>
+    </WrapperStyled>
+  )
+}
+
+const WrapperStyled = styled('div')`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  h1 {
+    text-align: center;
+  }
+`

packages/ui/src/pages/index.ts

@@ -1,5 +1,4 @@
 export { default as Creation } from './Creation'
 export { default as Home } from './Home/Home'
-export { default as About } from './About'
 export { default as Overview } from './Overview'
 export { default as Settings } from './Settings/Settings'