adding save and connect button for new contacts

app/client/mobile/src/profile/Profile.tsx

@@ -33,6 +33,7 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
   const [disconnecting, setDisconnecting] = useState(false);
   const [canceling, setCanceling] = useState(false);
   const [accepting, setAccepting] = useState(false);
+  const [connecting, setConnecting] = useState(false);
 
   const confirmAction = (title: string, prompt: string, label: string, loading: (boolean) => void, action: () => Promise<void>) => {
     setConfirmParams({
@@ -82,6 +83,7 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
           action: () => setConfirmShow(false),
         },
       });
+      setConfirmShow(true);
     }
   };
 
@@ -135,6 +137,20 @@ export function Profile({close, params}: {close: () => void; params: ContactPara
 
             {state.statusLabel === 'unknownStatus' && (
               <View style={styles.actions}>
+                <View style={styles.action}>
+                  <IconButton
+                    style={styles.actionIcon}
+                    loading={connecting}
+                    compact="true"
+                    mode="contained"
+                    icon="electric-switch-closed"
+                    size={32}
+                    onPress={() => {
+                      applyAction(setConnecting, actions.saveAndConnect);
+                    }}
+                  />
+                  <Text style={styles.actionLabel}>{state.strings.connect}</Text>
+                </View>
                 <View style={styles.action}>
                   <IconButton
                     style={styles.actionIcon}

app/client/mobile/src/profile/useProfile.hook.ts

@@ -117,6 +117,11 @@ export function useProfile(params: ContactParams) {
       const contact = app.state.session?.getContact();
       await contact.addCard(state.node, state.guid);
     },
+    saveAndConnect: async () => {
+      const contact = app.state.session?.getContact();
+      const added = await contact.addCard(state.node, state.guid);
+      await contact.connectCard(added);
+    },
     remove: async () => {
       const contact = app.state.session?.getContact();
       await contact.removeCard(state.cardId);

app/client/web/src/StagingFiles.ts

@@ -2,7 +2,7 @@ import { Staging } from 'databag-client-sdk'
 
 export class StagingFiles implements Staging {
 
-  public clear(): Promise<void> {}
+  public async clear(): Promise<void> {}
 
   private base64ToUint8Array(base64: string): Uint8Array {
     var binaryString = atob(base64);

app/client/web/src/profile/Profile.tsx

@@ -185,6 +185,14 @@ export function Profile({ params, showClose, close }: { params: ProfileParams; s
     }
   }
 
+  const applySaveAndConnect = async () => {
+    if (!connecting) {
+      setConnecting(true)
+      await setAction(actions.saveAndConnect)
+      setConnecting(false)
+    }
+  }
+
   const applyConfirm = async () => {
     if (!confirming) {
       setConfirming(true)
@@ -270,6 +278,12 @@ export function Profile({ params, showClose, close }: { params: ProfileParams; s
         </div>
         {state.statusLabel === 'unknownStatus' && (
           <div className={classes.actions}>
+            <div className={classes.action} onClick={applySaveAndConnect}>
+              <ActionIcon variant="subtle" loading={connecting} size={32}>
+                <IconRoute2 size={32} />
+              </ActionIcon>
+              <Text className={classes.actionLabel}>{state.strings.connect}</Text>
+            </div>
             <div className={classes.action} onClick={applySave}>
               <ActionIcon variant="subtle" loading={saving} size={32}>
                 <IconDeviceFloppy size={32} />

app/client/web/src/profile/useProfile.hook.ts

@@ -95,6 +95,11 @@ export function useProfile(params: ProfileParams) {
       const contact = app.state.session?.getContact()
       await contact.addCard(state.node, state.guid)
     },
+    saveAndConnect: async () => {
+      const contact = app.state.session?.getContact();
+      const added = await contact.addCard(state.node, state.guid);
+      await contact.connectCard(added);
+    },
     remove: async () => {
       const contact = app.state.session?.getContact()
       await contact.removeCard(state.cardId)

app/sdk/src/contact.ts

@@ -752,7 +752,8 @@ export class ContactModule implements Contact {
     const { node, secure, token } = this;
     const insecure = server ? /^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|:\d+$|$)){4}$/.test(server) : false;
     const message = server ? await getContactListing(server, !insecure, guid) : await getContactListing(node, secure, guid);
-    return await addCard(node, secure, token, message);
+    const added = await addCard(node, secure, token, message);
+    return added.id;
   }
 
   public async removeCard(cardId: string): Promise<void> {