diff --git a/src/components/HoverStatus.tsx b/src/components/HoverStatus.tsx index 6494dbf..d393e97 100644 --- a/src/components/HoverStatus.tsx +++ b/src/components/HoverStatus.tsx @@ -1,5 +1,4 @@ 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'; @@ -7,12 +6,13 @@ 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 index 490eed7..bfac2ca 100644 --- 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(null); const ref2 = useRef(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 ? ( // - {({ show }) => { + {() => { return ( - + { + onOpen(); + }} + > Connect Wallet ); diff --git a/src/hooks/useAppWallet.ts b/src/hooks/useAppWallet.ts new file mode 100644 index 0000000..dfb18b0 --- /dev/null +++ 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('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 index 54138d6..3bf4a95 100644 --- 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 index 3a10c48..fc36e37 100644 --- 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 index a86f9a1..625715a 100644 --- 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();