feat(sdk): allow to retry with metamask if failed to send via gsn

packages/extension/guacamole.config.js

@@ -28,11 +28,12 @@ module.exports = {
             xs: 'xl',
             xxs: 'xl',
         },
-        buttonSizeMap: {
-            l: '44px',
-        },
         buttonThemeMap: {
             primary: 'primary',
+            secondary: 'grey-light',
+        },
+        buttonTextSizeMap: {
+            xl: 's',
         },
         inputFontSizeKeyMap: {
             l: 'xs',
@@ -44,15 +45,6 @@ module.exports = {
             l: '1220px',
             xl: '1440px',
         },
-        buttonTextSizeMap: {
-            xxs: 'xxs',
-            xs: 'xs',
-            s: 's',
-            m: 's',
-            l: 's',
-            xl: 's',
-            xxl: 's',
-        },
         fontSizeMap: {
             xxs: '12px',
             xs: '14px',

packages/extension/src/ui/components/Button/button.scss

@@ -64,3 +64,8 @@
     background: $bg-gradient !important;
   }
 }
+
+.secondary {
+  background: #c5c6cc !important;
+  color: map-get($color-map, 'white') !important;
+}

packages/extension/src/ui/components/Button/index.jsx

@@ -40,7 +40,7 @@ const CustomButton = ({
 CustomButton.propTypes = {
     testId: PropTypes.string,
     className: PropTypes.string,
-    theme: themeType,
+    theme: PropTypes.oneOf(['white', 'primary', 'secondary']),
     outlined: PropTypes.bool,
     disabled: PropTypes.bool,
     loading: PropTypes.bool,

packages/extension/src/ui/components/ErrorBlock/error.scss

@@ -0,0 +1,11 @@
+@import '../../styles/variables';
+
+$block-radius: map-get($rounded-corner-map, 'm');
+
+.left-button {
+  border-radius: 0 0 0 $block-radius !important;
+}
+
+.right-button {
+  border-radius: 0 0 $block-radius 0 !important;
+}

packages/extension/src/ui/components/ErrorBlock/index.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+    FlexBox,
+    Block,
+    Text,
+    Icon,
+} from '@aztec/guacamole-ui';
+import i18n from '~/ui/helpers/i18n';
+import EntityBlock from '~/ui/components/AnimatedBlocks/EntityBlock';
+import Button from '~/ui/components/Button';
+import styles from './error.scss';
+
+const ErrorBlock = ({
+    className,
+    message,
+    leftButtonText,
+    onClickLeftButton,
+    rightButtonText,
+    onClickRightButton,
+}) => {
+    const buttonNode = (
+        <FlexBox
+            align="center"
+            direction="row"
+            valing="center"
+            nowrap
+            expand
+        >
+            {!!(leftButtonText && onClickLeftButton) && (
+                <Button
+                    testId="button-step-previous"
+                    className={styles['left-button']}
+                    theme="white"
+                    size="m"
+                    text={leftButtonText}
+                    onSubmit={onClickLeftButton}
+                    expand
+                />
+            )}
+            {!!(rightButtonText && onClickRightButton) && (
+                <Button
+                    testId="button-step-next"
+                    className={styles['right-button']}
+                    theme="secondary"
+                    size="m"
+                    text={rightButtonText}
+                    onSubmit={onClickRightButton}
+                    expand
+                />
+            )}
+        </FlexBox>
+    );
+
+    return (
+        <EntityBlock
+            className={classnames(
+                className,
+                styles.block,
+            )}
+            title={(
+                <Text
+                    text={i18n.t('transaction.error')}
+                    color="red"
+                    size="xs"
+                    weight="semibold"
+                />
+            )}
+            titleFootnote={(
+                <Icon
+                    name="warning"
+                    color="red"
+                    size="m"
+                />
+            )}
+            content={(
+                <Block padding="m 0">
+                    <Text
+                        text={message}
+                        size="m"
+                        weight="light"
+                    />
+                </Block>
+            )}
+            layer={1}
+        >
+            {buttonNode}
+        </EntityBlock>
+    );
+};
+
+ErrorBlock.propTypes = {
+    className: PropTypes.string,
+    message: PropTypes.string.isRequired,
+    leftButtonText: PropTypes.string,
+    onClickLeftButton: PropTypes.func,
+    rightButtonText: PropTypes.string,
+    onClickRightButton: PropTypes.func,
+};
+
+ErrorBlock.defaultProps = {
+    className: '',
+    leftButtonText: '',
+    onClickLeftButton: null,
+    rightButtonText: '',
+    onClickRightButton: null,
+};
+
+export default ErrorBlock;

packages/extension/src/ui/components/Footer/index.jsx

@@ -68,6 +68,7 @@ const Footer = ({
                     testId="button-step-previous"
                     className={styles.button}
                     theme="white"
+                    size="xl"
                     text={cancelText || i18n.t('cancel')}
                     onSubmit={onPrevious}
                     disabled={loading || disableOnPrevious}
@@ -78,6 +79,7 @@ const Footer = ({
                 <Button
                     testId="button-step-next"
                     className={styles.button}
+                    size="xl"
                     text={nextText || i18n.t('next')}
                     onSubmit={onNext}
                     loading={loading}

packages/extension/src/ui/components/StepContent/Footer.jsx

@@ -220,6 +220,7 @@ class Footer extends PureComponent {
                         testId="button-step-previous"
                         className={styles['footer-button']}
                         theme="white"
+                        size="xl"
                         text={prevText}
                         onSubmit={onPrevious}
                         disabled={loading || disableOnPrevious}
@@ -230,6 +231,7 @@ class Footer extends PureComponent {
                     <Button
                         testId="button-step-next"
                         className={styles['footer-button']}
+                        size="xl"
                         text={nextText}
                         onSubmit={onNext}
                         loading={loading}

packages/extension/src/ui/components/StepContent/content.scss

@@ -60,6 +60,5 @@ $footer-min-height: map-get($button-size-map, 'xl');
 
 .footer-button {
   flex: 1;
-  height: $footer-min-height !important;
   border-radius: 0 !important;
 }

packages/extension/src/ui/components/StepContent/index.jsx

@@ -35,6 +35,7 @@ const StepContent = ({
     disableOnPrevious,
     disableOnNext,
     loading,
+    hideFooter,
     error,
     childError,
     onPrevious,
@@ -133,23 +134,25 @@ const StepContent = ({
                         </Block>
                     )}
                 </div>
-                <Footer
-                    prevText={cancelText
-                        || (cancelTextKey && i18n.t(cancelTextKey))
-                        || ''}
-                    nextText={submitText
-                        || (submitTextKey && i18n.t(submitTextKey))
-                        || ''}
-                    submitType={submitType}
-                    submitMessage={submitMessage}
-                    disableOnPrevious={disableOnPrevious}
-                    disableOnNext={disableOnNext}
-                    loading={loading}
-                    error={error}
-                    onPrevious={onPrevious}
-                    onNext={onNext}
-                    onRetry={onRetry}
-                />
+                {!hideFooter && (
+                    <Footer
+                        prevText={cancelText
+                            || (cancelTextKey && i18n.t(cancelTextKey))
+                            || ''}
+                        nextText={submitText
+                            || (submitTextKey && i18n.t(submitTextKey))
+                            || ''}
+                        submitType={submitType}
+                        submitMessage={submitMessage}
+                        disableOnPrevious={disableOnPrevious}
+                        disableOnNext={disableOnNext}
+                        loading={loading}
+                        error={error}
+                        onPrevious={onPrevious}
+                        onNext={onNext}
+                        onRetry={onRetry}
+                    />
+                )}
             </FlexBox>
         </div>
     );
@@ -181,6 +184,7 @@ StepContent.propTypes = {
     onNext: PropTypes.func,
     onRetry: PropTypes.func,
     loading: PropTypes.bool,
+    hideFooter: PropTypes.bool,
     error: errorShape,
     childError: errorShape,
 };
@@ -204,6 +208,7 @@ StepContent.defaultProps = {
     onNext: null,
     onRetry: null,
     loading: false,
+    hideFooter: false,
     error: null,
     childError: null,
 };

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

@@ -45,6 +45,9 @@ export default {
             relayer: 'Relayer is not available at the moment. Please try again later.',
         },
     },
+    error: {
+        _: 'Error',
+    },
     success: 'Transaction completed!',
     autoClose: 'This window will close automatically when the transaction is confirmed.',
 };

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

@@ -70,6 +70,7 @@ const Deposit = ({
 
         return {
             steps,
+            retryWithMetaMaskStep: depositSteps.metamask.slice(-1)[0],
             currentAccount,
             assetAddress,
             asset,

packages/extension/src/ui/styles/guacamole-vars.js

@@ -1,26 +1,26 @@
 // auto-generated by @aztec/guacamole-ui
 export const buttonThemeMap = {
   primary: 'primary',
-  secondary: 'primary-lighter',
+  secondary: 'grey-light',
   white: 'white',
 };
 export const buttonSizeMap = {
   xxs: '20px',
   xs: '24px',
   s: '28px',
   m: '32px',
-  l: '44px',
+  l: '40px',
   xl: '48px',
   xxl: '56px',
 };
 export const buttonTextSizeMap = {
   xxs: 'xxs',
-  xs: 'xs',
-  s: 's',
-  m: 's',
+  xs: 'xxs',
+  s: 'xs',
+  m: 'xs',
   l: 's',
   xl: 's',
-  xxl: 's',
+  xxl: 'm',
 };
 export const buttonSpacingHSizeMap = {
   xxs: 'm',

packages/extension/src/ui/styles/guacamole-vars.scss

@@ -1,7 +1,7 @@
 // auto-generated by @aztec/guacamole-ui
-$button-theme-map: ('primary':'primary','secondary':'primary-lighter','white':'white');
-$button-size-map: ('xxs':20px,'xs':24px,'s':28px,'m':32px,'l':44px,'xl':48px,'xxl':56px);
-$button-text-size-map: ('xxs':'xxs','xs':'xs','s':'s','m':'s','l':'s','xl':'s','xxl':'s');
+$button-theme-map: ('primary':'primary','secondary':'grey-light','white':'white');
+$button-size-map: ('xxs':20px,'xs':24px,'s':28px,'m':32px,'l':40px,'xl':48px,'xxl':56px);
+$button-text-size-map: ('xxs':'xxs','xs':'xxs','s':'xs','m':'xs','l':'s','xl':'s','xxl':'m');
 $button-spacing-h-size-map: ('xxs':'m','xs':'m','s':'l','m':'xl','l':'xl','xl':'xl','xxl':'xl');
 $button-border-width: 1px;
 $outlined-button-border-width: 2px;