commit

.env

@@ -2,5 +2,5 @@ SKIP_PREFLIGHT_CHECK=true
 GENERATE_SOURCEMAP=false
 REACT_APP_BASE_URL='http://14.29.101.215:30307'
 REACT_APP_WS_URL='ws://14.29.101.215:30307'
-REACT_APP_SHARE_LINK='http://14.29.101.215:30306/#/'
+REACT_APP_SHARE_LINK='http://14.29.101.215:30306/#/?address='
 REACT_APP_SIGN_KEY='9527nft9527_@fsdgfsx'

public/index.html

@@ -49,13 +49,13 @@
     <div class="public-container">
       <div style="display: flex;justify-content:center;align-items: center;text-align: center;height:80vh">
         <div>
-          <img src='./logo.png' style="width: 70%;height:auto" alt="">
+          <img src='./logo512.png' style="width: 70%;height:auto" alt="">
           <div style="display: flex;justify-content: center;">
             <div class="public-border">
               <div class="public-border-width" id="loading"></div>
             </div>
           </div>
-          <div>Loading...</div>
+          <div style="color:#0FC6D4">Loading...</div>
         </div>
       </div>
     </div>

src/components/ProductItem.tsx

@@ -1,6 +1,6 @@
 import '~/styles/components.scss'
 import { MarketNFTData } from '~/types/store'
-import { splitAddress, toThousands } from '~/utils'
+import {  toThousands } from '~/utils'
 
 interface ProductItemProps {
   data: MarketNFTData
@@ -28,4 +28,17 @@ const ProductItem = (props: ProductItemProps) => {
   )
 }
 
+export const NotOpenProductItem = () => {
+
+  return (
+    <div className='product-item mt-2'>
+      <img src={require(`~/assets/nft/2.jpg`)} className='img' alt="" />
+      {/* <div className='img'></div> */}
+      <div className='desc-box p-1 row-center'>
+        <div className='fz-20 sub-text'>暫未開放</div>
+      </div>
+    </div>
+  )
+}
+
 export default ProductItem

src/hooks/useRouter.ts

@@ -1,13 +1,27 @@
 import { useLocation, useNavigate } from "react-router-dom";
+import store from "~/store";
 
 export const useRouter = () => {
-
   const navigate = useNavigate();
   const location = useLocation();
 
   const push = (path: any, state?: any, replace?: boolean) => {
+    
+    const whites = [
+      "/",
+      "/product",
+      "/share",
+      "/personal",
+      "/detail",
+      '/noShare'
+    ];
+    
+    if (!store.state.token && !whites.includes(path) && typeof path === 'string') {
+      store.setVisibleUnLogin(true)
+      return
+    }
     navigate(path, { state, replace: replace || false });
   };
 
-  return { push, location }
-};
+  return { push, location };
+};

src/index.tsx

