Merge pull request #118 from gnosis/load-safe-improvements

Load safe improvements
2019-06-17 09:24:15 +02:00 · 2019-06-17 09:24:15 +02:00 · 4b470d870f
parent 7bb49a353f 3f572ed043
commit 4b470d870f
10 changed files with 373 additions and 85 deletions
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@ -53,7 +53,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
    let currentProvider: ProviderProps = await getProviderInfo()
    fetchProvider(currentProvider, openSnackbar)

-    this.providerListener = setInterval(async () => {   
+    this.providerListener = setInterval(async () => {
      const newProvider: ProviderProps = await getProviderInfo()
      if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) {
        fetchProvider(newProvider, openSnackbar)
--- a/src/routes/load/components/Layout.jsx
+++ b/src/routes/load/components/Layout.jsx
@ -7,12 +7,13 @@ import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
 import IconButton from '@material-ui/core/IconButton'
 import ReviewInformation from '~/routes/load/components/ReviewInformation'
+import OwnerList from '~/routes/load/components/OwnerList'
 import DetailsForm, { safeFieldsValidation } from '~/routes/load/components/DetailsForm'
 import { history } from '~/store'
 import { secondary } from '~/theme/variables'
 import { type SelectorProps } from '~/routes/load/container/selector'

-const getSteps = () => ['Details', 'Review']
+const getSteps = () => ['Details', 'Owners', 'Review']

 type Props = SelectorProps & {
  onLoadSafeSubmit: (values: Object) => Promise<void>,
@ -32,6 +33,7 @@ const Layout = ({
  provider, onLoadSafeSubmit, network, userAddress,
 }: Props) => {
  const steps = getSteps()
+  const initialValues = {}

  return (
    <React.Fragment>
@ -43,15 +45,16 @@ const Layout = ({
            </IconButton>
            <Heading tag="h2">Load existing Safe</Heading>
          </Row>
-          <Stepper onSubmit={onLoadSafeSubmit} steps={steps} testId="load-safe-form">
+          <Stepper onSubmit={onLoadSafeSubmit} steps={steps} initialValues={initialValues} testId="load-safe-form">
            <Stepper.Page validate={safeFieldsValidation}>{DetailsForm}</Stepper.Page>
+            <Stepper.Page network={network}>{OwnerList}</Stepper.Page>
            <Stepper.Page network={network} userAddress={userAddress}>
              {ReviewInformation}
            </Stepper.Page>
          </Stepper>
        </Block>
      ) : (
-        <div>No metamask detected</div>
+        <div>No account detected</div>
      )}
    </React.Fragment>
  )
--- a/src/routes/load/components/OwnerList/index.jsx
+++ b/src/routes/load/components/OwnerList/index.jsx
@ -0,0 +1,191 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import { withStyles } from '@material-ui/core/styles'
+import Field from '~/components/forms/Field'
+import { required } from '~/components/forms/validator'
+import TextField from '~/components/forms/TextField'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Identicon from '~/components/Identicon'
+import OpenPaper from '~/components/Stepper/OpenPaper'
+import Col from '~/components/layout/Col'
+import Row from '~/components/layout/Row'
+import Link from '~/components/layout/Link'
+import Paragraph from '~/components/layout/Paragraph'
+import Hairline from '~/components/layout/Hairline'
+import {
+  sm, md, lg, border, secondary,
+} from '~/theme/variables'
+import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
+import { getEtherScanLink } from '~/logic/wallets/getWeb3'
+import { FIELD_LOAD_ADDRESS, THRESHOLD } from '~/routes/load/components/fields'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
+
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+const styles = () => ({
+  details: {
+    padding: lg,
+    borderRight: `solid 1px ${border}`,
+    height: '100%',
+  },
+  owners: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+  },
+  ownerNames: {
+    maxWidth: '400px',
+  },
+  ownerAddresses: {
+    alignItems: 'center',
+    marginLeft: `${sm}`,
+  },
+  address: {
+    paddingLeft: '6px',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+  title: {
+    padding: `${md} ${lg}`,
+  },
+  owner: {
+    padding: `0 ${lg}`,
+    marginBottom: '12px',
+  },
+  header: {
+    padding: `${sm} ${lg}`,
+  },
+  name: {
+    marginRight: `${sm}`,
+  },
+})
+
+type LayoutProps = {
+  network: string,
+}
+
+type Props = LayoutProps & {
+  values: Object,
+  classes: Object,
+  updateInitialProps: (initialValues: Object) => void,
+}
+
+type State = {
+  owners: Array<string>,
+}
+
+const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => {
+  const initialValues = { ...values }
+  for (let i = 0; i < owners.length; i += 1) {
+    initialValues[getOwnerAddressBy(i)] = owners[i]
+  }
+  initialValues[THRESHOLD] = threshold
+  return initialValues
+}
+
+class OwnerListComponent extends React.PureComponent<Props, State> {
+  state = {
+    owners: [],
+  }
+
+  mounted = false
+
+  componentDidMount = async () => {
+    this.mounted = true
+    const { values, updateInitialProps } = this.props
+    const safeAddress = values[FIELD_LOAD_ADDRESS]
+
+    const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+    const owners = await gnosisSafe.getOwners()
+    const threshold = await gnosisSafe.getThreshold()
+
+    const initialValues = calculateSafeValues(owners.sort(), threshold, values)
+    updateInitialProps(initialValues)
+
+    if (!owners) {
+      return
+    }
+
+    if (this.mounted) {
+      this.setState(() => ({ owners: owners.sort() }))
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false
+  }
+
+  render() {
+    const { network, classes } = this.props
+    const { owners } = this.state
+
+    return (
+      <React.Fragment>
+        <Block className={classes.title}>
+          <Paragraph noMargin size="md" color="primary">
+            {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
+          </Paragraph>
+        </Block>
+        <Hairline />
+        <Row className={classes.header}>
+          <Col xs={4}>NAME</Col>
+          <Col xs={8}>ADDRESS</Col>
+        </Row>
+        <Hairline />
+        <Block margin="md" padding="md">
+          {owners.map((x, index) => (
+            <Row key={owners[index].address} className={classes.owner}>
+              <Col xs={4}>
+                <Field
+                  className={classes.name}
+                  name={getOwnerNameBy(index)}
+                  component={TextField}
+                  type="text"
+                  validate={required}
+                  defaultValue={`Owner #${index + 1}`}
+                  placeholder="Owner Name*"
+                  text="Owner Name"
+                />
+              </Col>
+              <Col xs={7}>
+                <Row className={classes.ownerAddresses}>
+                  <Identicon address={owners[index]} diameter={32} />
+                  <Paragraph size="md" color="disabled" noMargin className={classes.address}>
+                    {owners[index]}
+                  </Paragraph>
+                  <Link className={classes.open} to={getEtherScanLink(owners[index], network)} target="_blank">
+                    <OpenInNew style={openIconStyle} />
+                  </Link>
+                </Row>
+              </Col>
+            </Row>
+          )) }
+        </Block>
+      </React.Fragment>
+    )
+  }
+}
+
+const OwnerListPage = withStyles(styles)(OwnerListComponent)
+
+const OwnerList = ({ updateInitialProps }: Object, network: string) => (controls: React$Node, { values }: Object) => (
+  <React.Fragment>
+    <OpenPaper controls={controls} padding={false}>
+      <OwnerListPage
+        network={network}
+        updateInitialProps={updateInitialProps}
+        values={values}
+      />
+    </OpenPaper>
+  </React.Fragment>
+)
+
+export default OwnerList
--- a/src/routes/load/components/ReviewInformation/index.jsx
+++ b/src/routes/load/components/ReviewInformation/index.jsx
@ -1,20 +1,24 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames'
 import Block from '~/components/layout/Block'
 import { withStyles } from '@material-ui/core/styles'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Identicon from '~/components/Identicon'
 import OpenPaper from '~/components/Stepper/OpenPaper'
+import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
+import Hairline from '~/components/layout/Hairline'
 import {
  xs, sm, lg, border, secondary,
 } from '~/theme/variables'
-import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3'
-import { FIELD_LOAD_NAME, FIELD_LOAD_ADDRESS } from '~/routes/load/components/fields'
-import { sameAddress } from '~/logic/wallets/ethAddresses'
-import { getGnosisSafeContract } from '~/logic/contracts/safeContracts'
+import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
+import { getOwnerNameBy, getOwnerAddressBy, getNumOwnersFrom } from '~/routes/open/components/fields'
+import { getEtherScanLink } from '~/logic/wallets/getWeb3'
+import { FIELD_LOAD_NAME, FIELD_LOAD_ADDRESS, THRESHOLD } from '~/routes/load/components/fields'

 const openIconStyle = {
  height: '16px',
@ -22,20 +26,31 @@ const openIconStyle = {
 }

 const styles = () => ({
+  root: {
+    minHeight: '300px',
+  },
  details: {
    padding: lg,
    borderRight: `solid 1px ${border}`,
    height: '100%',
  },
-  name: {
-    letterSpacing: '-0.6px',
+  owners: {
+    padding: lg,
  },
-  container: {
-    marginTop: xs,
+  name: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  userName: {
+    whiteSpace: 'nowrap',
+  },
+  owner: {
+    padding: sm,
+    paddingLeft: lg,
    alignItems: 'center',
  },
-  address: {
-    paddingLeft: '6px',
+  user: {
+    justifyContent: 'left',
  },
  open: {
    paddingLeft: sm,
@ -44,6 +59,13 @@ const styles = () => ({
      cursor: 'pointer',
    },
  },
+  container: {
+    marginTop: xs,
+    alignItems: 'center',
+  },
+  address: {
+    paddingLeft: '6px',
+  },
 })

 type LayoutProps = {
@ -60,77 +82,113 @@ type State = {
  isOwner: boolean,
 }

+const checkUserAddressOwner = (values: Object, userAddress: string): boolean => {
+  let isOwner: boolean = false
+
+  for (let i = 0; i < getNumOwnersFrom(values); i += 1) {
+    if (values[getOwnerAddressBy(i)] === userAddress) {
+      isOwner = true
+      break
+    }
+  }
+
+  return isOwner
+}
+
 class ReviewComponent extends React.PureComponent<Props, State> {
-  state = {
-    isOwner: false,
-  }
-
-  mounted = false
-
-  componentDidMount = async () => {
-    this.mounted = true
-
-    const { values, userAddress } = this.props
-    const safeAddress = values[FIELD_LOAD_ADDRESS]
-    const web3 = getWeb3()
-
-    const GnosisSafe = getGnosisSafeContract(web3)
-    const gnosisSafe = await GnosisSafe.at(safeAddress)
-    const owners = await gnosisSafe.getOwners()
-    if (!owners) {
-      return
-    }
-
-    const isOwner = owners.find((owner: string) => sameAddress(owner, userAddress)) !== undefined
-    if (this.mounted) {
-      this.setState(() => ({ isOwner }))
-    }
-  }
-
-  componentWillUnmount() {
-    this.mounted = false
-  }
-
  render() {
-    const { values, classes, network } = this.props
-    const { isOwner } = this.state
+    const {
+      values, classes, network, userAddress,
+    } = this.props

+    const isOwner = checkUserAddressOwner(values, userAddress)
+    const owners = getAccountsFrom(values)
    const safeAddress = values[FIELD_LOAD_ADDRESS]

    return (
      <React.Fragment>
-        <Block className={classes.details}>
-          <Block margin="lg">
-            <Paragraph size="sm" color="disabled" noMargin>
-              Name of the Safe
-            </Paragraph>
-            <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
-              {values[FIELD_LOAD_NAME]}
-            </Paragraph>
-          </Block>
-          <Block margin="lg">
-            <Paragraph size="sm" color="disabled" noMargin>
-              Safe address
-            </Paragraph>
-            <Row className={classes.container}>
-              <Identicon address={safeAddress} diameter={32} />
-              <Paragraph size="md" color="disabled" noMargin className={classes.address}>
-                {safeAddress}
+        <Row className={classes.root}>
+          <Col xs={4} layout="column">
+            <Block className={classes.details}>
+              <Block margin="lg">
+                <Paragraph size="lg" color="primary" noMargin>
+                Review details
+                </Paragraph>
+              </Block>
+              <Block margin="lg">
+                <Paragraph size="sm" color="disabled" noMargin>
+                Name of the Safe
+                </Paragraph>
+                <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
+                  {values[FIELD_LOAD_NAME]}
+                </Paragraph>
+              </Block>
+              <Block margin="lg">
+                <Paragraph size="sm" color="disabled" noMargin>
+                Safe address
+                </Paragraph>
+                <Row className={classes.container}>
+                  <Identicon address={safeAddress} diameter={32} />
+                  <Paragraph size="md" color="disabled" noMargin className={classes.address}>
+                    {shortVersionOf(safeAddress, 4)}
+                  </Paragraph>
+                  <Link className={classes.open} to={getEtherScanLink(safeAddress, network)} target="_blank">
+                    <OpenInNew style={openIconStyle} />
+                  </Link>
+                </Row>
+              </Block>
+              <Block margin="lg">
+                <Paragraph size="sm" color="disabled" noMargin>
+                Connected wallet client is owner?
+                </Paragraph>
+                <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
+                  {isOwner ? 'Yes' : 'No (read-only)'}
+                </Paragraph>
+              </Block>
+              <Block margin="lg">
+                <Paragraph size="sm" color="disabled" noMargin>
+                Any transaction requires the confirmation of:
+                </Paragraph>
+                <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
+                  {`${values[THRESHOLD]} out of ${getNumOwnersFrom(values)} owners`}
+                </Paragraph>
+              </Block>
+            </Block>
+          </Col>
+          <Col xs={8} layout="column">
+            <Block className={classes.owners}>
+              <Paragraph size="lg" color="primary" noMargin>
+                {`${getNumOwnersFrom(values)} Safe owners`}
              </Paragraph>
-              <Link className={classes.open} to={getEtherScanLink(safeAddress, network)} target="_blank">
-                <OpenInNew style={openIconStyle} />
-              </Link>
-            </Row>
-          </Block>
-          <Block margin="lg">
-            <Paragraph size="sm" color="disabled" noMargin>
-              Connected wallet client is owner?
-            </Paragraph>
-            <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
-              {isOwner ? 'Yes' : 'No (read-only)'}
-            </Paragraph>
-          </Block>
-        </Block>
+            </Block>
+            <Hairline />
+            {owners.map((x, index) => (
+              <React.Fragment key={owners[index].address}>
+                <Row className={classes.owner}>
+                  <Col xs={1} align="center">
+                    <Identicon address={owners[index]} diameter={32} />
+                  </Col>
+                  <Col xs={11}>
+                    <Block className={classNames(classes.name, classes.userName)}>
+                      <Paragraph size="lg" noMargin>
+                        {values[getOwnerNameBy(index)]}
+                      </Paragraph>
+                      <Block align="center" className={classes.user}>
+                        <Paragraph size="md" color="disabled" noMargin>
+                          {owners[index]}
+                        </Paragraph>
+                        <Link className={classes.open} to={getEtherScanLink(owners[index], network)} target="_blank">
+                          <OpenInNew style={openIconStyle} />
+                        </Link>
+                      </Block>
+                    </Block>
+                  </Col>
+                </Row>
+                <Hairline />
+              </React.Fragment>
+            ))}
+          </Col>
+        </Row>
      </React.Fragment>
    )
  }
--- a/src/routes/load/components/fields.js
+++ b/src/routes/load/components/fields.js
@ -1,3 +1,4 @@
 // @flow
 export const FIELD_LOAD_NAME: string = 'name'
 export const FIELD_LOAD_ADDRESS: string = 'address'
+export const THRESHOLD: Number = 'threshold'
--- a/src/routes/load/container/Load.jsx
+++ b/src/routes/load/container/Load.jsx
@ -10,13 +10,20 @@ import { history } from '~/store'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 import Layout from '../components/Layout'
+import { getNamesFrom, getOwnersFrom } from '~/routes/open/utils/safeDataExtractor'
 import { FIELD_LOAD_NAME, FIELD_LOAD_ADDRESS } from '../components/fields'
+import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'

 type Props = SelectorProps & Actions

-export const loadSafe = async (safeName: string, safeAddress: string, addSafe: Function) => {
+export const loadSafe = async (
+  safeName: string,
+  safeAddress: string,
+  owners: Array,
+  addSafe: Function
+) => {
  const safeProps = await buildSafe(safeAddress, safeName)
-
+  safeProps.owners = owners
  await addSafe(safeProps)

  const storedSafes = (await loadFromStorage(SAFES_KEY)) || {}
@ -31,8 +38,13 @@ class Load extends React.Component<Props> {
      const { addSafe } = this.props
      const safeName = values[FIELD_LOAD_NAME]
      const safeAddress = values[FIELD_LOAD_ADDRESS]
+      const ownerNames = getNamesFrom(values)

-      await loadSafe(safeName, safeAddress, addSafe)
+      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+      const ownerAddresses = await gnosisSafe.getOwners()
+      const owners = getOwnersFrom(ownerNames, ownerAddresses.sort())
+
+      await loadSafe(safeName, safeAddress, owners, addSafe)

      const url = `${SAFELIST_ADDRESS}/${safeAddress}`
      history.push(url)
--- a/src/routes/open/utils/safeDataExtractor.js
+++ b/src/routes/open/utils/safeDataExtractor.js
@ -1,4 +1,6 @@
 // @flow
+import { makeOwner } from '~/routes/safe/store/models/owner'
+
 export const getAccountsFrom = (values: Object): string[] => {
  const accounts = Object.keys(values)
    .sort()
@ -15,6 +17,17 @@ export const getNamesFrom = (values: Object): string[] => {
  return accounts.map(account => values[account]).slice(0, values.owners)
 }

+export const getOwnersFrom = (
+  names: string[],
+  addresses: string[],
+): Array<string, string> => {
+  const owners = names.map((name: string, index: number) => makeOwner(
+    { name, address: addresses[index] },
+  ))
+
+  return owners
+}
+
 export const getThresholdFrom = (values: Object): number => Number(values.confirmations)

 export const getSafeNameFrom = (values: Object): string => values.name
--- a/src/test/builder/safe.dom.utils.js
+++ b/src/test/builder/safe.dom.utils.js
@ -12,7 +12,7 @@ import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
 import { sleep } from '~/utils/timer'
 import { history } from '~/store'
 import AppRoutes from '~/routes'
-import { SAFELIST_ADDRESS, SETTINS_ADDRESS } from '~/routes/routes'
+import { SAFELIST_ADDRESS } from '~/routes/routes'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'

 export const EXPAND_BALANCE_INDEX = 0
--- a/src/test/utils/DOMNavigation/index.js
+++ b/src/test/utils/DOMNavigation/index.js
@ -1,3 +1,3 @@
 // @flow

-export * from './tokens'
+export * from './tokens'
--- a/yarn.lock
+++ b/yarn.lock
@ -6267,11 +6267,16 @@ ejs@^2.6.1:
  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
  integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==

-electron-to-chromium@^1.3.122, electron-to-chromium@^1.3.150, electron-to-chromium@^1.3.47:
+electron-to-chromium@^1.3.122, electron-to-chromium@^1.3.47:
  version "1.3.158"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.158.tgz#5e16909dcfd25ab7cd1665114ee381083a3ee858"
  integrity sha512-wJsJaWsViNQ129XPGmyO5gGs1jPMHr9vffjHAhUje1xZbEzQcqbENdvfyRD9q8UF0TgFQFCCUbaIpJarFbvsIg==

+electron-to-chromium@^1.3.150:
+  version "1.3.155"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.155.tgz#ebf0cc8eeaffd6151d1efad60fd9e021fb45fd3a"
+  integrity sha512-/ci/XgZG8jkLYOgOe3mpJY1onxPPTDY17y7scldhnSjjZqV6VvREG/LvwhRuV7BJbnENFfuDWZkSqlTh4x9ZjQ==
+
 elliptic@6.3.3:
  version "6.3.3"
  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.3.tgz#5482d9646d54bcb89fd7d994fc9e2e9568876e3f"
@ -10728,11 +10733,16 @@ loglevel-colored-level-prefix@^1.0.0:
    chalk "^1.1.3"
    loglevel "^1.4.1"

-loglevel@^1.4.1, loglevel@^1.6.2:
+loglevel@^1.4.1:
  version "1.6.3"
  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.3.tgz#77f2eb64be55a404c9fd04ad16d57c1d6d6b1280"
  integrity sha512-LoEDv5pgpvWgPF4kNYuIp0qqSJVWak/dML0RY74xlzMZiT9w77teNAwKYKWBTYjlokMirg+o3jBwp+vlLrcfAA==

+loglevel@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.2.tgz#668c77948a03dbd22502a3513ace1f62a80cc372"
+  integrity sha512-Jt2MHrCNdtIe1W6co3tF5KXGRkzF+TYffiQstfXa04mrss9IKXzAAXYWak8LbZseAQY03sH2GzMCMU0ZOUc9bg==
+
 looper@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/looper/-/looper-2.0.0.tgz#66cd0c774af3d4fedac53794f742db56da8f09ec"
@ -13595,7 +13605,7 @@ react-transition-group@^4.0.0:
    object-assign "^4.1.0"
    prop-types "^15.5.10"

-react@^16.8.3, react@^16.8.6:
+react@^16.7.0, react@^16.8.3, react@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==