Merge pull request #1055 from Koniverse/issue-881

[Issue-881]: Update UI Scan QR screen by design

ios/Podfile.lock

@@ -1013,4 +1013,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d2e75413a9d4d28b9ab6ee8ae7baea6ba4324a25
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.12.1

patches/@polkadot+ui-shared+3.6.3.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/@polkadot/ui-shared/cjs/icons/polkadot.js b/node_modules/@polkadot/ui-shared/cjs/icons/polkadot.js
+index 29211ea..9a8e774 100644
+--- a/node_modules/@polkadot/ui-shared/cjs/icons/polkadot.js
++++ b/node_modules/@polkadot/ui-shared/cjs/icons/polkadot.js
+@@ -20,7 +20,7 @@ const SCHEMES_TOTAL = SCHEMES
+ const OUTER_CIRCLE = {
+     cx: C,
+     cy: C,
+-    fill: '#eee',
++    fill: 'transparent',
+     r: C
+ };
+ let zeroHash = new Uint8Array();
+diff --git a/node_modules/@polkadot/ui-shared/icons/polkadot.js b/node_modules/@polkadot/ui-shared/icons/polkadot.js
+index b7f439d..766c0e0 100644
+--- a/node_modules/@polkadot/ui-shared/icons/polkadot.js
++++ b/node_modules/@polkadot/ui-shared/icons/polkadot.js
+@@ -17,7 +17,7 @@ const SCHEMES_TOTAL = SCHEMES
+ const OUTER_CIRCLE = {
+     cx: C,
+     cy: C,
+-    fill: '#eee',
++    fill: 'trasparent',
+     r: C
+ };
+ let zeroHash = new Uint8Array();

