Merge branch 'dev' into board-test
* dev: feat: 用户登录 feat: 修改登录 feat: 军团长改为推荐 stepper 重命名 src/views/recommend 为 src/views/Recommend all 代码格式 删除文件 src/views/recommend 代码规范 军团长ui 首页调整 ui调整 调整军团长ui 军团长 语言切换 home nfts nft
This commit is contained in:
gary
commit
196f9a8119
|
|
@ -16,3 +16,7 @@ REACT_APP_GRAPH_API_LOTTERY = "https://api.thegraph.com/subgraphs/name/pancakesw
|
|||
|
||||
REACT_APP_SNAPSHOT_BASE_URL = "https://testnet.snapshot.org"
|
||||
REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.amazonaws.com/dev/api"
|
||||
|
||||
|
||||
|
||||
REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
"no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["state", "memo"] }],
|
||||
"react/require-default-props": 0,
|
||||
"no-nested-ternary": 0,
|
||||
"max-classes-per-file": 0
|
||||
"max-classes-per-file": 0,
|
||||
"react-hooks/exhaustive-deps":0
|
||||
// End temporary rules
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 96 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 487 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 63 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 689 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 487 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 916 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 532 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 689 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #1fc7d4;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="疑问_1_" data-name="疑问 (1)" class="cls-1" d="M12.5,1.471A11.029,11.029,0,1,1,1.471,12.5,11.041,11.041,0,0,1,12.5,1.471ZM12.5,0A12.5,12.5,0,1,0,25,12.5,12.5,12.5,0,0,0,12.5,0ZM11.452,18.4A1.048,1.048,0,1,0,12.5,17.348,1.048,1.048,0,0,0,11.452,18.4Zm.895-2.359a.736.736,0,0,1-.734-.736,4.75,4.75,0,0,1,2.579-4.116A1.964,1.964,0,0,0,15.1,9.346a1.966,1.966,0,0,0-1.561-1.464,3.254,3.254,0,0,0-2.611.6,2.5,2.5,0,0,0-.773,1.655.737.737,0,0,1-.734.721H9.411a.734.734,0,0,1-.725-.738A3.969,3.969,0,0,1,9.938,7.393a4.511,4.511,0,0,1,4.05-.918c2.9.97,2.693,3.061,2.466,3.832a3.442,3.442,0,0,1-1.687,2.221l0,.009A3.126,3.126,0,0,0,13.084,15.3a.738.738,0,0,1-.738.737Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 869 B |
|
|
@ -1053,5 +1053,15 @@
|
|||
"Community Auctions": "Community Auctions",
|
||||
"FAQs": "FAQs",
|
||||
"Auction duration": "Auction duration",
|
||||
"Terms & Conditions": "Terms & Conditions"
|
||||
"Terms & Conditions": "Terms & Conditions",
|
||||
|
||||
|
||||
|
||||
|
||||
"Hcc Info":"HighCityCoin",
|
||||
"Hcc Nft":"其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
||||
"Hcc BTC":"同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
|
||||
"Bazaar":"NFT市场"
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1053,5 +1053,58 @@
|
|||
"Community Auctions": "Community Auctions",
|
||||
"FAQs": "FAQs",
|
||||
"Auction duration": "Auction duration",
|
||||
"Terms & Conditions": "Terms & Conditions"
|
||||
"Terms & Conditions": "Terms & Conditions",
|
||||
|
||||
|
||||
|
||||
"Hcc Info":"HighCityCoin简称HCC，由HighCityTM铸造，",
|
||||
"Hcc Nft":"其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。",
|
||||
"Hcc BTC":"同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。",
|
||||
"Bazaar":"NFT市场",
|
||||
"HlighCitySwapInfo":"HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。",
|
||||
"Stage one: Origin":"第一阶段：起源",
|
||||
"Stage two: Action":"第二阶段：行动",
|
||||
"Stage three: Creation":"第三阶段：创造",
|
||||
"Stage four: Integration":"第四阶段：融合",
|
||||
"Stage five: Closing the curtain":"第五阶段：落幕",
|
||||
"The project concept was born in May 2021":"2021年5月项目概念的诞生；",
|
||||
"Set up HighClty team in June 2021":"2021年6月搭建HighClty团队；",
|
||||
"May 2021 -- January 2022 Team run-in":"2021年5月~2022年1月团队磨合；",
|
||||
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online":"2022年4月社交建社，交媒体发布活动，HighCity铸币开始，分红机制上线；",
|
||||
"In March 2022, project approval, web design, roadmap announcement, smart contract development":"2022年3月项目立项，网页设计，路线图公布，智能合约开发；",
|
||||
"Launch of social software in December 2022":"2022年12月社交软件落地；",
|
||||
"Created by NFT in May 2022":"2022年5月NFT创造；",
|
||||
"June 2022 social software development":"2022年6月社交软件开发；",
|
||||
"December 2022 NFT bonus binding social software":"2022年12月NFT分红绑定社交软件；",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed":"2022年12月HighCity生态初步建成；",
|
||||
"HighCity Ecology completed in December 2022":"2022年12月HighCity生态建成;",
|
||||
"Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；",
|
||||
"Buy commander NFT":"购买军团长NFT",
|
||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation":"升级推荐权益，可享有二级推荐的分成",
|
||||
"Enjoy a higher percentage than ordinary users":"享有比普通用户更高的分成比例",
|
||||
"Commander NFT can be traded in the NFT market":"军团长NFT可在NFT市场内进行交易",
|
||||
"First stage sharing ratio":"一级分成比例",
|
||||
"Secondary split ratio":"二级分成比例",
|
||||
"Buy It Now":"立即购买",
|
||||
"recommend":"推荐",
|
||||
"The lower the number of":"下级数量",
|
||||
"NFT total revenue":"NFT总收益",
|
||||
"HCC total revenue":"HCC总收益",
|
||||
"To get profit":"待领收益",
|
||||
"No income is received temporarily":"暂无收益领取",
|
||||
"Upgrade commander":"升级军团长",
|
||||
"Regimental recommendation":"军团长推荐",
|
||||
"Number of secondary subordinates":"二级下级人数",
|
||||
"Number of first-level subordinates":"一级下级人数",
|
||||
"Immediately to receive":"立即领取",
|
||||
"buy again":"再次购买",
|
||||
"Connect the purse":"连接钱包",
|
||||
"HCC total revenue percentage :10%":"HCC总收益(分成比例:10%)",
|
||||
"Contract address":"合约地址",
|
||||
"Assets agreement":"资产协议",
|
||||
"Assets and chain":"资产公链",
|
||||
"each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
|
||||
"last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
|
||||
"commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
|
|||
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
|
||||
const Referral = lazy(() => import('./views/Referral'))
|
||||
const Board = lazy(() => import('./views/Board'))
|
||||
const Nft = lazy(() => import('./views/Nft'))
|
||||
|
||||
// This config is required for number formatting
|
||||
BigNumber.config({
|
||||
|
|
@ -92,6 +93,8 @@ const App: React.FC = () => {
|
|||
</Route>
|
||||
<Route path="/board">
|
||||
<Board />
|
||||
<Route path="/nft">
|
||||
<Nft />
|
||||
</Route>
|
||||
{/* <Route path="/lottery">
|
||||
<Lottery />
|
||||
|
|
@ -142,6 +145,7 @@ const App: React.FC = () => {
|
|||
<Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
|
||||
<Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
|
||||
<Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
|
||||
<Route exact strict path="/nft" component={Nft} />
|
||||
|
||||
{/* Redirect */}
|
||||
{/* <Route path="/staking">
|
||||
|
|
|
|||
|
|
@ -40,6 +40,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'PoolIcon',
|
||||
href: '/referral',
|
||||
},
|
||||
{
|
||||
label: 'NFT',
|
||||
icon: 'TicketIcon',
|
||||
href: '/nft',
|
||||
},
|
||||
// {
|
||||
// label: t('Prediction (BETA)'),
|
||||
// icon: 'PredictionsIcon',
|
||||
|
|
|
|||
|
|
@ -1,26 +1,49 @@
|
|||
import React from 'react'
|
||||
import { Menu as UikitMenu } from '@pancakeswap/uikit'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
|
||||
import { useWeb3React } from '@web3-react/core'
|
||||
import { languageList } from 'config/localization/languages'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import useTheme from 'hooks/useTheme'
|
||||
import useAuth from 'hooks/useAuth'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { usePriceCakeBusd, useProfile } from 'state/hooks'
|
||||
import { useUnactiveAccount, useSignLogin, useAccount } from 'state/userInfo/hooks'
|
||||
import useWeb3Provider from 'hooks/useActiveWeb3React'
|
||||
import { clearUserInfo } from 'state/actions'
|
||||
import config from './config'
|
||||
|
||||
const Menu = (props) => {
|
||||
const { account } = useWeb3React()
|
||||
const account = useAccount()
|
||||
const { login, logout } = useAuth()
|
||||
const [hasWalletLogin, setHasWalletLogin] = useState(false)
|
||||
const { isDark, toggleTheme } = useTheme()
|
||||
const cakePriceUsd = usePriceCakeBusd()
|
||||
const { library } = useWeb3Provider()
|
||||
const unActiveAccount = useUnactiveAccount()
|
||||
const dispatch = useDispatch()
|
||||
const { profile } = useProfile()
|
||||
const { currentLanguage, setLanguage, t } = useTranslation()
|
||||
|
||||
const sign = useSignLogin()
|
||||
const handleLogin = async (connectorID: ConnectorNames) => {
|
||||
await login(connectorID)
|
||||
setHasWalletLogin(true)
|
||||
}
|
||||
const handleLogout = () => {
|
||||
dispatch(clearUserInfo())
|
||||
logout()
|
||||
}
|
||||
// 钱包登录后
|
||||
useEffect(() => {
|
||||
if (unActiveAccount && library.provider && hasWalletLogin) {
|
||||
setHasWalletLogin(false)
|
||||
sign()
|
||||
}
|
||||
}, [unActiveAccount, hasWalletLogin, library])
|
||||
return (
|
||||
<UikitMenu
|
||||
account={account}
|
||||
login={login}
|
||||
logout={logout}
|
||||
login={handleLogin}
|
||||
logout={handleLogout}
|
||||
isDark={isDark}
|
||||
toggleTheme={toggleTheme}
|
||||
currentLang={currentLanguage.code}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,31 @@
|
|||
import React from 'react'
|
||||
import { Button, useWalletModal } from '@pancakeswap/uikit'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Button, useWalletModal, ConnectorNames } from '@pancakeswap/uikit'
|
||||
import useAuth from 'hooks/useAuth'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import useToast from 'hooks/useToast'
|
||||
import { useUnactiveAccount, useSignLogin } from 'state/userInfo/hooks'
|
||||
import useWeb3Provider from 'hooks/useActiveWeb3React'
|
||||
|
||||
const UnlockButton = (props) => {
|
||||
const { t } = useTranslation()
|
||||
const { login, logout } = useAuth()
|
||||
const { onPresentConnectModal } = useWalletModal(login, logout)
|
||||
|
||||
const [hasWalletLogin, setHasWalletLogin] = useState(false)
|
||||
const { library } = useWeb3Provider()
|
||||
const unActiveAccount = useUnactiveAccount()
|
||||
const { toastInfo } = useToast()
|
||||
const sign = useSignLogin()
|
||||
const handleLogin = async (connectorID: ConnectorNames) => {
|
||||
await login(connectorID)
|
||||
setHasWalletLogin(true)
|
||||
}
|
||||
const { onPresentConnectModal } = useWalletModal(handleLogin, logout)
|
||||
// 钱包登录后
|
||||
useEffect(() => {
|
||||
if (unActiveAccount && library.provider && hasWalletLogin) {
|
||||
setHasWalletLogin(false)
|
||||
sign()
|
||||
}
|
||||
}, [unActiveAccount, hasWalletLogin, library])
|
||||
return (
|
||||
<Button onClick={onPresentConnectModal} {...props}>
|
||||
{t('Unlock Wallet')}
|
||||
|
|
|
|||
|
|
@ -1182,5 +1182,55 @@
|
|||
"Recipient": "Recipient",
|
||||
"Waiting For Confirmation": "Waiting For Confirmation",
|
||||
"Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
|
||||
"Dismiss": "Dismiss"
|
||||
"Dismiss": "Dismiss",
|
||||
|
||||
"Hcc Info":"HighCityCoin abbreviation HCC,cause HighCityTM cast,",
|
||||
"Hcc Nft":"Its function is mainly in HighCitySwap On the purchase NFT、NFT Boxes and other tradeable products.",
|
||||
"Hcc BTC":"meanwhile,HCC and BTC、ETH Have the same properties,They can trade freely.",
|
||||
"Bazaar":"NFT Bazaar",
|
||||
"HlighCitySwapInfo":"HIighCitySwap the birth of,From the founder Liu Bus Enthusiastic pursuit of blockchain technology,He has always believed that blockchain technology could be used more widely。for this purpose,He made a brave decision,Abandon investments in other areas,Focus on the practical application of blockchain technology,Put yourself in a familiar field -- social networking on the Internet,Integration with blockchain technology,HighCitySwap Thus was born.That's where we started,Thank you for your support,HighCity The team will always move forward.",
|
||||
"Stage one: Origin":"Stage one: Origin",
|
||||
"Stage two: Action":"Stage two: Action",
|
||||
"Stage three: Creation":"Stage three: Creation",
|
||||
"Stage four: Integration":"Stage four: Integration",
|
||||
"Stage five: Closing the curtain":"Stage five: Closing the curtain",
|
||||
"The project concept was born in May 2021":"The project concept was born in May 2021;",
|
||||
"Set up HighClty team in June 2021":"Set up HighClty team in June 2021;",
|
||||
"May 2021 -- January 2022 Team run-in":"May 2021 -- January 2022 Team run-in;",
|
||||
"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online":"In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online;",
|
||||
"In March 2022, project approval, web design, roadmap announcement, smart contract development":"In March 2022, project approval, web design, roadmap announcement, smart contract development;",
|
||||
"Launch of social software in December 2022":"Launch of social software in December 2022;",
|
||||
"Created by NFT in May 2022":"Created by NFT in May 2022;",
|
||||
"June 2022 social software development":"June 2022 social software development;",
|
||||
"December 2022 NFT bonus binding social software":"December 2022 NFT bonus binding social software;",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed":"In December 2022, HighCity Ecology was preliminarily completed;",
|
||||
"HighCity Ecology completed in December 2022":"HighCity Ecology completed in December 2022",
|
||||
"Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;",
|
||||
"Buy commander NFT":"Buy commander NFT",
|
||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation":"Upgrade recommendation rights, can enjoy the share of secondary recommendation",
|
||||
"Enjoy a higher percentage than ordinary users":"Enjoy a higher percentage than ordinary users",
|
||||
"Commander NFT can be traded in the NFT market":"Commander NFT can be traded in the NFT market",
|
||||
"First stage sharing ratio":"First stage sharing ratio",
|
||||
"Secondary split ratio":"Secondary split ratio",
|
||||
"Buy It Now":"Buy It Now",
|
||||
"recommend":"recommend",
|
||||
"The lower the number of":"The lower the number of",
|
||||
"NFT total revenue":"NFT total revenue",
|
||||
"HCC total revenue":"HCC total revenue",
|
||||
"To get profit":"To get profit",
|
||||
"No income is received temporarily":"No income is received temporarily",
|
||||
"Upgrade commander":"Upgrade commander",
|
||||
"Regimental recommendation":"Regimental recommendation",
|
||||
"Number of secondary subordinates":"Number of secondary subordinates",
|
||||
"Number of first-level subordinates":"Number of first-level subordinates",
|
||||
"Immediately to receive":"Immediately to receive",
|
||||
"buy again":"buy again",
|
||||
"Connect the purse":"Connect the purse",
|
||||
"HCC total revenue percentage :10%":"HCC total revenue percentage :10%",
|
||||
"Contract address":"ontract address",
|
||||
"Assets agreement":"Assets agreement",
|
||||
"Assets and chain":"Assets and chain",
|
||||
"each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
|
||||
"last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
|
||||
"commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import request from 'utils/request'
|
||||
|
||||
export const login = (params) => {
|
||||
export const login = (data) => {
|
||||
return request.request({
|
||||
url: '/v1/login',
|
||||
method: 'get',
|
||||
params,
|
||||
url: '/high_city/app/api/auth/login',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export const queryLoginHash = (params) => {
|
||||
export const queryLoginHash = (data) => {
|
||||
return request.request({
|
||||
url: '/v1/login/hash',
|
||||
method: 'get',
|
||||
params,
|
||||
url: '/high_city/app/api/auth/msg',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,36 +2,8 @@ import request from 'utils/request'
|
|||
|
||||
export const queryUserInfo = () => {
|
||||
return request.request({
|
||||
url: '/v1/user',
|
||||
url: '/high_city/app/api/user/detail',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const queryUserAvatarList = () => {
|
||||
return request.request({
|
||||
url: '/v1/avatar/user/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const queryUserInviteList = () => {
|
||||
return request.request({
|
||||
url: '/v1/user/invite/top/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const updateUserAvater = (params) => {
|
||||
return request.request({
|
||||
url: '/v1/user/update/avatar',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
export const updateUserInfo = (data) => {
|
||||
return request.request({
|
||||
url: '/v1/user/update',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
export default queryUserInfo
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { setUserInfo } from 'state/actions'
|
|||
import { CACHE_INVITE_CODE } from 'config/constants/cacheKey'
|
||||
import useToast from 'hooks/useToast'
|
||||
import { State } from '../types'
|
||||
import { fetchUserInfo } from './index'
|
||||
|
||||
export const useAccount = (ellipsis?: boolean) => {
|
||||
const account = useSelector((state: State) => state.userInfo.account)
|
||||
|
|
@ -42,14 +43,14 @@ export const useSignLogin = () => {
|
|||
const signLogin = async () => {
|
||||
try {
|
||||
const data = await queryLoginHash({ address: unActiveAccount })
|
||||
const signHash = await signMessage(library, unActiveAccount, data.hash)
|
||||
const signHash = await signMessage(library, unActiveAccount, data.msg)
|
||||
const inviteCode = sessionStorage.getItem(CACHE_INVITE_CODE)
|
||||
const userInfo = await userLogin({
|
||||
hash: data.hash,
|
||||
signature: signHash,
|
||||
invite_code: inviteCode,
|
||||
msg: data.msg,
|
||||
sign: signHash,
|
||||
inviteCode,
|
||||
})
|
||||
dispatch(setUserInfo({ ...userInfo.user_info, token: userInfo.token }))
|
||||
dispatch(setUserInfo(userInfo))
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
// e.message&&toastError(e)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Dispatch } from 'react'
|
||||
import axios from 'axios'
|
||||
// import { clearUserInfo } from 'state/actions'
|
||||
import { CACHE_TOKEN } from 'config/constants/cacheKey'
|
||||
|
||||
// create an axios instance
|
||||
const request = axios.create({
|
||||
|
|
@ -11,12 +12,9 @@ let hasInit = false
|
|||
export const initAxios = (dispatch: Dispatch<any>, toast) => {
|
||||
if (hasInit) return
|
||||
hasInit = true
|
||||
// request interceptor
|
||||
request.interceptors.request.use(
|
||||
(memo: any) => {
|
||||
// do something before request is sent
|
||||
|
||||
memo.headers.token = localStorage.getItem('token')
|
||||
memo.headers.token = localStorage.getItem(CACHE_TOKEN)
|
||||
return memo
|
||||
},
|
||||
(error) => {
|
||||
|
|
@ -33,8 +31,8 @@ export const initAxios = (dispatch: Dispatch<any>, toast) => {
|
|||
toast.toastError('Login expiration')
|
||||
return Promise.reject(new Error('Login expiration'))
|
||||
}
|
||||
toast.toastError(res.msg)
|
||||
return Promise.reject(res.msg || 'Error')
|
||||
toast.toastError(res.message)
|
||||
return Promise.reject(res.message || 'Error')
|
||||
}
|
||||
return res.data
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import FristCom from './components/FristCom'
|
||||
import IntroduceCom from './components/IntroduceCom'
|
||||
import CourseCom from './components/CourseCom'
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<FristCom />
|
||||
<IntroduceCom />
|
||||
<CourseCom />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
|
||||
const FirstPage = styled.div`
|
||||
background-image: url('/images/home/three.svg');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 0 50px 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
const FlexMain = styled(Flex)`
|
||||
justify-content: center;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
justify-content: center;
|
||||
}
|
||||
`
|
||||
|
||||
const CardDiv = styled(Card)`
|
||||
padding: 20px;
|
||||
`
|
||||
|
||||
const CourseCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [list, setListState] = useState([
|
||||
{
|
||||
title: t('Stage one: Origin'),
|
||||
id: 1,
|
||||
list: [
|
||||
{ text: t('The project concept was born in May 2021') },
|
||||
{ text: t('Set up HighCity team in June 2021') },
|
||||
{ text: t('May 2021 -- January 2022 Team run-in') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage two: Action'),
|
||||
id: 2,
|
||||
list: [
|
||||
{
|
||||
text: t(
|
||||
'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
|
||||
),
|
||||
},
|
||||
{ text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage three: Creation'),
|
||||
id: 3,
|
||||
list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
|
||||
},
|
||||
{
|
||||
title: t('Stage four: Integration'),
|
||||
id: 4,
|
||||
list: [
|
||||
{ text: t('Launch of social software in December 2022') },
|
||||
{ text: t('December 2022 NFT bonus binding social software') },
|
||||
{ text: t('In December 2022, HighCity Ecology was preliminarily completed') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage five: Closing the curtain'),
|
||||
id: 5,
|
||||
list: [
|
||||
{ text: t('HighCity Ecology completed in December 2022') },
|
||||
{ text: t('Maintain dividend income growth in December 2022') },
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
return (
|
||||
<>
|
||||
<FirstPage>
|
||||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||
<FlexMain>
|
||||
<div>
|
||||
<Stepper>
|
||||
{list.map((item, index) => (
|
||||
<Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
|
||||
<CardDiv>
|
||||
<Heading>{item.title}</Heading>
|
||||
{item.list.map((childItem) => {
|
||||
return (
|
||||
<Text color="textSubtle" marginTop="15px" key={childItem.text}>
|
||||
{childItem.text}
|
||||
</Text>
|
||||
)
|
||||
})}
|
||||
</CardDiv>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</div>
|
||||
</FlexMain>
|
||||
</StyledPage>
|
||||
</FirstPage>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CourseCom
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Text } from '@pancakeswap/uikit'
|
||||
|
||||
interface FlexProp {
|
||||
name: string
|
||||
value: string
|
||||
}
|
||||
|
||||
const ScoreItem = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const ItemText = styled(Text)`
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
`
|
||||
|
||||
const ItemSubText = styled(Text)`
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
`
|
||||
|
||||
const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
|
||||
return (
|
||||
<ScoreItem>
|
||||
<ItemText color="text">{value}</ItemText>
|
||||
<ItemSubText color="textSubtle">{name}</ItemSubText>
|
||||
</ScoreItem>
|
||||
)
|
||||
}
|
||||
export default FlexItemCom
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Heading, Text, Box, Button, Image } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
|
||||
import FlexItemCom from './FlexItemCom'
|
||||
|
||||
const FirstPage = styled.div`
|
||||
background-image: url('/images/home/bg.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0.9rem 0 0.8rem 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
const FlexDiv = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
}
|
||||
`
|
||||
const ImageDiv = styled.img`
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
justify-content: center;
|
||||
width: 215px;
|
||||
height: 215px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 315px;
|
||||
height: 315px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
`
|
||||
const BtnFlex = styled(Flex)`
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 60px;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 30px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 60px;
|
||||
}
|
||||
`
|
||||
const RadiusBtn = styled(Button)`
|
||||
border-radius: 50px;
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
}
|
||||
`
|
||||
const WhiteBtn = styled(Button)`
|
||||
border-radius: 50px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
border: 1px solid #1fc7d4;
|
||||
margin: 0px 35px 10px 0;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
}
|
||||
`
|
||||
const BtnImage = styled(Image)`
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin-right: 12px;
|
||||
`
|
||||
|
||||
const ScoreDiv = styled(Flex)`
|
||||
margin-top: 127px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 15px;
|
||||
padding: 59px 0;
|
||||
justify-content: space-between;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 50px;
|
||||
padding: 30px 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 127px;
|
||||
padding: 59px 0;
|
||||
flex-direction: unset;
|
||||
}
|
||||
`
|
||||
const InfoDiv = styled.div``
|
||||
|
||||
const FristCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [burned, BurnedState] = useState([
|
||||
{ id: 1, name: 'Burned', value: '62.55%' },
|
||||
{ id: 2, name: 'Burned', value: '62.55%' },
|
||||
{ id: 3, name: 'Burned', value: '62.55%' },
|
||||
{ id: 4, name: 'Burned', value: '62.55%' },
|
||||
])
|
||||
return (
|
||||
<>
|
||||
<FirstPage>
|
||||
<StyledPage px={['16px', '24px']} mx="auto">
|
||||
<FlexDiv>
|
||||
<ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
|
||||
<InfoDiv>
|
||||
<Heading as="h1" scale="xl" mb="24px" color="secondary">
|
||||
High City Coin
|
||||
</Heading>
|
||||
<Text>{t('Hcc Info')}</Text>
|
||||
<Text> {t('Hcc Nft')}</Text>
|
||||
<Text>{t('Hcc BTC')}</Text>
|
||||
<BtnFlex>
|
||||
<RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
|
||||
<WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
|
||||
<Flex>
|
||||
<BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
|
||||
<BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
|
||||
</Flex>
|
||||
</BtnFlex>
|
||||
</InfoDiv>
|
||||
</FlexDiv>
|
||||
<ScoreDiv>
|
||||
{burned.map((item) => {
|
||||
return <FlexItemCom key={item.id} name={item.name} value={item.value} />
|
||||
})}
|
||||
</ScoreDiv>
|
||||
</StyledPage>
|
||||
</FirstPage>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FristCom
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
|
||||
const FirstPage = styled.div`
|
||||
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
|
||||
padding: 100px 0 50px 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
|
||||
const BoxMain = styled(Box)`
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
padding: 94px 30px 37px 30px;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding: 94px 92px 37px 92px;
|
||||
}
|
||||
`
|
||||
|
||||
const MainDiv = styled.div`
|
||||
position: absolute;
|
||||
top: -76px;
|
||||
left: 50%;
|
||||
margin-left: -76px;
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 13px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #e0ffff;
|
||||
padding: 25px;
|
||||
}
|
||||
`
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
font-size: 36px;
|
||||
color: #333333;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
const TextCom = styled(Text)`
|
||||
margin-top: 35px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 35px;
|
||||
}
|
||||
`
|
||||
|
||||
const IntroduceCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<>
|
||||
<FirstPage>
|
||||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||
<BoxMain>
|
||||
<MainDiv>
|
||||
<div>
|
||||
<Image src="/images/home/intor.svg" alt="" width={75} height={75} />
|
||||
</div>
|
||||
</MainDiv>
|
||||
<HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
|
||||
<TextCom>{t('HighCitySwapInfo')}</TextCom>
|
||||
</BoxMain>
|
||||
</StyledPage>
|
||||
</FirstPage>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default IntroduceCom
|
||||
|
|
@ -1 +1 @@
|
|||
export { default } from './Home'
|
||||
export { default } from './HomeIndex'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
// import SearchInput from 'components/SearchInput'
|
||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
export default function FlexText({ name, value }) {
|
||||
return (
|
||||
<Flex justifyContent="flex-end" alignItems="center" marginTop="12px" padding="0 21px">
|
||||
<Text color="#6B6472" fontSize="14px">
|
||||
{name}：
|
||||
</Text>
|
||||
<Text color="#1FC7D4" fontSize="14px">
|
||||
{value}
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
export default function StepCom() {
|
||||
const [valNumber, setInputState] = useState(1)
|
||||
|
||||
const onAdd = (type) => {
|
||||
if (type === 'add') {
|
||||
setInputState(valNumber + 1)
|
||||
} else {
|
||||
if (valNumber === 0) return
|
||||
setInputState(valNumber - 1)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" alignItems="center" width={120}>
|
||||
<Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
|
||||
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
||||
{valNumber}
|
||||
</Text>
|
||||
<Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
// import SearchInput from 'components/SearchInput'
|
||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
import FlexText from './component/FlexText'
|
||||
// import Step from './component/Step'
|
||||
|
||||
import StepCom from './component/StepCom'
|
||||
|
||||
import 'swiper/swiper.min.css'
|
||||
|
||||
import 'swiper/components/pagination/pagination.min.css'
|
||||
|
||||
SwiperCore.use([Keyboard, Mousewheel, Pagination])
|
||||
|
||||
const MainDiv = styled.div`
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 64px);
|
||||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||
`
|
||||
|
||||
const StyledPage = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding: 24px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
`
|
||||
|
||||
const BodyWrapper = styled(Card)`
|
||||
border-radius: 24px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const HindDiv = styled.div`
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
`
|
||||
const BlindboxImage = styled(Image)`
|
||||
max-width: 377px;
|
||||
max-height: 367px;
|
||||
z-index: 9;
|
||||
`
|
||||
|
||||
const Divs = styled.div`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
min-height: calc(100vh - 104px);
|
||||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||
`
|
||||
|
||||
const DetailInfo = styled(Flex)`
|
||||
padding: 0 21px;
|
||||
margin-top: 24px;
|
||||
`
|
||||
|
||||
const SwiperDiv = styled(Swiper)`
|
||||
height: 730px;
|
||||
& > .swiper-wrapper > .swiper-slide > div > div {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& > .swiper-pagination {
|
||||
& > .swiper-pagination-bullet {
|
||||
background: #fff;
|
||||
width: 14px;
|
||||
height: 9px;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
& > .swiper-pagination-bullet-active {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
<SwiperDiv
|
||||
loop
|
||||
pagination={{ clickable: true }}
|
||||
spaceBetween={16}
|
||||
freeModeMomentumRatio={0.25}
|
||||
freeModeMomentumVelocityRatio={0.5}
|
||||
>
|
||||
{blindboxList.map((item) => {
|
||||
return (
|
||||
<SwiperSlide key={item.id}>
|
||||
<StyledPage>
|
||||
<Divs>
|
||||
<BodyWrapper>
|
||||
<HindDiv>
|
||||
<Image src="/images/nft/hint.png" alt="" width={32} height={32} />
|
||||
</HindDiv>
|
||||
<Flex justifyContent="center" marginTop="-40px">
|
||||
<BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
|
||||
</Flex>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">系列</Text>
|
||||
<Text color="text">法式盛宴</Text>
|
||||
</DetailInfo>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">价格</Text>
|
||||
<Flex alignItems="center" justifyContent="flex-end">
|
||||
<Text color="#1FC7D4" fontSize="24px">
|
||||
500
|
||||
</Text>
|
||||
<Text color="text">黄油</Text>
|
||||
</Flex>
|
||||
</DetailInfo>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">数量</Text>
|
||||
<StepCom />
|
||||
</DetailInfo>
|
||||
<FlexText name="钱包中的 BUTTER" value="0" />
|
||||
<FlexText name="回收点数抵扣" value="0" />
|
||||
<FlexText name="实际黄油成本" value="0" />
|
||||
</BodyWrapper>
|
||||
</Divs>
|
||||
</StyledPage>
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</SwiperDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
export default Nft
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
|
||||
import TextFlex from './TextFlex'
|
||||
import FlexCom from './FlexCom'
|
||||
|
||||
const ModalDiv = styled(Modal)`
|
||||
width: 80%;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
}
|
||||
`
|
||||
|
||||
const InfoDiv = styled.div`
|
||||
box-sizing: border-box;
|
||||
padding: 30px 26px;
|
||||
margin-left: 60px;
|
||||
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
padding: 20px 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding: 30px 26px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
`
|
||||
const UpBtn = styled(Button)`
|
||||
width: 50%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
const ImageDiv = styled(Image)`
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin-bottom: 20px;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
`
|
||||
|
||||
const BuyNftModal: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// const onDismiss = () => {}
|
||||
return (
|
||||
<ModalDiv title={t('Buy commander NFT')}>
|
||||
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
||||
<ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
|
||||
<InfoDiv>
|
||||
<TextFlex
|
||||
text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
|
||||
color="#FEFDF1"
|
||||
/>
|
||||
<TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
|
||||
<TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
|
||||
<FlexCom name={t('First stage sharing ratio')} value="10％" />
|
||||
<FlexCom name={t('Secondary split ratio')} value="5％" />
|
||||
<FlexCom name={t('Contract address')} value={t('Contract address')} />
|
||||
<FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
|
||||
<FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
|
||||
</InfoDiv>
|
||||
</Flex>
|
||||
|
||||
<Flex>
|
||||
<UpBtn>{t('Buy It Now')}</UpBtn>
|
||||
</Flex>
|
||||
</ModalDiv>
|
||||
)
|
||||
}
|
||||
export default BuyNftModal
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Button, useModal, Text } from '@pancakeswap/uikit'
|
||||
import FlexCom from './FlexCom'
|
||||
import BuyNftModal from './BuyNftModal'
|
||||
import HeaderMain from './HeaderMain'
|
||||
|
||||
const ButtonDiv = styled(Button)`
|
||||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
border: 1px solid ${({ theme }) => theme.colors.textDisabled};
|
||||
color: ${({ theme }) => theme.colors.textDisabled};
|
||||
`
|
||||
|
||||
const UpBtn = styled(Button)`
|
||||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
|
||||
const FooterBtn = styled.div`
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
`
|
||||
const MainDiv = styled.div`
|
||||
padding: 0 30px;
|
||||
`
|
||||
const FooterDiv = styled.div`
|
||||
margin: 0 auto 30px auto;
|
||||
`
|
||||
const TextDiv = styled(Text)`
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
`
|
||||
|
||||
const ConnectedCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [onBuyModal] = useModal(<BuyNftModal />)
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
<HeaderMain title={t('recommend')} />
|
||||
<>
|
||||
<FlexCom name={t('The lower the number of')} value="100000(人)" />
|
||||
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
|
||||
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
|
||||
</>
|
||||
<FooterBtn>
|
||||
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
|
||||
<UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
|
||||
</FooterBtn>
|
||||
<FooterDiv>
|
||||
<TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('last bid')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
|
||||
</FooterDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
export default ConnectedCom
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
|
||||
interface FlexProps {
|
||||
name: string
|
||||
value: string
|
||||
paddings?: string
|
||||
leftColor?: string
|
||||
rightColor?: string
|
||||
}
|
||||
|
||||
const FlexDiv = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
`
|
||||
const FlexCom: React.FC<FlexProps> = ({
|
||||
name,
|
||||
value,
|
||||
paddings = '0px',
|
||||
leftColor = 'text',
|
||||
rightColor = 'textSubtle',
|
||||
}) => {
|
||||
return (
|
||||
<FlexDiv style={{ padding: paddings }}>
|
||||
<Text color={leftColor}>{name}</Text>
|
||||
<Text color={rightColor}>{value}</Text>
|
||||
</FlexDiv>
|
||||
)
|
||||
}
|
||||
export default FlexCom
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Image, Heading } from '@pancakeswap/uikit'
|
||||
|
||||
interface HeaderProp {
|
||||
title: string
|
||||
}
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const TipDiv = styled(Image)`
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 24px;
|
||||
left: 0;
|
||||
`
|
||||
const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
|
||||
return (
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{title}
|
||||
</HeadingDiv>
|
||||
)
|
||||
}
|
||||
export default HeaderMain
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Text, Image, Button } from '@pancakeswap/uikit'
|
||||
import FlexCom from './FlexCom'
|
||||
import HeaderMain from './HeaderMain'
|
||||
|
||||
const ButtonDiv = styled(Button)`
|
||||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
border: 1px solid ${({ theme }) => theme.colors.textDisabled};
|
||||
color: ${({ theme }) => theme.colors.textDisabled};
|
||||
`
|
||||
|
||||
const UpBtn = styled(Button)`
|
||||
width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
|
||||
const FooterBtn = styled.div`
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
`
|
||||
|
||||
const ContentDiv = styled.div`
|
||||
width: 60%;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 60%;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 90%;
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
`
|
||||
|
||||
const MainDiv = styled.div`
|
||||
padding: 0 30px;
|
||||
`
|
||||
const FooterDiv = styled.div`
|
||||
margin: 0 auto 30px auto;
|
||||
`
|
||||
const TextDiv = styled(Text)`
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
`
|
||||
const LogoImage = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const RegimentalCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<ContentDiv>
|
||||
<MainDiv>
|
||||
<HeaderMain title={t('Regimental recommendation')} />
|
||||
<LogoImage>
|
||||
<Image src="/images/recommend/logo.svg" width={249} height={249} />
|
||||
</LogoImage>
|
||||
|
||||
<>
|
||||
<FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
|
||||
<FlexCom
|
||||
name={t('HCC total revenue percentage :10%')}
|
||||
paddings="0 10px"
|
||||
leftColor="textSubtle"
|
||||
value="100000.00(HCC)"
|
||||
/>
|
||||
<FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
|
||||
<FlexCom
|
||||
name={t('HCC total revenue percentage :10%')}
|
||||
paddings="0 10px"
|
||||
leftColor="textSubtle"
|
||||
value="100000.00(HCC)"
|
||||
/>
|
||||
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
|
||||
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
|
||||
</>
|
||||
|
||||
<FooterBtn>
|
||||
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
|
||||
{/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
|
||||
</FooterBtn>
|
||||
<FooterDiv>
|
||||
<TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('last bid')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
|
||||
</FooterDiv>
|
||||
</MainDiv>
|
||||
</ContentDiv>
|
||||
)
|
||||
}
|
||||
export default RegimentalCom
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex } from '@pancakeswap/uikit'
|
||||
|
||||
interface TextProps {
|
||||
color: string
|
||||
text?: string
|
||||
}
|
||||
|
||||
const MainDiv = styled(Flex)`
|
||||
box-sizing: border-box;
|
||||
padding: 14px 36px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
color: #2f2e41;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
|
||||
return <MainDiv style={{ background: color }}>{text}</MainDiv>
|
||||
}
|
||||
export default TextFlex
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Button, Heading, Text } from '@pancakeswap/uikit'
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 90px;
|
||||
`
|
||||
|
||||
const ButtonDiv = styled(Button)`
|
||||
width: 80%;
|
||||
margin: 80px auto 10px auto;
|
||||
margin-left: 10%;
|
||||
border-radius: 50px;
|
||||
`
|
||||
const FooterDiv = styled.div`
|
||||
width: 80%;
|
||||
margin: 0 auto 30px auto;
|
||||
margin-left: 10%;
|
||||
`
|
||||
const TextDiv = styled(Text)`
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
`
|
||||
|
||||
const UnunitedCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<>
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{t('recommend')}
|
||||
</HeadingDiv>
|
||||
<ButtonDiv>{t('Connect the purse')}</ButtonDiv>
|
||||
<FooterDiv>
|
||||
<TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('last bid')}</TextDiv>
|
||||
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
|
||||
</FooterDiv>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default UnunitedCom
|
||||
|
|
@ -1,180 +1,47 @@
|
|||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable no-unneeded-ternary */
|
||||
import React, { useEffect, useCallback, useState, useRef, useMemo } from 'react'
|
||||
import { Button, Heading, CopyToClipboard, Text, Flex } from '@pancakeswap/uikit'
|
||||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { State } from 'state/types'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useWeb3React } from '@web3-react/core'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import PageHeader from 'components/PageHeader'
|
||||
import Page from 'components/Layout/Page'
|
||||
import { getAddressInviteList } from 'services/referral'
|
||||
// import { useInviteHarvest } from 'hooks/useHarvest'
|
||||
import { fetchReferralInfoAsync } from 'state/actions'
|
||||
import UnunitedCom from './components/UnunitedCom'
|
||||
import ConnectedCom from './components/Connected'
|
||||
import RegimentalCom from './components/Regimental'
|
||||
|
||||
const Header = styled.div`
|
||||
padding: 32px 0px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
text-align: center;
|
||||
const MainDiv = styled.div`
|
||||
min-height: calc(100vh - 64px);
|
||||
background-image: url('/images/recommend/bg.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const ContentDiv = styled.div`
|
||||
width: 60%;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 40px;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
width: 60%;
|
||||
}
|
||||
`
|
||||
const PageContainer = styled(Page)`
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
const LinkContainer = styled.div`
|
||||
border: 1px solid rgb(216, 222, 227);
|
||||
padding: 10px 0px;
|
||||
line-height: 46px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
`
|
||||
const AddressContainer = styled.div`
|
||||
border: 1px solid rgb(216, 222, 227);
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
`
|
||||
const AddressTitle = styled.div`
|
||||
border-bottom: 1px solid rgb(216, 222, 227);
|
||||
color: ${({ theme }) => theme.colors.primary};
|
||||
font-size: 18px;
|
||||
padding: 10px 20px;s
|
||||
line-height: 28px;
|
||||
background: rgb(244, 247, 250);
|
||||
font-weight: 600;
|
||||
`
|
||||
const AddressList = styled.div`
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
line-height: 24px;
|
||||
`
|
||||
const NoData = styled.div`
|
||||
color: rgb(153, 153, 153);
|
||||
`
|
||||
const RewardContainer = styled.div`
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
`
|
||||
const SecondText = styled(Text)`
|
||||
white-space: break-spaces;
|
||||
`
|
||||
const Farms: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const { account } = useWeb3React()
|
||||
const [inviteList, setInviteList] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const inviteInfo = useSelector((state: State) => state.referral.data)
|
||||
const inviteAddress = useMemo(() => {
|
||||
return inviteInfo.InviteCode
|
||||
? `${window.location.origin}/#/farms?code=${inviteInfo.InviteCode}`
|
||||
: window.location.origin
|
||||
}, [inviteInfo])
|
||||
useEffect(() => {
|
||||
if (account) {
|
||||
getInviteList()
|
||||
} else {
|
||||
setInviteList([])
|
||||
}
|
||||
}, [account])
|
||||
// const { onReward } = useInviteHarvest()
|
||||
const handleWithdraw = async () => {
|
||||
// setLoading(true)
|
||||
// try {
|
||||
// await onReward()
|
||||
// dispatch(fetchReferralInfoAsync(account))
|
||||
// setLoading(false)
|
||||
// } catch (e) {
|
||||
// setLoading(false)
|
||||
// }
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
width: 60%;
|
||||
}
|
||||
const getInviteList = async () => {
|
||||
const data: any = await getAddressInviteList({ address: account })
|
||||
setInviteList(data)
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
width: 90%;
|
||||
}
|
||||
`
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
// 邀请false普通邀请 true军团长邀请
|
||||
const [type, setType] = useState(false)
|
||||
// 是否连接钱包
|
||||
const [status, setStatus] = useState(true)
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<Flex justifyContent="space-between" flexDirection={['column', null, null, 'row']}>
|
||||
<Flex flex="1" flexDirection="column" mr={['8px', 0]}>
|
||||
<Heading as="h1" scale="xxl" color="secondary" mb="24px">
|
||||
{t('Referral')}
|
||||
</Heading>
|
||||
<Heading scale="md" color="text">
|
||||
{t('Share referral link and get rewards daily.')}
|
||||
</Heading>
|
||||
<Heading scale="md" color="text">
|
||||
{t('Invite more friends, earn more rewards.')}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex flex="1" height="fit-content" justifyContent="center" alignItems="center" mt={['24px', null, '0']}>
|
||||
{/* <BountyCard /> */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</PageHeader>
|
||||
{/* <Header>
|
||||
<Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
|
||||
{t('Referral')}
|
||||
</Heading>
|
||||
<Text fontSize="28px" color="text">
|
||||
{t('Share referral link and get rewards daily.')}
|
||||
<br />
|
||||
{t('Invite more friends, earn more rewards.')}
|
||||
</Text>
|
||||
</Header> */}
|
||||
<PageContainer>
|
||||
<RewardContainer>
|
||||
<Text> {t('Total Rewards')}</Text>
|
||||
<Text color="primary" bold fontSize="30px">
|
||||
{inviteInfo.totalReward ? Number(inviteInfo.totalReward).toFixed(5) : '0.00000'}
|
||||
</Text>
|
||||
</RewardContainer>
|
||||
<RewardContainer>
|
||||
<Text> {t('Unclaimed Rewards')}</Text>
|
||||
<Text color="primary" bold fontSize="30px">
|
||||
{inviteInfo.canWithdrawReward ? Number(inviteInfo.canWithdrawReward).toFixed(5) : '0.00000'}
|
||||
</Text>
|
||||
<Button
|
||||
scale="md"
|
||||
disabled={loading || !inviteInfo.canWithdrawReward ? true : false}
|
||||
onClick={handleWithdraw}
|
||||
>
|
||||
{t('Harvest')}
|
||||
</Button>
|
||||
</RewardContainer>
|
||||
<LinkContainer>
|
||||
<Text marginBottom={1} fontSize="20px">
|
||||
{inviteAddress}
|
||||
</Text>
|
||||
<CopyToClipboard toCopy={inviteAddress}> {t('Copy Link')}</CopyToClipboard>
|
||||
</LinkContainer>
|
||||
<AddressContainer>
|
||||
<AddressTitle>{t('Address')}</AddressTitle>
|
||||
<AddressList>
|
||||
{inviteList.length === 0 ? (
|
||||
<NoData>{t('No Data')}</NoData>
|
||||
) : (
|
||||
inviteList.map((item, index) => (
|
||||
<Text key={item.ID} color="text">
|
||||
{item.Address}
|
||||
</Text>
|
||||
))
|
||||
)}
|
||||
</AddressList>
|
||||
</AddressContainer>
|
||||
</PageContainer>
|
||||
</>
|
||||
<MainDiv>
|
||||
{type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default Farms
|
||||
export default Nft
|
||||
|
|
|
|||
Loading…
Reference in New Issue