feat: support viewing register page without logged in

mechanismHQ · Sep 19, 2023 · bc8a728 · bc8a728
1 parent 949e307
commit bc8a728
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/web/components/layout/footer.tsx b/web/components/layout/footer.tsx
@@ -79,6 +79,7 @@ export const Footer: React.FC<{ children?: React.ReactNode }> = () => {
   }, []);
   const isMainnet = useAtomValue(isMainnetState);
   const faucetPath = useAccountPath('/faucet');
+  const registerPath = useAccountPath('/register');
   return (
     <FooterContainer
       // isInline
@@ -119,15 +120,8 @@ export const Footer: React.FC<{ children?: React.ReactNode }> = () => {
           </>
         )}
 
-        <HeaderLink
-          onClick={() => {
-            window.open('https://btc.us', '_blank');
-          }}
-          href="https://btc.us"
-          target="_blank"
-          color="$onSurface-text-subdued"
-        >
-          Mint BNS names
+        <HeaderLink onClick={() => {}} href={registerPath} color="$onSurface-text-subdued">
+          Register BNS names
         </HeaderLink>
         {!isMainnet && (
           <HeaderLink href={faucetPath} color="$onSurface-text-subdued">

diff --git a/web/components/p/register/index.tsx b/web/components/p/register/index.tsx
@@ -4,7 +4,7 @@ import { Box, Stack } from '@nelson-ui/react';
 import { Input } from '@components/ui/input';
 import { currentUserAddressNameStringsState, availableNamespacesState } from '@store/names';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { BnsNameRow } from '@components/bns-name-row';
+import { RegisterNameRow } from '@components/p/register/register-name-row';
 import { Toaster } from 'sonner';
 import { useDeepMemo } from '@common/hooks/use-deep-memo';
 import { nameInputAtom, registerTxIdAtom, registrationNameState } from '@store/register';
@@ -35,7 +35,7 @@ export const Register: React.FC<{ children?: React.ReactNode }> = () => {
     if (nameIsValid === false) return null;
     if (emptyInput) return null;
     return availableNamespaces.map(namespace => (
-      <BnsNameRow key={namespace} namespace={namespace} />
+      <RegisterNameRow key={namespace} namespace={namespace} />
     ));
   }, [availableNamespaces, emptyInput, nameIsValid, transformedName]);
 

diff --git a/web/components/bns-name-row.tsx → ...mponents/p/register/register-name-row.tsx b/web/components/bns-name-row.tsx → ...mponents/p/register/register-name-row.tsx
@@ -4,7 +4,7 @@ import { Box } from '@nelson-ui/react';
 import { Check, AlertCircle } from 'lucide-react';
 import { Spinner } from '@components/spinner';
 import { useDebounce } from 'usehooks-ts';
-import { Text } from './text';
+import { Text } from '../../text';
 import { useAtomValue } from 'jotai';
 import { Button } from '@components/ui/button';
 import { ustxToStx } from '@common/utils';
@@ -17,6 +17,16 @@ import { useDeepMemo } from '@common/hooks/use-deep-memo';
 import { TableCell, TableRow } from '@components/ui/table';
 import { cva } from 'class-variance-authority';
 import { cn } from '@common/ui-utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@components/ui/dialog';
+import { useConnect } from '@common/hooks/use-connect';
 
 const nameVariants = cva('', {
   variants: {
@@ -28,7 +38,7 @@ const nameVariants = cva('', {
   },
 });
 
-export const BnsNameRow: React.FC<{
+export const RegisterNameRow: React.FC<{
   namespace: string;
 }> = ({ namespace }) => {
   const name = useAtomValue(nameInputAtom.debouncedValueAtom);
@@ -39,6 +49,7 @@ export const BnsNameRow: React.FC<{
     return computeNamePrice(name, namespace);
   }, [namespace, name]);
   const { nameRegister } = useNameRegister(name, namespace, price);
+  const { isSignedIn, openAuthRequest } = useConnect();
 
   // const tx = useAtomValue(registerTxAtom); // TODO: use this to display some status of the tx
 
@@ -64,6 +75,39 @@ export const BnsNameRow: React.FC<{
     return 'unavailable';
   }, [isLoading, isAvailable]);
 
+  const action = useMemo(() => {
+    if (isSignedIn) {
+      return (
+        <Button variant="default" onClick={nameRegister}>
+          Register
+        </Button>
+      );
+    }
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="default">Sign in</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Sign in to register</DialogTitle>
+            <DialogDescription>To register a name, connect your Stacks wallet</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="submit"
+              onClick={async () => {
+                await openAuthRequest();
+              }}
+            >
+              Connect wallet
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }, [isSignedIn, nameRegister, openAuthRequest]);
+
   return (
     <TableRow>
       <TableCell>
@@ -90,9 +134,7 @@ export const BnsNameRow: React.FC<{
             {isLoading ? (
               <Spinner size={16} color="currentColor" />
             ) : isAvailable ? (
-              <Button variant="default" onClick={nameRegister}>
-                Register
-              </Button>
+              action
             ) : (
               <Box display="flex" alignItems="center" opacity={0.5}>
                 <AlertCircle size={16} />{' '}

diff --git a/web/pages/accounts/[address]/register.tsx b/web/pages/accounts/[address]/register.tsx
@@ -19,6 +19,5 @@ const RegisterPage: NextPage & { authRequired?: boolean } = () => {
     </Layout>
   );
 };
-RegisterPage.authRequired = true;
 
 export default RegisterPage;
diff --git a/web/pages/register.tsx b/web/pages/register.tsx
@@ -19,6 +19,5 @@ const RegisterPage: NextPage & { authRequired?: boolean } = () => {
     </Layout>
   );
 };
-RegisterPage.authRequired = true;
 
 export default RegisterPage;