Welcome Screen (#1655)

* add cards and styles on texts * add styles and content * align card content * fix text about Safe Multisig * add new components from SRC * update SRC * changes to welcome page * fix margins * update SRC * fix icon size * update SRC hash * Dot: replace number by check when wallet is connected * fix card width * add url to help to connect wallet. * remove underline on button as a link (Load Safe). * Fix buttons * disable connect wallet button when there is a connected wallet * fix padding in New Transaction button Co-authored-by: nicosampler <nf.dominguez.87@gmail.com> Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
2020-12-11 18:47:07 -03:00 · 2020-12-11 18:47:07 -03:00 · 1bb3ebce63
parent f782c35e31
commit 1bb3ebce63
9 changed files with 192 additions and 192 deletions
--- a/package.json
+++ b/package.json
@ -168,7 +168,7 @@
    "@gnosis.pm/safe-apps-sdk": "1.0.0-beta.4",
    "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
    "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#ff29c3c",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198",
    "@gnosis.pm/util-contracts": "2.0.6",
    "@ledgerhq/hw-transport-node-hid-singleton": "5.34.0",
    "@material-ui/core": "^4.11.0",
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@ -44,6 +44,7 @@ const IconContainer = styled.div`
  justify-content: space-evenly;
 `
 const StyledButton = styled(Button)`
+  padding: 0 18px;
  *:first-child {
    margin: 0 4px 0 0;
  }
--- a/src/components/ConnectButton/index.tsx
+++ b/src/components/ConnectButton/index.tsx
@ -63,21 +63,17 @@ export const onboardUser = async (): Promise<boolean> => {
  return walletSelected && onboard.walletCheck()
 }

-const ConnectButton = (props): React.ReactElement => (
-  <Button
-    color="primary"
-    minWidth={140}
-    onClick={async () => {
-      const walletSelected = await onboard.walletSelect()
+export const onConnectButtonClick = async () => {
+  const walletSelected = await onboard.walletSelect()

-      // perform wallet checks only if user selected a wallet
-      if (walletSelected) {
-        await onboard.walletCheck()
-      }
-    }}
-    variant="contained"
-    {...props}
-  >
+  // perform wallet checks only if user selected a wallet
+  if (walletSelected) {
+    await onboard.walletCheck()
+  }
+}
+
+const ConnectButton = (props): React.ReactElement => (
+  <Button color="primary" minWidth={140} onClick={onConnectButtonClick} variant="contained" {...props}>
    Connect
  </Button>
 )
--- a/src/components/NoSafe/index.tsx
+++ b/src/components/NoSafe/index.tsx
@ -1,22 +0,0 @@
-import * as React from 'react'
-
-import Bold from 'src/components/layout/Bold'
-import Col from 'src/components/layout/Col'
-import Paragraph from 'src/components/layout/Paragraph/index'
-import Row from 'src/components/layout/Row'
-import { CreateSafe } from 'src/routes/welcome/components/Layout'
-
-const NoSafe = ({ provider, text }) => (
-  <Row>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <Paragraph size="lg">
-        <Bold>{text}</Bold>
-      </Paragraph>
-    </Col>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <CreateSafe provider={provider} />
-    </Col>
-  </Row>
-)
-
-export default NoSafe
--- a/src/components/layout/Page/index.module.scss
+++ b/src/components/layout/Page/index.module.scss
@ -7,19 +7,6 @@
  padding: 12px 0 0 0;
 }

-@media only screen and (max-width: #{$screenLg}px) {
-  .page {
-    padding: 72px $lg 0 $lg;
-  }
-}
-
-@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) {
-  .page {
-    padding: 96px 120px 0 120px;
-  }
-}
-
-
 .center {
  align-self: center;
 }
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@ -3,9 +3,7 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'

-import NoSafe from 'src/components/NoSafe'
-import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeFeaturesEnabledSelector } from 'src/logic/safe/store/selectors'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
@ -35,14 +33,8 @@ const Container = (): React.ReactElement => {
    onClose: () => {},
  })

-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const provider = useSelector(providerNameSelector)
  const matchSafeWithAddress = useRouteMatch({ path: `${SAFELIST_ADDRESS}/:safeAddress` })

-  if (!safeAddress) {
-    return <NoSafe provider={provider} text="Safe not found" />
-  }
-
  if (!featuresEnabled) {
    return (
      <LoadingContainer>
--- a/src/routes/welcome/components/Layout.module.scss
+++ b/src/routes/welcome/components/Layout.module.scss
@ -1,25 +0,0 @@
-@import "src/theme/variables.scss";
-
-.safe {
-  justify-content: center;
-  justify-items: center;
-  margin-top: $xl;
-}
-
-.summary {
-  display: flex;
-  justify-content: space-around;
-}
-
-.safeActions {
-  display: flex;
-  justify-content: center;
-}
-
-.learnMoreLink {
-  color: $secondary;
-}
-
-.connectWallet {
-  text-align: center;
-}
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@ -1,118 +1,189 @@
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import React from 'react'
+import styled from 'styled-components'
+import {
+  Card,
+  Button,
+  Title,
+  Text,
+  Divider,
+  ButtonLink,
+  Dot,
+  Icon,
+  Link as LinkSRC,
+} from '@gnosis.pm/safe-react-components'

-import styles from './Layout.module.scss'
-
-import ConnectButton from 'src/components/ConnectButton'
-import Block from 'src/components/layout/Block'
-import Button from 'src/components/layout/Button'
-import Heading from 'src/components/layout/Heading'
-import Img from 'src/components/layout/Img'
 import Link from 'src/components/layout/Link'
+import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
-import { marginButtonImg, secondary } from 'src/theme/variables'
+import { onConnectButtonClick } from 'src/components/ConnectButton'

-import PlusIcon from '../assets/new.svg'
-import SafeIcon from '../assets/safe.svg'
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 24px 0 0 0;
+`
+const StyledCardDouble = styled(Card)`
+  display: flex;
+  padding: 0;
+`
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0 20px 0 0;
+  max-width: 27%;
+  height: 276px;
+`
+const CardsCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px;
+  width: 50%;
+`
+const StyledButton = styled(Button)`
+  margin-top: auto;
+  text-decoration: none;
+`
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 0 16px 0;

-const openIconStyle = {
-  height: '13px',
-  color: secondary,
-  marginBottom: '-2px',
+  h5 {
+    color: white;
+  }
+`
+const StyledTitle = styled(Title)`
+  margin: 0 0 0 16px;
+`
+const StyledTitleOnly = styled(Title)`
+  margin: 0 0 16px 0;
+`
+const StyledButtonLink = styled(ButtonLink)`
+  margin: 16px 0 16px -8px;
+`
+
+type Props = {
+  isOldMultisigMigration?: boolean
+  provider: any
 }

-const buttonStyle = {
-  marginLeft: marginButtonImg,
-}
-
-export const CreateSafe = ({ provider, size }: any) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minHeight={42}
-    minWidth={240}
-    size={size || 'medium'}
-    to={OPEN_ADDRESS}
-    variant="contained"
-    testId="create-new-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={PlusIcon} />
-    <div style={buttonStyle}>Create new Safe</div>
-  </Button>
-)
-
-export const LoadSafe = ({ provider, size }) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minWidth={240}
-    size={size || 'medium'}
-    to={LOAD_ADDRESS}
-    variant="outlined"
-    testId="load-existing-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={SafeIcon} />
-    <div style={buttonStyle}>Load existing Safe</div>
-  </Button>
-)
-
-const Welcome = ({ isOldMultisigMigration, provider }: any) => {
-  const headingText = isOldMultisigMigration ? (
-    <>
-      We will replicate the owner structure from your existing Gnosis MultiSig
-      <br />
-      to let you test the new interface.
-      <br />
-      As soon as you feel comfortable, start moving funds to your new Safe.
-      <br />{' '}
-    </>
-  ) : (
-    <>
-      Gnosis Safe Multisig is the most secure way to manage crypto funds
-      <br />
-      collectively. It is an improvement of the Gnosis MultiSig, which is used by more than 3000 teams
-      <br /> and stores over $1B USD worth of digital assets. Gnosis Safe Multisig features a modular
-      <br /> design, formally verified smart contracts and vastly improved user experience.{' '}
-    </>
-  )
+const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElement => {
  return (
-    <Block className={styles.safe}>
-      <Heading align="center" margin="lg" tag="h1" weight="bold">
-        Welcome to
-        <br />
-        Gnosis Safe Multisig
-      </Heading>
-      <Heading align="center" margin="xl" tag="h3">
-        {headingText}
-        <a
-          className={styles.learnMoreLink}
-          href="https://gnosis-safe.io/teams"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-          <OpenInNew style={openIconStyle} />
-        </a>
-      </Heading>
-      {provider ? (
-        <>
-          <Block className={styles.safeActions} margin="md">
-            <CreateSafe provider={provider} size="large" />
-          </Block>
-          <Block className={styles.safeActions} margin="md">
-            <LoadSafe provider={provider} size="large" />
-          </Block>
-        </>
-      ) : (
-        <Block className={styles.connectWallet} margin="md">
-          <Heading align="center" margin="md" tag="h3">
-            Get Started by Connecting a Wallet
-          </Heading>
-          <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
-        </Block>
-      )}
+    <Block>
+      {/* Title */}
+      <Title size="md" strong>
+        Welcome to Gnosis Safe Multisig.
+      </Title>
+
+      {/* Subtitle */}
+      <Title size="xs">
+        {isOldMultisigMigration ? (
+          <>
+            We will replicate the owner structure from your existing Gnosis MultiSig to let you test the new interface.
+            As soon as you feel comfortable, start moving funds to your new Safe.
+          </>
+        ) : (
+          <>
+            Gnosis Safe Multisig is the most trusted platform to manage digital assets. <br /> Here is how to get
+            started:{' '}
+          </>
+        )}
+      </Title>
+
+      <>
+        <Wrapper>
+          {/* Connect wallet */}
+          <StyledCard>
+            <TitleWrapper>
+              <Dot color="primary">
+                {!provider ? <Title size="xs">1</Title> : <Icon color="white" type="check" size="md" />}
+              </Dot>
+              <StyledTitle size="sm" strong withoutMargin>
+                Connect wallet
+              </StyledTitle>
+            </TitleWrapper>
+            <Text size="xl">
+              Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the authentication
+              factors.
+            </Text>
+            <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
+              <LinkSRC
+                size="xl"
+                href="https://help.gnosis-safe.io/en/articles/4689442-why-do-i-need-to-connect-a-wallet"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="More info about: Why do I need to connect wallet?"
+              >
+                Why do I need to connect wallet?
+              </LinkSRC>
+            </StyledButtonLink>
+            <StyledButton
+              size="lg"
+              color="primary"
+              variant="contained"
+              onClick={onConnectButtonClick}
+              disabled={provider}
+              data-testid="connect-btn"
+            >
+              <Text size="xl" color="white">
+                Connect wallet
+              </Text>
+            </StyledButton>
+          </StyledCard>
+
+          <StyledCardDouble disabled={!provider}>
+            {/* Create safe */}
+            <CardsCol>
+              <TitleWrapper>
+                <Dot color="primary">
+                  <Title size="xs">2</Title>
+                </Dot>
+                <StyledTitle size="sm" strong withoutMargin>
+                  Create Safe
+                </StyledTitle>
+              </TitleWrapper>
+              <Text size="xl">
+                Create a new Safe Multisig that is controlled by one or multiple owners. <br />
+                You will be required to pay a network fee for creating your new Safe.
+              </Text>
+              <StyledButton size="lg" color="primary" variant="contained" component={Link} to={OPEN_ADDRESS}>
+                <Text size="xl" color="white">
+                  + Create new Safe
+                </Text>
+              </StyledButton>
+            </CardsCol>
+
+            <Divider orientation="vertical" />
+
+            {/* Load safe */}
+            <CardsCol>
+              <StyledTitleOnly size="sm" strong withoutMargin>
+                Load existing Safe
+              </StyledTitleOnly>
+              <Text size="xl">
+                Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load your
+                Safe Multisig using your Safe address.
+              </Text>
+              <StyledButton
+                variant="bordered"
+                iconType="safe"
+                iconSize="sm"
+                size="lg"
+                color="secondary"
+                component={Link}
+                to={LOAD_ADDRESS}
+              >
+                <Text size="xl" color="secondary">
+                  Load existing Safe
+                </Text>
+              </StyledButton>
+            </CardsCol>
+          </StyledCardDouble>
+        </Wrapper>
+      </>
    </Block>
  )
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1574,9 +1574,9 @@
    solc "0.5.14"
    truffle "^5.1.21"

-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#ff29c3c":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198":
  version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#ff29c3ccfd391142b92edefba0f773aaf16f1799"
+  resolved "https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198"
  dependencies:
    classnames "^2.2.6"
    polished "^3.6.7"