From 76d338a6e4df092b31ed1cf8ed80f6bdcdda5722 Mon Sep 17 00:00:00 2001 From: Mothana Date: Wed, 25 Sep 2024 18:24:52 +0400 Subject: [PATCH] copyable ndebit string and show debits for selected source --- src/Components/Background.tsx | 13 ++++--- src/Pages/LinkedApp/index.tsx | 45 +++++++++++++---------- src/Pages/LinkedApp/linkedApp.scss | 58 ++++++++++++++++++++++++++++-- src/globalTypes.ts | 1 + 4 files changed, 91 insertions(+), 26 deletions(-) diff --git a/src/Components/Background.tsx b/src/Components/Background.tsx index 0e60e7b8..94d5ac1f 100644 --- 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, newData?: Types.UserOperation[]) => { const req = populateCursorRequest(newCurosor || cursor, !!newData) diff --git a/src/Pages/LinkedApp/index.tsx b/src/Pages/LinkedApp/index.tsx index 7bd49b91..9d8e6116 100644 --- 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 = () => {
{ debitAuth.rules.map((rule, i) => { - console.log(rule) if (rule.rule.type === DebitRule_rule_type.FREQUENCY_RULE) { return {rule.rule.frequency_rule.amount} sats per {rule.rule.frequency_rule.interval} } else { @@ -113,11 +108,23 @@ export const LinkedApp = () => {
Linked Apps
-
+
+ +
+
{cardsToRender}
+
+ My debit string: + {selectedSource.ndebit} + +
); }; + diff --git a/src/Pages/LinkedApp/linkedApp.scss b/src/Pages/LinkedApp/linkedApp.scss index 77103f96..53fd2608 100644 --- 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 @@ } } -} \ No newline at end of file + &_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 index 50cbbc6b..0c8c641f 100644 --- 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 {