feat: Go to profile page or not after connect wallet

bnb-chain · Jul 1, 2024 · 9d39e5e · 9d39e5e
1 parent 526b8fa
commit 9d39e5e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 24 deletions.
diff --git a/src/components/HoverStatus.tsx b/src/components/HoverStatus.tsx
@@ -1,18 +1,18 @@
 import styled from '@emotion/styled';
-import { useModal as useWalletKitModal } from '@node-real/walletkit';
 import { Box, Flex, Stack } from '@totejs/uikit';
 import { useImmerAtom } from 'jotai-immer';
 import { MetaMaskAvatar } from 'react-metamask-avatar';
 import { useNavigate } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 import { buyAtom } from '../atoms/buyAtom';
 import { useGetChainListItems } from '../hooks/buyer/useGetChainListItems';
+import { useAppWallet } from '../hooks/useAppWallet';
 import { useGetRelationWithAddr } from '../hooks/useGetItemRelationWithAddr';
 import { trimLongStr } from '../utils';
 import { Item } from '../utils/apis/types';
+import { Loader } from './Loader';
 import { DefaultButton } from './ui/buttons/DefaultButton';
 import { YellowButton } from './ui/buttons/YellowButton';
-import { Loader } from './Loader';
 
 interface IProps {
   item: Item;
@@ -32,7 +32,7 @@ export const HoverStatus = ({ item, className }: IProps) => {
     doDownload,
     isDownloading,
   } = useGetRelationWithAddr(address, item, chainItemInfo?.creators?.[0] || '');
-  const { onOpen } = useWalletKitModal();
+  const { onOpen } = useAppWallet();
   const [, setBuy] = useImmerAtom(buyAtom);
 
   return (

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { WalletKitButton, useModal } from '@node-real/walletkit';
+import { WalletKitButton } from '@node-real/walletkit';
 import '@node-real/walletkit/styles.css';
 import {
   Box,
@@ -15,6 +15,7 @@ import { MetaMaskAvatar } from 'react-metamask-avatar';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAccount, useDisconnect } from 'wagmi';
 import { NET_ENV } from '../../env';
+import { useAppWallet } from '../../hooks/useAppWallet';
 import TestNetLogo from '../../images/logo-testnet.svg';
 import MainNetLogo from '../../images/logo.svg';
 import { trimLongStr } from '../../utils';
@@ -29,13 +30,8 @@ const INFO_BAR_HEIGHT = '40px';
 
 const Header = () => {
   const [dropDownOpen, setDropDownOpen] = useState(false);
-  const { address, isConnecting, isConnected } = useAccount({
-    onConnect: ({ isReconnected }) => {
-      if (!isReconnected) {
-        navigate('/profile?tab=uploaded');
-      }
-    },
-  });
+  const { onOpen } = useAppWallet();
+  const { address, isConnecting, isConnected } = useAccount();
 
   const { disconnect } = useDisconnect();
   const handleShowDropDown = useCallback(() => {
@@ -44,7 +40,6 @@ const Header = () => {
   const ref = useRef<HTMLDivElement>(null);
   const ref2 = useRef<HTMLDivElement>(null);
   const [{ y }] = useWindowScroll();
-  const { onOpen } = useModal();
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -56,7 +51,6 @@ const Header = () => {
 
   useEffect(() => {
     if (!ref.current) return;
-    // if (location.pathname !== '/') return;
 
     if (y && y > 10) {
       ref.current.style.backgroundColor = BG_COLOR;
@@ -139,7 +133,7 @@ const Header = () => {
               }}
               onClick={() => {
                 if (!address) {
-                  onOpen();
+                  onOpen('GO_TO_PROFILE');
                   return;
                 }
                 if (
@@ -163,9 +157,14 @@ const Header = () => {
             {!isConnected && !isConnecting ? (
               // <WalletKitButton />
               <WalletKitButton.Custom>
-                {({ show }) => {
+                {() => {
                   return (
-                    <StyledButton h="40px" onClick={show}>
+                    <StyledButton
+                      h="40px"
+                      onClick={() => {
+                        onOpen();
+                      }}
+                    >
                       Connect Wallet
                     </StyledButton>
                   );

diff --git a/src/hooks/useAppWallet.ts b/src/hooks/useAppWallet.ts
@@ -0,0 +1,34 @@
+import { useModal } from '@node-real/walletkit';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from 'wagmi';
+
+/**
+ * 'HOME': NOT REDIRECTED
+ * 'GO_TO_PROFILE': Go To profile page after connect wallet
+ */
+type Tag = 'DEFAULT' | 'GO_TO_PROFILE';
+
+export function useAppWallet() {
+  const navigate = useNavigate();
+  const [tag, setTag] = useState<Tag>('DEFAULT');
+
+  const { address } = useAccount({
+    onConnect() {
+      if (tag === 'DEFAULT') return;
+
+      navigate('/profile?tab=uploaded');
+    },
+  });
+
+  const { isOpen, onOpen } = useModal();
+
+  return {
+    address,
+    isOpen,
+    onOpen(tag: Tag = 'DEFAULT') {
+      setTag(tag);
+      onOpen();
+    },
+  };
+}
diff --git a/src/hooks/useGetItemRelationWithAddr.ts b/src/hooks/useGetItemRelationWithAddr.ts
@@ -91,7 +91,10 @@ export const useGetRelationWithAddr = (
   });
 
   useEffect(() => {
-    if (!addr || !data) return;
+    if (!addr || !data) {
+      setRelation('UNKNOWN');
+      return;
+    }
 
     // console.log('storageInfo', storageInfo);
 

diff --git a/src/pages/R.tsx b/src/pages/R.tsx
@@ -1,14 +1,14 @@
+import NiceModal from '@ebay/nice-modal-react';
+import styled from '@emotion/styled';
 import { Box } from '@totejs/uikit';
 import _ from 'lodash';
 import { useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Loader } from '../components/Loader';
-import { useRedirectFromExternal } from '../hooks/useRedirectFromExternal';
-import NiceModal from '@ebay/nice-modal-react';
-import { useModal } from '@node-real/walletkit';
 import { Tips } from '../components/modal/Tips';
+import { useAppWallet } from '../hooks/useAppWallet';
+import { useRedirectFromExternal } from '../hooks/useRedirectFromExternal';
 import { trimLongStr } from '../utils';
-import styled from '@emotion/styled';
 
 export const R = () => {
   const navigator = useNavigate();
@@ -21,7 +21,7 @@ export const R = () => {
     detailOid,
   } = useRedirectFromExternal();
 
-  const { onOpen } = useModal();
+  const { onOpen } = useAppWallet();
 
   // console.log(
   //   'status',

diff --git a/src/pages/Resource.tsx b/src/pages/Resource.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useModal as useWalletKitModal } from '@node-real/walletkit';
 import { LinkArrowIcon } from '@totejs/icons';
 import { Box, Button, Flex, Image, Link, Stack } from '@totejs/uikit';
 import { useImmerAtom } from 'jotai-immer';
@@ -21,6 +20,7 @@ import { useGetItemByObjectIds } from '../hooks/apis/useGetItemByObjectIds';
 import { useGetChainListItems } from '../hooks/buyer/useGetChainListItems';
 import { useGetBnbUsdtExchangeRate } from '../hooks/price/useGetBnbUsdtExchangeRate';
 import { useDelist } from '../hooks/seller/useDelist';
+import { useAppWallet } from '../hooks/useAppWallet';
 import { useGetObjectById } from '../hooks/useGetBucketOrObj';
 import { useGetRelationWithGroupId } from '../hooks/useGetItemRelationWithAddr';
 import {
@@ -106,7 +106,7 @@ const Resource = () => {
   //   navigator(`detail?bid=${bid}&oid=${oid}`);
   // },
 
-  const { onOpen } = useWalletKitModal();
+  const { onOpen } = useAppWallet();
 
   const { data: usdExchange } = useGetBnbUsdtExchangeRate();