Skip to content

Commit

Permalink
Merge pull request #21 from sepehr-safari/implement-ndk
Browse files Browse the repository at this point in the history
Replace nostr-hooks with NDK
  • Loading branch information
rolznz authored Jan 20, 2024
2 parents fb3511a + c270434 commit cba39b0
Show file tree
Hide file tree
Showing 20 changed files with 553 additions and 291 deletions.
19 changes: 8 additions & 11 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@ module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
},
}
};
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Ignore artifacts:
build
coverage
14 changes: 14 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"useTabs": false,
"endOfLine": "lf",
"printWidth": 100,
"trailingComma": "es5",
"singleAttributePerLine": false,
"jsxSingleQuote": false,
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true
}
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"preview": "vite preview",
"format": "prettier --write ."
},
"dependencies": {
"@getalby/bitcoin-connect-react": "^3.2.0-beta.0",
"@getalby/lightning-tools": "^5.0.0",
"@getalby/sdk": "^3.2.2",
"@nostr-dev-kit/ndk": "^2.3.2",
"@nostr-dev-kit/ndk-cache-dexie": "^2.2.3",
"@popicons/react": "^0.0.8",
"nostr-hooks": "^1.8.2",
"nostr-tools": "1.17.0",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
Expand All @@ -34,6 +36,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.32",
"prettier": "3.2.2",
"tailwindcss": "^3.3.6",
"typescript": "^5.2.2",
"vite": "^5.0.10",
Expand Down
2 changes: 1 addition & 1 deletion postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ export default {
tailwindcss: {},
autoprefixer: {},
},
}
};
9 changes: 2 additions & 7 deletions src/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ export function Navbar({ onOpenCart }: NavbarProps) {
</li>
<li>
<Link to="../share">
<PopiconsShareDuotone className="w-4 h-4" /> Share with a
co-worker
<PopiconsShareDuotone className="w-4 h-4" /> Share with a co-worker
</Link>
</li>
<li>
Expand All @@ -53,11 +52,7 @@ export function Navbar({ onOpenCart }: NavbarProps) {
<Link
to="/"
onClick={(e) => {
if (
!confirm(
"Are you sure you wish to log out? your wallet will be lost."
)
) {
if (!confirm("Are you sure you wish to log out? your wallet will be lost.")) {
e.preventDefault();
return;
}
Expand Down
37 changes: 5 additions & 32 deletions src/components/icons/AlbyLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,7 @@ export function AlbyLogo({ className }: Props) {
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<ellipse
opacity="0.1"
cx="162.28"
cy="480.52"
rx="79.0085"
ry="14.5862"
fill="black"
/>
<ellipse opacity="0.1" cx="162.28" cy="480.52" rx="79.0085" ry="14.5862" fill="black" />
<path
d="M238.442 409.511C279.259 409.511 297.837 319.131 297.837 284.862C297.837 258.151 279.407 241.964 255.177 241.964C231.098 241.964 211.55 252.318 211.307 265.14C211.306 298.978 205.351 409.511 238.442 409.511Z"
fill="white"
Expand Down Expand Up @@ -60,17 +53,9 @@ export function AlbyLogo({ className }: Props) {
transform="matrix(-1 0 0 1 86.2664 96.417)"
fill="black"
/>
<path
d="M58.0485 116.976L103.197 162.125"
stroke="black"
stroke-width="12.0934"
/>
<path d="M58.0485 116.976L103.197 162.125" stroke="black" stroke-width="12.0934" />
<circle cx="259.606" cy="120.604" r="24.1868" fill="black" />
<path
d="M264.04 116.976L218.891 162.125"
stroke="black"
stroke-width="12.0934"
/>
<path d="M264.04 116.976L218.891 162.125" stroke="black" stroke-width="12.0934" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
Expand All @@ -87,20 +72,8 @@ export function AlbyLogo({ className }: Props) {
d="M92.2042 249.769C81.711 245.495 75.4866 234.331 79.1225 223.6C90.3356 190.507 123.045 166.559 161.649 166.559C200.253 166.559 232.962 190.507 244.175 223.6C247.811 234.331 241.587 245.495 231.094 249.769C209.662 258.497 186.217 263.306 161.649 263.306C137.081 263.306 113.636 258.497 92.2042 249.769Z"
fill="black"
/>
<ellipse
cx="189.464"
cy="218.158"
rx="20.1557"
ry="16.1246"
fill="white"
/>
<ellipse
cx="131.763"
cy="218.167"
rx="20.1557"
ry="16.1246"
fill="white"
/>
<ellipse cx="189.464" cy="218.158" rx="20.1557" ry="16.1246" fill="white" />
<ellipse cx="131.763" cy="218.167" rx="20.1557" ry="16.1246" fill="white" />
<path
d="M557.311 263.36H514.751L535.551 204.16L557.311 263.36ZM507.391 134.4L425.791 352H483.711L498.751 309.12H573.951L589.631 355.2L646.911 349.44L565.631 134.4H507.391ZM721.131 352V126.08L662.891 129.6V352H721.131ZM782.494 352L811.294 322.88V126.08L753.054 129.6V352H782.494ZM792.414 257.28C798.6 250.88 804.36 245.76 809.694 241.92C815.027 238.08 820.254 236.16 825.374 236.16C831.56 236.16 836.68 237.547 840.734 240.32C845 243.093 848.2 247.253 850.334 252.8C852.68 258.133 853.854 264.747 853.854 272.64C853.854 280.533 852.68 287.36 850.334 293.12C847.987 298.88 844.894 303.253 841.054 306.24C837.214 309.227 832.84 310.72 827.934 310.72C822.387 310.72 816.627 309.227 810.654 306.24C804.68 303.04 798.6 298.56 792.414 292.8L776.094 327.04C782.067 333.867 788.04 339.413 794.014 343.68C800.2 347.733 806.387 350.72 812.574 352.64C818.974 354.56 825.374 355.52 831.774 355.52C848.2 355.52 862.494 352.427 874.654 346.24C887.027 340.053 896.627 330.773 903.454 318.4C910.494 306.027 914.014 290.667 914.014 272.32C914.014 253.76 910.494 238.507 903.454 226.56C896.627 214.613 887.24 205.76 875.294 200C863.347 194.24 849.694 191.36 834.334 191.36C826.44 191.36 818.76 192.747 811.294 195.52C803.827 198.293 797 201.92 790.814 206.4C784.84 210.667 779.934 215.147 776.094 219.84L792.414 257.28ZM971.616 352.64C970.55 355.627 967.776 358.613 963.296 361.6C958.816 364.587 953.696 367.36 947.936 369.92C942.39 372.48 937.056 374.827 931.936 376.96L951.456 422.08C961.696 419.733 971.616 416.107 981.216 411.2C990.816 406.293 999.243 400.32 1006.5 393.28C1013.75 386.24 1018.98 378.56 1022.18 370.24L1090.34 196.8H1032.42L1002.66 284.48L970.976 191.04L917.216 206.4L972.896 349.12L971.616 352.64Z"
fill="black"
Expand Down
2 changes: 0 additions & 2 deletions src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ export const localStorageKeys = {
nwcUrl: "pos:nwcUrl",
};

// TODO: allow dynamic list of relays
export const RELAYS = ["wss://relay.damus.io", "wss://relay.shitforce.one"];
export const appCustomDataTag = "buzzpay";
export const appCustomDataValues = {
profilePubkey: "profilePubkey",
Expand Down
77 changes: 48 additions & 29 deletions src/hooks/useItems.ts
Original file line number Diff line number Diff line change
@@ -1,43 +1,62 @@
import { useSubscribe } from "nostr-hooks";
import React from "react";
import { RELAYS, appCustomDataTag, appCustomDataValues } from "../constants";
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
import { useEffect, useMemo, useState } from "react";

import { appCustomDataTag, appCustomDataValues } from "../constants";
import useStore from "../state/store";
import { Item } from "../types";

export function useItems(walletPubkey?: string) {
const { events, invalidate, eose } = useSubscribe({
relays: RELAYS,
filters: walletPubkey
? [
{
authors: [walletPubkey],
kinds: [30078],
limit: 100,
// custom hashtag filter support is not supported by all relays?
// [`#${appCustomDataTag}`]: [appCustomDataValues.item],
},
]
: [],
options: {
enabled: !!walletPubkey,
},
});

const items = React.useMemo(
export function useItems() {
const [events, setEvents] = useState<NDKEvent[]>([]);
const [eose, setEose] = useState<boolean>(false);

const ndk = useStore((store) => store.ndk);
const walletPubkey = useStore((store) => store.provider)?.publicKey;

useEffect(() => {
if (!walletPubkey || !ndk) {
return;
}

const filters: NDKFilter[] = [
{
authors: [walletPubkey],
kinds: [30078],
limit: 100,
// custom hashtag filter support is not supported by all relays?
// [`#${appCustomDataTag}`]: [appCustomDataValues.item],
},
];

setEose(false);

const subscription = ndk.subscribe(filters);

subscription.on("event", (event) => {
setEvents((prevEvents) =>
prevEvents.some((existingEvent) => existingEvent.id === event.id)
? prevEvents
: [...prevEvents, event]
);
});

subscription.on("eose", () => {
setEose(true);
});
}, [ndk, walletPubkey, setEvents]);

const items = useMemo(
() =>
// TODO: remove filter when above relay filter works
events
.filter((event) =>
event.tags.some(
(t) =>
t[0] === appCustomDataTag && t[1] === appCustomDataValues.item
)
event.tags.some((t) => t[0] === appCustomDataTag && t[1] === appCustomDataValues.item)
)
.map((event) => JSON.parse(event.content) as Item),
[events]
);

const isLoading = !eose && !events.length;
const isLoading = !eose && events.length == 0;
// console.log(items, events);

return { items, invalidate, isLoading };
return { items, isLoading };
}
51 changes: 25 additions & 26 deletions src/hooks/useProfileMetadata.ts
Original file line number Diff line number Diff line change
@@ -1,32 +1,31 @@
import { useSubscribe } from "nostr-hooks";
import { RELAYS } from "../constants";
import { NDKUserProfile } from "@nostr-dev-kit/ndk";
import { useEffect, useState } from "react";

export function useProfileMetadata(profilePubkeyHex: string | undefined) {
// console.log("Profile pubkey hex:", profilePubkeyHex);
const { events, eose } = useSubscribe({
relays: RELAYS,
filters: profilePubkeyHex
? [
{
authors: [profilePubkeyHex],
kinds: [0],
limit: 1,
},
]
: [],
options: {
enabled: !!profilePubkeyHex,
},
});
import useStore from "../state/store";

const isLoading = !eose && !events.length;
const metadataEvent = events?.[0];
const metadata = metadataEvent
? (JSON.parse(metadataEvent.content) as {
name?: string;
picture?: string;
export function useProfileMetadata(pubkey: string | undefined) {
const [metadata, setMetadata] = useState<NDKUserProfile | undefined>(undefined);
const [isLoading, setIsLoading] = useState<boolean>(true);

const ndk = useStore((store) => store.ndk);

useEffect(() => {
if (!pubkey || !ndk) {
return;
}

ndk
.getUser({ pubkey })
.fetchProfile()
.then((profile) => {
if (profile) {
setMetadata(profile);
}
})
: undefined;
.finally(() => {
setIsLoading(false);
});
}, [ndk, pubkey, setMetadata]);

// console.log("Profile metadata", metadata, eose, events);

Expand Down
Loading

0 comments on commit cba39b0

Please sign in to comment.