Skip to content

Commit

Permalink
copyable ndebit string and show debits for selected source
Browse files Browse the repository at this point in the history
  • Loading branch information
Mothana committed Sep 25, 2024
1 parent a7becdf commit 76d338a
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 26 deletions.
13 changes: 8 additions & 5 deletions src/Components/Background.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
45 changes: 26 additions & 19 deletions src/Pages/LinkedApp/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {

Expand Down Expand Up @@ -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 {
Expand All @@ -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>
);
};


58 changes: 56 additions & 2 deletions src/Pages/LinkedApp/linkedApp.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -46,6 +70,12 @@
border-radius: 5px;
padding: 12px;
height: 120px;

&_column {
flex-direction: column;
gap: 10px;
height: auto;
}
&_left {
flex: 1;
width: 100%;
Expand All @@ -54,9 +84,16 @@
img {
width: 100%;
height: 100%;

}
}

&_title {
font-size: 16px;
font-weight: bold;
}
&_ndebit {
font-size: 15px;
color: #29abe2;
}
&_right {

Expand Down Expand Up @@ -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;

}
}
1 change: 1 addition & 0 deletions src/globalTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export interface SpendFrom {
pubSource?: boolean,
keys: NostrKeyPair
adminToken?: string
ndebit?: string
}

export interface PayTo {
Expand Down

0 comments on commit 76d338a

Please sign in to comment.