WA-238 Fix async status on getExtensions when withdrawing safe's funds

src/components/layout/Paragraph/index.js

@@ -6,7 +6,7 @@ import styles from './index.scss'
 const cx = classNames.bind(styles)
 
 type Props = {
-  layout?: 'center' | 'left',
+  align?: 'right' | 'center' | 'left',
   noMargin?: boolean,
   bold?: boolean,
   size?: 'sm' | 'md' | 'lg' | 'xl',
@@ -17,11 +17,11 @@ type Props = {
 class Paragraph extends React.PureComponent<Props> {
   render() {
     const {
-      bold, children, color, layout, size, noMargin, ...props
+      bold, children, color, align, size, noMargin, ...props
     } = this.props
 
     return (
-      <p className={cx(styles.paragraph, { bold }, { noMargin }, size, layout)} {...props}>
+      <p className={cx(styles.paragraph, { bold }, { noMargin }, size, align)} {...props}>
         { children }
       </p>
     )

src/components/layout/Paragraph/index.scss

@@ -31,6 +31,10 @@
   text-align: left;
 }
 
+.right {
+  text-align: right;
+}
+
 .sm {
   font-size: $smallFontSize;
 }

src/routes/open/components/FormConfirmation/index.jsx

@@ -35,10 +35,10 @@ export default ({ address, tx }: Props) => ({ submitting }: FormProps) => {
     <Block>
       { !txFinished &&
         <React.Fragment>
-          <Paragraph center size="lg">
+          <Paragraph align="center" size="lg">
             You are about to create a Safe for keeping your funds more secure.
           </Paragraph>
-          <Paragraph center size="lg">
+          <Paragraph align="center" size="lg">
             Remember to check you have enough funds in your wallet.
           </Paragraph>
         </React.Fragment>

src/routes/safe/component/Withdrawn/Review.jsx

@@ -13,10 +13,10 @@ type FormProps = {
 const Review = () => ({ values }: FormProps) => (
   <Block>
     <Heading tag="h2">Review the Withdrawn Operation</Heading>
-    <Paragraph layout="left">
+    <Paragraph align="left">
       <Bold>Destination: </Bold> {values[DESTINATION_PARAM]}
     </Paragraph>
-    <Paragraph layout="left">
+    <Paragraph align="left">
       <Bold>Value in ETH: </Bold> {values[VALUE_PARAM]}
     </Paragraph>
   </Block>

src/routes/safe/component/Withdrawn/withdrawn.js

@@ -1,12 +1,17 @@
 // @flow
+import { getWeb3 } from '~/wallets/getWeb3'
 import { getGnosisSafeContract, getCreateDailyLimitExtensionContract } from '~/wallets/safeContracts'
 
 export const DESTINATION_PARAM = 'destination'
 export const VALUE_PARAM = 'ether'
 
 const withdrawn = async (values: Object, safeAddress: string, userAccount: string): Promise<void> => {
-  const gnosisSafe = getGnosisSafeContract().at(safeAddress)
-  const dailyLimitExtension = getCreateDailyLimitExtensionContract().at(gnosisSafe.getExtensions()[0])
+  const web3 = getWeb3()
+  const gnosisSafe = getGnosisSafeContract(web3).at(safeAddress)
+
+  const extensions = await gnosisSafe.getExtensions()
+  const dailyAddress = extensions[0]
+  const dailyLimitExtension = getCreateDailyLimitExtensionContract(web3).at(dailyAddress)
 
   if (await dailyLimitExtension.gnosisSafe() !== gnosisSafe.address) {
     throw new Error('Using an extension of different safe')