From c394ba117fe834e3f2090733831d0033e879d062 Mon Sep 17 00:00:00 2001
From: myf <>
Date: Wed, 1 Jun 2022 13:50:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=88=E6=88=90=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/locales/zh-CN.json | 23 ++-
src/config/localization/translations.json | 23 ++-
.../Compound/components/CombinationRules.tsx | 45 ++++++
src/views/Compound/components/CompoundBox.tsx | 142 +++++++++++-------
src/views/Compound/components/Preview.tsx | 59 ++++++++
src/views/Compound/components/ShopList.tsx | 134 +++++++++++++++++
src/views/Compound/components/ShopModal.tsx | 140 +++++++++++++++++
.../Compound/components/SynthesisDetail.tsx | 51 +++++++
8 files changed, 558 insertions(+), 59 deletions(-)
create mode 100644 src/views/Compound/components/CombinationRules.tsx
create mode 100644 src/views/Compound/components/Preview.tsx
create mode 100644 src/views/Compound/components/ShopList.tsx
create mode 100644 src/views/Compound/components/ShopModal.tsx
create mode 100644 src/views/Compound/components/SynthesisDetail.tsx
diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
index b80871b..641fcaa 100644
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@@ -1191,5 +1191,26 @@
"nft Smoking in the probability": "NFT抽中概率",
"%num%kind nft": "%num%种NFT",
"Selling immediately": "立即出售",
- "Total quantity of ownership": "总拥有数量"
+ "Total quantity of ownership": "总拥有数量",
+ "Compositing success preview": "合成成功预览",
+ "nft name": "NFT名称",
+ "not available": "暂无",
+ "Number of successful synthesis": "合成成功数量",
+ "Synthetic success rate": "合成成功率",
+ "compound": "合成",
+ "Estimated synthesis cost": "预计合成费用",
+ "combination rules": "合成规则",
+ "1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;": "1、可使用多个相同NFT作为合成的原料，不同等级的NFT合成的成功率不一样，珍稀合成率为50%，史诗合成率为40%，传说合成率为23%；",
+ "2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;": "2、如果合成成功，则用户获得更高级的NFT，且合成池内所有NFT被销毁；",
+ "3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;": "3、如果合成失败，则根据合成的原料NFT等级出现不同概率的无变化或完全失败；无变化将损失合成时的合成费用；完全失败将损失合成的NFT原料及合成费用；",
+ "4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;": "4、举例：向合成池内填充2个普通 NFT，则此时的合成成功概率为：50%；无变化的概率为：47%；完全失败的概率为3%；",
+ "reselect nft": "重新选择NFT",
+ "add NFT": "添加NFT",
+ "Synthesis of details": "合成详情",
+ "Synthesis results: synthesis success, no change, synthesis failure;": "合成结果：合成成功、无变化、合成失败；",
+ "Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;": "合成成功：获得更高级的NFT，并对合成池内的原料NFT进行销毁；",
+ "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "无变化：保留合成池内的原料NFT，但损失合成时的合成费用；",
+ "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "合成失败：损失合成池内的原料NFT及合成时的合成费用；",
+ "compound probability:": "合成概率：",
+ "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "合成成功NFT名称（等级）=原料NFT名称（等级）×数量+合成费用"
}
diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json
index fa9dab1..023be0c 100644
--- a/src/config/localization/translations.json
+++ b/src/config/localization/translations.json
@@ -1318,5 +1318,26 @@
"nft Smoking in the probability": "nft Smoking in the probability",
"%num%kind nft": "%num%kind nft",
"Selling immediately": "Selling immediately",
- "Total quantity of ownership": "Total quantity of ownership"
+ "Total quantity of ownership": "Total quantity of ownership",
+ "Compositing success preview": "Compositing success preview",
+ "nft name": "NFT name",
+ "not available": "not available",
+ "Number of successful synthesis": "Number of successful synthesis",
+ "Synthetic success rate": "Synthetic success rate",
+ "compound": "compound",
+ "Estimated synthesis cost": "Estimated synthesis cost",
+ "combination rules": "combination rules",
+ "1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;": "1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;",
+ "2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;": "2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;",
+ "3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;": "3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;",
+ "4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;": "4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;",
+ "reselect nft": "reselect NFT",
+ "add NFT": "add NFT",
+ "Synthesis of details": "Synthesis of details",
+ "Synthesis results: synthesis success, no change, synthesis failure;": "Synthesis results: synthesis success, no change, synthesis failure;",
+ "Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;": "Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;",
+ "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;",
+ "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;",
+ "compound probability:": "compound probability:",
+ "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost"
}
diff --git a/src/views/Compound/components/CombinationRules.tsx b/src/views/Compound/components/CombinationRules.tsx
new file mode 100644
index 0000000..e029f5f
--- /dev/null
+++ b/src/views/Compound/components/CombinationRules.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text } from '@pancakeswap/uikit'
+
+const Explain = styled.div`
+ margin-top: 30px;
+ text-align: left;
+`
+
+const ExplainText = styled(Text)`
+ font-size: 14px;
+ color: #999999;
+ margin-bottom: 10px;
+`
+const CombinationRules: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+ {t('combination rules')}
+
+ {t(
+ '1. Multiple same NFT can be used as raw materials for synthesis. The success rate of synthesis of different levels of NFT is different, the rare synthesis rate is 50%, epic synthesis rate is 40%, legend synthesis rate is 23%;',
+ )}
+
+
+ {t(
+ '2. If the synthesis is successful, the user will get a more advanced NFT, and all NFT in the synthesis pool will be destroyed;',
+ )}
+
+
+ {t(
+ '3. If the synthesis fails, there will be no change or complete failure with different probabilities according to the NFT grade of the synthetic raw materials; No change will lose the cost of synthesis; Complete failure will result in loss of synthetic NFT materials and cost of synthesis;',
+ )}
+
+
+ {t(
+ '4. For example: fill two ordinary NFT into the synthesis pool, then the synthesis success probability is 50%; Probability of no change: 47%; A 3 percent chance of complete failure;',
+ )}
+
+
+ )
+}
+export default CombinationRules
diff --git a/src/views/Compound/components/CompoundBox.tsx b/src/views/Compound/components/CompoundBox.tsx
index 35f99a0..96597b1 100644
--- a/src/views/Compound/components/CompoundBox.tsx
+++ b/src/views/Compound/components/CompoundBox.tsx
@@ -1,7 +1,12 @@
import React, { useState, useEffect } from 'react'
import styled, { keyframes } from 'styled-components'
import { useTranslation } from 'contexts/Localization'
-import { Text, Flex, Button, Image } from '@pancakeswap/uikit'
+import { Text, Flex, Button, Image, useModal } from '@pancakeswap/uikit'
+import Preview from './Preview'
+import CombinationRules from './CombinationRules'
+import SynthesisDetail from './SynthesisDetail'
+import ShopList from './ShopList'
+import ShopModal from './ShopModal'
const PageContent = styled.div`
padding: 30px 0;
@@ -20,41 +25,31 @@ const FlexMain = styled(Flex)`
const MainItem = styled.div`
width: 50%;
padding: 30px;
-`
-const PreviewFlex = styled(Flex)`
- width: 100%;
- background: rgba(243, 255, 255, 0.39);
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
- opacity: 1;
- border-radius: 15px;
- align-items: center;
- padding: 20px;
+ position: relative;
`
-const FlexImg = styled(Flex)`
- justify-content: center;
- align-items: center;
- width: 211px;
- height: 213px;
- background: rgba(31, 201, 208, 0.29);
- border-radius: 20px;
+const SelectButton = styled(Button)`
+ width: 176px;
+ height: 42px;
+ background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+ border: none;
+ border-radius: 30px;
+ color: #ffffff;
+ font-size: 14px;
`
-
-const PreviewDetail = styled.div`
- margin-left: 20px;
-`
-const PreviewTitle = styled(Text)`
- font-size: 26px;
- color: #280d5f;
-`
-const NftName = styled(Text)`
- margin-top: 15px;
- color: #666666;
- font-size: 18px;
-`
-const PreviewNum = styled(Text)`
- font-size: 16px;
- color: #1fc7d4;
+const AddButton = styled(Button)`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -21px;
+ margin-left: -88px;
+ width: 176px;
+ height: 42px;
+ background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+ border: none;
+ border-radius: 30px;
+ color: #ffffff;
+ font-size: 14px;
`
const CompoundFlex = styled(Flex)`
@@ -68,14 +63,13 @@ const ProbabilityFlex = styled(Flex)`
justify-content: center;
flex-direction: column;
width: 260px;
- height: 60px;
+ height: 56px;
background: #fff5e9;
- opacity: 1;
border-radius: 10px;
`
const ProbabilityNum = styled(Text)`
- font-size: 20px;
+ font-size: 16px;
color: #333333;
`
const ProbabilityText = styled(Text)`
@@ -85,61 +79,95 @@ const ProbabilityText = styled(Text)`
const CompoundButton = styled(Button)`
width: 260px;
- height: 60px;
+ height: 56px;
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
border-radius: 30px;
border: none;
- margin-top: 15px;
+ margin-top: 20px;
+ font-size: 16px;
`
const CostFlex = styled(Flex)`
align-items: center;
- margin-top: 15px;
+ margin-top: 20px;
`
const CostText = styled(Text)`
- font-size: 18px;
+ font-size: 14px;
color: #333333;
`
const CostNum = styled(Text)`
- font-size: 18px;
+ font-size: 14px;
color: #1fc7d4;
margin-left: 10px;
`
+const Shop = styled.div`
+ width: 100%;
+ display: grid;
+ gap: 23px;
+ grid-template-rows: 1fr;
+ padding: 12px 0px;
+ margin: 0px auto;
+ grid-template-columns: repeat(4, 1fr);
+
+ ${({ theme }) => theme.mediaQueries.xs} {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ ${({ theme }) => theme.mediaQueries.sm} {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ ${({ theme }) => theme.mediaQueries.md} {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ ${({ theme }) => theme.mediaQueries.lg} {
+ grid-template-columns: repeat(3, 1fr);
+ }
+`
+
const CompoundBox: React.FC = () => {
const { t } = useTranslation()
+ const [onShopDetail] = useModal()
+
+ const list = [
+ { label: 'Cat goddess Emerald ', type: 1, id: 1 },
+ { label: 'Cat goddess Emerald ', type: 2, id: 2 },
+ { label: 'Cat goddess Emerald ', type: 3, id: 3 },
+ { label: 'Cat goddess Emerald ', type: 4, id: 4 },
+ { label: 'Cat goddess Emerald ', type: 1, id: 5 },
+ ]
return (
-
-
-
-
-
- 合成成功预览
- NFT名称
- 暂无
- 合成成功数量
- 0
-
-
+
0%
- 合成成功率
+ {t('Synthetic success rate')}
- 合成
+ {t('compound')}
- 预计合成费用
+ {t('Estimated synthesis cost')}
-----HCC
+
+
+
+
+ {list.map((item) => {
+ return
+ })}
+
+
+ {t('reselect nft')}
+
+ {list.length === 0 && {t('add NFT')}}
- 2
+
)
}
diff --git a/src/views/Compound/components/Preview.tsx b/src/views/Compound/components/Preview.tsx
new file mode 100644
index 0000000..4fbc21e
--- /dev/null
+++ b/src/views/Compound/components/Preview.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Flex, Image } from '@pancakeswap/uikit'
+
+const PreviewFlex = styled(Flex)`
+ width: 100%;
+ background: #f3ffff;
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
+ opacity: 1;
+ border-radius: 15px;
+ align-items: center;
+ padding: 20px 30px;
+`
+
+const FlexImg = styled(Flex)`
+ justify-content: center;
+ align-items: center;
+ width: 211px;
+ height: 213px;
+ background: rgba(31, 201, 208, 0.39);
+ border-radius: 20px;
+`
+
+const PreviewDetail = styled.div`
+ margin-left: 30px;
+`
+const PreviewTitle = styled(Text)`
+ font-size: 22px;
+ color: #280d5f;
+`
+const NftName = styled(Text)`
+ margin-top: 15px;
+ color: #666666;
+ font-size: 16px;
+`
+const PreviewNum = styled(Text)`
+ font-size: 14px;
+ color: #1fc7d4;
+`
+const Preview: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+ {t('Compositing success preview')}
+ {t('nft name')}
+ {t('not available')}
+ {t('Number of successful synthesis')}
+ 0
+
+
+ )
+}
+export default Preview
diff --git a/src/views/Compound/components/ShopList.tsx b/src/views/Compound/components/ShopList.tsx
new file mode 100644
index 0000000..5608e50
--- /dev/null
+++ b/src/views/Compound/components/ShopList.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Image, useModal } from '@pancakeswap/uikit'
+
+const MainFlex = styled.div`
+ & > .epicBcg {
+ background-color: #ffd7d7;
+ }
+ & > .legendBcg {
+ background-color: #d7d7ff;
+ }
+ & > .uncommonBcg {
+ background-color: #cdf7d2;
+ }
+ & > .commonBcg {
+ background-color: #daf0ff;
+ }
+
+ ${({ theme }) => theme.mediaQueries.xs} {
+ flex-direction: column;
+ }
+ ${({ theme }) => theme.mediaQueries.md} {
+ flex-direction: row;
+ }
+ ${({ theme }) => theme.mediaQueries.lg} {
+ flex-direction: row;
+ }
+`
+
+const ShopItem = styled(Flex)`
+ /* height: 358px; */
+ /* border-radius: 20px; */
+ background: rgba(255, 255, 255, 0.39);
+ box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+
+ & > .ribbon {
+ width: 106px;
+ height: 108px;
+ overflow: hidden;
+ position: absolute;
+ top: -6px;
+ left: -6px;
+ z-index: 10;
+ & > .ribbon1 {
+ line-height: 14px;
+ text-align: center;
+ transform: rotate(-45deg);
+ position: relative;
+ padding: 2px 0;
+ left: -36px;
+ top: 14px;
+ width: 121px;
+ color: white;
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+ letter-spacing: 1px;
+ font-size: 12px;
+ }
+ & > .epic {
+ background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
+ }
+ & > .legend {
+ background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
+ }
+ & > .uncommon {
+ background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
+ }
+ & > .common {
+ background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
+ }
+ }
+`
+const ItemText = styled(Flex)`
+ padding: 25px 0;
+ justify-content: center;
+`
+
+interface ShopListItemProps {
+ item?: Detail
+ width?: number
+ height?: number
+ borderRadius?: string
+}
+interface Detail {
+ label?: string
+ type?: number | string
+ id?: number | string
+}
+
+const ShopList: React.FC = ({ item, width = 186, height = 187, borderRadius = '20px' }) => {
+ const { t } = useTranslation()
+ const getClassBcg = () => {
+ let bcg = ''
+ switch (item.type) {
+ case 1:
+ bcg = 'epicBcg'
+ break
+ case 2:
+ bcg = 'legendBcg'
+ break
+ case 3:
+ bcg = 'uncommonBcg'
+ break
+ case 4:
+ bcg = 'commonBcg'
+ break
+ default:
+ bcg = 'epicBcg'
+ }
+ return bcg
+ }
+
+ return (
+
+
+
+ {item.type === 1 &&
{t('epic')}
}
+ {item.type === 2 &&
{t('legend')}
}
+ {item.type === 3 &&
{t('uncommon')}
}
+ {item.type === 4 &&
{t('common')}
}
+