Working Message

components/PrescriptionCreator/ImportNsec.tsx

@@ -1,6 +1,13 @@
-import { Button, Modal, Text, TextInput, View } from "react-native"
+import { useState } from "react";
+import { Button, Modal, NativeSyntheticEvent, Text, TextInput, TextInputChangeEventData, View } from "react-native"
 
-export const SendPrescription = ({ isVisible, onClose }: { isVisible: boolean, onClose: () => void }) => {
+export const ImportNsec = ({ isVisible, onClose, onPress }: { isVisible: boolean, onClose: () => void, onPress: (nsec: `nsec1${string}`) => void }) => {
+
+    const [nsec, setNsec] = useState("");
+
+    const handleNsec = (value: string) => {
+        setNsec(value)
+    }
     return (
         <Modal 
             visible={isVisible}
@@ -9,11 +16,13 @@ export const SendPrescription = ({ isVisible, onClose }: { isVisible: boolean, o
             presentationStyle="pageSheet">
             <View style={{ backgroundColor: "#ffffff", height: 500, justifyContent: "center", display: "flex", margin: 30, borderColor: "red", alignItems: "center"}}>
                 <View style={{margin: 5}}>
-                    <Text style={{color: "#000000", margin: 5}}>Search an npub to send prescription</Text>
-                    <TextInput style={{borderColor: "#000000", borderWidth: 1, borderRadius: 5}}/>
+                    <Text style={{color: "#000000", margin: 5}}>
+                        Import Your Nsec
+                    </Text>
+                    <TextInput style={{borderColor: "#000000", borderWidth: 1, borderRadius: 5, color: "#000000"}} onChangeText={handleNsec}/>
                 </View>
                 <View>
-                    <Button title="Send"></Button>
+                    <Button title="Import" onPress={() => onPress(nsec)}></Button>
                 </View>
             </View>
         </Modal>

components/PrescriptionCreator/index.tsx

@@ -1,12 +1,14 @@
 import { Alert, Appearance, Dimensions, Image, StyleSheet, Text, View } from 'react-native';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
-import {PropsWithChildren, useState} from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { Button, Card, Modal } from '@ant-design/react-native';
 import { V1Field } from '@formstr/sdk/dist/interfaces';
 import { InputFiller } from '../Inputs/Inputs';
 // import { SendPrescription } from './sendPrescription';
 import { Dropdown } from 'react-native-element-dropdown';
 import { SimplePool, UnsignedEvent, finalizeEvent, generateSecretKey, getPublicKey, nip04, nip19 } from 'nostr-tools';
+import EncryptedStorage from 'react-native-encrypted-storage';
+import { ImportNsec } from './ImportNsec';
 
 type SectionProps = PropsWithChildren<{
   title: string;
@@ -79,10 +81,29 @@ const locationDummyData = [
 
 export const PrescriptionCreator = ({ form }: { form: any }) => {
   if (form === null) return <View style={{ backgroundColor: "#ffffff" }}><Text style={{ color: "#000000" }}>Loading...</Text></View>
-  const [showSendScreen, setShowSendScreen] = useState(false);
+  const [showImportNsec, setShowImportNsec] = useState(false);
+  const [loggedInNpub, setLoggedInNpub] = useState("")
   const [selectedPharmacyId, setSelectedPharmacyId] = useState("");
   const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState([]);
 
+  useEffect(() => {
+    async function initialize() {
+      let doctorCredentials = null;
+      try {
+        doctorCredentials = await EncryptedStorage.getItem("user_credentials");
+        if(!doctorCredentials) {
+          setShowImportNsec(true)
+        }
+        else {
+          setLoggedInNpub(nip19.npubEncode(getPublicKey(nip19.decode(doctorCredentials).data as Uint8Array)))
+        }
+      }
+      catch(e) {
+        console.log("Error getting credentials", e)
+      }
+    }
+    initialize()
+  }, [])
   const renderItem = (item: any) => {
     return <View style={{ width: width, display: 'flex', flexDirection: 'column', padding: 10, flexWrap: "wrap" }}>
       <Text style={{ color: "black", fontSize: 24 }}>{item.label}</Text>
@@ -98,12 +119,21 @@ export const PrescriptionCreator = ({form} : {form: any}) => {
     setSelectedPharmacyRelays(item.relays)
   }
 
+  const handleImportNsec = (nsec: string) => {
+    EncryptedStorage.setItem("user_credentials", nsec)
+    if(nsec.startsWith('nsec1') && nsec.length !== 63) {
+      Alert.alert("not a valid nsec!")
+      return;
+    }
+    setShowImportNsec(false)
+  }
+
   const sendPrescription = async () => {
     console.log("Will generate IDs")
-    const sk = generateSecretKey()
+    const sk = nip19.decode(await EncryptedStorage.getItem("user_credentials") as `nsec1${string}`).data as Uint8Array
     const pk = getPublicKey(sk)
     const pharmacyId = nip19.decode(selectedPharmacyId).data as string
-    console.log("Ids generated", sk, pk)
+    console.log("Got ids")
     const baseKind4Event: UnsignedEvent = {
       kind: 4,
       tags: [["p", pharmacyId]],
@@ -134,12 +164,13 @@ export const PrescriptionCreator = ({form} : {form: any}) => {
         }}
       />
       <Section title="PeerScribe">
-        From the practice of {form.name}
+        From the practice of {loggedInNpub}
+        <Button size="small" onPress={() => {setShowImportNsec(true)}} >Edit!</Button>
       </Section>
 
       <Section title="Choose a Pharmacy">
         <View style={{ width: width - 40 }}>
-          <Dropdown data={locationData} labelField={'label'} valueField={'label'} onChange={handleLocationChange} 
+          <Dropdown data={locationData} labelField={'label'} valueField={'label'} onChange={handleLocationChange} value={locationData[0]}
             renderItem={renderItem} style={{ width: "100%" }} placeholderStyle={{ color: "white" }} selectedTextStyle={{ color: 'white' }} />
         </View>
       </Section>
@@ -178,7 +209,7 @@ export const PrescriptionCreator = ({form} : {form: any}) => {
           <Button type='primary' onPress={sendPrescription}> Create RX </Button>
         </View>
       </Section>
-      {/* <SendPrescription isVisible={showSendScreen} onClose={() => { setShowSendScreen(false)}}/> */}
+      <ImportNsec isVisible={showImportNsec} onClose={() => { setShowImportNsec(false)}} onPress={handleImportNsec}/>
 
     </View>
   );

package.json

@@ -21,6 +21,7 @@
     "react-native": "0.73.4",
     "react-native-crypto": "^2.2.0",
     "react-native-element-dropdown": "^2.10.4",
+    "react-native-encrypted-storage": "^4.0.3",
     "react-native-get-random-values": "^1.11.0",
     "react-native-picker-select": "^9.0.1",
     "react-native-randombytes": "^3.6.1",

yarn.lock

@@ -6586,6 +6586,11 @@ react-native-element-dropdown@^2.10.4:
   dependencies:
     lodash "^4.17.21"
 
+react-native-encrypted-storage@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-encrypted-storage/-/react-native-encrypted-storage-4.0.3.tgz#2a4d65459870511e8f4ccd22f02433dab7fa5e91"
+  integrity sha512-0pJA4Aj2S1PIJEbU7pN/Qvf7JIJx3hFywx+i+bLHtgK0/6Zryf1V2xVsWcrD50dfiu3jY1eN2gesQ5osGxE7jA==
+
 react-native-gesture-handler@~2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.2.1.tgz#672258aa5a40c92a97c736bdde0a8bd6c8c6c692"