wip: add relay discover to onboarding

2023-08-08 18:52:46 +07:00
parent 9c7b58ee99
commit e6c6793f6e
20 changed files with 974 additions and 535 deletions
@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-
-import { LoaderIcon } from '@shared/icons';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-import { User } from '@shared/user';
-
-import { useAccount } from '@utils/hooks/useAccount';
-import { usePublish } from '@utils/hooks/usePublish';
-
-export function OnboardingScreen() {
-  const navigate = useNavigate();
-
-  const { publish } = usePublish();
-  const { status, account } = useAccount();
-
-  const [loading, setLoading] = useState(false);
-
-  const submit = async () => {
-    try {
-      setLoading(true);
-
-      // publish event
-      publish({
-        content: 'Running Lume, join with me #nostr #lume : https://lume.nu',
-        kind: 1,
-        tags: [],
-      });
-
-      // redirect to home
-      setTimeout(() => navigate('/', { replace: true }), 1200);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="mx-auto w-full max-w-md">
-        <div className="mb-4 text-center">
-          <h1 className="mb-2 text-xl font-semibold text-white">
-            👋 Hello, welcome you to Lume
-          </h1>
-          <p className="text-sm text-zinc-300">
-            You&apos;re a part of Nostr community now
-          </p>
-          <p className="text-sm text-zinc-300">
-            If Lume gets your attention, please help us spread it and don&apos;t forget
-            invite your friend join with you, we can have fun togother
-          </p>
-        </div>
-        <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-          <div className="h-min w-full px-5 py-3">
-            {status === 'success' && (
-              <User pubkey={account.pubkey} time={Math.floor(Date.now() / 1000)} />
-            )}
-            <div className="-mt-6 select-text whitespace-pre-line break-words	pl-[49px] text-base text-white">
-              <p>Running Lume, join with me #nostr #lume</p>
-              <a
-                href="https://lume.nu"
-                className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
-                target="_blank"
-                rel="noreferrer"
-              >
-                https://lume.nu
-              </a>
-            </div>
-          </div>
-        </div>
-        <div className="mt-4 flex w-full flex-col gap-2">
-          <button
-            type="button"
-            onClick={() => submit()}
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium text-white hover:bg-fuchsia-600"
-          >
-            {loading ? (
-              <>
-                <span className="w-5" />
-                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
-                <span className="w-5" />
-              </>
-            ) : (
-              <>
-                <span className="w-5" />
-                <span>Spread</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
-            )}
-          </button>
-          <Link
-            to="/"
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-zinc-800 px-6 font-medium text-zinc-300 hover:bg-zinc-900"
-          >
-            Skip
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}