feat(sdk): apply new ui design to withdrow flow

packages/extension/src/ui/locales/en/transaction.js

@@ -3,11 +3,7 @@ export default {
         create: {
             proof: 'Creating Proof',
         },
-        encrypt: {
-            keys: 'Encrypt Viewing Keys',
-        },
         send: 'Sending Transaction',
-        approve: 'Approve Transaction',
         confirmed: 'Confirming Transaction',
         sign: 'Signing Transaction',
         relay: 'Relaying Transaction',
@@ -16,6 +12,12 @@ export default {
     approve: {
         submit: 'Approve Transaction',
     },
+    request: {
+        signature: {
+            _: 'Signature Request',
+            received: 'Signature Received',
+        },
+    },
     waiting: {
         sign: 'Please sign the transaction in MetaMask',
     },
@@ -37,8 +39,4 @@ export default {
         },
     },
     success: 'Transaction completed!',
-    history: {
-        _: 'Transaction History',
-        empty: 'You have no transactions.',
-    },
 };

packages/extension/src/ui/locales/en/withdraw.js

@@ -1,17 +1,28 @@
 export default {
-    confirm: {
-        title: 'Withdraw',
-        submit: 'Create Proof',
-        explain: 'Check the above details are correct before proceeding.',
+    title: 'Withdraw ZkTokens',
+    approve: {
+        description: `A signature is required to withdraw ZkNotes.
+            The SDK will pick the most suitable notes for the transaction.
+            Check the transaction details are correct before proceeding.
+        `,
+        submit: 'Approve Withdraw',
+    },
+    sign: {
+        description: `A MetaMask signature is required to withdraw ZkNotes.
+            The signature should contain the following values:
+        `,
+        submit: 'Sign Notes',
     },
-    notes: {
-        title: 'Approve Note Spending',
-        submit: 'Sign',
+    confirm: {
+        description: `A MetaMask signature is required to withdraw ZkNotes.
+            The signature should contain the following values:
+        `,
     },
     send: {
-        title: 'Send Transaction',
-        submit: 'Send',
-        explain: 'AZTEC sends transactions through the Gas Station Network so you don\'t pay gas.',
+        step: 'Withdrawing ZkTokens',
+        description: `A MetaMask signature is required to withdraw ZkNotes.
+            The signature should contain the following values:
+        `,
     },
     from: 'From',
     amount: {

packages/extension/src/ui/mock/apis.js

@@ -80,6 +80,15 @@ export default mergeApis(realApis, {
             value: randomInt(100),
             asset: assets[0],
         }),
+        signProof: () => {
+            const approval = window.confirm('Sign notes?');
+            return {
+                approval,
+                error: approval ? null : {
+                    message: 'User denied transaction.',
+                },
+            };
+        },
     },
     proof: {
         createNoteFromBalance: ({

packages/extension/src/ui/mock/config/routes.js

@@ -8,11 +8,12 @@ import Login from '~/ui/pages/Login';
 import NoteAccess from '~/ui/pages/NoteAccess';
 import Icons from '~/ui/views/playground/Icons';
 import DepositContent from '~/ui/views/DepositContent';
+import WithdrawContent from '~/ui/views/WithdrawContent';
 import depositSteps from '~/ui/steps/deposit';
+import withdrawSteps from '~/ui/steps/withdraw';
 import createNoteFromBalanceSteps from '~/ui/steps/createNoteFromBalance';
 import {
     registerSteps,
-    withdrawSteps,
     sendSteps,
 } from '~/ui/config/steps';
 
@@ -103,15 +104,27 @@ export default {
     },
     withdraw: {
         path: 'withdraw',
-        step: withdrawSteps.gsn[0],
+        Content: WithdrawContent,
+        steps: withdrawSteps.gsn,
+        initialStep: 0,
         routes: {
             sign: {
                 path: 'sign',
-                step: withdrawSteps.gsn[1],
+                Content: WithdrawContent,
+                steps: withdrawSteps.gsn,
+                initialStep: 1,
+            },
+            confirm: {
+                path: 'confirm',
+                Content: WithdrawContent,
+                steps: withdrawSteps.gsn,
+                initialStep: 2,
             },
             send: {
                 path: 'send',
-                step: withdrawSteps.gsn[2],
+                Content: WithdrawContent,
+                steps: withdrawSteps.gsn,
+                initialStep: 3,
             },
         },
     },

packages/extension/src/ui/mock/initialProps.js

@@ -82,12 +82,11 @@ export default {
     withdraw: {
         asset: assets[0],
         currentAddress: addresses[0],
-        amount: randomInt(1, 100),
+        amount: randomInt(1, 10000),
         publicOwner: randomAddress(),
-    },
-    'withdraw.sign': {
         proof: {
-            inputNotes: generate(5, randomRawNote),
+            proofHash: `0x${randomId(150)}`,
+            spender: addresses[1],
         },
     },
     send: {

packages/extension/src/ui/pages/Withdraw.jsx

@@ -9,11 +9,11 @@ import {
 } from '~/ui/config/settings';
 import parseInputAmount from '~/ui/utils/parseInputAmount';
 import makeAsset from '~/ui/utils/makeAsset';
-import AnimatedTransaction from '~/ui/views/handlers/AnimatedTransaction';
-import { withdrawSteps } from '~/ui/config/steps';
+import StepsHandler from '~/ui/views/handlers/StepsHandler';
+import WithdrawContent from '~/ui/views/WithdrawContent';
+import withdrawSteps from '~/ui/steps/withdraw';
 
 const Withdraw = ({
-    initialStep,
     currentAccount,
     assetAddress,
     amount,
@@ -46,16 +46,15 @@ const Withdraw = ({
     };
 
     return (
-        <AnimatedTransaction
-            initialStep={initialStep}
+        <StepsHandler
             steps={steps}
             fetchInitialData={fetchInitialData}
+            Content={WithdrawContent}
         />
     );
 };
 
 Withdraw.propTypes = {
-    initialStep: PropTypes.number,
     currentAccount: PropTypes.shape({
         address: PropTypes.string.isRequired,
     }).isRequired,
@@ -67,7 +66,6 @@ Withdraw.propTypes = {
 };
 
 Withdraw.defaultProps = {
-    initialStep: 0,
     numberOfInputNotes: emptyIntValue,
 };
 

packages/extension/src/ui/steps/withdraw.js

@@ -0,0 +1,101 @@
+import apis from '~uiModules/apis';
+
+const stepApprove = {
+    name: 'approve',
+    blockStyle: 'linked',
+    descriptionKey: 'withdraw.approve.description',
+    tasks: [
+        {
+            run: apis.proof.withdraw,
+        },
+    ],
+    submitTextKey: 'withdraw.approve.submit',
+};
+
+const stepSignNotes = {
+    name: 'signNotes',
+    blockStyle: 'collapsed',
+    descriptionKey: 'withdraw.sign.description',
+    tasks: [
+        {
+            type: 'sign',
+            run: apis.note.signProof,
+        },
+    ],
+    autoStart: true,
+    submitTextKey: 'withdraw.sign.submit',
+};
+
+const stepConfirm = {
+    name: 'confirm',
+    blockStyle: 'collapsed',
+    descriptionKey: 'withdraw.confirm.description',
+    tasks: [],
+    submitTextKey: 'transaction.send.submit',
+};
+
+const stepSend = {
+    name: 'send',
+    blockStyle: 'sealed',
+    descriptionKey: 'withdraw.send.description',
+    tasks: [
+        {
+            titleKey: 'transaction.step.create.proof',
+            run: apis.mock,
+        },
+        {
+            titleKey: 'transaction.step.sign',
+            run: apis.mock,
+        },
+        {
+            titleKey: 'withdraw.send.step',
+            type: 'sign',
+            run: apis.asset.confidentialTransferFrom,
+        },
+        {
+            titleKey: 'transaction.confirmed',
+        },
+    ],
+    autoStart: true,
+    submitTextKey: 'transaction.send.submit',
+};
+
+const stepSendViaGSN = {
+    name: 'send',
+    blockStyle: 'sealed',
+    descriptionKey: 'transaction.gsn.send.description',
+    tasks: [
+        {
+            titleKey: 'transaction.step.create.proof',
+            run: apis.mock,
+        },
+        {
+            titleKey: 'transaction.step.sign',
+            run: apis.mock,
+        },
+        {
+            titleKey: 'transaction.step.relay',
+            run: apis.asset.confidentialTransfer,
+        },
+        {
+            titleKey: 'transaction.confirmed',
+        },
+    ],
+    autoStart: true,
+    submitTextKey: 'transaction.send.submit',
+};
+
+export default {
+    gsn: [
+        stepApprove,
+        stepSignNotes,
+        stepConfirm,
+        stepSendViaGSN,
+    ],
+    metamask: [
+        stepApprove,
+        stepSignNotes,
+        stepConfirm,
+        stepSend,
+    ],
+};