✨ Validate connected wallet

.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NETWORK=NETWORK
+NEXT_PUBLIC_AUTH_URL=AUTH_ENDPOINT

components/profile/menu-list.tsx

@@ -2,6 +2,9 @@ import { useDisconnectWallet } from '@mysten/dapp-kit';
 import { Div } from '@stylin.js/elements';
 import { not } from 'ramda';
 import { FC, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
+
+import { MEMEZ_FUN_TOKEN_AUTH } from '@/constants';
 
 import {
   DocIDSVG,
@@ -20,9 +23,24 @@ import RPCCollapseMenuInfo from './rpc-collapse-info';
 const MenuList: FC = () => {
   const [isActiveNSFE, setIsActiveNSFE] = useState(false);
   const [isRPCMenuOpen, setIsRPCMenuOpen] = useState(false);
+  const { mutate: disconnectWallet } = useDisconnectWallet();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
   const [isExplorerMenuOpen, setIsExplorerMenuOpen] = useState(false);
-  const { mutate: disconnectWallet } = useDisconnectWallet();
+
+  const [, setSignedPM] = useLocalStorage<{
+    signature: string;
+    message: string;
+    cookies?: unknown;
+  }>(MEMEZ_FUN_TOKEN_AUTH, { signature: '', message: '' });
+
+  const handleDisconnectWallet = async () => {
+    setSignedPM({ signature: '', message: '' });
+    await fetch(`${process.env.NEXT_PUBLIC_BASE_URL!}/auth/sign-out`, {
+      method: 'DELETE',
+      credentials: 'include',
+    });
+    disconnectWallet();
+  };
 
   return (
     <Div>
@@ -58,7 +76,7 @@ const MenuList: FC = () => {
         Icon={LogoutSVG}
         title="Disconnect"
         color="#E85965"
-        onClick={() => disconnectWallet()}
+        onClick={handleDisconnectWallet}
       />
     </Div>
   );

components/profile/profile-info.tsx

@@ -12,14 +12,16 @@ import { FixedPointMath } from '@/lib/entities/fixed-point-math';
 import { BannerProfileSVG, CopySVG } from '../svg';
 
 const ProfileInfo: FC = () => {
-  const currentAccount = useCurrentAccount();
   const { push } = useRouter();
+  const currentAccount = useCurrentAccount();
 
   const { balance } = useCoinBalance('0x2::sui::SUI', currentAccount?.address);
 
   const copyAddress = () => {
     toast.success('Copied!');
-    window.navigator.clipboard.writeText('0x2::sui::SUI');
+    window.navigator.clipboard.writeText(
+      formatAddress(currentAccount?.address || '')
+    );
   };
 
   return (
@@ -67,10 +69,10 @@ const ProfileInfo: FC = () => {
           flexDirection="column"
         >
           <Span color="#fff" lineHeight="1.375rem">
-            Name
+            name
           </Span>
           <Span color="#90939D" lineHeight="1.375rem">
-            {formatAddress(currentAccount?.address || '')}
+            username
           </Span>
         </Div>
         <Div

components/wallet-button/connect-modal.tsx

@@ -1,29 +1,21 @@
 import { useConnectWallet, useWallets } from '@mysten/dapp-kit';
 import { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
 import { Div, H2, Img, Li, P, Ul } from '@stylin.js/elements';
-import { useRouter } from 'next/router';
 import { FC } from 'react';
 import unikey from 'unikey';
 
 import { LoaderSVG, MemeZLogoSVG } from '@/components/svg';
-import { RoutesEnum } from '@/constants';
 import { useDialog } from '@/hooks/use-dialog';
 
 const ConnectModal: FC = () => {
   const wallets = useWallets();
-  const { push } = useRouter();
   const { mutateAsync } = useConnectWallet();
   const { dialog, handleClose } = useDialog();
 
   const connectWallet = async (wallet: WalletWithRequiredFeatures) => {
     await mutateAsync({ wallet });
   };
 
-  const handleSignInNavigation = () => {
-    push(RoutesEnum.SignIn);
-    handleClose();
-  };
-
   const handleConnect = (wallet: WalletWithRequiredFeatures) => {
     dialog.promise(connectWallet(wallet), {
       success: () => ({
@@ -83,60 +75,15 @@ const ConnectModal: FC = () => {
       width={['100vw', '33.25rem']}
       borderRadius={['1rem 1rem 0 0', '1rem']}
     >
-      <H2 textAlign="center">
-        {wallets ? 'Select Your Wallet' : 'Go to sign in'}
-      </H2>
-      {wallets ? (
-        <Ul
-          all="unset"
-          gap="0.5rem"
-          display="flex"
-          overflowY="auto"
-          flexDirection="column"
-        >
-          {wallets.map((wallet) => (
-            <Li
-              p="0.75rem"
-              bg="#393838"
-              gap="0.75rem"
-              key={unikey()}
-              display="flex"
-              cursor="pointer"
-              alignItems="center"
-              borderRadius="0.5rem"
-              border="1px solid transparent"
-              justifyContent="space-between"
-              nHover={{ borderColor: '#F5B72280' }}
-              onClick={() => handleConnect(wallet)}
-            >
-              <Div
-                key={unikey()}
-                gap="0.75rem"
-                display="flex"
-                cursor="pointer"
-                alignItems="center"
-              >
-                <Img
-                  alt={wallet.name}
-                  src={wallet.icon}
-                  width="2rem"
-                  height="2rem"
-                  borderRadius="0.5rem"
-                />
-                <P>{wallet.name}</P>
-              </Div>
-              <P color="#BAF6CF">Installed</P>
-            </Li>
-          ))}
-        </Ul>
-      ) : (
-        <Ul
-          all="unset"
-          gap="0.5rem"
-          display="flex"
-          overflowY="auto"
-          flexDirection="column"
-        >
+      <H2 textAlign="center">Select Your Wallet</H2>
+      <Ul
+        all="unset"
+        gap="0.5rem"
+        display="flex"
+        overflowY="auto"
+        flexDirection="column"
+      >
+        {wallets.map((wallet) => (
           <Li
             p="0.75rem"
             bg="#393838"
@@ -149,12 +96,28 @@ const ConnectModal: FC = () => {
             border="1px solid transparent"
             justifyContent="space-between"
             nHover={{ borderColor: '#F5B72280' }}
-            onClick={handleSignInNavigation}
+            onClick={() => handleConnect(wallet)}
           >
-            Sign in
+            <Div
+              key={unikey()}
+              gap="0.75rem"
+              display="flex"
+              cursor="pointer"
+              alignItems="center"
+            >
+              <Img
+                alt={wallet.name}
+                src={wallet.icon}
+                width="2rem"
+                height="2rem"
+                borderRadius="0.5rem"
+              />
+              <P>{wallet.name}</P>
+            </Div>
+            <P color="#BAF6CF">Installed</P>
           </Li>
-        </Ul>
-      )}
+        ))}
+      </Ul>
     </Div>
   );
 };

components/wallet-button/index.tsx

@@ -1,16 +1,137 @@
-import { useCurrentAccount } from '@mysten/dapp-kit';
-import { Button, Div } from '@stylin.js/elements';
-import { useRouter } from 'next/router';
-import { FC } from 'react';
+import {
+  useCurrentAccount,
+  useDisconnectWallet,
+  useSignPersonalMessage,
+} from '@mysten/dapp-kit';
+import { Button, Div, Img } from '@stylin.js/elements';
+import { not } from 'ramda';
+import { FC, useEffect, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
+import { v4 } from 'uuid';
 
-import { WalletSVG } from '@/components/svg';
-import { Routes, RoutesEnum } from '@/constants';
+import { LoaderSVG, MemeZLogoSVG, WalletSVG } from '@/components/svg';
+import { MEMEZ_FUN_TOKEN_AUTH } from '@/constants';
+import { useDialog } from '@/hooks/use-dialog';
 
 import ConnectedModal from './connected-modal';
+import { useConnectModal } from './wallet-button.hook';
 
 const WalletButton: FC = () => {
+  const handleOpenConnectModal = useConnectModal();
   const currentAccount = useCurrentAccount();
-  const { push } = useRouter();
+  const { mutate: disconnectWallet } = useDisconnectWallet();
+  const [signing, setSigning] = useState(false);
+  const { dialog, handleClose } = useDialog();
+  const { mutate: signPersonalMessage } = useSignPersonalMessage();
+  const [signedPM, setSignedPM] = useLocalStorage<{
+    signature: string;
+    message: string;
+  }>(MEMEZ_FUN_TOKEN_AUTH, { signature: '', message: '' });
+
+  const handleConnectWallet = () => {
+    handleOpenConnectModal();
+  };
+
+  useEffect(() => {
+    if (signedPM.signature || signedPM.message || !currentAccount) return;
+
+    const newMessage = v4();
+
+    signPersonalMessage(
+      {
+        message: new TextEncoder().encode(newMessage),
+      },
+      {
+        onSuccess: (result) => {
+          setSigning(not);
+          setSignedPM({
+            signature: result.signature,
+            message: newMessage,
+          });
+        },
+        onError: () => disconnectWallet(),
+      }
+    );
+  }, [currentAccount]);
+
+  useEffect(() => {
+    if (!signedPM.signature || !signedPM.message || !currentAccount || !signing)
+      return;
+    const signIn = async () => {
+      await fetch(`${process.env.NEXT_PUBLIC_BASE_URL!}/auth/sign-in`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: signedPM.message,
+          signature: signedPM.signature,
+          address: currentAccount.address,
+        }),
+      })
+        .then(async (res) => {
+          if (!res.ok) {
+            disconnectWallet();
+            throw new Error('signin error');
+          }
+
+          console.log(res.headers.getSetCookie(), '>>>res');
+        })
+        .catch(() => {
+          disconnectWallet();
+          setSignedPM({
+            signature: '',
+            message: '',
+          });
+        });
+      setSigning(not);
+    };
+
+    dialog.promise(signIn(), {
+      success: () => ({
+        timeout: 10000,
+        title: 'Sign in!',
+        button: { label: 'Continue browsing', onClick: handleClose },
+        message: 'Signin successfully',
+        Icon: (
+          <Div
+            gap="1rem"
+            display="flex"
+            cursor="pointer"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <MemeZLogoSVG maxHeight="10rem" maxWidth="10rem" width="100%" />
+          </Div>
+        ),
+      }),
+      loading: () => ({
+        Icon: <LoaderSVG />,
+        title: 'Signing...',
+        message: 'Hang tight! Signing. Please wait',
+      }),
+      error: (e) => ({
+        title: 'Oops! You could not Connect!',
+        button: { label: 'Try again', onClick: () => signIn() },
+        message:
+          e.message ||
+          'Sigin-in failed. Try to refresh the page, double-check your inputs, or reconnect your wallet.',
+        ghostButton: {
+          label: 'Do not want to connect my wallet',
+          onClick: handleClose,
+        },
+        Icon: (
+          <Img
+            alt="Error"
+            width="7rem"
+            height="7rem"
+            src="/dialogs/error.png"
+          />
+        ),
+      }),
+    });
+  }, [signing]);
 
   if (currentAccount) return <ConnectedModal />;
 
@@ -36,7 +157,7 @@ const WalletButton: FC = () => {
         color: '#0a090d',
         backgroundColor: '#F6C853',
       }}
-      onClick={() => push(Routes[RoutesEnum.SignIn])}
+      onClick={handleConnectWallet}
     >
       <Div width="1.5rem" height="1.5rem">
         <WalletSVG maxWidth="100%" maxHeight="100%" width="100%" />

constants/index.ts

@@ -3,3 +3,5 @@ export * from './math';
 export * from './network';
 export * from './routes';
 export const DROPDOWN_DATA = ['Days', 'Weeks', 'Months'];
+
+export const MEMEZ_FUN_TOKEN_AUTH = 'MEMEZ_FUN_TOKEN_AUTH';

constants/routes.ts

@@ -1,7 +1,6 @@
 export enum RoutesEnum {
   Home = 'home',
   CreateCoin = 'create-coin',
-  SignIn = 'sign-in',
   CreateProfile = 'create-profile',
   Profile = 'profile',
 }
@@ -10,6 +9,5 @@ export const Routes: Record<RoutesEnum, string> = {
   [RoutesEnum.CreateProfile]: '/create-profile',
   [RoutesEnum.Profile]: '/profile',
   [RoutesEnum.CreateCoin]: '/create-coin',
-  [RoutesEnum.SignIn]: '/sign-in',
   [RoutesEnum.Home]: '/',
 };