增加合成页面

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名称（等级）×数量+合成费用"
 }

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"
 }

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 (
+    <Explain>
+      <ExplainText>{t('combination rules')}</ExplainText>
+      <ExplainText>
+        {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%;',
+        )}
+      </ExplainText>
+      <ExplainText>
+        {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;',
+        )}
+      </ExplainText>
+      <ExplainText>
+        {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;',
+        )}
+      </ExplainText>
+      <ExplainText>
+        {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;',
+        )}
+      </ExplainText>
+    </Explain>
+  )
+}
+export default CombinationRules

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;
-`
+  position: relative;
-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;
 `
 
-const FlexImg = styled(Flex)`
+const SelectButton = styled(Button)`
-  justify-content: center;
+  width: 176px;
-  align-items: center;
+  height: 42px;
-  width: 211px;
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
-  height: 213px;
+  border: none;
-  background: rgba(31, 201, 208, 0.29);
+  border-radius: 30px;
-  border-radius: 20px;
+  color: #ffffff;
+  font-size: 14px;
 `
-
+const AddButton = styled(Button)`
-const PreviewDetail = styled.div`
+  position: absolute;
-  margin-left: 20px;
+  top: 50%;
-`
+  left: 50%;
-const PreviewTitle = styled(Text)`
+  margin-top: -21px;
-  font-size: 26px;
+  margin-left: -88px;
-  color: #280d5f;
+  width: 176px;
-`
+  height: 42px;
-const NftName = styled(Text)`
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
-  margin-top: 15px;
+  border: none;
-  color: #666666;
+  border-radius: 30px;
-  font-size: 18px;
+  color: #ffffff;
-`
+  font-size: 14px;
-const PreviewNum = styled(Text)`
-  font-size: 16px;
-  color: #1fc7d4;
 `
 
 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(<ShopModal />)
