From 297cc2f018e55683cb4b9eb6a1097fd08fca54c9 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sun, 12 Mar 2023 17:00:10 +0700 Subject: [PATCH] updated onboarding, include UI & UX --- src/assets/directory.json | 102 ------------ src/layouts/base.tsx | 2 +- src/layouts/fullscreen.tsx | 12 -- src/layouts/onboarding.tsx | 15 -- src/pages/index.tsx | 75 +++------ src/pages/newsfeed/circle.tsx | 2 +- src/pages/newsfeed/global.tsx | 28 ---- src/pages/onboarding/create/index.tsx | 170 +++++++++----------- src/pages/onboarding/create/pre-follows.tsx | 147 ----------------- src/pages/onboarding/index.tsx | 44 ++--- src/pages/onboarding/login/fetch.tsx | 149 ----------------- src/pages/onboarding/login/index.tsx | 125 +++++++------- src/pages/onboarding/login/step-2.tsx | 147 +++++++++++++++++ tailwind.config.js | 9 ++ 14 files changed, 333 insertions(+), 694 deletions(-) delete mode 100644 src/assets/directory.json delete mode 100644 src/layouts/fullscreen.tsx delete mode 100644 src/layouts/onboarding.tsx delete mode 100644 src/pages/newsfeed/global.tsx delete mode 100644 src/pages/onboarding/create/pre-follows.tsx delete mode 100644 src/pages/onboarding/login/fetch.tsx create mode 100644 src/pages/onboarding/login/step-2.tsx diff --git a/src/assets/directory.json b/src/assets/directory.json deleted file mode 100644 index 0df53779..00000000 --- a/src/assets/directory.json +++ /dev/null @@ -1,102 +0,0 @@ -[ - { - "name": "jb55", - "avatar": "https://pbs.twimg.com/profile_images/1362882895669436423/Jzsp1Ikr.jpg", - "npub": "npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s" - }, - { - "name": "jack", - "avatar": "https://pbs.twimg.com/profile_images/1115644092329758721/AFjOr-K8.jpg", - "npub": "npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m" - }, - { - "name": "derekmoss", - "avatar": "https://pbs.twimg.com/profile_images/1609534946435076096/Gl1xeTPP.jpg", - "npub": "npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424" - }, - { - "name": "ODELL", - "avatar": "https://pbs.twimg.com/profile_images/1421584695746338819/Z_7ZfAeP.jpg", - "npub": "npub1qny3tkh0acurzla8x3zy4nhrjz5zd8l9sy9jys09umwng00manysew95gx" - }, - { - "name": "yeg0rpetrov", - "avatar": "https://pbs.twimg.com/profile_images/1593772940126035968/D_LQYRd9.jpg", - "npub": "npub1z4m7gkva6yxgvdyclc7zp0vz4ta0s2d9jh8g83w03tp5vdf3kzdsxana6p" - }, - { - "name": "PrestonPysh", - "avatar": "https://pbs.twimg.com/profile_images/1408783276081299462/f4Ye5n7-.jpg", - "npub": "npub1s5yq6wadwrxde4lhfs56gn64hwzuhnfa6r9mj476r5s4hkunzgzqrs6q7z" - }, - { - "name": "fiatjaf", - "avatar": "https://pbs.twimg.com/profile_images/539211568035004416/sBMjPR9q.jpeg", - "npub": "npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6" - }, - { - "name": "dergigi", - "avatar": "https://pbs.twimg.com/profile_images/1566370176446119943/UeuACt-4.jpg", - "npub": "npub1dergggklka99wwrs92yz8wdjs952h2ux2ha2ed598ngwu9w7a6fsh9xzpc" - }, - { - "name": "hodlonaut", - "avatar": "https://pbs.twimg.com/profile_images/1570910274755911682/z8DJsufc.jpg", - "npub": "npub1cjw49ftnxene9wdxujz3tp7zspp0kf862cjud4nm3j2usag6eg2smwj2rh" - }, - { - "name": "DylanLeClair_", - "avatar": "https://pbs.twimg.com/profile_images/1599858581611941922/XxvPPWAt.jpg", - "npub": "npub1pyp9fqq60689ppds9ec3vghsm7s6s4grfya0y342g2hs3a0y6t0segc0qq" - }, - { - "name": "ShadowOfNakadai", - "avatar": "https://pbs.twimg.com/profile_images/1620811984374464514/V7GJo1ak.jpg", - "npub": "npub1sqaxzwvh5fhgw9q3d7v658ucapvfeds3dcd2587fcwyesn7dnwuqt2r45v" - }, - { - "name": "jackmallers", - "avatar": "https://pbs.twimg.com/profile_images/1599778945699909632/O0qc9ykA.jpg", - "npub": "npub1cn4t4cd78nm900qc2hhqte5aa8c9njm6qkfzw95tszufwcwtcnsq7g3vle" - }, - { - "name": "remroya", - "avatar": "https://pbs.twimg.com/profile_images/1616979727515881478/5ABZzBYO.jpg", - "npub": "npub1csamkk8zu67zl9z4wkp90a462v53q775aqn5q6xzjdkxnkvcpd7srtz4x9" - }, - { - "name": "TakumiHisoka", - "avatar": "https://pbs.twimg.com/profile_images/1623286991944302594/cXSJ04BF.jpg", - "npub": "npub1yc8jxnzkzm2esndrqdae6lza6qlwzxpcz9drpy699j9k7xetrpkqgvkwe9" - }, - { - "name": "EvelinSchallert", - "avatar": "https://pbs.twimg.com/profile_images/1448008447983763457/7k07LJxQ.jpg", - "npub": "npub1l2gvp9wxajsl6wqnh6eulvz5sdk05gtajjwjn2yn45s9yvfru2kqf3r0gm" - }, - { - "name": "peer", - "avatar": "https://pbs.twimg.com/profile_images/1623291991709700097/aBL_VpMC.jpg", - "npub": "npub18zx8lw3947pghsgzqv2t0x8pe767sscag5djgj5afr755xkqd97qt530pr" - }, - { - "name": "francispouliot_", - "avatar": "https://pbs.twimg.com/profile_images/1524789480439283719/5Q_XBKGb.jpg", - "npub": "npub1t289s8ck5qfwynf2vsq49t2kypvvkpj7rhegayrur0ag9s2sezaqgunkzs" - }, - { - "name": "lanyihou", - "avatar": "https://pbs.twimg.com/profile_images/1603653816175689729/Ctj5GXPt.jpg", - "npub": "npub18hywyhcnn5rqhlgu80yxeyf57fyhghlrc54dzaqyd9vtts949u9s24rtva" - }, - { - "name": "marttimalmi", - "avatar": "https://pbs.twimg.com/profile_images/1125299725828272129/n8NDo1LN.png", - "npub": "npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk" - }, - { - "name": "Snowden", - "avatar": "https://pbs.twimg.com/profile_images/648888480974508032/66_cUYfj.jpg", - "npub": "npub1sn0wdenkukak0d9dfczzeacvhkrgz92ak56egt7vdgzn8pv2wfqqhrjdv9" - } -] diff --git a/src/layouts/base.tsx b/src/layouts/base.tsx index 620befc8..a5dd511d 100644 --- a/src/layouts/base.tsx +++ b/src/layouts/base.tsx @@ -1,3 +1,3 @@ export default function BaseLayout({ children }: { children: React.ReactNode }) { - return
{children}
; + return
{children}
; } diff --git a/src/layouts/fullscreen.tsx b/src/layouts/fullscreen.tsx deleted file mode 100644 index 58bbdcb9..00000000 --- a/src/layouts/fullscreen.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export default function FullscreenLayout({ children }: { children: React.ReactNode }) { - return ( -
- {/* dragging area */} -
- {/* end dragging area */} - {/* content */} -
{children}
- {/* end content */} -
- ); -} diff --git a/src/layouts/onboarding.tsx b/src/layouts/onboarding.tsx deleted file mode 100644 index 2876f33e..00000000 --- a/src/layouts/onboarding.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export default function OnboardingLayout({ children }: { children: React.ReactNode }) { - return ( -
-
-
-
-
-
-
- {children} -
-
-
- ); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e6ac0054..b8b09403 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,16 +1,14 @@ import BaseLayout from '@layouts/base'; -import FullscreenLayout from '@layouts/fullscreen'; import LumeSymbol from '@assets/icons/Lume'; import { useLocalStorage } from '@rehooks/local-storage'; -import { motion } from 'framer-motion'; import { useRouter } from 'next/router'; import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect, useRef, useState } from 'react'; export default function Page() { const router = useRouter(); - const [currentUser]: any = useLocalStorage('current-user'); + const [currentUser]: object[] = useLocalStorage('current-user'); const [loading, setLoading] = useState(true); const timer = useRef(null); @@ -18,7 +16,7 @@ export default function Page() { if (currentUser) { timer.current = setTimeout(() => { setLoading(false); - router.push('/newsfeed/following'); + router.push('/newsfeed/circle'); }, 1000); } else { timer.current = setTimeout(() => { @@ -34,32 +32,24 @@ export default function Page() { }, [currentUser, router]); return ( -
-
{/* spacer */}
-
- - - -
- - A censorship-resistant social network - - - built on nostr - +
+ {/* dragging area */} +
+ {/* end dragging area */} +
+
+ +
+

Did you know?

+

+ no one can't stop you use bitcoin and nostr +

+
-
-
-
- {loading ? ( +
+ {loading && ( - ) : ( - <> )}
- {/* background */} -
- -
- {/* end background */}
); } @@ -110,9 +77,5 @@ Page.getLayout = function getLayout( | ReactFragment | ReactPortal ) { - return ( - - {page} - - ); + return {page}; }; diff --git a/src/pages/newsfeed/circle.tsx b/src/pages/newsfeed/circle.tsx index d6749316..98f3d23e 100644 --- a/src/pages/newsfeed/circle.tsx +++ b/src/pages/newsfeed/circle.tsx @@ -6,7 +6,7 @@ import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from export default function Page() { return (
-

Global

+

Circle Newsfeed

); } diff --git a/src/pages/newsfeed/global.tsx b/src/pages/newsfeed/global.tsx deleted file mode 100644 index d6749316..00000000 --- a/src/pages/newsfeed/global.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import BaseLayout from '@layouts/base'; -import NewsFeedLayout from '@layouts/newsfeed'; - -import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; - -export default function Page() { - return ( -
-

Global

-
- ); -} - -Page.getLayout = function getLayout( - page: - | string - | number - | boolean - | ReactElement> - | ReactFragment - | ReactPortal -) { - return ( - - {page} - - ); -}; diff --git a/src/pages/onboarding/create/index.tsx b/src/pages/onboarding/create/index.tsx index 90f8189f..7284c748 100644 --- a/src/pages/onboarding/create/index.tsx +++ b/src/pages/onboarding/create/index.tsx @@ -1,12 +1,10 @@ import BaseLayout from '@layouts/base'; -import OnboardingLayout from '@layouts/onboarding'; import { DatabaseContext } from '@components/contexts/database'; import { RelayContext } from '@components/contexts/relay'; import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons'; import { useLocalStorage, writeStorage } from '@rehooks/local-storage'; -import { motion } from 'framer-motion'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools'; @@ -100,115 +98,107 @@ export default function Page() { // redirect to pre-follow setTimeout(() => { setLoading(false); - router.push('/onboarding/create/pre-follows'); + router.push('/'); }, 1500); }) .catch(console.error); }; 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 - +

+ Create new account +

-
-
- -
- +
+
+
+
+
+ +
+ +
-
-
- -
- - +
+ +
+ + +
-
-
- -
-
-
-
- -
-
-
-

{data.display_name}

-

@{data.username}

+
+ +
+
+
+
+
-
-
-
-
+
+
+

{data.display_name}

+

@{data.username}

+
+
+
+
+
+
+
-
-
- - -
- {loading === true ? ( - - - - - ) : ( -
+
+ {loading === true ? ( + + + + + ) : ( -
- )} + )} +
- +
); } @@ -222,9 +212,5 @@ Page.getLayout = function getLayout( | ReactFragment | ReactPortal ) { - return ( - - {page} - - ); + return {page}; }; diff --git a/src/pages/onboarding/create/pre-follows.tsx b/src/pages/onboarding/create/pre-follows.tsx deleted file mode 100644 index 601b097f..00000000 --- a/src/pages/onboarding/create/pre-follows.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import BaseLayout from '@layouts/base'; -import OnboardingLayout from '@layouts/onboarding'; - -import { DatabaseContext } from '@components/contexts/database'; - -import { truncate } from '@utils/truncate'; - -import data from '@assets/directory.json'; -import { CheckCircledIcon } from '@radix-ui/react-icons'; -import { useLocalStorage } from '@rehooks/local-storage'; -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, useContext, useState } from 'react'; - -const shuffle = (arr: { name: string; avatar: string; npub: string }[]) => [...arr].sort(() => Math.random() - 0.5); - -export default function Page() { - const { db }: any = useContext(DatabaseContext); - const router = useRouter(); - - const [follow, setFollow] = useState([]); - const [loading, setLoading] = useState(false); - const [list] = useState(shuffle(data)); - const [currentUser]: any = useLocalStorage('current-user'); - - const followUser = (e) => { - const npub = e.currentTarget.getAttribute('data-npub'); - setFollow((arr) => [...arr, npub]); - }; - - const insertDB = async () => { - // self follow - await db.execute( - `INSERT INTO follows (pubkey, account, kind) VALUES ("${currentUser.id}", "${currentUser.id}", "0")` - ); - // follow selected - follow.forEach(async (npub) => { - const { data } = nip19.decode(npub); - await db.execute(`INSERT INTO follows (pubkey, account, kind) VALUES ("${data}", "${currentUser.id}", "0")`); - }); - }; - - 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} -
-
-
-

{item.name}

-

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

-
-
- {follow.includes(item.npub) ? : <>} -
-
-
- ))} -
-
- - -
- {loading === true ? ( - - - - - ) : ( -
- -
- )} -
- -
- ); -} - -Page.getLayout = function getLayout( - page: - | string - | number - | boolean - | ReactElement> - | ReactFragment - | ReactPortal -) { - return ( - - {page} - - ); -}; diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx index 521d78fa..a32867d1 100644 --- a/src/pages/onboarding/index.tsx +++ b/src/pages/onboarding/index.tsx @@ -1,47 +1,33 @@ import BaseLayout from '@layouts/base'; -import OnboardingLayout from '@layouts/onboarding'; -import { motion } from 'framer-motion'; +import { ArrowRightIcon } from '@radix-ui/react-icons'; import Link from 'next/link'; import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; export default function Page() { return ( -
-
{/* 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. - - - +
+
+
+

+ Let's start! +

+
Create new key + Login with private key - +
-
{/* spacer */}
); } @@ -55,9 +41,5 @@ Page.getLayout = function getLayout( | ReactFragment | ReactPortal ) { - return ( - - {page} - - ); + return {page}; }; diff --git a/src/pages/onboarding/login/fetch.tsx b/src/pages/onboarding/login/fetch.tsx deleted file mode 100644 index 9b1bca29..00000000 --- a/src/pages/onboarding/login/fetch.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import BaseLayout from '@layouts/base'; -import OnboardingLayout from '@layouts/onboarding'; - -import { DatabaseContext } from '@components/contexts/database'; -import { RelayContext } from '@components/contexts/relay'; - -import { useLocalStorage } from '@rehooks/local-storage'; -import { motion } from 'framer-motion'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { getPublicKey, nip19 } from 'nostr-tools'; -import { - JSXElementConstructor, - ReactElement, - ReactFragment, - ReactPortal, - useCallback, - useContext, - useMemo, - useState, -} from 'react'; - -export default function Page() { - const { db }: any = useContext(DatabaseContext); - const relayPool: any = useContext(RelayContext); - - const [loading, setLoading] = useState(false); - const [relays] = useLocalStorage('relays'); - - const router = useRouter(); - const { privkey }: any = router.query; - - const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : null), [privkey]); - - // save account to database - const insertAccount = useCallback( - async (metadata) => { - if (loading === false) { - const npub = privkey ? nip19.npubEncode(pubkey) : null; - const nsec = privkey ? nip19.nsecEncode(privkey) : null; - await db.execute( - `INSERT OR IGNORE INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubkey}", "${privkey}", "${npub}", "${nsec}", '${metadata}')` - ); - setLoading(true); - } - }, - [db, privkey, pubkey, loading] - ); - - // save follows to database - const insertFollows = useCallback( - async (follows) => { - follows.forEach(async (item) => { - if (item) { - await db.execute( - `INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${pubkey}", "0")` - ); - } - }); - }, - [db, pubkey] - ); - - relayPool.subscribe( - [ - { - authors: [pubkey], - kinds: [0, 3], - since: 0, - }, - ], - relays, - (event: any) => { - if (event.kind === 0) { - insertAccount(event.content); - } else { - if (event.tags.length > 0) { - insertFollows(event.tags); - } - } - }, - undefined, - (events: any, relayURL: any) => { - console.log(events, relayURL); - } - ); - - return ( -
-
{/* spacer */}
- -
- - Fetching your profile... - - - As long as you have private key, you alway can sync your profile and follows list on every nostr client, so - please keep your key safely - -
- - -
- {loading === true ? ( - - - - - ) : ( - - Finish - - )} -
- -
- ); -} - -Page.getLayout = function getLayout( - page: - | string - | number - | boolean - | ReactElement> - | ReactFragment - | ReactPortal -) { - return ( - - {page} - - ); -}; diff --git a/src/pages/onboarding/login/index.tsx b/src/pages/onboarding/login/index.tsx index 47ca3354..d61a8310 100644 --- a/src/pages/onboarding/login/index.tsx +++ b/src/pages/onboarding/login/index.tsx @@ -1,7 +1,6 @@ import BaseLayout from '@layouts/base'; -import OnboardingLayout from '@layouts/onboarding'; -import { motion } from 'framer-motion'; +import { LightningBoltIcon } from '@radix-ui/react-icons'; import { useRouter } from 'next/router'; import { nip19 } from 'nostr-tools'; import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; @@ -43,7 +42,7 @@ export default function Page() { try { router.push({ - pathname: '/onboarding/login/fetch', + pathname: '/onboarding/login/step-2', query: { privkey: privkey }, }); } catch (error) { @@ -55,60 +54,70 @@ export default function Page() { }; return ( -
-
{/* spacer */}
- -
- - Import your private key - - - You can import private key format as hex string or nsec. If you have installed Nostr Connect compality - wallet in your mobile, you can connect by scan QR Code below - -
-
-
- + +
+

+ Login with Private Key +

+
+
+
+
+
+ {/* #TODO: add function */} + +
+
+
+
+
+
+ or +
+
+
+
+ +
+ {errors.key &&

{errors.key.message}

} +
+
+
+ {isSubmitting ? ( + + + + + ) : ( + + )}
- {errors.key &&

{errors.key.message}

}
- - -
- {isSubmitting ? ( - - - - - ) : ( - - )} -
- +
); } @@ -122,9 +131,5 @@ Page.getLayout = function getLayout( | ReactFragment | ReactPortal ) { - return ( - - {page} - - ); + return {page}; }; diff --git a/src/pages/onboarding/login/step-2.tsx b/src/pages/onboarding/login/step-2.tsx new file mode 100644 index 00000000..442618c4 --- /dev/null +++ b/src/pages/onboarding/login/step-2.tsx @@ -0,0 +1,147 @@ +import BaseLayout from '@layouts/base'; + +import { DatabaseContext } from '@components/contexts/database'; +import { RelayContext } from '@components/contexts/relay'; + +import { useLocalStorage } from '@rehooks/local-storage'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { getPublicKey, nip19 } from 'nostr-tools'; +import { + JSXElementConstructor, + ReactElement, + ReactFragment, + ReactPortal, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; + +export default function Page() { + const { db }: any = useContext(DatabaseContext); + const relayPool: any = useContext(RelayContext); + + const router = useRouter(); + const { privkey }: any = router.query; + + const [relays] = useLocalStorage('relays'); + const [profile, setProfile] = useState({ picture: '', display_name: '', username: '' }); + + const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : null), [privkey]); + + // save account to database + const insertAccount = useCallback( + async (metadata) => { + const npub = privkey ? nip19.npubEncode(pubkey) : null; + const nsec = privkey ? nip19.nsecEncode(privkey) : null; + // insert to database + await db.execute( + `INSERT OR IGNORE INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubkey}", "${privkey}", "${npub}", "${nsec}", '${metadata}')` + ); + // update state + setProfile(JSON.parse(metadata)); + }, + [db, privkey, pubkey] + ); + + // save follows to database + const insertFollows = useCallback( + async (follows) => { + follows.forEach(async (item) => { + if (item) { + // insert to database + await db.execute( + `INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${pubkey}", "0")` + ); + } + }); + }, + [db, pubkey] + ); + + useEffect(() => { + relayPool.subscribe( + [ + { + authors: [pubkey], + kinds: [0, 3], + since: 0, + }, + ], + relays, + (event: any) => { + if (event.kind === 0) { + insertAccount(event.content); + } else { + if (event.tags.length > 0) { + insertFollows(event.tags); + } + } + }, + undefined, + (events: any, relayURL: any) => { + console.log(events, relayURL); + } + ); + }, [insertAccount, insertFollows, pubkey, relayPool, relays]); + + return ( +
+
+
+

+ Bringing back your profile... +

+
+
+
+
+
+
+
+
+ +
+
+
+

{profile.display_name}

+ · +

@{profile.username}

+
+
+
+
+
+
+
+
+
+
+
+
+ + Done → + +
+
+
+ ); +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return {page}; +}; diff --git a/tailwind.config.js b/tailwind.config.js index ee947538..d707e092 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -65,6 +65,14 @@ module.exports = { from: { opacity: 0, transform: 'translateX(2px)' }, to: { opacity: 1, transform: 'translateX(0)' }, }, + moveBg: { + '0%': { backgroundPosition: '50px' }, + '20%': { backgroundPosition: '150px' }, + '40%': { backgroundPosition: '250px' }, + '60%': { backgroundPosition: '350px' }, + '80%': { backgroundPosition: '450px' }, + '100%': { backgroundPosition: '550px' }, + }, }, animation: { disco: 'disco 1.5s linear infinite', @@ -74,6 +82,7 @@ module.exports = { slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)', + moveBg: 'moveBg 3s ease-in-out infinite alternate running forwards', }, }, },