REF: QRCodeComponent from js to tsx

components/QRCodeComponent.tsx

@@ -4,12 +4,58 @@ import QRCode from 'react-native-qrcode-svg';
 import ToolTipMenu from './TooltipMenu';
 import Share from 'react-native-share';
 import loc from '../loc';
-import PropTypes from 'prop-types';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { useTheme } from '@react-navigation/native';
 
-const QRCodeComponent = ({
-  value,
+interface QRCodeComponentProps {
+  value: string;
+  isLogoRendered?: boolean;
+  isMenuAvailable?: boolean;
+  logoSize?: number;
+  size?: number;
+  ecl?: 'H' | 'Q' | 'M' | 'L';
+  onError?: () => void;
+}
+
+interface ActionIcons {
+  iconType: 'SYSTEM';
+  iconValue: string;
+}
+
+interface ActionType {
+  Share: 'share';
+  Copy: 'copy';
+}
+
+interface Action {
+  id: string;
+  text: string;
+  icon: ActionIcons;
+}
+
+const actionKeys: ActionType = {
+  Share: 'share',
+  Copy: 'copy',
+};
+
+interface ActionIcons {
+  iconType: 'SYSTEM';
+  iconValue: string;
+}
+
+const actionIcons: { [key: string]: ActionIcons } = {
+  Share: {
+    iconType: 'SYSTEM',
+    iconValue: 'square.and.arrow.up',
+  },
+  Copy: {
+    iconType: 'SYSTEM',
+    iconValue: 'doc.on.doc',
+  },
+};
+
+const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
+  value = '',
   isLogoRendered = true,
   isMenuAvailable = true,
   logoSize = 90,
@@ -17,39 +63,39 @@ const QRCodeComponent = ({
   ecl = 'H',
   onError = () => {},
 }) => {
-  const qrCode = useRef();
+  const qrCode = useRef<any>();
   const { colors } = useTheme();
 
   const handleShareQRCode = () => {
-    qrCode.current.toDataURL(data => {
+    qrCode.current.toDataURL((data: string) => {
       const shareImageBase64 = {
         url: `data:image/png;base64,${data}`,
       };
-      Share.open(shareImageBase64).catch(error => console.log(error));
+      Share.open(shareImageBase64).catch((error: any) => console.log(error));
     });
   };
 
-  const onPressMenuItem = id => {
-    if (id === QRCodeComponent.actionKeys.Share) {
+  const onPressMenuItem = (id: string) => {
+    if (id === actionKeys.Share) {
       handleShareQRCode();
-    } else if (id === QRCodeComponent.actionKeys.Copy) {
+    } else if (id === actionKeys.Copy) {
       qrCode.current.toDataURL(Clipboard.setImage);
     }
   };
 
-  const menuActions = () => {
-    const actions = [];
+  const menuActions = (): Action[] => {
+    const actions: Action[] = [];
     if (Platform.OS === 'ios' || Platform.OS === 'macos') {
       actions.push({
-        id: QRCodeComponent.actionKeys.Copy,
+        id: actionKeys.Copy,
         text: loc.transactions.details_copy,
-        icon: QRCodeComponent.actionIcons.Copy,
+        icon: actionIcons.Copy,
       });
     }
     actions.push({
-      id: QRCodeComponent.actionKeys.Share,
+      id: actionKeys.Share,
       text: loc.receive.details_share,
-      icon: QRCodeComponent.actionIcons.Share,
+      icon: actionIcons.Share,
     });
     return actions;
   };
@@ -61,10 +107,11 @@ const QRCodeComponent = ({
       size={size}
       logoSize={logoSize}
       color="#000000"
+      // @ts-ignore: logoBackgroundColor is not in the type definition
       logoBackgroundColor={colors.brandingColor}
       backgroundColor="#FFFFFF"
       ecl={ecl}
-      getRef={qrCode}
+      getRef={(c: any) => (qrCode.current = c)}
       onError={onError}
     />
   );
@@ -87,29 +134,3 @@ export default QRCodeComponent;
 const styles = StyleSheet.create({
   qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
 });
-
-QRCodeComponent.actionKeys = {
-  Share: 'share',
-  Copy: 'copy',
-};
-
-QRCodeComponent.actionIcons = {
-  Share: {
-    iconType: 'SYSTEM',
-    iconValue: 'square.and.arrow.up',
-  },
-  Copy: {
-    iconType: 'SYSTEM',
-    iconValue: 'doc.on.doc',
-  },
-};
-
-QRCodeComponent.propTypes = {
-  value: PropTypes.string.isRequired,
-  isMenuAvailable: PropTypes.bool,
-  size: PropTypes.number,
-  ecl: PropTypes.string,
-  isLogoRendered: PropTypes.bool,
-  onError: PropTypes.func,
-  logoSize: PropTypes.number,
-};