+
+  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 (
     <PageContent>
       <FlexMain>
         <MainItem style={{ borderRight: '1px solid #E3E3E3' }}>
-          <PreviewFlex>
+          <Preview />
-            <FlexImg>
-              <Image src="/images/nft/hammer.svg" width={142} height={138} />
-            </FlexImg>
-            <PreviewDetail>
-              <PreviewTitle>合成成功预览</PreviewTitle>
-              <NftName>NFT名称</NftName>
-              <PreviewNum>暂无</PreviewNum>
-              <NftName>合成成功数量</NftName>
-              <PreviewNum>0</PreviewNum>
-            </PreviewDetail>
-          </PreviewFlex>
           <CompoundFlex>
             <ProbabilityFlex>
               <ProbabilityNum>0%</ProbabilityNum>
-              <ProbabilityText>合成成功率</ProbabilityText>
+              <ProbabilityText>{t('Synthetic success rate')}</ProbabilityText>
             </ProbabilityFlex>
-            <CompoundButton>合成</CompoundButton>
+            <CompoundButton>{t('compound')}</CompoundButton>
             <CostFlex>
-              <CostText>预计合成费用 </CostText>
+              <CostText>{t('Estimated synthesis cost')} </CostText>
               <CostNum> -----HCC</CostNum>
             </CostFlex>
           </CompoundFlex>
+          <CombinationRules />
+        </MainItem>
+        <MainItem>
+          <Shop>
+            {list.map((item) => {
+              return <ShopList item={item} key={item.id} />
+            })}
+          </Shop>
+          <Flex justifyContent="center" marginTop="16px">
+            <SelectButton onClick={onShopDetail}>{t('reselect nft')}</SelectButton>
+          </Flex>
+          {list.length === 0 && <AddButton onClick={onShopDetail}>{t('add NFT')}</AddButton>}
         </MainItem>
-        <MainItem>2</MainItem>
       </FlexMain>
+      <SynthesisDetail />
     </PageContent>
   )
 }

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 (
+    <PreviewFlex>
+      <FlexImg>
+        <Image src="/images/nft/hammer.svg" width={104} height={102} />
+      </FlexImg>
+      <PreviewDetail>
+        <PreviewTitle>{t('Compositing success preview')}</PreviewTitle>
+        <NftName>{t('nft name')}</NftName>
+        <PreviewNum>{t('not available')}</PreviewNum>
+        <NftName>{t('Number of successful synthesis')}</NftName>
+        <PreviewNum>0</PreviewNum>
+      </PreviewDetail>
+    </PreviewFlex>
+  )
+}
+export default Preview

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<ShopListItemProps> = ({ 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 (
+    <MainFlex>
+      <ShopItem className={getClassBcg()} style={{ borderRadius }}>
+        <div className="ribbon">
+          {item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
+          {item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
+          {item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
+          {item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
+        </div>
+        {item.type === 1 && <Image src="/images/nft/epic-icon.svg" width={width} height={height} />}
+        {item.type === 2 && <Image src="/images/nft/legend-icon.svg" width={width} height={height} />}
+        {item.type === 3 && <Image src="/images/nft/uncommon-icon.svg" width={width} height={height} />}
+        {item.type === 4 && <Image src="/images/nft/box.svg" width={width} height={height} />}
+      </ShopItem>
+    </MainFlex>
+  )
+}
+export default ShopList

src/views/Compound/components/ShopModal.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Text, Button } from '@pancakeswap/uikit'
+import ShopList from './ShopList'
+
+interface ShopProp {
+  name?: string | number
+  value?: string | number
+  onDismiss?: () => void
+}
+
+const Main = styled.div`
+  width: 60%;
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 30px;
+  /* height: 80%; */
+  z-index: 10;
+`
+const Shop = styled.div`
+  width: 100%;
+  display: grid;
+  gap: 18px;
+  grid-template-rows: 1fr;
+  margin: 0px auto;
+  grid-template-columns: repeat(4, 1fr);
+  box-sizing: border-box;
+  & > .active {
+    border: 3px solid #0deeff;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
+const ShopFlex = styled(Flex)`
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
+  opacity: 1;
+  border-radius: 20px;
+  position: relative;
+`
+const ShopName = styled(Text)`
+  padding: 26px 0;
+  text-align: center;
+  font-size: 18px;
+  color: #666666;
+`
+
+const SelectFlex = styled(Flex)`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  border-radius: 50%;
+  z-index: 9;
+  align-items: center;
+  justify-content: center;
+`
+const SelectDiv = styled.div`
+  width: 15px;
+  height: 15px;
+  background: #0deeff;
+  border-radius: 50%;
+  margin-left: 1px;
+  margin-top: -1px;
+`
+const BtnFlex = styled(Flex)`
+  margin-top: 30px;
+  align-items: center;
+  flex-direction: column;
+`
+const AddButton = styled(Button)`
+  width: 176px;
+  height: 42px;
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+  border-radius: 21px;
+  font-size: 14px;
+  color: #ffffff;
+`
+const OutButton = styled(Button)`
+  width: 176px;
+  height: 42px;
+  border: 1px solid #1fc7d4;
+  background-color: #fff;
+  border-radius: 21px;
+  color: #1fc7d4;
+  font-size: 14px;
+  margin-top: 20px;
+`
+
+const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss }) => {
+  const { t } = useTranslation()
+  const [list, setList] = useState([])
+
+  const pitchOn = (index) => {
+    list[index].select = !list[index].select
+    setList([...list])
+  }
+  useEffect(() => {
+    setList([
+      { label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
+      { label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
+      { label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
+      { label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
+      { label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
+    ])
+  }, [])
+
+  return (
+    <Main>
+      <Shop>
+        {list.map((item, index) => {
+          return (
+            <ShopFlex onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
+              <SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
+              <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
+              <ShopName>{item.label}</ShopName>
+            </ShopFlex>
+          )
+        })}
+      </Shop>
+      <BtnFlex>
+        <AddButton>{t('add NFT')}</AddButton>
+        <OutButton onClick={onDismiss}>{t('Sign out')}</OutButton>
+      </BtnFlex>
+    </Main>
+  )
+}
+export default ShopModal

src/views/Compound/components/SynthesisDetail.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text } from '@pancakeswap/uikit'
+
+const Detail = styled.div`
+  width: 100%;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 30px;
+  padding: 20px;
+  margin-top: 30px;
+`
+const DetailTitle = styled(Text)`
+  font-size: 24px;
+  color: #333333;
+  text-align: center;
+`
+
+const DetailText = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  margin-bottom: 15px;
+`
+
+const SynthesisDetail: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Detail>
+      <DetailTitle>{t('Synthesis of details')}</DetailTitle>
+      <DetailText>{t('Synthesis results: synthesis success, no change, synthesis failure;')}</DetailText>
+      <DetailText>
+        {t('Successful synthesis: obtain more advanced NFT, and destroy the raw material NFT in the synthesis tank;')}
+      </DetailText>
+      <DetailText>
+        {t('No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;')}
+      </DetailText>
+      <DetailText>
+        {t(
+          'Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;',
+        )}
+      </DetailText>
+      <DetailText>{t('compound probability:')}</DetailText>
+      <DetailText>
+        {t('NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost')}
+      </DetailText>
+    </Detail>
+  )
+}
+export default SynthesisDetail