= NextPage & { + getLayout?: (page: ReactElement) => ReactNode; +}; + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; + +export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // Use the layout defined at the page level, if available + const getLayout = Component.getLayout ?? ((page) => page); + // Get relays + const $relays = useStore(relays); + + return ( + + {getLayout()} + + ); +} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 00000000..1e9c0e95 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Head, Html, Main, NextScript } from 'next/document'; + +export default function Document() { + return ( + + + +

+ + + + ); +} diff --git a/src/pages/feed/following.tsx b/src/pages/feed/following.tsx new file mode 100644 index 00000000..8f56d2b8 --- /dev/null +++ b/src/pages/feed/following.tsx @@ -0,0 +1,58 @@ +import BaseLayout from '@layouts/baseLayout'; +import UserLayout from '@layouts/userLayout'; + +import { Placeholder } from '@components/note/placeholder'; +import { Thread } from '@components/thread'; + +import { hoursAgo } from '@utils/getDate'; + +import { follows } from '@stores/follows'; + +import { useStore } from '@nanostores/react'; +import { dateToUnix, useNostrEvents } from 'nostr-react'; +import { + JSXElementConstructor, + ReactElement, + ReactFragment, + ReactPortal, + Suspense, + useRef, +} from 'react'; + +export default function Page() { + const $follows = useStore(follows); + const now = useRef(new Date()); + + const { events } = useNostrEvents({ + filter: { + authors: $follows, + since: dateToUnix(hoursAgo(6, now.current)), + kinds: [1], + limit: 100, + }, + }); + + return ( +

+ }> + + +

+ +

{/* spacer */}

+ + + +

+ + A censorship-resistant social network + + + built on nostr + +

{done ? : <>}

+ {/* background */} +

+ +

+ {/* end background */} +

+ ); +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +}; diff --git a/src/pages/messages/[pub].tsx b/src/pages/messages/[pub].tsx new file mode 100644 index 00000000..2e4d3000 --- /dev/null +++ b/src/pages/messages/[pub].tsx @@ -0,0 +1,24 @@ +import BaseLayout from '@layouts/baseLayout'; +import UserLayout from '@layouts/userLayout'; + +import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; + +export default function Page() { + return <>; +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +}; diff --git a/src/pages/onboarding/create.tsx b/src/pages/onboarding/create.tsx new file mode 100644 index 00000000..66532ce4 --- /dev/null +++ b/src/pages/onboarding/create.tsx @@ -0,0 +1,239 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import BaseLayout from '@layouts/baseLayout'; +import OnboardingLayout from '@layouts/onboardingLayout'; + +import { currentUser } from '@stores/currentUser'; + +import EyeIcon from '@assets/icons/Eye'; + +import { motion } from 'framer-motion'; +import Image from 'next/image'; +import { useRouter } from 'next/router'; +import { dateToUnix, useNostr } from 'nostr-react'; +import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools'; +import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react'; +import Database from 'tauri-plugin-sql-api'; +import { Config, names, uniqueNamesGenerator } from 'unique-names-generator'; + +const config: Config = { + dictionaries: [names], +}; + +const defaultAvatars = [ + 'https://bafybeidfsbrzqbvontmucteomoz2rkrxugu462l5hyhh6uioslkfzzs4oq.ipfs.w3s.link/avatar-11.png', + 'https://bafybeid7mrvznbnd6r2ju2iu7lsxkcikufys6z6ssy5ldxrxq5qh3yqf4u.ipfs.w3s.link/avatar-12.png', + 'https://bafybeih5gpwu53ohui6p7scekjpxjk2d4lusq2jqohqhjsvhfkeu56ea4e.ipfs.w3s.link/avatar-13.png', + 'https://bafybeibpbvrpuphkerjygdbnh26av5brqggzunbbbmfl3ozlvcn2mj6zxa.ipfs.w3s.link/avatar-14.png', + 'https://bafybeia4ue4loinuflu7y5q3xu6hcvt653mzw5yorw25oarf2wqksig4ma.ipfs.w3s.link/avatar-15.png', + 'https://bafybeib3gzl6n2bebiru2cpkdljmlzbtqfsl6xcnqtabxt6jrpj7l7ltm4.ipfs.w3s.link/avatar-16.png', +]; + +const defaultBanners = [ + 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg', + 'https://bafybeiderllqadxsikh3envikobmyka3uwgojriwh6epctqartq2loswyi.ipfs.w3s.link/banner-2.jpg', + 'https://bafybeiba4tifde2kczvd26vxhbb5jpqi3wmgvccpkcrle4hse2cqrwlwiy.ipfs.w3s.link/banner-3.jpg', + 'https://bafybeifqpny2eom7ccvmaguxxxfajutmn5h3fotaasga7gce2xfx37p6oy.ipfs.w3s.link/banner-4.jpg', +]; + +export default function Page() { + const router = useRouter(); + const { publish } = useNostr(); + + const [type, setType] = useState('password'); + const [loading, setLoading] = useState(false); + + const [privKey] = useState(() => generatePrivateKey()); + const [name] = useState(() => uniqueNamesGenerator(config).toString()); + const [avatar] = useState( + () => defaultAvatars[Math.floor(Math.random() * defaultAvatars.length)] + ); + const [banner] = useState( + () => defaultBanners[Math.floor(Math.random() * defaultBanners.length)] + ); + + const pubKey = getPublicKey(privKey); + const npub = nip19.npubEncode(pubKey); + const nsec = nip19.nsecEncode(pubKey); + + // auto-generated profile + const data = { + display_name: name, + name: name, + username: name.toLowerCase(), + picture: avatar, + banner: banner, + }; + + const createAccount = async () => { + setLoading(true); + + // publish account to relays + const event: any = { + content: JSON.stringify(data), + created_at: dateToUnix(), + kind: 0, + pubkey: pubKey, + tags: [], + }; + event.id = getEventHash(event); + event.sig = signEvent(event, privKey); + publish(event); + + // save account to database + const db = await Database.load('sqlite:lume.db'); + await db.execute( + `INSERT INTO accounts (privkey, pubkey, npub, nsec, metadata) VALUES ("${privKey}", "${pubKey}", "${npub}", "${nsec}", '${JSON.stringify( + data + )}')` + ); + await db.close(); + + // set currentUser in global state + currentUser.set({ + metadata: JSON.stringify(data), + npub: npub, + privkey: privKey, + pubkey: pubKey, + }); + + // redirect to following newsfeed + setTimeout(() => { + setLoading(false); + router.push('/onboarding/following'); + }, 1500); + }; + + const showNsec = () => { + if (type === 'password') { + setType('text'); + } else { + setType('password'); + } + }; + + return ( +

{/* spacer */}

+ +

+ + Create new key + + + Lume will generate key with default profile for you, you can edit it later, and please + store your key safely so you can restore your account or use other client + +

+ Public Key +

+ +

+ Private Key +

+ + +

+ + Default Profile (you can change it later) + +

{data.display_name}

@{data.username}

+ + +

+ {loading === true ? ( + + ) : ( +

+ +

+ )} +

+ +

+ ); +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +}; diff --git a/src/pages/onboarding/following.tsx b/src/pages/onboarding/following.tsx new file mode 100644 index 00000000..f201cbba --- /dev/null +++ b/src/pages/onboarding/following.tsx @@ -0,0 +1,161 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import BaseLayout from '@layouts/baseLayout'; +import OnboardingLayout from '@layouts/onboardingLayout'; + +import { truncate } from '@utils/truncate'; + +import { currentUser } from '@stores/currentUser'; + +import data from '@assets/directory.json'; +import CheckCircleIcon from '@assets/icons/CheckCircle'; + +import { useStore } from '@nanostores/react'; +import { motion } from 'framer-motion'; +import Image from 'next/image'; +import { useRouter } from 'next/router'; +import { nip19 } from 'nostr-tools'; +import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react'; +import Database from 'tauri-plugin-sql-api'; + +export default function Page() { + const router = useRouter(); + const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5); + + const [follow, setFollow] = useState([]); + const [loading, setLoading] = useState(false); + const [list] = useState(shuffle(data)); + const $currentUser: any = useStore(currentUser); + + const followUser = (e) => { + const npub = e.currentTarget.getAttribute('data-npub'); + setFollow((arr) => [...arr, npub]); + }; + + const insertDB = async () => { + const db = await Database.load('sqlite:lume.db'); + await db.execute( + `INSERT INTO followings (pubkey, account) VALUES ("${$currentUser.pubkey}", "${$currentUser.pubkey}")` + ); + follow.forEach(async (npub) => { + const { data } = nip19.decode(npub); + await db.execute( + `INSERT INTO followings (pubkey, account) VALUES ("${data}", "${$currentUser.pubkey}")` + ); + }); + }; + + const createFollowing = async () => { + setLoading(true); + + insertDB().then(() => + setTimeout(() => { + setLoading(false); + router.push('/'); + }, 1500) + ); + }; + + return ( +

