status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Safe creation process improvements (#1935) 

* add new icons and fix styles
* delete part of legal text
* adjustments on columns and container width

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
Co-authored-by: nicosampler <nf.dominguez.87@gmail.com>
Co-authored-by: nicolas <nicosampler@users.noreply.github.com>
Co-authored-by: Fernando <fernando.greco@gmail.com>
This commit is contained in:
Agustín Longoni 2021-03-16 16:44:46 -03:00 committed by GitHub
parent b26b681426
commit 78191e979d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 138 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Stepper/Controls/index.tsx
View File

@ -3,17 +3,18 @@ import * as React from 'react'
import Button from 'src/components/layout/Button'
import Col from 'src/components/layout/Col'
import Row from 'src/components/layout/Row'
import { boldFont, sm } from 'src/theme/variables'
import { boldFont, sm, lg, secondary } from 'src/theme/variables'
const controlStyle = {
backgroundColor: 'white',
padding: sm,
padding: lg,
borderRadius: sm,
}
const firstButtonStyle = {
marginRight: sm,
fontWeight: boldFont,
color: secondary,
}
const secondButtonStyle = {
@ -50,8 +51,8 @@ const Controls = ({
}
return (
<Row align="end" grow style={controlStyle}>
<Col end="xs" xs={12}>
<Row align="center" grow style={controlStyle}>
<Col center="xs" xs={12}>
<Button onClick={onPrevious} size="small" style={firstButtonStyle} type="button">
{back}
</Button>

2
src/components/Stepper/OpenPaper/index.tsx
View File

@ -7,7 +7,7 @@ import { lg } from 'src/theme/variables'
const useStyles = makeStyles({
root: {
margin: '10px',
margin: '10px 0 10px 10px',
maxWidth: '770px',
boxShadow: '0 0 10px 0 rgba(33,48,77,0.10)',
},

2
src/routes/open/components/ReviewInformation/index.tsx
View File

@ -128,7 +128,7 @@ const ReviewComponent = ({ values, form }: ReviewComponentProps): ReactElement =
</Col>
</Row>
<Row align="center" className={classes.info}>
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="lg">
You&apos;re about to create a new Safe and will have to confirm a transaction with your currently connected
wallet. The creation will cost approximately {gasCostFormatted} {nativeCoin.name}. The exact amount will be
determined by your wallet.

13
src/routes/open/components/SafeNameForm/index.tsx
View File

@ -1,5 +1,6 @@
import { createStyles, makeStyles } from '@material-ui/core/styles'
import * as React from 'react'
import styled from 'styled-components'
import OpenPaper from 'src/components/Stepper/OpenPaper'
import Field from 'src/components/forms/Field'
@ -28,6 +29,12 @@ const styles = createStyles({
},
})
const StyledField = styled(Field)`
&.MuiTextField-root {
width: 460px;
}
`
const useSafeNameStyles = makeStyles(styles)
const SafeNameForm = ({ safeName }: { safeName: string }): React.ReactElement => {
@ -36,13 +43,13 @@ const SafeNameForm = ({ safeName }: { safeName: string }): React.ReactElement =>
return (
<>
<Block margin="lg">
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="lg">
You are about to create a new Gnosis Safe wallet with one or more owners. First, let&apos;s give your new
wallet a name. This name is only stored locally and will never be shared with Gnosis or any third parties.
</Paragraph>
</Block>
<Block className={classes.root} margin="lg">
<Field
<StyledField
component={TextField}
defaultValue={safeName}
name={FIELD_NAME}
@ -54,7 +61,7 @@ const SafeNameForm = ({ safeName }: { safeName: string }): React.ReactElement =>
/>
</Block>
<Block margin="lg">
<Paragraph className={classes.links} color="primary" noMargin size="md">
<Paragraph className={classes.links} color="primary" noMargin size="lg">
By continuing you consent to the{' '}
<a href="https://gnosis-safe.io/terms" rel="noopener noreferrer" target="_blank">
terms of use

23
src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
View File

@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/core/styles'
import CheckCircle from '@material-ui/icons/CheckCircle'
import * as React from 'react'
import { styles } from './style'
import styled from 'styled-components'
import QRIcon from 'src/assets/icons/qrcode.svg'
import trash from 'src/assets/icons/trash.svg'
@ -45,6 +46,10 @@ const { useState } = React
export const ADD_OWNER_BUTTON = '+ Add another owner'
const StyledAddressInput = styled(AddressInput)`
width: 460px;
`
/**
* Validates the whole OwnersForm, specially checks for non-repeated addresses
*
@ -152,7 +157,7 @@ const SafeOwnersForm = (props): React.ReactElement => {
return (
<>
<Block className={classes.title}>
<Paragraph color="primary" noMargin size="md" data-testid="create-safe-step-two">
<Paragraph color="primary" noMargin size="lg" data-testid="create-safe-step-two">
Your Safe will have one or more owners. We have prefilled the first owner with your connected wallet details,
but you are free to change this to a different owner.
<br />
@ -167,7 +172,7 @@ const SafeOwnersForm = (props): React.ReactElement => {
rel="noreferrer"
title="Learn about which Safe setup to use"
>
<Text size="lg" as="span" color="primary">
<Text size="xl" as="span" color="primary">
Learn about which Safe setup to use
</Text>
<Icon size="sm" type="externalLink" color="primary" />
@ -176,8 +181,8 @@ const SafeOwnersForm = (props): React.ReactElement => {
</Block>
<Hairline />
<Row className={classes.header}>
<Col xs={4}>NAME</Col>
<Col xs={8}>ADDRESS</Col>
<Col xs={3}>NAME</Col>
<Col xs={7}>ADDRESS</Col>
</Row>
<Hairline />
<Block margin="md" padding="md">
@ -187,7 +192,7 @@ const SafeOwnersForm = (props): React.ReactElement => {
return (
<Row className={classes.owner} key={`owner${index}`} data-testid={`create-safe-owner-row`}>
<Col className={classes.ownerName} xs={4}>
<Col className={classes.ownerName} xs={3}>
<Field
className={classes.name}
component={TextField}
@ -199,8 +204,8 @@ const SafeOwnersForm = (props): React.ReactElement => {
testId={`create-safe-owner-name-field-${index}`}
/>
</Col>
<Col className={classes.ownerAddress} xs={6}>
<AddressInput
<Col className={classes.ownerAddress} xs={7}>
<StyledAddressInput
fieldMutator={(newOwnerAddress) => {
const newOwnerName = getNameFromAddressBook(addressBook, newOwnerAddress, {
filterOnlyValidName: true,
@ -246,7 +251,7 @@ const SafeOwnersForm = (props): React.ReactElement => {
</Block>
<Row align="center" className={classes.add} grow margin="xl">
<Button color="secondary" data-testid="add-owner-btn" onClick={onAddOwner}>
<Paragraph noMargin size="md">
<Paragraph noMargin size="lg">
{ADD_OWNER_BUTTON}
</Paragraph>
</Button>
@ -256,7 +261,7 @@ const SafeOwnersForm = (props): React.ReactElement => {
Any transaction requires the confirmation of:
</Paragraph>
<Row align="center" className={classes.ownersAmount} margin="xl">
<Col className={classes.ownersAmountItem} xs={2}>
<Col className={classes.ownersAmountItem} xs={1}>
<Field
component={SelectField}
data-testid="threshold-select-input"

BIN
src/routes/opening/assets/creation-process.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

18
src/routes/opening/assets/loader-dots.svg
View File

@ -1,18 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="91px" height="91px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="84" cy="50" r="0.271746" fill="#d4d5d3">
<animate attributeName="r" repeatCount="indefinite" dur="1.7857142857142856s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="fill" repeatCount="indefinite" dur="7.142857142857142s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#d4d5d3;#d4d5d3;#d4d5d3;#d4d5d3;#d4d5d3" begin="0s"></animate>
</circle><circle cx="49.076" cy="50" r="10" fill="#d4d5d3">
<animate attributeName="r" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
</circle><circle cx="83.076" cy="50" r="10" fill="#d4d5d3">
<animate attributeName="r" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.7857142857142856s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.7857142857142856s"></animate>
</circle><circle cx="16" cy="50" r="0" fill="#d4d5d3">
<animate attributeName="r" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-3.571428571428571s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-3.571428571428571s"></animate>
</circle><circle cx="16" cy="50" r="9.72825" fill="#d4d5d3">
<animate attributeName="r" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-5.357142857142857s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="7.142857142857142s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-5.357142857142857s"></animate>
</circle>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

16
src/routes/opening/assets/safe-created.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="114" height="92" viewBox="0 0 114 92">
<g fill="none" fill-rule="evenodd">
<g>
<g>
<g>
<path fill="#F7F5F5" d="M59.004 0c25.405 0 46 20.595 46 46 0 25.406-20.595 46-46 46s-46-20.594-46-46c0-25.405 20.595-46 46-46" transform="translate(-796 -178) translate(796 178)"/>
<path fill="#008C73" d="M26 30.002H16v-10c0-1.105-.896-2-2-2s-2 .895-2 2v10H2c-1.104 0-2 .896-2 2s.896 2 2 2h10v10c0 1.104.896 2 2 2s2-.896 2-2v-10h10c1.104 0 2-.896 2-2s-.896-2-2-2" transform="translate(-796 -178) translate(796 178)"/>
<path fill="#B2B5B2" d="M109.991 66.798c0 1.22-.992 2.211-2.211 2.211H41.202c-1.218 0-2.211-.992-2.211-2.21v-48.58c0-1.218.993-2.21 2.211-2.21h66.578c1.219 0 2.211.992 2.211 2.21V66.8zm-14 9.2h8V73.01h-8V76zm-50.996.006h8V73.01h-8v2.995zm62.785-63.996H41.202c-3.424 0-6.211 2.787-6.211 6.211V66.8c0 3.353 2.676 6.09 6.004 6.2v5.005c0 1.105.896 2 2 2h12c1.105 0 2-.895 2-2V73.01h34.996V78c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2v-5c3.327-.114 6-2.847 6-6.2v-48.58c0-3.424-2.786-6.21-6.211-6.21z" transform="translate(-796 -178) translate(796 178)"/>
<path fill="#008C73" d="M84.995 26.006c8.822 0 16 7.178 16 16 0 8.823-7.178 16-16 16s-16-7.177-16-16c0-8.822 7.178-16 16-16zm1.793 4.133c-.001.948-.738 1.732-1.675 1.808l-.15.006c-.956 0-1.74-.736-1.816-1.673l-.006-.131c-1.954.304-3.753 1.081-5.277 2.21l-.032-.03c.54.477.743 1.224.53 1.902l-.053.144c-.273.667-.912 1.104-1.594 1.125l-.146-.001c-.435.007-.855-.143-1.184-.42l-.111-.102c-1.093 1.507-1.844 3.278-2.14 5.197h-.016c.957 0 1.741.736 1.817 1.673l.006.15c0 .956-.737 1.74-1.673 1.817l-.136.006c.296 1.947 1.062 3.742 2.178 5.265.682-.59 1.679-.591 2.357-.029l.124.112c.636.633.712 1.627.179 2.371l-.095.121c1.524 1.127 3.322 1.902 5.275 2.204l.003.054c-.056-.635.223-1.248.727-1.624l.131-.089c.587-.362 1.329-.362 1.916 0 .542.335.866.925.867 1.52l-.006.147c1.962-.295 3.77-1.067 5.302-2.193l-.024-.023c-.658-.688-.672-1.755-.058-2.458l.115-.12c.687-.658 1.754-.671 2.45-.065l.093.09c1.12-1.522 1.89-3.317 2.19-5.264l.036.001c-1.007 0-1.823-.816-1.823-1.823 0-.956.737-1.74 1.674-1.817l.116-.005c-.298-1.96-1.072-3.766-2.2-5.295l-.012.012c-.299.292-.686.472-1.093.515l-.176.01c-.49.01-.963-.182-1.304-.528-.342-.34-.534-.803-.534-1.285 0-.429.152-.841.425-1.166l.12-.129c-1.531-1.124-3.338-1.895-5.297-2.19z" transform="translate(-796 -178) translate(796 178)"/>
<path fill="#008C73" d="M84.995 39.006c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3m0 10c-3.86 0-7-3.141-7-7 0-3.86 3.14-7 7-7 3.859 0 7 3.14 7 7 0 3.859-3.141 7-7 7" transform="translate(-796 -178) translate(796 178)"/>
<path fill="#B2B5B2" d="M46.996 61.002c-1.104 0-2-.896-2-2v-33c0-1.105.896-2 2-2s2 .895 2 2v33c0 1.104-.896 2-2 2M55 61.002c-1.104 0-2-.896-2-2v-33c0-1.105.896-2 2-2s2 .895 2 2v33c0 1.104-.896 2-2 2" transform="translate(-796 -178) translate(796 178)"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

4
src/routes/opening/assets/success.svg
View File

@ -1,4 +0,0 @@
<svg width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.25 0C53.0018 0 61.5571 2.59522 68.834 7.45747C76.1109 12.3197 81.7825 19.2306 85.1317 27.3163C88.4808 35.4019 89.3571 44.2991 87.6497 52.8827C85.9424 61.4664 81.728 69.351 75.5395 75.5395C69.351 81.728 61.4664 85.9424 52.8827 87.6497C44.2991 89.3571 35.4019 88.4808 27.3163 85.1317C19.2306 81.7825 12.3197 76.1109 7.45747 68.834C2.59522 61.5571 0 53.0018 0 44.25C0.0164019 32.5192 4.68371 21.2736 12.9786 12.9786C21.2736 4.68371 32.5192 0.0164019 44.25 0ZM44.25 4.445C36.3785 4.445 28.6838 6.7791 22.1388 11.1522C15.5939 15.5252 10.4926 21.7408 7.48007 29.013C4.46756 36.2853 3.67909 44.2874 5.21438 52.0078C6.74967 59.7281 10.5398 66.8198 16.1054 72.3861C21.671 77.9524 28.7622 81.7434 36.4823 83.2796C44.2025 84.8159 52.2048 84.0284 59.4773 81.0168C66.7499 78.0052 72.9662 72.9048 77.3401 66.3603C81.7139 59.8159 84.049 52.1215 84.05 44.25C84.0323 33.6998 79.8334 23.5868 72.3733 16.1267C64.9132 8.66661 54.8002 4.46772 44.25 4.45V4.445Z" fill="#D4D5D3"/>
<path d="M66.077 31.405L69.3 34.465L40.146 65.174L19.2 43.111L22.423 40.05L40.146 58.718L66.077 31.405Z" fill="#008C73"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

80
src/routes/opening/components/Footer.tsx
View File

@ -1,19 +1,36 @@
import React, { SyntheticEvent } from 'react'
import React, { ReactElement, SyntheticEvent } from 'react'
import styled from 'styled-components'
import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
import Button from 'src/components/layout/Button'
import { connected } from 'src/theme/variables'
import { getExplorerInfo } from 'src/config'
import Hairline from 'src/components/layout/Hairline'
const ExplorerLink = styled.a`
color: ${connected};
const StyledText = styled(Text)`
display: inline-flex;
a {
margin-left: 4px;
}
svg {
position: relative;
top: 4px;
left: 4px;
}
`
const ButtonWithMargin = styled(Button)`
margin-right: 16px;
`
const FooterContainer = styled.div`
width: 100%;
height: 76px;
export const GenericFooter = ({ safeCreationTxHash }: { safeCreationTxHash: string }) => {
button {
margin-top: 24px;
}
`
export const GenericFooter = ({ safeCreationTxHash }: { safeCreationTxHash: string }): ReactElement => {
const explorerInfo = getExplorerInfo(safeCreationTxHash)
const { url, alt } = explorerInfo()
const match = /(http|https):\/\/(\w+\.\w+)\/.*/i.exec(url)
@ -21,20 +38,23 @@ export const GenericFooter = ({ safeCreationTxHash }: { safeCreationTxHash: stri
return (
<span>
<p>This process should take a couple of minutes.</p>
<p>
<Text size="xl">This process should take a couple of minutes.</Text>
<StyledText size="xl">
Follow the progress on{' '}
<ExplorerLink
aria-label={alt}
<Link
href={url}
rel="noopener noreferrer"
aria-label={alt}
target="_blank"
rel="noopener noreferrer"
data-testid="safe-create-explorer-link"
title="More info about this in Etherscan"
>
{explorerDomain}
</ExplorerLink>
.
</p>
<Text size="xl" as="span" color="primary">
{explorerDomain}
</Text>
<Icon size="sm" type="externalLink" color="primary" />
</Link>
</StyledText>
</span>
)
}
@ -45,16 +65,19 @@ export const ContinueFooter = ({
}: {
continueButtonDisabled: boolean
onContinue: (event: SyntheticEvent) => void
}) => (
<Button
color="primary"
disabled={continueButtonDisabled}
onClick={onContinue}
variant="contained"
data-testid="continue-btn"
>
Continue
</Button>
}): ReactElement => (
<FooterContainer>
<Hairline />
<Button
color="primary"
disabled={continueButtonDisabled}
onClick={onContinue}
variant="contained"
data-testid="continue-btn"
>
Get started
</Button>
</FooterContainer>
)
export const ErrorFooter = ({
@ -63,13 +86,14 @@ export const ErrorFooter = ({
}: {
onCancel: (event: SyntheticEvent) => void
onRetry: (event: SyntheticEvent) => void
}) => (
<>
}): ReactElement => (
<FooterContainer>
<Hairline />
<ButtonWithMargin onClick={onCancel} variant="contained">
Cancel
</ButtonWithMargin>
<Button color="primary" onClick={onRetry} variant="contained">
Retry
</Button>
</>
</FooterContainer>
)

69
src/routes/opening/index.tsx
View File

@ -12,20 +12,19 @@ import Paragraph from 'src/components/layout/Paragraph'
import { instantiateSafeContracts } from 'src/logic/contracts/safeContracts'
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
import { getWeb3 } from 'src/logic/wallets/getWeb3'
import { background, connected } from 'src/theme/variables'
import { background, connected, fontColor } from 'src/theme/variables'
import { providerNameSelector } from 'src/logic/wallets/store/selectors'
import { useSelector } from 'react-redux'
import LoaderDotsSvg from './assets/loader-dots.svg'
import SuccessSvg from './assets/success.svg'
import SuccessSvg from './assets/safe-created.svg'
import VaultErrorSvg from './assets/vault-error.svg'
import VaultSvg from './assets/vault.svg'
import VaultLoading from './assets/creation-process.gif'
import { PromiEvent, TransactionReceipt } from 'web3-core'
const Wrapper = styled.div`
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 62px auto;
grid-template-rows: 43px auto;
margin-bottom: 30px;
`
@ -44,29 +43,31 @@ const Body = styled.div`
grid-column: 2;
grid-row: 2;
text-align: center;
background-color: #ffffff;
background-color: ${({ theme }) => theme.colors.white};
border-radius: 5px;
min-width: 700px;
padding-top: 50px;
padding-top: 70px;
box-shadow: 0 0 10px 0 rgba(33, 48, 77, 0.1);
display: grid;
grid-template-rows: 100px 50px 70px 60px 100px;
grid-template-rows: 100px 50px 110px 1fr;
`
const CardTitle = styled.div`
font-size: 20px;
padding-top: 10px;
`
interface FullParagraphProps {
inversecolors: string
stepIndex: number
}
const FullParagraph = styled(Paragraph)<FullParagraphProps>`
background-color: ${(p) => (p.inversecolors ? connected : background)};
color: ${(p) => (p.inversecolors ? background : connected)};
padding: 24px;
font-size: 16px;
background-color: ${({ stepIndex }) => (stepIndex === 0 ? connected : background)};
color: ${({ theme, stepIndex }) => (stepIndex === 0 ? theme.colors.white : fontColor)};
padding: 28px;
font-size: 20px;
margin-bottom: 16px;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
`
@ -77,17 +78,12 @@ const BodyImage = styled.div`
const BodyDescription = styled.div`
grid-row: 2;
`
const BodyLoader = styled.div`
grid-row: 3;
display: flex;
justify-content: center;
align-items: center;
`
const BodyInstruction = styled.div`
grid-row: 4;
grid-row: 3;
margin: 27px 0;
`
const BodyFooter = styled.div`
grid-row: 5;
grid-row: 4;
padding: 10px 0;
display: flex;
@ -154,7 +150,7 @@ export const SafeDeployment = ({
}
if (stepIndex <= 4) {
return VaultSvg
return VaultLoading
}
return SuccessSvg
@ -326,20 +322,26 @@ export const SafeDeployment = ({
</Nav>
<Body>
<BodyImage>
<Img alt="Vault" height={75} src={getImage()} />
<Img alt="Vault" height={92} src={getImage()} />
</BodyImage>
<BodyDescription>
<CardTitle>{steps[stepIndex].description || steps[stepIndex].label}</CardTitle>
</BodyDescription>
<BodyLoader>{!error && stepIndex <= 4 && <Img alt="Loader dots" src={LoaderDotsSvg} />}</BodyLoader>
<BodyInstruction>
<FullParagraph color="primary" inversecolors={confirmationStep.toString()} noMargin size="md">
{error ? 'You can Cancel or Retry the Safe creation process.' : steps[stepIndex].instruction}
</FullParagraph>
</BodyInstruction>
{steps[stepIndex].instruction && (
<BodyInstruction>
<FullParagraph
color="primary"
inversecolors={confirmationStep.toString()}
noMargin
size="md"
stepIndex={stepIndex}
>
{error ? 'You can Cancel or Retry the Safe creation process.' : steps[stepIndex].instruction}
</FullParagraph>
</BodyInstruction>
)}
<BodyFooter>
{FooterComponent ? (
@ -354,9 +356,12 @@ export const SafeDeployment = ({
) : null}
</BodyFooter>
</Body>
<BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
Back
</BackButton>
{stepIndex !== 0 && (
<BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
Back
</BackButton>
)}
</Wrapper>
)
}

4
src/routes/opening/steps.ts
View File

@ -1,6 +1,6 @@
import { ContinueFooter, GenericFooter } from './components/Footer'
export const isConfirmationStep = (stepIndex?: number) => stepIndex === 0
export const isConfirmationStep = (stepIndex?: number): boolean => stepIndex === 0
export const steps = [
{
@ -42,7 +42,7 @@ export const steps = [
id: '6',
label: 'Success',
description: 'Your Safe was created successfully',
instruction: 'Click below to get started',
instruction: undefined,
footerComponent: ContinueFooter,
},
]