Feat: person connect wallet, show ad, set profile

.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  endOfLine: 'auto',
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: true,
+  semi: false,
+  singleQuote: true, 
+  quoteProps: 'as-needed',
+  jsxSingleQuote: true,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: true,
+  arrowParens: 'avoid',
+  vueIndentScriptAndStyle: false,
+  embeddedLanguageFormatting: 'off'
+};

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

@@ -1,36 +1,78 @@
-import { FC, useState } from "react";
+import { FC, useState, useContext } 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 { 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 router = useRouter()
+  const { rd } = router.query
+
+  const { api } = useApi(polkadot_network)
+
+  const handlerClaimReward = async () => {
+    const sender = localStorage.getItem('_select_account')
+    if (!sender) {
+      return
+    }
+
+    const pk = new CallPolkadot(sender, api!)
+    const f = await pk.getAddressBanlance() as number
+    if (f <= 0) {
+      message.info('account balance too low')
+      return
+    }
+    pk.claimReward(adIdx).then(() => {
+      setShowM(true)
+    })
+  }
 
   const normalDom = () => (
     <div className={styles.normal}>
       <div className={styles.normalBody}>
-        {/* <div className={styles.normalImg}>
-          <Image
-            src={'https://fenglin-1256754106.cos.ap-nanjing.myqcloud.com/bike7.2/IMG_8355.JPG'}
-            alt="ss"
-            width={460}
-            height={259}
-            objectFit={'cover'}
-          ></Image>
-        </div> */}
-        <div className={styles.emptyImg}></div>
-        <div className={styles.normalTitle}>Web/project name</div>
-        <div className={styles.normalDec}>Ad description Lörem ipsum lygisk diar nidobelt vengar, ett treskapet. Vess resade duligt cynpod. Parkera bussen rearad hädolurar för sår. Teraliga pogöska lur trakrobelt syl. </div>
-        <div className={styles.normalBtn}>
-          <BaseButton
-            btnClick={() => { }}
-            btnText='View ad and claim rewards'
-          />
-        </div>
+        {
+          adimg && adDisplay
+            ?
+            <div className={styles.normalImg}>
+              <Image
+                src={adimg}
+                alt="ss"
+                width={460}
+                height={259}
+                objectFit={'cover'}
+              ></Image>
+            </div>
+            :
+            <div className={styles.emptyImg}></div>
+        }
+        <div className={styles.normalTitle}>{adTitle}</div>
+        <div className={styles.normalDec}>{adDec}</div>
+        {
+          adDisplay && adimg
+            ?
+            <div className={styles.normalBtn}>
+              <BaseButton
+                btnClick={() => {
+                  window.open(adurl)
+                }}
+                btnText='View ad and claim rewards'
+              />
+            </div>
+            :
+            null
+        }
+
       </div>
     </div>
   )
@@ -41,16 +83,16 @@ const AdDisplayBody: FC = () => {
         <div className={styles.top}>
           <div className={styles.left}>
             <Image
-              src={'https://fenglin-1256754106.cos.ap-nanjing.myqcloud.com/bike7.2/IMG_8355.JPG'}
+              src={adimg}
               alt="ss"
               width={150}
               height={85}
               objectFit={'cover'}
             ></Image>
           </div>
           <div className={styles.right}>
-            <div className={styles.title}>Web/project name</div>
-            <div className={styles.dec}>Ad description Lörem ipsum lygisk diar nidobelt vengar, ett treskapet. Vess resade duligt cynpod. Parkera bussen rearad hädolurar för sår. Teraliga pogöska lur trakrobelt syl. </div>
+            <div className={styles.title}>{adTitle}</div>
+            <div className={styles.dec}>{adDec}</div>
           </div>
         </div>
         <div className={styles.bottom}>
@@ -62,27 +104,26 @@ const AdDisplayBody: FC = () => {
           <div className={styles.statusText}>Task completed</div>
           <div style={{ width: '100%' }}>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name</div>
+              <div className={styles.left}>Project name1</div>
               <div className={styles.right}>Web3 projectX</div>
             </div>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name</div>
+              <div className={styles.left}>Project name2</div>
               <div className={styles.right}>Web3 projectX</div>
             </div>
             <div className={styles.claimItem}>
-              <div className={styles.left}>Project name</div>
+              <div className={styles.left}>Project name3</div>
               <div className={styles.right}>Web3 projectX</div>
             </div>
           </div>
           <BaseButton
             btnClick={() => {
-              setShowM(true)
+              handlerClaimReward()
             }}
             btnText='Claim Rewards'
           />
         </div>
       </div>
-
     </div>
   )
 
@@ -97,7 +138,7 @@ const AdDisplayBody: FC = () => {
       >
         <div>You has finshed the task, click <strong>Claim Reward</strong>to claim your rewards!</div>
       </BaseTip>
-      {claimDom()}
+      {rd ? claimDom() : normalDom()}
     </div>
   )
 }

components/common/connect-wallet/index.tsx

@@ -2,34 +2,18 @@ import { FC, useState, useContext } from "react";
 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 styles from './index.module.scss';
 
-const opt = [
-  {
-    value: 'Select',
-    label: 'Select'
-  },
-  {
-    value: '14iyG7YpMKhJPbt4qgY26FM5gig6QNsyoFi1936eoL6E5BoA',
-    label: 'kmy'
-  },
-  {
-    value: '19KvnKoBTgPYLpRYmTG6Bj3CgZAXim7DcAVhTgZnyJES6xm',
-    label: 'kmy2'
-  },
-  {
-    value: '19KvnKoBTgPYLpRYmTG6Bj3CgZAXim7DcAVhTgZnyJES6xm',
-    label: 'kmy2'
-  },
-  {
-    value: '19KvnKoBTgPYLpRYmTG6Bj3CgZAXim7DcAVhTgZnyJES6xm',
-    label: 'kmy2'
-  }
-]
+type Prop = {
+  addressList: C.AddressMap[]
+}
 
-const ConnectWallet: FC = () => {
+const ConnectWallet: FC<Prop> = ({ addressList }) => {
   const router = useRouter()
+  const [selectAddress, setSelectAddress] = useState<string>('')
 
   return (
     <div className={styles.modalBody}>
@@ -38,13 +22,20 @@ const ConnectWallet: FC = () => {
         <BaseSelect
           handleChangeSelect={(v) => {
             console.log(v)
+            setSelectAddress(v)
           }}
-          opt={opt}
+          opt={addressList}
         />
       </div>
       <BaseButton
         btnText="Sign in"
         btnClick={() => {
+          if (!selectAddress || selectAddress === 'Select') {
+            message.info('Please select a address')
+            return
+          }
+          C.selectWallet(selectAddress)
+
           router.push('/ad-display')
         }}
       />

components/common/header/index.tsx

@@ -1,11 +1,12 @@
-import { FC, useContext, Context } from "react";
-import Image from "next/image";
+import { FC, useContext, Context, useState, useEffect } from "react";
 import LogoTextSvg from "../../svg/logo-text";
 import BaseButton from "../../ui/base-button";
-import HomeCtx from '../../../hooks/use-home-content';
-import AdDisplayCtx from "../../../hooks/use-ad-display-content";
 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 styles from './index.module.scss';
 
@@ -16,6 +17,15 @@ type Prop = {
 const Header: FC<Prop> = ({ content }) => {
 
   const { setShowModal, setModalTitle, setModalBody } = useContext(content)
+  const [selectAddress, setSelectAddress] = useState<string>('')
+  const router = useRouter()
+
+  useEffect(() => {
+    const s = localStorage.getItem('_select_account')
+    if (s) {
+      setSelectAddress(s)
+    }
+  }, [selectAddress])
 
   return (
     <div className={styles.header}>
@@ -25,26 +35,54 @@ const Header: FC<Prop> = ({ content }) => {
         </Link>
       </div>
       <div className={styles.right}>
-        <BaseButton
-          btnText="Connect with Polkadot.js"
-          btnClick={() => {
-            setShowModal(true)
-            setModalTitle('Connect with Polkadot.js')
-            setModalBody(<ConnectWallet />)
-          }}
-        />
-        {/* <div className={styles.accountWrp}>
-          <div className={styles.account}>
-            <p>14nuyNGvua55...</p>
-          </div>
-          <Image
-            className={styles.img}
-            width={40}
-            height={40}
-            src={'https://storageapi.fleek.co/038f3525-c411-4ef9-86e4-bc833d0c2d7f-bucket/touxiang.jpeg'}
-            alt='account avator'
-          />
-        </div> */}
+        {
+          selectAddress
+            ?
+            <div 
+              className={styles.accountWrp}
+              onClick={() => {
+                if (router.pathname !== '/') {
+                  window.localStorage.clear()
+                  router.push('/')
+                }
+              }}
+            >
+              <div className={styles.account}>
+                <p>{C.formatAddress(selectAddress)}</p>
+              </div>
+              <Identicon
+                value={selectAddress}
+                size={40}
+                theme={'polkadot'}
+                onCopy={() => {
+                  message.info('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} />)
+                })
+              }}
+            />
+        }
+
+
       </div>
     </div>
   )

components/home/home-body.tsx

@@ -1,7 +1,8 @@
-import { FC, useState, useContext } from "react";
+import { FC, useContext } from "react";
 import PoldadotIcon from '../svg/polkadot-icon';
 import HomeCtx from '../../hooks/use-home-content';
 import ConnectWallet from "../common/connect-wallet";
+import * as C from '../../utils'
 
 import styles from './index.module.scss';
 
@@ -27,7 +28,19 @@ const HomeBody: FC = () => {
             onClick={() => {
               setShowModal(true)
               setModalTitle('Connect with Polkadot.js')
-              setModalBody(<ConnectWallet />)
+              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} />)
+              })
             }}
           >
             <PoldadotIcon />