{/* spacer */}

+ +

+ + Choose 10 people you want to following + + + For better experiences, you should follow the people you care about to personalize your + newsfeed, otherwise you will be very bored + +

+ {list.map((item, index) => ( +

followUser(e)} + data-npub={item.npub} + className={`col-span-1 inline-flex cursor-pointer items-center gap-3 rounded-lg p-2 hover:bg-zinc-700 ${ + follow.includes(item.npub) ? 'bg-zinc-800' : '' + }`}> +

{item.name}

+ {truncate(item.npub, 16, ' .... ')} +

+ {follow.includes(item.npub) ? ( + + ) : ( + <> + )} +

+ ))} +

+ + +

+ {loading === true ? ( + + ) : ( +

+ +

+ )} +

+ +

{/* spacer */}

+ + Other social network require email/password +
+ nostr use{' '} + + public/private key instead + + + + If you have used nostr before, you can import your own private key. Otherwise, you can + create a new key or use auto-generated account created by system. + + + + + Create new key + + + Import key + + +

{/* spacer */}

+ ); +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +}; diff --git a/src/stores/currentUser.tsx b/src/stores/currentUser.tsx new file mode 100644 index 00000000..ddfc4912 --- /dev/null +++ b/src/stores/currentUser.tsx @@ -0,0 +1,10 @@ +import { persistentAtom } from '@nanostores/persistent'; + +export const currentUser = persistentAtom( + 'currentUser', + {}, + { + encode: JSON.stringify, + decode: JSON.parse, + } +); diff --git a/src/stores/follows.tsx b/src/stores/follows.tsx new file mode 100644 index 00000000..8016660d --- /dev/null +++ b/src/stores/follows.tsx @@ -0,0 +1,10 @@ +import { persistentAtom } from '@nanostores/persistent'; + +export const follows = persistentAtom('follows', [], { + encode(value) { + return JSON.stringify(value); + }, + decode(value) { + return JSON.parse(value); + }, +}); diff --git a/src/stores/relays.tsx b/src/stores/relays.tsx new file mode 100644 index 00000000..27344318 --- /dev/null +++ b/src/stores/relays.tsx @@ -0,0 +1,25 @@ +import { persistentAtom } from '@nanostores/persistent'; + +export const relays = persistentAtom( + 'relays', + [ + 'wss://relay.uselume.xyz', + 'wss://nostr-pub.wellorder.net', + 'wss://nostr.bongbong.com', + 'wss://nostr.zebedee.cloud', + 'wss://nostr.fmt.wiz.biz', + 'wss://nostr.walletofsatoshi.com', + 'wss://relay.snort.social', + 'wss://offchain.pub', + 'wss://nos.lol', + 'wss://relay.damus.io', + ], + { + encode(value) { + return JSON.stringify(value); + }, + decode(value) { + return JSON.parse(value); + }, + } +); diff --git a/src/utils/getDate.tsx b/src/utils/getDate.tsx new file mode 100644 index 00000000..416c6845 --- /dev/null +++ b/src/utils/getDate.tsx @@ -0,0 +1,13 @@ +export const daysAgo = (numOfDays, date = new Date()) => { + const daysAgo = new Date(date.getTime()); + daysAgo.setDate(date.getDate() - numOfDays); + + return daysAgo; +}; + +export const hoursAgo = (numOfHours, date = new Date()) => { + const hoursAgo = new Date(date.getTime()); + hoursAgo.setHours(date.getHours() - numOfHours); + + return hoursAgo; +}; diff --git a/src/utils/truncate.tsx b/src/utils/truncate.tsx new file mode 100644 index 00000000..3653d3b9 --- /dev/null +++ b/src/utils/truncate.tsx @@ -0,0 +1,12 @@ +export const truncate = (fullStr: string, strLen: number, separator: string | unknown[]) => { + if (fullStr.length <= strLen) return fullStr; + + separator = separator || '...'; + + const sepLen = separator.length, + charsToShow = strLen - sepLen, + frontChars = Math.ceil(charsToShow / 2), + backChars = Math.floor(charsToShow / 2); + + return fullStr.substr(0, frontChars) + separator + fullStr.substr(fullStr.length - backChars); +}; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..9723858b --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,51 @@ +/** @type {import('tailwindcss').Config} */ + +module.exports = { + content: ['./src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: { + boxShadow: { + input: ` + 0px 1px 0px -1px var(--tw-shadow-color), + 0px 1px 1px -1px var(--tw-shadow-color), + 0px 1px 2px -1px var(--tw-shadow-color), + 0px 2px 4px -2px var(--tw-shadow-color), + 0px 3px 6px -3px var(--tw-shadow-color) + `, + highlight: ` + inset 0px 0px 0px 1px var(--tw-shadow-color), + inset 0px 1px 0px var(--tw-shadow-color) + `, + modal: ` + 0 -2px 6px hsl(0deg 0% 100% / 17%), + 0 5px 18px rgb(0 0 0 / 40%), + 0 4px 40px 8px rgb(0 0 0 / 40%), + 0 1px 4px -1px rgb(0 0 0 / 30%), + inset 0 0 0 0.3px hsl(0deg 0% 100% / 30%), + 0 0 0 0.5px hsl(0deg 0% 100% / 40%); + `, + inner: ` + 0 2px 2px rgb(4 4 7 / 45%), + 0 8px 24px rgb(4 4 7 / 60%) + `, + }, + backgroundColor: { + 'near-black': '#07070d', + 'white/2.5': 'hsla(0,0%,100%,.025)', + }, + backgroundImage: { + 'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))', + }, + keyframes: { + disco: { + '0%': { transform: 'translateY(-50%) rotate(0deg)' }, + '100%': { transform: 'translateY(-50%) rotate(360deg)' }, + }, + }, + animation: { + disco: 'disco 1.5s linear infinite', + }, + }, + }, + plugins: [require('@tailwindcss/typography')], +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..99c5f7e8 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@pages/*": ["src/pages/*"], + "@layouts/*": ["src/layouts/*"], + "@components/*": ["src/components/*"], + "@utils/*": ["src/utils/*"], + "@stores/*": ["src/stores/*"], + "@assets/*": ["src/assets/*"] + }, + "target": "es2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "moduleResolution": "node", + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "plugins": [ + { + "name": "next" + } + ] + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}

+ You haven't followed anyone yet +

Suggestions

Newsfeed

Channels

Direct Messages

{data['title']}