@@ -8,7 +8,7 @@ const root = ReactDOM.createRoot(
 );
 
 root.render(
-  // <React.StrictMode>
-  <App />
-  // </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );

src/pages/home/index.tsx

@@ -1,5 +1,5 @@
 import '~/styles/home.scss'
-import ProductItem from '~/components/ProductItem'
+import ProductItem, { NotOpenProductItem } from '~/components/ProductItem'
 import { useRouter } from '~/hooks/useRouter'
 import { Button, CountDown, Swiper, SwiperInstance } from 'react-vant'
 import { useEffect, useRef } from 'react'
@@ -22,7 +22,7 @@ const Home = () => {
 
   return (
     <div className="home">
-      <div className='fz-20 mt-2 plr-2'>發行搶購</div>
+      {issueNft.length > 0 && <div className='fz-20 mt-2 plr-3'>發行搶購</div>}
       <div className='row-between mt-2 plr-5px'>
         <div>
           <i className='iconfont icon-arrow-left-bold fz-wb-550 fz-24' onClick={() => {
@@ -42,7 +42,7 @@ const Home = () => {
                         <div className='mt-5px'>{item.name}</div>
                         <div className='mt-5px fz-12'>
                           <div className='row-between'>
-                            <div className='tag'>{item.symbol} {item.price}</div>
+                            <div className={`tag ${item.symbol}-bg`}>{item.symbol} {item.price}</div>
                             <div className='row-center right-box'>
                               <img src={item.cast_url} className='avatar-img' alt="" />
                             </div>
@@ -81,56 +81,67 @@ const Home = () => {
       <div className='plr-3 fz-20 mt-2'>拍賣趨勢</div>
       <div className='mt-2 row-items swiper'>
         {
-          auctionNft.map((item, index) => (
-            <div
-              key={index}
-              className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
-            >
-              <img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
-              <div className='cover-box' >
-                <div className='cover-box-item p-1 fz-12'>
-                  <div>
-                    <div>{item.name}</div>
-                    <div className='row-items mt-2px'>
-                      <div className='flex-1'>
-                        <div className='fz-8 fz-wb-550'>鑄造者</div>
-                        <div className='user-tag row-items mt-2px'>
-                          <img src={item.cast_url} alt="" />
-                          <div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
+          auctionNft.length <= 0 ?
+            Array.from({ length: 2 }).map((_, index) => (
+              <div key={index} className={`${index === 0 ? 'ml-3' : 'ml-1 mr-3'}`}>
+                <AuctionNotOpen />
+              </div>
+            )) : auctionNft.map((item, index) => (
+              <div
+                key={index}
+                className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
+              >
+                <img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
+                <div className='cover-box' >
+                  <div className='cover-box-item p-1 fz-12'>
+                    <div>
+                      <div>{item.name}</div>
+                      <div className='row-items mt-2px'>
+                        <div className='flex-1'>
+                          <div className='fz-8 fz-wb-550'>鑄造者</div>
+                          <div className='user-tag row-items mt-2px'>
+                            <img src={item.cast_url} alt="" />
+                            <div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
+                          </div>
                         </div>
-                      </div>
-                      <div className='flex-1'>
-                        <div className='fz-8 fz-wb-550'>售賣者</div>
-                        <div className='user-tag row-items mt-2px'>
-                          <img src={item.sell_url} alt="" />
-                          <div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
+                        <div className='flex-1'>
+                          <div className='fz-8 fz-wb-550'>售賣者</div>
+                          <div className='user-tag row-items mt-2px'>
+                            <img src={item.sell_url} alt="" />
+                            <div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div className='row-between'>
-                    <Button className='button' round onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                      <div className='fz-wb-550'>出價</div>
-                    </Button>
-                    <i className={`
+                    <div className='row-between'>
+                      <Button className='button' round onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                        <div className='fz-wb-550'>出價</div>
+                      </Button>
+                      <i className={`
                     iconfont icon-daohangshoucangyishoucang fz-18 ${like.isLike(item.id, likeNft) ? 'like-text' : 'sub-text'}
                     `} onClick={() => like.setLike(item.id)} />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          ))
+            ))
         }
       </div>
       <div className='plr-3 fz-20 mt-2'>售賣市場</div>
       <div className='plr-3'>
         <div className='row-between flex-wrap'>
           {
-            sellNft.map((item, index) => (
-              <div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                <ProductItem data={item} />
-              </div>
-            ))
+            sellNft.length <= 0 ?
+              Array.from({ length: 2 }).map((_, index) => (
+                <div key={index}>
+                  <NotOpenProductItem />
+                </div>
+              ))
+              : sellNft.map((item, index) => (
+                <div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                  <ProductItem data={item} />
+                </div>
+              ))
           }
         </div>
       </div>
@@ -139,4 +150,17 @@ const Home = () => {
   )
 }
 
+const AuctionNotOpen = () => (
+  <div
+    className={`swiper-item }`}
+  >
+    <img src={require('~/assets/nft/1.jpg')} alt="" className='swiper-img' />
+    <div className='cover-box' >
+      <div className='cover-box-item p-1 fz-12' style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div className='sub-text fz-20'>暫未開放</div>
+      </div>
+    </div>
+  </div>
+)
+
 export default observer(Home)

src/pages/recharge/index.tsx

@@ -180,7 +180,7 @@ const Recharge = () => {
               balance[currentCoin.symbol] && (inputRef.current!.value = balance[currentCoin.symbol])
             }}>ALL</div>
           </div>
-          <div className='tar mt-5px fz-14 sub-text'>可用餘額：{currentCoin.symbol ? balance[currentCoin.symbol] : 0}</div>
+          <div className='tar mt-5px fz-14 sub-text'>可用餘額：{currentCoin && currentCoin.symbol ? balance[currentCoin.symbol] : 0}</div>
         </div>
         <div className='mt-3'>
           <Button className='button' onClick={handleExchange} loading={loading} loadingType="ball" >確認</Button>

src/pages/share/index.tsx

@@ -132,16 +132,16 @@ const Share = () => {
           <div className='tac sub-text'>未登錄</div>
         )
       }
-      <div className='row-center'>
+      {token && <div className='row-center'>
         <div className='tag fz-wb-550 mt-5px' onClick={openPages}>{userInfo.show === 2 ? '開放我的藝術頁面' : '隱藏我的藝術頁面'}</div>
-      </div>
+      </div>}
       <div className='row-between plr-5 mt-3'>
         <div className='tac'>
-          <div className='fz-20 fz-wb-550'>{userInfo.sell}</div>
+          <div className='fz-20 fz-wb-550'>{userInfo.sell || 0}</div>
           <div className='mt-8px'>售賣作品</div>
         </div>
         <div className='tac'>
-          <div className='fz-20 fz-wb-550'>{userInfo.auction}</div>
+          <div className='fz-20 fz-wb-550'>{userInfo.auction || 0}</div>
           <div className='mt-8px'>拍賣作品</div>
         </div>
         <div className='tac'>

src/pages/team/index.tsx

@@ -62,7 +62,7 @@ const Team = () => {
     const getData = async () => {
       const res: any = await team_info()
       if (res && res.code === 0) {
-        cardState[0][0].value = res.data.inviti_address || '000000000000000'
+        cardState[0][0].value = res.data.inviti_address || ''
         cardState[1][0].value = res.data.award ? res.data.award + "U" : "0U"
         cardState[1][1].value = res.data.direct_count ? res.data.direct_count + '人' : '0人'
         cardState[1][2].value = res.data.indirect_count ? res.data.indirect_count + '人' : '0人'
@@ -99,9 +99,9 @@ const Team = () => {
                   <div key={item.id} className={`tac ${index === 1 && 'mt-2'}`}>
                     <div className='fz-14'>{item.title}</div>
                     <div className='mt-1 fz-wb-550'>
-                      {item.id === 1 ? splitAddress(item.value) : item.value}
+                      {item.id === 1 ? item.value && splitAddress(item.value) || '-' : item.value}
                       {
-                        item.id === 1 && (
+                        item.id === 1 && item.value && (
                           <i className='iconfont icon-fuzhi_copy white ml-5px' onClick={() => copyVal(item.value)}></i>
                         )
                       }

src/router/layout/Navbar.tsx

@@ -45,7 +45,10 @@ const Navbar = (props: NavbarProps) => {
             pathname === '/noShare' ? (
               <div className="iconfont icon-arrow-left-bold fz-24" onClick={() => push(-1)}></div>
             ) : (
-              <div>9527</div>
+              <div className='row-items'>
+                <img src={require('~/assets/logo.png')} className='logo' alt="" />
+                <div className='ml-5px fz-wb-550'>{require('../../../package.json').name}</div>
+              </div>
             )
           }
         </div>

src/router/layout/index.tsx

@@ -13,6 +13,7 @@ import { ethers } from 'ethers';
 import { bind_rmd } from '~/api';
 import { AlreadyBind, BindRmd, BindSuccess, DefaultBind, UnLogin, VaildLink } from './ui';
 import Modal from '~/components/Modal';
+import { Toast } from 'react-vant';
 
 const LayoutRouter = () => {
 
@@ -61,12 +62,19 @@ const LayoutRouter = () => {
   }, [token])
 
   useEffect(() => {
+    // 0x2ADDed672bacEfe857a408B577CB7DF1f6687c07
     const isModal = async () => {
       let user = userInfo
-      let isRouter = routes.find(v => v.path === location.pathname)
-      const address = location.pathname.substring(1, location.pathname.length)
 
-      if (isRouter) return
+      if (location.pathname !== '/') return
+
+      const address = location.search.split('=')[1]
+      if (!address) return
+
+      if (!token) {
+        store.setVisibleUnLogin(true)
+        return
+      }
 
       if (Object.keys(user).length <= 0) {
         const res: any = await store.getUserInfo()
@@ -74,15 +82,23 @@ const LayoutRouter = () => {
           user = res
         }
       }
+
       if (!ethers.utils.isAddress(address)) {
         // 无效的分享链接
         setVisibleVaildLink(true)
         return
       }
       // 地址相同
-      if (address.toLocaleLowerCase() === walletAddress.toLocaleLowerCase()) return
-      setShareAddress(address)
+      if (address.toLocaleLowerCase() === walletAddress.toLocaleLowerCase()) {
+        push('/', null, true)
+        Toast.fail({
+          message: '不能綁定自己！',
+          duration: 2500
+        })
+        return
+      }
       // 绑定推荐人
+      setShareAddress(address)
 
       if (!user.is_bound && ethers.utils.isAddress(address)) {
         setVisibleBindRmd(true)
@@ -94,7 +110,7 @@ const LayoutRouter = () => {
       }
     }
 
-    token && isModal()
+    isModal()
     !token && setVisibleBindRmd(false)
   }, [token, walletAddress])
 

src/router/layout/ui.tsx

@@ -10,35 +10,49 @@ interface UIProps {
   address?: string
 }
 
-export const UnLogin = ({ visible, setVisible }: UIProps) => (
-  <Modal
-    title="拒絕訪問"
-    buttonClick={setVisible}
-    setVisible={setVisible}
-    visible={visible}
-    buttonText="關閉"
-  >
-    <div>
-      <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>訪問失敗</div>
-      <div className="unlogin-box row-center fz-14">未檢測到錢包，請登錄錢包後重新點擊</div>
-    </div>
-  </Modal>
-)
+export const UnLogin = ({ visible, setVisible }: UIProps) => {
+  return (
+    <Modal
+      title="拒絕訪問"
+      buttonClick={() => {
+        setVisible(false)
+      }}
+      setVisible={() => {
+        setVisible(false)
+      }}
+      visible={visible}
+      buttonText="關閉"
+      hiddenCloseIcon
+    >
+      <div>
+        <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>訪問失敗</div>
+        <div className="unlogin-box row-center fz-14">未檢測到錢包，請登錄錢包後重新點擊</div>
+      </div>
+    </Modal>
+  )
+}
 
-export const VaildLink = ({ visible, setVisible }: UIProps) => (
-  <Modal
-    title="綁定推薦人"
-    buttonClick={() => setVisible(false)}
-    setVisible={() => setVisible(false)}
-    visible={visible}
-    buttonText="關閉"
-  >
-    <div>
-      <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>綁定失敗</div>
-      <div className="unlogin-box row-center fz-14">無效的分享鏈接</div>
-    </div>
-  </Modal>
-)
+export const VaildLink = ({ visible, setVisible }: UIProps) => {
+  return (
+    <Modal
+      title="綁定推薦人"
+      buttonClick={() => {
+        setVisible(false)
+      }}
+      setVisible={() => {
+        setVisible(false)
+      }}
+      visible={visible}
+      hiddenCloseIcon
+      buttonText="關閉"
+    >
+      <div>
+        <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>綁定失敗</div>
+        <div className="unlogin-box row-center fz-14">無效的分享鏈接</div>
+      </div>
+    </Modal>
+  )
+}
 
 export const DefaultBind = ({ visible, setVisible, onClick }: UIProps) => {
 
@@ -97,7 +111,6 @@ export const BindSuccess = ({ visible, setVisible, address }: UIProps) => {
       setVisible={setVisible}
       title="綁定推薦人"
       buttonClick={() => {
-        push('/', null, true)
         setVisible()
         push('/team')
       }}
@@ -105,7 +118,9 @@ export const BindSuccess = ({ visible, setVisible, address }: UIProps) => {
       hiddenCloseIcon
       showCancelButton
       showCancelButtonText="關閉"
-      showCancelButtonClick={setVisible}
+      showCancelButtonClick={() => {
+        setVisible()
+      }}
     >
       <div>
         <div className="tac mt-2 fz-14 green">綁定成功</div>
@@ -116,19 +131,24 @@ export const BindSuccess = ({ visible, setVisible, address }: UIProps) => {
 
 }
 
-export const AlreadyBind = ({ visible, setVisible, onClick }: UIProps) => (
-  <Modal
-    title="綁定推薦人"
-    buttonClick={() => onClick && onClick()}
-    setVisible={() => setVisible(false)}
-    visible={visible}
-    buttonText='查看綁定人'
-    showCancelButton
-    showCancelButtonClick={() => setVisible(false)}
-  >
-    <div>
-      <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>綁定失敗</div>
-      <div className="unlogin-box row-center fz-14">該錢包已有推薦人，不可重複綁定推薦人</div>
-    </div>
-  </Modal>
-)
+export const AlreadyBind = ({ visible, setVisible, onClick }: UIProps) => {
+  return (
+    <Modal
+      title="綁定推薦人"
+      buttonClick={() => onClick && onClick()}
+      setVisible={() => setVisible()}
+      visible={visible}
+      buttonText='查看綁定人'
+      hiddenCloseIcon
+      showCancelButton
+      showCancelButtonClick={() => {
+        setVisible()
+      }}
+    >
+      <div>
+        <div className="mt-2 fz-14 tac fz-wb-550" style={{ color: '#FF5300' }}>綁定失敗</div>
+        <div className="unlogin-box row-center fz-14">該錢包已有推薦人，不可重複綁定推薦人</div>
+      </div>
+    </Modal>
+  )
+}

src/router/routes.tsx

@@ -17,10 +17,6 @@ const routes = [
     path: "/",
     element: <Home />
   },
-  {
-    path: '/:id',
-    component: <Home />
-  },
   {
     path: "/product",
     element: <Product />,

src/styles/components.scss

@@ -56,7 +56,8 @@
       align-items: center;
 
       .user-img{
-        @include img-size(12px,12px)
+        @include img-size(12px,12px);
+        border-radius:12px
       }
     }
   }

src/styles/home.scss

@@ -22,7 +22,6 @@
       height: 130px;
 
       .tag{
-        background: $usdt-bg;
         color: $white;
         padding: 3px 15px;
         border-radius: 20px;
@@ -85,7 +84,7 @@
         display: flex;
         justify-content: space-between;
         flex-direction: column;
-
+      
         .user-tag{
           width: 90%;
           height: 16px;

src/styles/layout.scss

@@ -17,6 +17,13 @@
       border-radius: 3px;
       background-color: $red;
     }
+
+    .logo{
+      width: 20px;
+      height: 20px;
+      object-fit: cover;
+    }
+
   }
 
   .header-block{