Merge pull request #34 from AdMetaNetwork/kmy-dev

feat: optimize code and ui

components/ad-display/ad-display-body.tsx

@@ -2,20 +2,20 @@ import { FC, useState, useContext, useMemo } from "react";
 import Image from "next/image";
 import SuccessSvg from "../svg/success";
 import BaseTip from "../ui/base-tip";
-import AdDisplayCtx from "../../hooks/use-ad-display-content";
+import BaseCtx from "../../hooks/use-base-content";
 import { useRouter } from 'next/router'
 import useApi from '../../hooks/use-api';
 import { polkadot_network } from '../../config/constant';
 
 import styles from './index.module.scss';
 import BaseButton from "../ui/base-button";
 import CallPolkadot from "../../utils/call-polkadot";
-import { message } from 'antd'
 
 const AdDisplayBody: FC = () => {
 
   const [isShowM, setShowM] = useState(false)
-  const { adMap: { adimg, adurl, adIdx, adTitle, adDec, adDisplay } } = useContext(AdDisplayCtx)
+  const { adMap, setTipText, setTipType, setShowTip } = useContext(BaseCtx)
+  const { adimg, adurl, adIdx, adTitle, adCpi = 0, adDisplay } = adMap!
   const router = useRouter()
   const { rd } = router.query
 
@@ -31,14 +31,26 @@ const AdDisplayBody: FC = () => {
     const pk = new CallPolkadot(sender, _api!)
     const f = await pk.getAddressBanlance() as number
     if (f <= 0) {
-      message.info('account balance too low')
+      handleShowTip('Account balance too low', 'Error')
       return
     }
     pk.claimReward(adIdx).then(() => {
       setShowM(true)
+      setTimeout(() => {
+        router.replace('/ad-display')
+      }, 500)
     })
   }
 
+  const handleShowTip = (tipText: string, tipType: 'Success' | 'Error' = 'Success') => {
+    setTipText!(tipText)
+    setTipType!(tipType)
+    setShowTip!(true)
+    setTimeout(() => {
+      setShowTip!(false)
+    }, 2000)
+  }
+
   const normalDom = () => (
     <div className={styles.normal}>
       <div className={styles.normalBody}>
@@ -58,7 +70,6 @@ const AdDisplayBody: FC = () => {
             <div className={styles.emptyImg}></div>
         }
         <div className={styles.normalTitle}>{adTitle}</div>
-        <div className={styles.normalDec}>{adDec}</div>
         {
           adDisplay && adimg
             ?
@@ -93,7 +104,6 @@ const AdDisplayBody: FC = () => {
           </div>
           <div className={styles.right}>
             <div className={styles.title}>{adTitle}</div>
-            <div className={styles.dec}>{adDec}</div>
           </div>
         </div>
         <div className={styles.bottom}>
@@ -105,16 +115,16 @@ const AdDisplayBody: FC = () => {
           <div className={styles.statusText}>Task completed</div>
           <div style={{ width: '100%' }}>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name1</div>
-              <div className={styles.right}>Web3 projectX</div>
+              <div className={styles.left}>Claim reward for ad</div>
+              <div className={styles.right}>{adIdx}</div>
             </div>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name2</div>
-              <div className={styles.right}>Web3 projectX</div>
+              <div className={styles.left}>Reward amount</div>
+              <div className={styles.right}>{(adCpi / Math.pow(10, 12)) + ''}</div>
             </div>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name3</div>
-              <div className={styles.right}>Web3 projectX</div>
+              <div className={styles.left}>Estimate transaction fee</div>
+              <div className={styles.right}>0</div>
             </div>
           </div>
           <BaseButton

components/common/base/index.tsx

@@ -7,8 +7,6 @@ import TabBar from "../tab-bar";
 import { SEO } from '../../../config'
 
 import styles from './index.module.scss';
-import HomeCtx from "../../../hooks/use-home-content";
-import AdDisplayCtx from "../../../hooks/use-ad-display-content";
 
 type TDK = {
   title: string,
@@ -27,17 +25,6 @@ type Props = {
 
 const Base: FC<Props> = ({ tdk, children, isShowSide, isShowHeader, isShowTabBar, page = 'home' }) => {
 
-  const getCtx = (): Context<any> => {
-    if (page === 'home') {
-      return HomeCtx
-    }
-    if (page === 'display') {
-      return AdDisplayCtx
-    }
-
-    return HomeCtx
-  }
-
   return (
     <div className={styles.container}>
       <Head>
@@ -60,9 +47,7 @@ const Base: FC<Props> = ({ tdk, children, isShowSide, isShowHeader, isShowTabBar
           {
             isShowHeader
               ?
-              <Header 
-                content={getCtx()}
-              />
+              <Header />
               :
               null
           }

components/common/connect-wallet/index.tsx

@@ -3,7 +3,7 @@ import BaseSelect from "../../ui/base-select";
 import BaseButton from "../../ui/base-button";
 import { useRouter } from 'next/router'
 import * as C from '../../../utils'
-import { message } from 'antd'
+import BaseCtx from "../../../hooks/use-base-content";
 
 import styles from './index.module.scss';
 
@@ -14,14 +14,23 @@ type Prop = {
 const ConnectWallet: FC<Prop> = ({ addressList }) => {
   const router = useRouter()
   const [selectAddress, setSelectAddress] = useState<string>('')
+  const { setShowTip, setTipText, setTipType } = useContext(BaseCtx)
+
+  const handleShowTip = (tipText: string, tipType: 'Success' | 'Error' = 'Success') => {
+    setTipText!(tipText)
+    setTipType!(tipType)
+    setShowTip!(true)
+    setTimeout(() => {
+      setShowTip!(false)
+    }, 2000)
+  }
 
   return (
     <div className={styles.modalBody}>
       <div className={styles.modalBodytitle}>Select your account in Polkadot.js</div>
       <div className={styles.modalBodySelect}>
         <BaseSelect
           handleChangeSelect={(v) => {
-            console.log(v)
             setSelectAddress(v)
           }}
           opt={addressList}
@@ -31,12 +40,15 @@ const ConnectWallet: FC<Prop> = ({ addressList }) => {
         btnText="Sign in"
         btnClick={() => {
           if (!selectAddress || selectAddress === 'Select') {
-            message.info('Please select a address')
+            handleShowTip('Please select a address', 'Error')
             return
           }
           C.selectWallet(selectAddress)
-
-          router.push('/ad-display')
+          if (router.pathname === '/') {
+            router.push('/ad-display')
+          } else {
+            router.reload();
+          }
         }}
       />
     </div>

components/common/header/index.module.scss

@@ -30,6 +30,7 @@
         height: 42px;
         border-radius: 21px;
         margin-right: 10px;
+        cursor: pointer;
         p {
           font-weight: 500;
           font-size: 14px;

components/common/header/index.tsx

@@ -1,24 +1,18 @@
-import { FC, useContext, Context, useState, useEffect } from "react";
+import { FC, useContext, useState, useEffect } from "react";
 import LogoTextSvg from "../../svg/logo-text";
 import BaseButton from "../../ui/base-button";
 import ConnectWallet from "../connect-wallet";
 import Link from "next/link";
 import Identicon from '@polkadot/react-identicon';
 import * as C from '../../../utils'
-import { message } from 'antd'
-import { useRouter } from 'next/router'
+import BaseCtx from "../../../hooks/use-base-content";
 
 import styles from './index.module.scss';
 
-type Prop = {
-  content: Context<any>
-}
-
-const Header: FC<Prop> = ({ content }) => {
+const Header: FC = () => {
 
-  const { setShowModal, setModalTitle, setModalBody } = useContext(content)
+  const { setShowModal, setModalTitle, setModalBody, setShowTip, setTipText, setTipType } = useContext(BaseCtx)
   const [selectAddress, setSelectAddress] = useState<string>('')
-  const router = useRouter()
 
   useEffect(() => {
     const s = localStorage.getItem('_select_account')
@@ -27,6 +21,32 @@ const Header: FC<Prop> = ({ content }) => {
     }
   }, [selectAddress])
 
+  const handleShowTip = (tipText: string, tipType: 'Success' | 'Error' = 'Success') => {
+    setTipText!(tipText)
+    setTipType!(tipType)
+    setShowTip!(true)
+    setTimeout(() => {
+      setShowTip!(false)
+    }, 2000)
+  }
+
+  const handleShowWalletModal = () => {
+    setShowModal!(true)
+    setModalTitle!('Connect with Polkadot.js')
+    setModalBody!(<ConnectWallet addressList={[]} />)
+    C.connectWallet(w => {
+      let a: C.AddressMap[] = []
+      w.forEach((item) => {
+        a.push({
+          label: item.meta.name,
+          value: item.address
+        })
+      })
+      a.unshift({ label: 'Select', value: 'Select' })
+      setModalBody!(<ConnectWallet addressList={a} />)
+    })
+  }
+
   return (
     <div className={styles.header}>
       <div className={styles.left}>
@@ -38,47 +58,28 @@ const Header: FC<Prop> = ({ content }) => {
         {
           selectAddress
             ?
-            <div 
+            <div
               className={styles.accountWrp}
-              onClick={() => {
-                if (router.pathname !== '/') {
-                  window.localStorage.clear()
-                  router.push('/')
-                }
-              }}
             >
-              <div className={styles.account}>
+              <div
+                className={styles.account}
+                onClick={handleShowWalletModal}
+              >
                 <p>{C.formatAddress(selectAddress)}</p>
               </div>
               <Identicon
                 value={selectAddress}
                 size={40}
                 theme={'polkadot'}
                 onCopy={() => {
-                  message.info('copied your address')
+                  handleShowTip('Copied your address')
                 }}
               />
             </div>
             :
             <BaseButton
               btnText="Connect with Polkadot.js"
-              btnClick={() => {
-                setShowModal(true)
-                setModalTitle('Connect with Polkadot.js')
-                setModalBody(<ConnectWallet addressList={[]} />)
-                C.connectWallet(w => {
-                  console.log(w)
-                  let a: C.AddressMap[] = []
-                  w.forEach((item) => {
-                    a.push({
-                      label: item.meta.name,
-                      value: item.address
-                    })
-                  })
-                  a.unshift({ label: 'Select', value: 'Select' })
-                  setModalBody(<ConnectWallet addressList={a} />)
-                })
-              }}
+              btnClick={handleShowWalletModal}
             />
         }
 

components/home/home-body.tsx

@@ -1,14 +1,26 @@
-import { FC, useContext } from "react";
+import { FC, useContext, useEffect, useState } from "react";
 import PoldadotIcon from '../svg/polkadot-icon';
-import HomeCtx from '../../hooks/use-home-content';
+import BaseCtx from "../../hooks/use-base-content";
 import ConnectWallet from "../common/connect-wallet";
 import * as C from '../../utils'
+import { useRouter } from "next/router";
 
 import styles from './index.module.scss';
 
 const HomeBody: FC = () => {
 
-  const { setShowModal, setModalTitle, setModalBody } = useContext(HomeCtx)
+  const { setShowModal, setModalTitle, setModalBody } = useContext(BaseCtx)
+  const [isConnect, setConnect] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    const sender = localStorage.getItem('_select_account')
+    if (sender) {
+      setConnect(true)
+    } else {
+      setConnect(false)
+    }
+  }, [])
 
   return (
     <div className={styles.homeBody}>
@@ -26,25 +38,28 @@ const HomeBody: FC = () => {
           <div
             className={styles.btn}
             onClick={() => {
-              setShowModal(true)
-              setModalTitle('Connect with Polkadot.js')
-              setModalBody(<ConnectWallet addressList={[]} />)
-              C.connectWallet(w => {
-                console.log(w)
-                let a: C.AddressMap[] = []
-                w.forEach((item) => {
-                  a.push({
-                    label: item.meta.name,
-                    value: item.address
+              if (isConnect) {
+                router.push('/ad-display')
+              } else {
+                setShowModal!(true)
+                setModalTitle!('Connect with Polkadot.js')
+                setModalBody!(<ConnectWallet addressList={[]} />)
+                C.connectWallet(w => {
+                  let a: C.AddressMap[] = []
+                  w.forEach((item) => {
+                    a.push({
+                      label: item.meta.name,
+                      value: item.address
+                    })
                   })
+                  a.unshift({ label: 'Select', value: 'Select' })
+                  setModalBody!(<ConnectWallet addressList={a} />)
                 })
-                a.unshift({label: 'Select', value: 'Select'})
-                setModalBody(<ConnectWallet addressList={a} />)
-              })
+              }
             }}
           >
-            <PoldadotIcon />
-            <p>Connect with Polkadot.js</p>
+            {!isConnect && <PoldadotIcon />}
+            <p>{isConnect ? 'Go Ad display' : 'Connect with Polkadot.js'}</p>
           </div>
         </div>
       </div>