diff --git a/public/images/nft/add-icon.png b/public/images/nft/add-icon.png
new file mode 100644
index 0000000..f6ebaef
Binary files /dev/null and b/public/images/nft/add-icon.png differ
diff --git a/public/images/nft/blindbox.png b/public/images/nft/blindbox.png
new file mode 100644
index 0000000..2e1b6d4
Binary files /dev/null and b/public/images/nft/blindbox.png differ
diff --git a/public/images/nft/hint.png b/public/images/nft/hint.png
new file mode 100644
index 0000000..4b7c03c
Binary files /dev/null and b/public/images/nft/hint.png differ
diff --git a/public/images/nft/sub-icon.png b/public/images/nft/sub-icon.png
new file mode 100644
index 0000000..2668015
Binary files /dev/null and b/public/images/nft/sub-icon.png differ
diff --git a/src/App.tsx b/src/App.tsx
index f3312bc..e27a0aa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -48,6 +48,7 @@ const Pool = lazy(() => import('./views/Pool'))
const PoolFinder = lazy(() => import('./views/PoolFinder'))
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
const Referral = lazy(() => import('./views/Referral'))
+const Nft = lazy(() => import('./views/Nft'))
// This config is required for number formatting
BigNumber.config({
@@ -89,6 +90,9 @@ const App: React.FC = () => {
+
+
+
{/*
@@ -138,6 +142,7 @@ const App: React.FC = () => {
+
{/* Redirect */}
{/*
diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts
index 0377318..8b97a6d 100644
--- a/src/components/Menu/config.ts
+++ b/src/components/Menu/config.ts
@@ -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',
diff --git a/src/views/Nft/index.tsx b/src/views/Nft/index.tsx
new file mode 100644
index 0000000..3b99031
--- /dev/null
+++ b/src/views/Nft/index.tsx
@@ -0,0 +1,176 @@
+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 '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.div`
+ padding:0 21px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ 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 [valNumber, setInputState] = useState(1)
+ const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
+ const onAdd = (type) => {
+ if (type === 'add') {
+ setInputState(valNumber + 1)
+ } else {
+ if (valNumber === 0) return
+ setInputState(valNumber - 1)
+ }
+
+ }
+
+ return (
+
+
+ {
+ blindboxList.map((item) => {
+ return
+
+
+
+
+
+
+
+
+
+
+ 系列
+ 法式盛宴
+
+
+ 价格
+
+ 500
+ 黄油
+
+
+
+ 数量
+
+ onAdd('sub')} width={25} height={25} />
+ {valNumber}
+ onAdd('add')} width={25} height={25} />
+
+
+
+ 钱包中的 BUTTER：
+ 0
+
+
+ 回收点数抵扣：
+ 0
+
+
+ 实际黄油成本：
+ 0
+
+
+
+
+
+ })
+ }
+
+
+ )
+}
+export default Nft
\ No newline at end of file