src/components/QrCodeScanner.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import QRCodeScanner from 'react-native-qrcode-scanner';
+import { ScannerStyles } from 'styles/scanner';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import Text from 'components/Text';
+import i18n from 'utils/i18n/i18n';
+import { IconButton } from 'components/IconButton';
+import { CaretLeft, ImageSquare, Info } from 'phosphor-react-native';
+import { BarcodeFinder } from 'screens/Shared/BarcodeFinder';
+import { Warning } from 'components/Warning';
+import { Button, Icon } from 'components/design-system-ui';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { BarCodeReadEvent } from 'react-native-camera';
+
+const CancelButtonStyle: StyleProp<ViewStyle> = {
+  position: 'absolute',
+  left: 16,
+  zIndex: 10,
+  width: 40,
+  height: 40,
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const LibraryButtonStyle: StyleProp<ViewStyle> = {
+  position: 'absolute',
+  right: 16,
+  zIndex: 10,
+  width: 40,
+  height: 40,
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const BottomSubContentStyle: StyleProp<ViewStyle> = {
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  marginHorizontal: 16,
+  flex: 1,
+};
+
+interface Props {
+  error?: string;
+  onPressLibraryBtn?: () => Promise<void>;
+  onPressCancel: () => void;
+  onSuccess: (e: BarCodeReadEvent) => void;
+}
+
+export const QrCodeScanner = ({ error, onPressLibraryBtn, onPressCancel, onSuccess }: Props) => {
+  const theme = useSubWalletTheme().swThemes;
+  return (
+    <QRCodeScanner
+      reactivate={true}
+      reactivateTimeout={5000}
+      showMarker={true}
+      onRead={e => {
+        onSuccess(e);
+      }}
+      containerStyle={ScannerStyles.ContainerStyle}
+      cameraStyle={ScannerStyles.CameraStyle}
+      topViewStyle={ScannerStyles.ContainerStyle}
+      customMarker={
+        <View style={ScannerStyles.RectangleContainerStyle}>
+          <View style={ScannerStyles.TopOverlayStyle}>
+            <View style={[ScannerStyles.HeaderStyle]}>
+              <Text style={ScannerStyles.HeaderTitleTextStyle}>{i18n.title.scanQrCode}</Text>
+              <IconButton icon={CaretLeft} size={24} style={CancelButtonStyle} onPress={onPressCancel} />
+              <IconButton icon={Info} size={24} style={LibraryButtonStyle} />
+            </View>
+          </View>
+          <View style={ScannerStyles.CenterOverlayStyle}>
+            <View style={ScannerStyles.LeftAndRightOverlayStyle} />
+
+            <View style={ScannerStyles.RectangleStyle}>
+              <BarcodeFinder />
+            </View>
+
+            <View style={ScannerStyles.LeftAndRightOverlayStyle} />
+          </View>
+          <View style={ScannerStyles.BottomOverlayStyle}>
+            <View style={[BottomSubContentStyle, { marginBottom: theme.padding }]}>
+              {!!error && <Warning message={error} isDanger />}
+            </View>
+            {onPressLibraryBtn && (
+              <Button
+                icon={<Icon phosphorIcon={ImageSquare} weight={'fill'} />}
+                type={'secondary'}
+                onPress={onPressLibraryBtn}>
+                {i18n.buttonTitles.uploadFromPhotos}
+              </Button>
+            )}
+            <View style={BottomSubContentStyle} />
+          </View>
+        </View>
+      }
+    />
+  );
+};

src/components/Scanner/AddressScanner.tsx

@@ -1,22 +1,12 @@
 import React from 'react';
-import { SafeAreaView, StatusBar, StyleProp, View, ViewStyle } from 'react-native';
-import Text from 'components/Text';
+import { SafeAreaView, StatusBar } from 'react-native';
 import { ScannerStyles } from 'styles/scanner';
 import { STATUS_BAR_LIGHT_CONTENT } from 'styles/sharedStyles';
-import QRCodeScanner from 'react-native-qrcode-scanner';
-import { CaretLeft, ImageSquare } from 'phosphor-react-native';
-import { ColorMap } from 'styles/color';
-import { BarcodeFinder } from 'screens/Shared/BarcodeFinder';
 import { BarCodeReadEvent } from 'react-native-camera';
-import i18n from 'utils/i18n/i18n';
 import ModalBase from 'components/Modal/Base/ModalBase';
-import { rectDimensions } from 'constants/scanner';
-import { IconButton } from 'components/IconButton';
-import { Warning } from 'components/Warning';
 import { launchImageLibrary } from 'react-native-image-picker';
 import RNQRGenerator from 'rn-qr-generator';
-import { Icon } from 'components/design-system-ui';
-import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { QrCodeScanner } from 'components/QrCodeScanner';
 
 export interface AddressScannerProps {
   onPressCancel: () => void;
@@ -26,41 +16,13 @@ export interface AddressScannerProps {
   isShowError?: boolean;
 }
 
-const CancelButtonStyle: StyleProp<ViewStyle> = {
-  position: 'absolute',
-  left: 16,
-  zIndex: 10,
-  width: 40,
-  height: 40,
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-const LibraryButtonStyle: StyleProp<ViewStyle> = {
-  position: 'absolute',
-  right: 16,
-  zIndex: 10,
-  width: 40,
-  height: 40,
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-const BottomSubContentStyle: StyleProp<ViewStyle> = {
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  marginHorizontal: 16,
-  flex: 1,
-};
-
 export const AddressScanner = ({
   onPressCancel,
   onChangeAddress,
   qrModalVisible,
   error,
   isShowError = false,
 }: AddressScannerProps) => {
-  const theme = useSubWalletTheme().swThemes;
   const onSuccess = (e: BarCodeReadEvent) => {
     try {
       onChangeAddress(e.data);
@@ -85,50 +47,12 @@ export const AddressScanner = ({
   return (
     <ModalBase isVisible={qrModalVisible} style={{ flex: 1, width: '100%', margin: 0 }}>
       <SafeAreaView style={ScannerStyles.SafeAreaStyle} />
-      <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} backgroundColor={theme.colorBgSecondary} translucent={true} />
-      <QRCodeScanner
-        reactivate={true}
-        reactivateTimeout={5000}
-        showMarker={true}
-        onRead={e => {
-          onSuccess(e);
-        }}
-        containerStyle={ScannerStyles.ContainerStyle}
-        cameraStyle={ScannerStyles.CameraStyle}
-        topViewStyle={ScannerStyles.ContainerStyle}
-        customMarker={
-          <View style={ScannerStyles.RectangleContainerStyle}>
-            <View style={ScannerStyles.TopOverlayStyle}>
-              <View style={[ScannerStyles.HeaderStyle, { backgroundColor: theme.colorBgSecondary }]}>
-                <Text style={ScannerStyles.HeaderTitleTextStyle}>{i18n.title.scanQrCode}</Text>
-                <IconButton icon={CaretLeft} style={CancelButtonStyle} onPress={onPressCancel} />
-                <IconButton
-                  icon={() => <Icon phosphorIcon={ImageSquare} weight={'fill'} size={'sm'} />}
-                  style={LibraryButtonStyle}
-                  onPress={onPressLibraryBtn}
-                />
-              </View>
-            </View>
-            <View style={ScannerStyles.CenterOverlayStyle}>
-              <View style={ScannerStyles.LeftAndRightOverlayStyle} />
-
-              <View style={ScannerStyles.RectangleStyle}>
-                <BarcodeFinder
-                  width={rectDimensions}
-                  height={rectDimensions}
-                  borderColor={ColorMap.light}
-                  borderWidth={2}
-                />
-              </View>
-
-              <View style={ScannerStyles.LeftAndRightOverlayStyle} />
-            </View>
-            <View style={ScannerStyles.BottomOverlayStyle}>
-              <View style={BottomSubContentStyle}>{!!error && <Warning message={error} isDanger />}</View>
-              <View style={BottomSubContentStyle} />
-            </View>
-          </View>
-        }
+      <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} backgroundColor={'transparent'} translucent={true} />
+      <QrCodeScanner
+        onPressCancel={onPressCancel}
+        onPressLibraryBtn={onPressLibraryBtn}
+        onSuccess={onSuccess}
+        error={error}
       />
     </ModalBase>
   );

src/components/Scanner/QrAddressScanner.tsx

@@ -1,26 +1,19 @@
-import Text from 'components/Text';
-import { Warning } from 'components/Warning';
 import { SCAN_TYPE } from 'constants/qr';
 import React, { useCallback, useEffect, useState } from 'react';
-import { SafeAreaView, StatusBar, StyleProp, View, ViewStyle } from 'react-native';
-import QRCodeScanner from 'react-native-qrcode-scanner';
-import { BarcodeFinder } from 'screens/Shared/BarcodeFinder';
-import { ColorMap } from 'styles/color';
+import { SafeAreaView, StatusBar } from 'react-native';
 import { ScannerStyles } from 'styles/scanner';
 import { STATUS_BAR_LIGHT_CONTENT } from 'styles/sharedStyles';
 import { QrAccount } from 'types/qr/attach';
 import i18n from 'utils/i18n/i18n';
-import { rectDimensions } from 'constants/scanner';
 import { BarCodeReadEvent } from 'react-native-camera';
 import { getFunctionScan } from 'utils/scanner/attach';
 import ModalBase from 'components/Modal/Base/ModalBase';
-import { IconButton } from 'components/IconButton';
-import { CaretLeft, ImageSquare } from 'phosphor-react-native';
 import { launchImageLibrary } from 'react-native-image-picker';
 import RNQRGenerator from 'rn-qr-generator';
 import { updatePreventLock } from 'stores/MobileSettings';
 import { useDispatch } from 'react-redux';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { QrCodeScanner } from 'components/QrCodeScanner';
 
 interface Props {
   visible: boolean;
@@ -29,25 +22,6 @@ interface Props {
   type: SCAN_TYPE.QR_SIGNER | SCAN_TYPE.SECRET;
 }
 
-const CancelButtonStyle: StyleProp<ViewStyle> = {
-  position: 'absolute',
-  left: 16,
-  zIndex: 10,
-};
-
-const LibraryButtonStyle: StyleProp<ViewStyle> = {
-  position: 'absolute',
-  right: 16,
-  zIndex: 10,
-};
-
-const BottomSubContentStyle: StyleProp<ViewStyle> = {
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  marginHorizontal: 16,
-  flex: 1,
-};
-
 const QrAddressScanner = ({ visible, onHideModal, onSuccess, type }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const [error, setError] = useState<string>('');
@@ -108,43 +82,11 @@ const QrAddressScanner = ({ visible, onHideModal, onSuccess, type }: Props) => {
     <ModalBase isVisible={visible} style={{ flex: 1, width: '100%', margin: 0 }}>
       <SafeAreaView style={ScannerStyles.SafeAreaStyle} />
       <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} backgroundColor={theme.colorBgSecondary} translucent={true} />
-      <QRCodeScanner
-        reactivate={true}
-        reactivateTimeout={5000}
-        showMarker={true}
-        onRead={handleRead}
-        containerStyle={ScannerStyles.ContainerStyle}
-        cameraStyle={ScannerStyles.CameraStyle}
-        topViewStyle={ScannerStyles.ContainerStyle}
-        customMarker={
-          <View style={ScannerStyles.RectangleContainerStyle}>
-            <View style={ScannerStyles.TopOverlayStyle}>
-              <View style={[ScannerStyles.HeaderStyle, { backgroundColor: theme.colorBgSecondary }]}>
-                <Text style={ScannerStyles.HeaderTitleTextStyle}>{i18n.title.scanQrCode}</Text>
-                <IconButton icon={CaretLeft} style={CancelButtonStyle} onPress={onHideModal} />
-                <IconButton icon={ImageSquare} style={LibraryButtonStyle} onPress={onPressLibraryBtn} />
-              </View>
-            </View>
-            <View style={ScannerStyles.CenterOverlayStyle}>
-              <View style={ScannerStyles.LeftAndRightOverlayStyle} />
-
-              <View style={[ScannerStyles.RectangleStyle]}>
-                <BarcodeFinder
-                  width={rectDimensions}
-                  height={rectDimensions}
-                  borderColor={ColorMap.light}
-                  borderWidth={2}
-                />
-              </View>
-
-              <View style={ScannerStyles.LeftAndRightOverlayStyle} />
-            </View>
-            <View style={ScannerStyles.BottomOverlayStyle}>
-              <View style={BottomSubContentStyle}>{!!error && <Warning message={error} isDanger />}</View>
-              <View style={BottomSubContentStyle} />
-            </View>
-          </View>
-        }
+      <QrCodeScanner
+        onPressCancel={onHideModal}
+        onPressLibraryBtn={onPressLibraryBtn}
+        onSuccess={handleRead}
+        error={error}
       />
     </ModalBase>
   );