Merge pull request #2791 from Emurgo/Ahmed/send-page-pt2-updated

Wallet send page revamp part 2

packages/yoroi-extension/app/components/common/TextField.js

@@ -1,12 +1,13 @@
 /* eslint-disable no-nested-ternary */
 // @flow
+import React from 'react';
 import type { ElementRef, Node } from 'react';
 import { IconButton, InputAdornment, TextField as TextFieldBase, useTheme } from '@mui/material';
 import { ReactComponent as ErrorIcon }  from '../../assets/images/forms/error.inline.svg';
 import { ReactComponent as DoneIcon }  from '../../assets/images/forms/done.inline.svg';
 import { ReactComponent as EyeIcon }  from '../../assets/images/forms/password-eye-close.inline.svg';
 import { ReactComponent as CloseEyeIcon }  from '../../assets/images/forms/password-eye.inline.svg';
-import React from 'react';
+import { ReactComponent as QRLogo } from '../../assets/images/qr-code.inline.svg';
 
 type Props = {|
   error?: boolean | string,
@@ -23,6 +24,7 @@ type Props = {|
   inputRef?: ?{| current: null | ElementRef<'input'> |},
   revamp?: boolean,
   placeholder?: string,
+  QRHandler?: Function,
 |};
 
 function TextField({
@@ -40,6 +42,7 @@ function TextField({
   autoFocus,
   revamp,
   placeholder,
+  QRHandler,
   ...props
 }: Props): Node {
   const theme = useTheme();
@@ -90,6 +93,20 @@ function TextField({
                 {showPassword ? <EyeIcon /> : <CloseEyeIcon />}
               </IconButton>
             </InputAdornment>
+          ) : QRHandler ? (
+            <InputAdornment
+              position="end"
+              sx={{ minWidth: '52px', display: 'flex', justifyContent: 'flex-end' }}
+            >
+              {Boolean(error) === true ? <ErrorIcon /> : done === true ? <DoneIcon /> : null}
+              <IconButton
+                aria-label="QR Code Scanner"
+                onClick={QRHandler}
+                edge="end"
+              >
+                <QRLogo />
+              </IconButton>
+            </InputAdornment>
           ) : (
             <InputAdornment position="end">
               {Boolean(error) === true ? <ErrorIcon /> : done === true ? <DoneIcon /> : null}
@@ -116,6 +133,7 @@ TextField.defaultProps = {
   autoFocus: false,
   revamp: false,
   placeholder: undefined,
+  QRHandler: null,
 };
 
 export default TextField;