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

(Feature) Safe Deployment #605 #111 #395 #606 #396 (#659) 

* Stepper component

* proxyfactory web3 contract

* add styles to body steps

* Steps info

* Open component: moving from class to function

* remove opening route and rendering it in Open component instead

* recover safe creation from txHash in localStorage

* remove commented code

* restore commented code

* creatign TX fix

* fix createSafe then function

* fixing stepper

* remove unused code

* remove opening route and finishin both variants of create

* add loader dots svg

* add error state design and loader dots

* fix error section

* add description to steps

* adding etherscan link

* taking values from variables

* fix heigh in body content

* add success svg

* add check image on last step

* fix margin and heigt to body rows

* remove commented code

* remove commented code

* fix for #396

* Fix empty_code

* set error if getReceipt fails

* fixes

* Fix: remove txHash from pendingInfo on retry

Co-authored-by: Mikhail Mikheev <mmvsha73@gmail.com>
Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>
Co-authored-by: Fernando <fernando.greco@gmail.com>
This commit is contained in:
nicolas 2020-03-26 10:53:20 -03:00 committed by GitHub
parent c19b29854f
commit 18a6525bc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 705 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components-v2/dataDisplay/IconText/index.js
View File

@ -9,16 +9,16 @@ const Wrapper = styled.div`
const Icon = styled.img`
max-width: 15px;
max-height: 15px;
margin-right: 5px;
`
const Text = styled.span`
margin-left: 5px;
height: 17px;
`
const IconText = ({ iconUrl, text }: { iconUrl: string, text: string }) => (
const IconText = ({ iconUrl, text }: { iconUrl: string, text?: string }) => (
<Wrapper>
<Icon alt={text} src={iconUrl} />
<Text>{text}</Text>
{text && <Text>{text}</Text>}
</Wrapper>
)

18
src/components-v2/feedback/Loader-dots/assets/loader-dots.svg Normal file
View File

@ -0,0 +1,18 @@
<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

After

Width:  |  Height:  |  Size: 2.9 KiB

1
src/components-v2/index.js
View File

@ -2,6 +2,7 @@
export * from './dataDisplay'
export * from './feedback'
export * from './layouts'
export * from './navigation'
export * from './safeUtils'
export * from './surfaces'
export * from './utils'

48
src/components-v2/navigation/Stepper/DotStep.jsx Normal file
View File

@ -0,0 +1,48 @@
// @flow
import React from 'react'
import styled from 'styled-components'
import { IconText } from '~/components-v2'
import CheckIcon from '~/components/layout/PageFrame/assets/check.svg'
import {
background as backgroundColor,
secondaryText as disabledColor,
error as errorColor,
secondary,
} from '~/theme/variables'
const Circle = styled.div`
background-color: ${({ disabled, error }) => {
if (error) {
return errorColor
}
if (disabled) {
return disabledColor
}
return secondary
}};
color: ${backgroundColor};
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
`
type Props = {
dotIndex: number,
currentIndex: number,
error?: boolean,
}
const DotStep = ({ currentIndex, dotIndex, error }: Props) => {
return (
<Circle disabled={dotIndex > currentIndex} error={error}>
{dotIndex < currentIndex ? <IconText iconUrl={CheckIcon} /> : dotIndex + 1}
</Circle>
)
}
export default DotStep

69
src/components-v2/navigation/Stepper/index.jsx Normal file
View File

@ -0,0 +1,69 @@
// @flow
import StepMUI from '@material-ui/core/Step'
import StepLabelMUI from '@material-ui/core/StepLabel'
import StepperMUI from '@material-ui/core/Stepper'
import React from 'react'
import styled from 'styled-components'
import DotStep from './DotStep'
import { secondaryText as disabled, error as errorColor, primary, secondary } from '~/theme/variables'
const StyledStepper = styled(StepperMUI)`
background-color: transparent;
`
const StyledStepLabel = styled.p`
&& {
color: ${({ activeStepIndex, error, index }) => {
if (error) {
return errorColor
}
if (index === activeStepIndex) {
return secondary
}
if (index < activeStepIndex) {
return disabled
}
return primary
}};
}
`
type Props = {
steps: Array<{ id: string | number, label: string }>,
activeStepIndex: number,
error?: boolean,
orientation: 'vertical' | 'horizontal',
}
const Stepper = ({ activeStepIndex, error, orientation, steps }: Props) => {
return (
<StyledStepper activeStep={activeStepIndex} orientation={orientation}>
{steps.map((s, index) => {
return (
<StepMUI key={s.id}>
<StepLabelMUI
icon={
<DotStep currentIndex={activeStepIndex} dotIndex={index} error={index === activeStepIndex && error} />
}
>
<StyledStepLabel
activeStepIndex={activeStepIndex}
error={index === activeStepIndex && error}
index={index}
>
{s.label}
</StyledStepLabel>
</StepLabelMUI>
</StepMUI>
)
})}
</StyledStepper>
)
}
export default Stepper

2
src/components-v2/navigation/index.js Normal file
View File

@ -0,0 +1,2 @@
// @flow
export { default as Stepper } from './Stepper'

4
src/components/forms/validator.js
View File

@ -8,10 +8,10 @@ import { getWeb3 } from '~/logic/wallets/getWeb3'
export const simpleMemoize = (fn: Function) => {
let lastArg
let lastResult
return (arg: any) => {
return (arg: any, ...args: any) => {
if (arg !== lastArg) {
lastArg = arg
lastResult = fn(arg)
lastResult = fn(arg, ...args)
}
return lastResult
}

31
src/logic/contracts/safeContracts.js
View File

@ -5,7 +5,7 @@ import GnosisSafeSol from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafe.
import SafeProxy from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafeProxy.json'
import { ensureOnce } from '~/utils/singleton'
import { simpleMemoize } from '~/components/forms/validator'
import { getWeb3 } from '~/logic/wallets/getWeb3'
import { getWeb3, getNetworkIdFrom } from '~/logic/wallets/getWeb3'
import { calculateGasOf, calculateGasPrice } from '~/logic/wallets/ethTransactions'
import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
import { isProxyCode } from '~/logic/contracts/historicProxyCode'
@ -27,9 +27,9 @@ const createGnosisSafeContract = (web3: any) => {
return gnosisSafe
}
const createProxyFactoryContract = (web3: any) => {
const proxyFactory = contract(ProxyFactorySol)
proxyFactory.setProvider(web3.currentProvider)
const createProxyFactoryContract = (web3: any, networkId: number) => {
const contractAddress = ProxyFactorySol.networks[networkId].address
const proxyFactory = new web3.eth.Contract(ProxyFactorySol.abi, contractAddress)
return proxyFactory
}
@ -39,10 +39,10 @@ const getCreateProxyFactoryContract = simpleMemoize(createProxyFactoryContract)
const instantiateMasterCopies = async () => {
const web3 = getWeb3()
const networkId = await getNetworkIdFrom(web3)
// Create ProxyFactory Master Copy
const ProxyFactory = getCreateProxyFactoryContract(web3)
proxyFactoryMaster = await ProxyFactory.deployed()
proxyFactoryMaster = getCreateProxyFactoryContract(web3, networkId)
// Initialize Safe master copy
const GnosisSafe = getGnosisSafeContract(web3)
@ -70,22 +70,12 @@ export const getSafeMasterContract = async () => {
return safeMaster
}
export const deploySafeContract = async (safeAccounts: string[], numConfirmations: number, userAccount: string) => {
const gnosisSafeData = await safeMaster.contract.methods
export const getSafeDeploymentTransaction = (safeAccounts: string[], numConfirmations: number, userAccount: string) => {
const gnosisSafeData = safeMaster.contract.methods
.setup(safeAccounts, numConfirmations, ZERO_ADDRESS, '0x', DEFAULT_FALLBACK_HANDLER_ADDRESS, ZERO_ADDRESS, 0, ZERO_ADDRESS)
.encodeABI()
const proxyFactoryData = proxyFactoryMaster.contract.methods
.createProxy(safeMaster.address, gnosisSafeData)
.encodeABI()
const gas = await calculateGasOf(proxyFactoryData, userAccount, proxyFactoryMaster.address)
const gasPrice = await calculateGasPrice()
return proxyFactoryMaster.createProxy(safeMaster.address, gnosisSafeData, {
from: userAccount,
gas,
gasPrice,
value: 0,
})
return proxyFactoryMaster.methods.createProxy(safeMaster.address, gnosisSafeData)
}
export const estimateGasForDeployingSafe = async (
@ -93,10 +83,11 @@ export const estimateGasForDeployingSafe = async (
numConfirmations: number,
userAccount: string,
) => {
console.log(proxyFactoryMaster)
const gnosisSafeData = await safeMaster.contract.methods
.setup(safeAccounts, numConfirmations, ZERO_ADDRESS, '0x', DEFAULT_FALLBACK_HANDLER_ADDRESS, ZERO_ADDRESS, 0, ZERO_ADDRESS)
.encodeABI()
const proxyFactoryData = proxyFactoryMaster.contract.methods
const proxyFactoryData = proxyFactoryMaster.methods
.createProxy(safeMaster.address, gnosisSafeData)
.encodeABI()
const gas = await calculateGasOf(proxyFactoryData, userAccount, proxyFactoryMaster.address)

4
src/logic/wallets/getWeb3.js
View File

@ -88,9 +88,7 @@ export const getAccountFrom: Function = async (web3Provider): Promise<string | n
return accounts && accounts.length > 0 ? accounts[0] : null
}
const getNetworkIdFrom = async web3Provider => {
return await web3Provider.eth.net.getId()
}
export const getNetworkIdFrom = web3Provider => web3Provider.eth.net.getId()
export const getProviderInfo: Function = async (
web3Provider,

12
src/routes/index.js
View File

@ -3,14 +3,7 @@ import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import {
LOAD_ADDRESS,
OPENING_ADDRESS,
OPEN_ADDRESS,
SAFELIST_ADDRESS,
SAFE_PARAM_ADDRESS,
WELCOME_ADDRESS,
} from './routes'
import { LOAD_ADDRESS, OPEN_ADDRESS, SAFELIST_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS } from './routes'
import Welcome from './welcome/container'
import Loader from '~/components/Loader'
@ -21,8 +14,6 @@ const Safe = React.lazy(() => import('./safe/container'))
const Open = React.lazy(() => import('./open/container/Open'))
const Opening = React.lazy(() => import('./opening/container'))
const Load = React.lazy(() => import('./load/container/Load'))
const SAFE_ADDRESS = `${SAFELIST_ADDRESS}/:${SAFE_PARAM_ADDRESS}`
@ -66,7 +57,6 @@ const Routes = ({ defaultSafe, location }: RoutesProps) => {
<Route component={withTracker(Welcome)} exact path={WELCOME_ADDRESS} />
<Route component={withTracker(Open)} exact path={OPEN_ADDRESS} />
<Route component={withTracker(Safe)} path={SAFE_ADDRESS} />
<Route component={withTracker(Opening)} exact path={OPENING_ADDRESS} />
<Route component={withTracker(Load)} exact path={LOAD_ADDRESS} />
<Redirect to="/" />
</Switch>

12
src/routes/open/components/ReviewInformation/index.jsx
View File

@ -98,24 +98,20 @@ const ReviewComponent = ({ classes, userAccount, values }: Props) => {
const numOwners = getNumOwnersFrom(values)
useEffect(() => {
let isCurrent = true
const estimateGas = async () => {
if (!addresses.length || !numOwners || !userAccount) {
return
}
const web3 = getWeb3()
const { fromWei, toBN } = web3.utils
const estimatedGasCosts = await estimateGasForDeployingSafe(addresses, numOwners, userAccount)
const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
const formattedGasCosts = formatAmount(gasCostsAsEth)
if (isCurrent) {
setGasCosts(formattedGasCosts)
}
}
estimateGas()
return () => {
isCurrent = false
}
}, [])
}, [addresses, numOwners, userAccount])
return (
<>

174
src/routes/open/container/Open.jsx
View File

@ -1,16 +1,18 @@
// @flow
import queryString from 'query-string'
import * as React from 'react'
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import Opening from '../../opening'
import Layout from '../components/Layout'
import actions, { type Actions, type AddSafe } from './actions'
import actions, { type Actions } from './actions'
import selector from './selector'
import { Loader } from '~/components-v2'
import Page from '~/components/layout/Page'
import { deploySafeContract, getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
import { getSafeDeploymentTransaction } from '~/logic/contracts/safeContracts'
import { checkReceiptStatus } from '~/logic/wallets/ethTransactions'
import {
getAccountsFrom,
@ -19,9 +21,12 @@ import {
getSafeNameFrom,
getThresholdFrom,
} from '~/routes/open/utils/safeDataExtractor'
import { OPENING_ADDRESS, SAFELIST_ADDRESS, stillInOpeningView } from '~/routes/routes'
import { SAFELIST_ADDRESS, WELCOME_ADDRESS } from '~/routes/routes'
import { buildSafe } from '~/routes/safe/store/actions/fetchSafe'
import { history } from '~/store'
import { loadFromStorage, removeFromStorage, saveToStorage } from '~/utils/storage'
const SAFE_PENDING_CREATION_STORAGE_KEY = 'SAFE_PENDING_CREATION_STORAGE_KEY'
type Props = Actions & {
provider: string,
@ -62,76 +67,155 @@ const validateQueryParams = (
return true
}
export const createSafe = async (values: Object, userAccount: string, addSafe: AddSafe): Promise<OpenState> => {
const numConfirmations = getThresholdFrom(values)
export const getSafeProps = async (safeAddress, safeName, ownersNames, ownerAddresses) => {
const safeProps = await buildSafe(safeAddress, safeName)
const owners = getOwnersFrom(ownersNames, ownerAddresses)
safeProps.owners = owners
return safeProps
}
export const createSafe = (values: Object, userAccount: string): Promise<OpenState> => {
const confirmations = getThresholdFrom(values)
const name = getSafeNameFrom(values)
const ownersNames = getNamesFrom(values)
const ownerAddresses = getAccountsFrom(values)
const safe = await deploySafeContract(ownerAddresses, numConfirmations, userAccount)
await checkReceiptStatus(safe.tx)
const deploymentTxMethod = getSafeDeploymentTransaction(ownerAddresses, confirmations, userAccount)
const safeAddress = safe.logs[0].args.proxy
const safeContract = await getGnosisSafeInstanceAt(safeAddress)
const safeProps = await buildSafe(safeAddress, name)
const owners = getOwnersFrom(ownersNames, ownerAddresses)
safeProps.owners = owners
const promiEvent = deploymentTxMethod.send({ from: userAccount, value: 0 })
promiEvent
.once('transactionHash', txHash => {
saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, { txHash, ...values })
})
.then(async receipt => {
await checkReceiptStatus(receipt.transactionHash)
const safeAddress = receipt.events.ProxyCreation.returnValues.proxy
const safeProps = await getSafeProps(safeAddress, name, ownersNames, ownerAddresses)
// returning info for testing purposes, in app is fully async
return { safeAddress: safeProps.address, safeTx: receipt }
})
return promiEvent
}
const Open = ({ addSafe, network, provider, userAccount }: Props) => {
const [loading, setLoading] = useState(false)
const [showProgress, setShowProgress] = useState()
const [creationTxPromise, setCreationTxPromise] = useState()
const [safeCreationPendingInfo, setSafeCreationPendingInfo] = useState()
const [safePropsFromUrl, setSafePropsFromUrl] = useState()
useEffect(() => {
// #122: Allow to migrate an old Multisig by passing the parameters to the URL.
const query: SafePropsType = queryString.parse(location.search, { arrayFormat: 'comma' })
const { name, owneraddresses, ownernames, threshold } = query
if (validateQueryParams(owneraddresses, ownernames, threshold, name)) {
setSafePropsFromUrl({
name,
ownerAddresses: owneraddresses,
ownerNames: ownernames,
threshold,
})
}
})
// check if there is a safe being created
useEffect(() => {
const load = async () => {
const pendingCreation = await loadFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
if (pendingCreation && pendingCreation.txHash) {
setSafeCreationPendingInfo(pendingCreation)
setShowProgress(true)
} else {
setShowProgress(false)
}
setLoading(false)
}
load()
}, [])
const createSafeProxy = async formValues => {
let values = formValues
// save form values, used when the user rejects the TX and wants to retry
if (formValues) {
const copy = { ...formValues }
saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, copy)
} else {
values = await loadFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
}
const promiEvent = createSafe(values, userAccount, addSafe)
setCreationTxPromise(promiEvent)
setShowProgress(true)
}
const onSafeCreated = async safeAddress => {
const pendingCreation = await loadFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
const name = getSafeNameFrom(pendingCreation)
const ownersNames = getNamesFrom(pendingCreation)
const ownerAddresses = getAccountsFrom(pendingCreation)
const safeProps = await getSafeProps(safeAddress, name, ownersNames, ownerAddresses)
addSafe(safeProps)
if (stillInOpeningView()) {
removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
const url = {
pathname: `${SAFELIST_ADDRESS}/${safeContract.address}/balances`,
pathname: `${SAFELIST_ADDRESS}/${safeProps.address}/balances`,
state: {
name,
tx: safe.tx,
tx: pendingCreation.txHash,
},
}
history.push(url)
}
// returning info for testing purposes, in app is fully async
return { safeAddress: safeContract.address, safeTx: safe }
}
class Open extends React.Component<Props> {
onCallSafeContractSubmit = async values => {
try {
const { addSafe, userAccount } = this.props
createSafe(values, userAccount, addSafe)
history.push(OPENING_ADDRESS)
} catch (error) {
// eslint-disable-next-line
console.error('Error while creating the Safe: ' + error)
}
const onCancel = () => {
removeFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
history.push({
pathname: `${WELCOME_ADDRESS}`,
})
}
render() {
const { location, network, provider, userAccount } = this.props
const query: SafePropsType = queryString.parse(location.search, { arrayFormat: 'comma' })
const { name, owneraddresses, ownernames, threshold } = query
const onRetry = async () => {
const values = await loadFromStorage(SAFE_PENDING_CREATION_STORAGE_KEY)
delete values.txHash
await saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, values)
setSafeCreationPendingInfo(values)
createSafeProxy()
}
let safeProps = null
if (validateQueryParams(owneraddresses, ownernames, threshold, name)) {
safeProps = {
name,
ownerAddresses: owneraddresses,
ownerNames: ownernames,
threshold,
}
if (loading || showProgress === undefined) {
return <Loader />
}
return (
<Page>
{showProgress ? (
<Opening
creationTxHash={safeCreationPendingInfo ? safeCreationPendingInfo.txHash : undefined}
onCancel={onCancel}
onRetry={onRetry}
onSuccess={onSafeCreated}
provider={provider}
submittedPromise={creationTxPromise}
/>
) : (
<Layout
network={network}
onCallSafeContractSubmit={this.onCallSafeContractSubmit}
onCallSafeContractSubmit={createSafeProxy}
provider={provider}
safeProps={safeProps}
safeProps={safePropsFromUrl}
userAccount={userAccount}
/>
)}
</Page>
)
}
}
export default connect(selector, actions)(withRouter(Open))

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

@ -0,0 +1,4 @@
<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

After

Width:  |  Height:  |  Size: 1.2 KiB

13
src/routes/opening/assets/vault-error.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="111" height="91" viewBox="0 0 111 91" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g fill="#B2B5B2">
<path d="M6.535 81.666h9.8V78.4h-9.8v3.266zm64.131-6.535h-67.4V3.266H94.73l.003 47.754c.203-.004.403-.015.608-.015.898 0 1.785.051 2.659.144V0H0v78.4h3.265v6.535H19.6V78.4h51.202c-.097-.888-.15-1.79-.15-2.705 0-.189.01-.376.014-.564z"/>
<path d="M9.8 68.582L9.816 9.8l78.385.015v4.885h-1.635a1.64 1.64 0 0 0-1.635 1.634c0 .9.736 1.635 1.635 1.635H88.2v1.634h-1.635a1.64 1.64 0 0 0-1.635 1.635c0 .9.736 1.635 1.635 1.635H88.2v29.184c1.06-.32 2.15-.572 3.266-.748V22.866c.899 0 1.634-.736 1.634-1.634 0-.9-.735-1.635-1.634-1.635v-1.635a1.64 1.64 0 0 0 1.634-1.635c0-.9-.735-1.635-1.634-1.635V9.816a3.284 3.284 0 0 0-3.281-3.285H9.816a3.283 3.283 0 0 0-3.281 3.285v58.766a3.283 3.283 0 0 0 3.28 3.284H70.95c.173-1.114.423-2.2.74-3.26L9.8 68.582z"/>
<path d="M60.435 42.466A3.276 3.276 0 0 1 57.17 39.2a3.276 3.276 0 0 1 3.265-3.266 3.277 3.277 0 0 1 3.266 3.266 3.276 3.276 0 0 1-3.266 3.265m0-9.8a6.533 6.533 0 0 0-6.535 6.535 6.534 6.534 0 0 0 6.535 6.535 6.535 6.535 0 0 0 0-13.069"/>
<path d="M75.136 40.832h1.55a16.242 16.242 0 0 1-3.61 8.689l-1.095-1.095a1.633 1.633 0 0 0-2.305 0 1.634 1.634 0 0 0 0 2.305l1.095 1.095a16.303 16.303 0 0 1-8.69 3.61l.004-1.535c0-.9-.735-1.635-1.634-1.635-.9 0-1.635.736-1.635 1.635v1.55a16.249 16.249 0 0 1-8.69-3.61l1.095-1.095a1.631 1.631 0 0 0 0-2.304 1.63 1.63 0 0 0-2.305 0l-1.095 1.095a16.303 16.303 0 0 1-3.61-8.69l1.524.004c.9 0 1.634-.735 1.634-1.635s-.734-1.634-1.634-1.634h-1.55a16.25 16.25 0 0 1 3.61-8.69l1.095 1.094c.325.325.734.475 1.16.475.424 0 .834-.165 1.159-.475a1.63 1.63 0 0 0 0-2.305l-1.095-1.095a16.309 16.309 0 0 1 8.69-3.61l-.003 1.524c0 .9.734 1.635 1.634 1.635.9 0 1.635-.734 1.635-1.635v-1.55a16.254 16.254 0 0 1 8.69 3.61l-1.095 1.095a1.63 1.63 0 0 0 0 2.304c.326.326.735.475 1.16.475a1.67 1.67 0 0 0 1.16-.475l1.095-1.094a16.3 16.3 0 0 1 3.61 8.69l-1.554-.004c-.9 0-1.635.734-1.635 1.634a1.65 1.65 0 0 0 1.635 1.647M74.3 25.347c-.015-.016-.035-.016-.05-.035-3.56-3.525-8.426-5.71-13.816-5.71-5.39 0-10.256 2.189-13.8 5.7-.016.014-.035.014-.05.033-.016.015-.016.034-.035.05-3.53 3.557-5.715 8.426-5.715 13.816 0 5.39 2.19 10.256 5.7 13.8.015.016.015.034.034.05.016.015.035.015.05.034 3.557 3.526 8.426 5.716 13.816 5.716 5.39 0 10.256-2.19 13.8-5.7.016-.016.035-.016.051-.035.015-.015.015-.034.034-.049 3.525-3.56 5.716-8.427 5.716-13.816 0-5.39-2.19-10.26-5.701-13.804-.015-.016-.015-.035-.034-.05M17.966 22.862c-.9 0-1.635.735-1.635 1.634v32.666c0 .9.734 1.635 1.635 1.635.899 0 1.634-.735 1.634-1.635v-1.634c.9 0 1.635-.736 1.635-1.635 0-.9-.735-1.635-1.635-1.635V29.4c.9 0 1.635-.734 1.635-1.634 0-.9-.735-1.635-1.635-1.635v-1.635c0-.898-.735-1.634-1.634-1.634M26.135 22.866c-.9 0-1.635.735-1.635 1.634v1.636c-.9 0-1.635.734-1.635 1.634 0 .9.736 1.634 1.635 1.634V52.27c-.9 0-1.635.735-1.635 1.634 0 .9.736 1.636 1.635 1.636v1.634c0 .9.735 1.635 1.635 1.635s1.634-.735 1.634-1.635L27.765 24.5c0-.899-.734-1.634-1.63-1.634"/>
</g>
<path stroke-width="3" d="M93.756 58.266c-8.466 0-15.361 6.896-15.361 15.362 0 8.466 6.895 15.36 15.361 15.36 8.466 0 15.361-6.894 15.361-15.36s-6.895-15.362-15.361-15.362z" style="stroke: rgb(242, 72, 34);"/>
<path fill-rule="nonzero" d="M93.68 68.471h-3.06v10.313h8.39v-3.06h-5.33z" style="fill: rgb(242, 72, 34);"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

79
src/routes/opening/component/index.jsx
View File

@ -1,79 +0,0 @@
// @flow
import LinearProgress from '@material-ui/core/LinearProgress'
import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import * as React from 'react'
import { type SelectorProps } from '../container/selector'
import Block from '~/components/layout/Block'
import Img from '~/components/layout/Img'
import Page from '~/components/layout/Page'
import Paragraph from '~/components/layout/Paragraph'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { mediumFontSize, secondary, xs } from '~/theme/variables'
type Props = SelectorProps & {
name: string,
tx: string,
classes: Object,
}
const vault = require('../assets/vault.svg')
const styles = {
icon: {
height: mediumFontSize,
color: secondary,
},
follow: {
display: 'flex',
justifyContent: 'center',
marginTop: xs,
},
etherscan: {
color: secondary,
textDecoration: 'underline',
display: 'flex',
alignItems: 'center',
marginLeft: xs,
},
}
const Opening = ({ classes, name = 'Safe creation process', tx }: Props) => (
<Page align="center">
<Paragraph align="center" color="primary" size="xxl" weight="bold">
{name}
</Paragraph>
<Block align="center" margin="lg">
<Img alt="Vault" height={90} src={vault} />
</Block>
<Block margin="lg">
<LinearProgress color="secondary" />
</Block>
<Block margin="md">
<Paragraph align="center" className={classes.page} noMargin size="xl">
Transaction submitted
</Paragraph>
<Paragraph align="center" className={classes.page} noMargin size="xl" weight="bolder">
Deploying your new Safe...
</Paragraph>
</Block>
<Block margin="md">
<Paragraph align="center" noMargin size="md" weight="light">
This process should take a couple of minutes. <br />
</Paragraph>
{tx && (
<Paragraph align="center" className={classes.follow} noMargin size="md" weight="light">
Follow progress on{' '}
<a className={classes.etherscan} href={getEtherScanLink('tx', tx)} rel="noopener noreferrer" target="_blank">
Etherscan.io
<OpenInNew className={classes.icon} />
</a>
</Paragraph>
)}
</Block>
</Page>
)
export default withStyles(styles)(Opening)

6
src/routes/opening/container/index.jsx
View File

@ -1,8 +1,8 @@
// @flow
import { connect } from 'react-redux'
import Layout from '../component'
import selector from './selector'
export default connect(selector)(Layout)
import Opening from './index'
export default connect(selector)(Opening)

387
src/routes/opening/index.jsx Normal file
View File

@ -0,0 +1,387 @@
// @flow
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { Loader, Stepper } from '~/components-v2'
import LoaderDots from '~/components-v2/feedback/Loader-dots/assets/loader-dots.svg'
import Button from '~/components/layout/Button'
import Heading from '~/components/layout/Heading'
import Img from '~/components/layout/Img'
import Paragraph from '~/components/layout/Paragraph'
import { initContracts } from '~/logic/contracts/safeContracts'
import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3'
import { background, connected } from '~/theme/variables'
const successSvg = require('./assets/success.svg')
const vaultErrorSvg = require('./assets/vault-error.svg')
const vaultSvg = require('./assets/vault.svg')
const Wrapper = styled.div`
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 62px auto;
margin-bottom: 30px;
`
const Title = styled(Heading)`
grid-column: 1/3;
grid-row: 1;
`
const Nav = styled.div`
grid-column: 1;
grid-row: 2;
`
const Body = styled.div`
grid-column: 2;
grid-row: 2;
text-align: center;
background-color: #ffffff;
border-radius: 5px;
min-width: 700px;
padding-top: 50px;
box-shadow: 0 0 10px 0 rgba(33, 48, 77, 0.1);
display: grid;
grid-template-rows: 100px 50px 70px 60px 100px;
`
const EtherScanLink = styled.a`
color: ${connected};
`
const CardTitle = styled.div`
font-size: 20px;
`
const FullParagraph = styled(Paragraph)`
background-color: ${background};
padding: 24px;
font-size: 16px;
margin-bottom: 16px;
`
const ButtonMargin = styled(Button)`
margin-right: 16px;
`
const BodyImage = styled.div`
grid-row: 1;
`
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;
`
const BodyFooter = styled.div`
grid-row: 5;
padding: 10px 0;
display: flex;
justify-content: center;
align-items: flex-end;
`
type Props = {
provider: string,
creationTxHash: Promise<any>,
submittedPromise: Promise<any>,
onRetry: () => void,
onSuccess: () => void,
onCancel: () => void,
}
const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider, submittedPromise }: Props) => {
const [loading, setLoading] = useState(true)
const [stepIndex, setStepIndex] = useState()
const [safeCreationTxHash, setSafeCreationTxHash] = useState()
const [createdSafeAddress, setCreatedSafeAddress] = useState()
const [error, setError] = useState(false)
const [intervalStarted, setIntervalStarted] = useState(false)
const [waitingSafeDeployed, setWaitingSafeDeployed] = useState(false)
const [continueButtonDisabled, setContinueButtonDisabled] = useState(false)
const genericFooter = (
<span>
<p>This process should take a couple of minutes.</p>
<p>
Follow the progress on{' '}
<EtherScanLink
aria-label="Show details on Etherscan"
href={getEtherScanLink('tx', safeCreationTxHash)}
rel="noopener noreferrer"
target="_blank"
>
Etherscan.io
</EtherScanLink>
.
</p>
</span>
)
const navigateToSafe = () => {
setContinueButtonDisabled(true)
onSuccess(createdSafeAddress)
}
const steps = [
{
id: '1',
label: 'Waiting fot transaction confirmation',
description: undefined,
instruction: 'Please confirm the Safe creation in your wallet',
footer: null,
},
{
id: '2',
label: 'Transaction submitted',
description: undefined,
instruction: 'Please do not leave the page',
footer: genericFooter,
},
{
id: '3',
label: 'Validating transaction',
description: undefined,
instruction: 'Please do not leave the page',
footer: genericFooter,
},
{
id: '4',
label: 'Deploying smart contract',
description: undefined,
instruction: 'Please do not leave the page',
footer: genericFooter,
},
{
id: '5',
label: 'Generating your Safe',
description: undefined,
instruction: 'Please do not leave the page',
footer: genericFooter,
},
{
id: '6',
label: 'Success',
description: 'Your Safe was created successfully',
instruction: 'Click Below to get started',
footer: (
<Button color="primary" disabled={continueButtonDisabled} onClick={navigateToSafe} variant="contained">
Continue
</Button>
),
},
]
const onError = error => {
setIntervalStarted(false)
setWaitingSafeDeployed(false)
setContinueButtonDisabled(false)
setError(true)
console.error(error)
}
// discard click event value
const onRetryTx = () => {
setStepIndex(0)
setError(false)
onRetry()
}
const getImage = () => {
if (error) {
return vaultErrorSvg
}
if (stepIndex <= 4) {
return vaultSvg
}
return successSvg
}
useEffect(() => {
const loadContracts = async () => {
await initContracts()
setLoading(false)
}
if (provider) {
loadContracts()
}
}, [provider])
// creating safe from from submission
useEffect(() => {
if (submittedPromise === undefined) {
return
}
setStepIndex(0)
submittedPromise
.once('transactionHash', txHash => {
setSafeCreationTxHash(txHash)
setStepIndex(1)
setIntervalStarted(true)
})
.on('error', onError)
}, [submittedPromise])
// recovering safe creation from txHash
useEffect(() => {
if (creationTxHash === undefined) {
return
}
setSafeCreationTxHash(creationTxHash)
setStepIndex(1)
setIntervalStarted(true)
}, [creationTxHash])
useEffect(() => {
if (!intervalStarted) {
return
}
const isTxMined = async txHash => {
const web3 = getWeb3()
const receipt = await web3.eth.getTransactionReceipt(txHash)
if (!receipt.status) {
throw Error('TX status reverted')
}
const txResult = await web3.eth.getTransaction(txHash)
return txResult.blockNumber !== null
}
let interval = setInterval(async () => {
if (stepIndex < 4) {
setStepIndex(stepIndex + 1)
}
// safe created using the form
if (submittedPromise !== undefined) {
submittedPromise.then(() => {
setStepIndex(4)
setWaitingSafeDeployed(true)
setIntervalStarted(false)
})
}
// safe pending creation recovered from storage
if (creationTxHash !== undefined) {
try {
const res = await isTxMined(creationTxHash)
if (res) {
setStepIndex(4)
setWaitingSafeDeployed(true)
setIntervalStarted(false)
}
} catch (error) {
onError(error)
}
}
}, 3000)
return () => {
clearInterval(interval)
}
}, [creationTxHash, submittedPromise, intervalStarted, stepIndex, error])
useEffect(() => {
let interval
const awaitUntilSafeIsDeployed = async () => {
try {
const web3 = getWeb3()
const receipt = await web3.eth.getTransactionReceipt(safeCreationTxHash)
// get the address for the just created safe
const events = web3.eth.abi.decodeLog(
[
{
type: 'address',
name: 'ProxyCreation',
},
],
receipt.logs[0].data,
receipt.logs[0].topics,
)
const safeAddress = events[0]
setCreatedSafeAddress(safeAddress)
interval = setInterval(async () => {
const code = await web3.eth.getCode(safeAddress)
if (code !== EMPTY_DATA) {
setStepIndex(5)
}
}, 1000)
} catch (error) {
onError(error)
}
}
if (!waitingSafeDeployed) {
return
}
awaitUntilSafeIsDeployed()
return () => {
clearInterval(interval)
}
}, [waitingSafeDeployed])
if (loading || stepIndex === undefined) {
return <Loader />
}
return (
<Wrapper>
<Title tag="h2">Safe creation process</Title>
<Nav>
<Stepper activeStepIndex={stepIndex} error={error} orientation="vertical" steps={steps} />
</Nav>
<Body>
<BodyImage>
<Img alt="Vault" height={75} src={getImage()} />
</BodyImage>
<BodyDescription>
<CardTitle>{steps[stepIndex].description || steps[stepIndex].label}</CardTitle>
</BodyDescription>
<BodyLoader>{!error && stepIndex <= 4 && <Img alt="LoaderDots" src={LoaderDots} />}</BodyLoader>
<BodyInstruction>
<FullParagraph color="primary" noMargin size="md">
{error ? 'You can Cancel or Retry the Safe creation process.' : steps[stepIndex].instruction}
</FullParagraph>
</BodyInstruction>
<BodyFooter>
{error ? (
<>
<ButtonMargin onClick={onCancel} variant="contained">
Cancel
</ButtonMargin>
<Button color="primary" onClick={onRetryTx} variant="contained">
Retry
</Button>
</>
) : (
steps[stepIndex].footer
)}
</BodyFooter>
</Body>
</Wrapper>
)
}
export default SafeDeployment

8
src/routes/routes.js
View File

@ -1,14 +1,6 @@
// @flow
import { history } from '~/store'
export const SAFE_PARAM_ADDRESS = 'address'
export const SAFELIST_ADDRESS = '/safes'
export const OPEN_ADDRESS = '/open'
export const LOAD_ADDRESS = '/load'
export const WELCOME_ADDRESS = '/welcome'
export const OPENING_ADDRESS = '/opening'
export const stillInOpeningView = () => {
const path = history.location.pathname
return path === OPENING_ADDRESS
}

1
yarn.lock
View File

@ -17587,6 +17587,7 @@ websocket@1.0.29, "websocket@github:web3-js/WebSocket-Node#polyfill/globalThis":
dependencies:
debug "^2.2.0"
es5-ext "^0.10.50"
gulp "^4.0.2"
nan "^2.14.0"
typedarray-to-buffer "^3.1.5"
yaeti "^0.0.6"