start ui qrcode

AFK-AlignedFamKernel · Oct 22, 2024 · 991216a · 991216a
1 parent 26f3e8a
commit 991216a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 23 deletions.
diff --git a/apps/mobile/src/modules/Cashu/ReceiveEcash.tsx b/apps/mobile/src/modules/Cashu/ReceiveEcash.tsx
@@ -1,6 +1,6 @@
 import '../../../applyGlobalPolyfills';
 
-import {webln} from '@getalby/sdk';
+import { webln } from '@getalby/sdk';
 import {
   addProofs,
   ICashuInvoice,
@@ -11,32 +11,33 @@ import {
   useSendZap,
 } from 'afk_nostr_sdk';
 import * as Clipboard from 'expo-clipboard';
-import React, {ChangeEvent, SetStateAction, useEffect, useState} from 'react';
-import {Platform, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View} from 'react-native';
-import {ActivityIndicator, Modal, Text, TextInput} from 'react-native';
-import {WebView} from 'react-native-webview';
+import React, { ChangeEvent, SetStateAction, useEffect, useState } from 'react';
+import { Platform, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Modal, Text, TextInput } from 'react-native';
+import { WebView } from 'react-native-webview';
 import PolyfillCrypto from 'react-native-webview-crypto';
 
-import {Button, IconButton, Input} from '../../components';
-import {useStyles, useTheme} from '../../hooks';
-import {useDialog, useToast} from '../../hooks/modals';
+import { Button, IconButton, Input } from '../../components';
+import { useStyles, useTheme } from '../../hooks';
+import { useDialog, useToast } from '../../hooks/modals';
 import stylesheet from './styles';
-import {getDecodedToken, GetInfoResponse, MintQuoteResponse, MintQuoteState} from '@cashu/cashu-ts';
-import {CopyIconStack} from '../../assets/icons';
-import {canUseBiometricAuthentication} from 'expo-secure-store';
+import { getDecodedToken, GetInfoResponse, MintQuoteResponse, MintQuoteState } from '@cashu/cashu-ts';
+import { CopyIconStack } from '../../assets/icons';
+import { canUseBiometricAuthentication } from 'expo-secure-store';
 import {
   retrieveAndDecryptCashuMnemonic,
   retrievePassword,
   storeCashuMnemonic,
 } from '../../utils/storage';
-import {SelectedTab, TABS_CASHU} from '../../types/tab';
+import { SelectedTab, TABS_CASHU } from '../../types/tab';
 
-import {getInvoices, storeInvoices} from '../../utils/storage_cashu';
+import { getInvoices, storeInvoices } from '../../utils/storage_cashu';
+// import QRCode from 'qrcode';  // replace with reactnative qrcode lib
 
 export const ReceiveEcash = () => {
   const tabs = ['lightning', 'ecash'];
 
-  const {ndkCashuWallet, ndkWallet} = useNostrContext();
+  const { ndkCashuWallet, ndkWallet } = useNostrContext();
   const {
     wallet,
     connectCashMint,
@@ -51,13 +52,14 @@ export const ReceiveEcash = () => {
     activeMintIndex,
   } = useCashu();
   const [ecash, setEcash] = useState<string | undefined>();
-  const {isSeedCashuStorage, setIsSeedCashuStorage} = useCashuStore();
+  const { isSeedCashuStorage, setIsSeedCashuStorage } = useCashuStore();
 
   const styles = useStyles(stylesheet);
   // const [mintUrl, setMintUrl] = useState<string | undefined>("https://mint.minibits.cash/Bitcoin")
 
   const [quote, setQuote] = useState<MintQuoteResponse | undefined>();
   const [infoMint, setMintInfo] = useState<GetInfoResponse | undefined>();
+  const [qrCodeUrl, setQRCodeUrl] = useState<string | undefined>();
   const [mintsUrls, setMintUrls] = useState<string[]>(['https://mint.minibits.cash/Bitcoin']);
   const [isInvoiceModalVisible, setIsInvoiceModalVisible] = useState(false);
   const [isZapModalVisible, setIsZapModalVisible] = useState(false);
@@ -75,12 +77,12 @@ export const ReceiveEcash = () => {
   const [generatedInvoice, setGeneratedInvoice] = useState('');
   const [invoiceAmount, setInvoiceAmount] = useState('');
   const [invoiceMemo, setInvoiceMemo] = useState('');
-  const {theme} = useTheme();
+  const { theme } = useTheme();
   const [newSeed, setNewSeed] = useState<string | undefined>();
 
-  const {showDialog, hideDialog} = useDialog();
+  const { showDialog, hideDialog } = useDialog();
 
-  const {showToast} = useToast();
+  const { showToast } = useToast();
 
   const [selectedTab, setSelectedTab] = useState<SelectedTab | undefined>(
     SelectedTab.LIGHTNING_NETWORK_WALLET,
@@ -90,7 +92,7 @@ export const ReceiveEcash = () => {
     const value = event.target.value;
     setEcash(value);
   };
-  useEffect(() => {}, []);
+  useEffect(() => { }, []);
 
   const generateInvoice = async () => {
     const mintUrl = mintUrls?.[activeMintIndex]?.url;
@@ -142,7 +144,7 @@ export const ReceiveEcash = () => {
         await Clipboard.setStringAsync(ecash);
       }
     }
-    showToast({type: 'info', title: 'Copied to clipboard'});
+    showToast({ type: 'info', title: 'Copied to clipboard' });
   };
 
   const handleReceiveEcash = async () => {
@@ -157,14 +159,26 @@ export const ReceiveEcash = () => {
       console.log('response', response);
 
       if (response) {
-        showToast({title: 'ecash payment received', type: 'success'});
+        showToast({ title: 'ecash payment received', type: 'success' });
         await addProofs(response);
       }
     } catch (e) {
       console.log('handleReceiveEcash error', e);
     }
   };
 
+  // Encode the Cashu token into a string
+
+  // Generate the QR Code from the Cashu token string
+  useEffect(() => {
+    // QRCode.toDataURL(ecash)
+    //   .then((url: React.SetStateAction<string | undefined>) => {
+    //     setQRCodeUrl(url);  // Set the generated QR code URL
+    //   })
+    //   .catch((err: any) => console.error(err));
+  }, [ecash]);
+
+
   return (
     <SafeAreaView
     // style={styles.safeArea}
@@ -229,6 +243,15 @@ export const ReceiveEcash = () => {
                       </TouchableOpacity>
                     }
                   />
+
+                  {/* {qrCodeUrl ? (
+                    <Image
+                      href={qrCodeUrl}
+                      style={{ width: 200, height: 200 }}
+                    />
+                  ) : (
+                    <Text>Generating QR Code...</Text>
+                  )} */}
                 </View>
               )}
 

diff --git a/apps/mobile/src/modules/Cashu/qr/ScanCode.tsx b/apps/mobile/src/modules/Cashu/qr/ScanCode.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import { Camera, useCameraDevices } from 'react-native-vision-camera';
+
+const ScanCashuQRCode = ({  }) => {
+  const devices = useCameraDevices();
+  const device = devices[0];
+
+  useEffect(() => {
+    // Ask for camera permission
+    const requestCameraPermission = async () => {
+      const permission = await Camera.requestCameraPermission();
+      if (permission === 'denied') {
+        console.warn('Camera permission denied');
+      }
+    };
+
+    requestCameraPermission();
+  }, []);
+
+  if (device == null) return <Text>Loading Camera...</Text>;
+
+  const handleScan = (frame: { text: any; }) => {
+    // Assuming `frame` contains the scanned QR code's content
+    const qrCodeData = frame?.text;  // You need a QR code processor library here
+    if (qrCodeData) {
+      try {
+      } catch (error) {
+        console.error('Error decoding Cashu token:', error);
+      }
+    }
+  };
+
+  return (
+    <Camera
+    //   style={{ flex: 1 }}
+      device={device}
+      isActive={true}
+    //   frameProcessor={handleScan}
+    />
+  );
+};
+
+export default ScanCashuQRCode;
diff --git a/packages/pixel_ui/src/configs/backend.config.json b/packages/pixel_ui/src/configs/backend.config.json
@@ -1,6 +1,6 @@
 {
   "host": "backend-pixel.onrender.com",
-  "port": 8082,
+  "port": 8081,
   "consumer_port": 8081,
   "scripts": {
     "place_pixel_devnet": "../tests/integration/local/place_pixel.sh",

diff --git a/packages/pixel_ui/src/utils/Consts.js b/packages/pixel_ui/src/utils/Consts.js
@@ -1,7 +1,7 @@
 import { ec, RpcProvider, constants } from 'starknet';
 import backendConfigProd from '../configs/backend.config.json';
 import backendConfigDev from '../configs/backend.dev.config.json';
-const isProduction = process.env.NEXT_PUBLIC_NODE_ENV == "true" ? true : false
+const isProduction = process.env.NEXT_PUBLIC_NODE_ENV == "true" || process.env.EXPO_PUBLIC_NODE_ENV == "production" ? true : false
 /** TODO add ENV and config for prod and test */
 /** TODO fix url */