Merge pull request #308 from snake-eaterr/debits-ui

copyable ndebit string and show debits for selected source
shocknet · Sep 25, 2024 · a692445 · a692445
2 parents 11b4efa + 76d338a
commit a692445
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 26 deletions.
diff --git a/src/Components/Background.tsx b/src/Components/Background.tsx
@@ -135,13 +135,16 @@ export const Background = () => {
 			console.log(res.reason)
 			return
 		}
-		if (Number(source.balance) !== res.balance) {
-			dispatch(editSpendSources({
+		dispatch({
+			type: "spendSources/editSpendSources",
+			payload: {
 				...source,
 				balance: `${res.balance}`,
-				maxWithdrawable: `${res.max_withdrawable}`
-			}))
-		}
+				maxWithdrawable: `${res.max_withdrawable}`,
+				ndebit: res.ndebit
+			},
+			meta: { skipChangelog: true }
+		})
 	}
 	const fetchSourceHistory = useCallback(async (source: SpendFrom, client: NostrClient, sourceId: string, newCurosor?: Partial<Types.GetUserOperationsRequest>, newData?: Types.UserOperation[]) => {
 		const req = populateCursorRequest(newCurosor || cursor, !!newData)

diff --git a/src/Pages/LinkedApp/index.tsx b/src/Pages/LinkedApp/index.tsx
@@ -7,30 +7,27 @@ import { getDebitAppNameAndAvatarUrl } from "../../Components/BackgroundJobs/Deb
 import { NOSTR_RELAYS } from "../../constants";
 import { nip19 } from "nostr-tools";
 import moment from "moment";
+import SpendFromDropdown from "../../Components/Dropdowns/SpendFromDropdown";
+import { Clipboard } from "@capacitor/clipboard";
+import { toast } from "react-toastify";
 
 export const LinkedApp = () => {
   const [debitAuthorizations, setDebitAuthorizations] = useState<(DebitAuthorization & { source: SpendFrom, domainName?: string, avatarUrl?: string })[]>([])
   const nodedUp = useSelector(state => state.nostrPrivateKey);
   const nostrSpends = useSelector(selectNostrSpends);
 
-  const fetchAuths = useCallback(() => {
-    nostrSpends.forEach(source => {
-      const { pubkey, relays } = parseNprofile(source.pasteField)
-      getNostrClient({ pubkey, relays }, source.keys).then(c => {
-        c.GetDebitAuthorizations().then(res => {
-          if (res.status === "OK") {
-            setDebitAuthorizations((state) => [
-              ...state,
-              ...res.debits.filter(
-                debit => !state.some(stateDebt => stateDebt.debit_id === debit.debit_id)
-              ).map(debit => ({ ...debit, source })),
-            ])
-          }
-        })
+  const [selectedSource, setSelectedSource] = useState(nostrSpends[0]);
 
+  const fetchAuths = useCallback(() => {
+    const { pubkey, relays } = parseNprofile(selectedSource.pasteField)
+    getNostrClient({ pubkey, relays }, selectedSource.keys).then(c => {
+      c.GetDebitAuthorizations().then(res => {
+        if (res.status === "OK") {
+          setDebitAuthorizations(res.debits.map(debit => ({ ...debit, source: selectedSource })));
+        }
       })
-    });
-  }, [nostrSpends])
+    })
+  }, [selectedSource])
 
   useEffect(() => {
     if (!nodedUp) {
@@ -52,7 +49,6 @@ export const LinkedApp = () => {
     return debitAuthorizations.map((debitAuth, index) => {
       const npub = nip19.npubEncode(debitAuth.npub);
       const substringedNpub = `${npub.substring(0, 20)}...${npub.substring(npub.length - 20, npub.length)}`;
-      console.log({debitAuth})
 
       if (!debitAuth.avatarUrl) {
 
@@ -90,7 +86,6 @@ export const LinkedApp = () => {
             <div className="LinkedApp_app_card_right_rules">
               {
                 debitAuth.rules.map((rule, i) => {
-                  console.log(rule)
                   if (rule.rule.type === DebitRule_rule_type.FREQUENCY_RULE) {
                     return <span key={i}><span>{rule.rule.frequency_rule.amount} sats</span> per {rule.rule.frequency_rule.interval}</span>
                   } else {
@@ -113,11 +108,23 @@ export const LinkedApp = () => {
     <div className="LinkedApp_container">
       <div className="LinkedApp">
         <div className="LinkedApp_header_text">Linked Apps</div>
-        <div>
+        <div className="LinkedApp_source_selection">
+          <SpendFromDropdown values={nostrSpends} value={selectedSource} callback={setSelectedSource} />
+        </div>
+        <div className="LinkedApp_scroller">
           {cardsToRender}
         </div>
+        <div className="LinkedApp_app_card LinkedApp_app_card_column">
+          <span className="LinkedApp_app_card_title">My debit string:</span>
+          <span className="LinkedApp_app_card_ndebit">{selectedSource.ndebit}</span>
+          <button className="LinkedApp_button" onClick={async () => {
+            await Clipboard.write({ string: selectedSource.ndebit })
+            toast.success("Copied to clipboard.")
+          }}>Copy</button>
+        </div>
       </div>
     </div>
   );
 };
 
+
diff --git a/src/Pages/LinkedApp/linkedApp.scss b/src/Pages/LinkedApp/linkedApp.scss
@@ -11,6 +11,30 @@
       left: 0;
       height: 100%;
     }
+
+
+    &_source_selection {
+
+      width: 100%;
+      margin-top: 10px;
+      display: inline-flex;
+      align-items: start;
+      font-size: 19px;
+      font-weight: bold;
+
+      & p {
+        margin-right: 10px;
+        margin-top: 5px;
+      }
+
+    }
+    &_scroller {
+      margin-top: 5px;
+      border-radius: 7px;
+      max-height: 50vh;
+      overflow-y: auto;
+      padding: 0 15px;
+    }
 
     &_header {
       display: inline-flex;
@@ -46,6 +70,12 @@
       border-radius: 5px;
       padding: 12px;
       height: 120px;
+
+      &_column {
+        flex-direction: column;
+        gap: 10px;
+        height: auto;
+      }
       &_left {
         flex: 1;
         width: 100%;
@@ -54,9 +84,16 @@
         img {
           width: 100%;
           height: 100%;
-
         }
+      }
 
+      &_title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      &_ndebit {
+        font-size: 15px;
+        color: #29abe2;
       }
       &_right {
 
@@ -93,4 +130,21 @@
 
       }
     }
-}
+    &_button {
+      width: fit-content;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin: 10px;
+      background-color: #151d24;
+      border: 1px solid #268fbc;
+      border-radius: 6px;
+      color: white;
+      font-size: 100%;
+      padding-inline: 30px;
+      padding-block: 10px;
+      transition-duration: 400ms;
+
+    }
+}
diff --git a/src/globalTypes.ts b/src/globalTypes.ts
@@ -137,6 +137,7 @@ export interface SpendFrom {
   pubSource?: boolean,
   keys: NostrKeyPair
   adminToken?: string
+  ndebit?: string
 }
 
 export interface PayTo {