Add Order Detail component and url option for Orders component

statikdev · Apr 14, 2022 · 0d92459 · 0d92459
1 parent 9615946
commit 0d92459
Show file tree

Hide file tree

Showing 34 changed files with 767 additions and 6,429 deletions.
diff --git a/example/CandyShopContent.tsx b/example/CandyShopContent.tsx
@@ -3,7 +3,7 @@ import { useAnchorWallet, useConnection } from '@solana/wallet-adapter-react';
 import { web3 } from "@project-serum/anchor";
 import 'antd/dist/antd.min.css';
 import React from 'react';
-import { CandyShop, Orders, Sell, Stat } from '../lib/.';
+import { CandyShop, Orders, Sell, Stat, OrderDetail } from '../lib/.';
 import {
   CANDY_SHOP_PROGRAM_ID,
   CREATOR_ADDRESS,
@@ -23,37 +23,45 @@ export const CandyShopContent: React.FC = () => {
   );
 
   return (
-    <div style={{ paddingBottom: 50 }}>
+    <div style={{ paddingBottom: 50, textAlign: 'center' }}>
       <div style={{ textAlign: 'center', paddingBottom: 30 }}>
         <WalletMultiButton />
       </div>
 
-      <Stat
-        style={{ marginBottom: 50 }}
-        candyShop={candyShop}
-        title={'Marketplace'}
-        description={
-          'Candy Shop is an open source on-chain protocol that empowers DAOs, NFT projects and anyone interested in creating an NFT marketplace to do so within minutes!'
-        }
-      />
-
       <div style={{ marginBottom: 50 }}>
-        <Orders
-          walletPublicKey={wallet?.publicKey}
+        <Stat
           candyShop={candyShop}
-          walletConnectComponent={<WalletMultiButton />}
+          title={'Marketplace'}
+          description={
+            'Candy Shop is an open source on-chain protocol that empowers DAOs, NFT projects and anyone interested in creating an NFT marketplace to do so within minutes!'
+          }
         />
       </div>
 
-      <div>
-        <h1 style={{ textAlign: 'center', fontWeight: 'bold', marginBottom: 30 }}>Sell Your NFTs</h1>
-        <Sell
-          connection={connection}
+      <div >
+        <Orders
           walletPublicKey={wallet?.publicKey}
           candyShop={candyShop}
           walletConnectComponent={<WalletMultiButton />}
         />
       </div>
+
+      <h1 style={{ textAlign: 'center', fontWeight: 'bold', marginBottom: 30 }}>Order Detail</h1>
+      <OrderDetail
+        tokenMint={'WfL9fAggBMHmjvBEu1v53fQkRmB3Cn4giJSSQxVSC5W'}
+        backUrl={'/'}
+        candyShop={candyShop}
+        walletConnectComponent={<WalletMultiButton />}
+        walletPublicKey={wallet?.publicKey}
+      />
+
+      <h1 style={{ textAlign: 'center', fontWeight: 'bold', marginBottom: 30 }}>Sell</h1>
+      <Sell
+        connection={connection}
+        walletPublicKey={wallet?.publicKey}
+        candyShop={candyShop}
+        walletConnectComponent={<WalletMultiButton />}
+      />
     </div>
   );
 };
diff --git a/example/package.json b/example/package.json
@@ -19,7 +19,6 @@
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@types/react": "^16.9.50",
-    "@types/react-dom": "^16.9.8",
     "crypto-browserify": "^3.12.0",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0",

diff --git a/lib/package.json b/lib/package.json
@@ -21,12 +21,6 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.14",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
@@ -74,9 +68,7 @@
     "start": "yarn env:dev rollup -c --watch",
     "build": "yarn env:build rollup -c",
     "lint": "eslint --fix 'src/**/*.ts'",
-    "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "test": "jest"
   },
   "jest": {
     "moduleFileExtensions": [

diff --git a/lib/src/components/BuyModal/BuyModalConfirmed.tsx b/lib/src/components/BuyModal/BuyModalConfirmed.tsx
@@ -30,11 +30,7 @@ const BuyModalConfirmed = ({
       </div>
       <div className="buy-modal-confirmed-container">
         <div className="buy-modal-confirmed-thumbnail">
-          <LiqImage
-            src={order?.nftImageLink}
-            alt="NFT image"
-            style={{ borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
-          />
+          <LiqImage src={order?.nftImageLink} alt={order?.name} fit="contain" />
         </div>
         <div className="buy-modal-confirmed-content">
           <div>

diff --git a/lib/src/components/BuyModal/BuyModalDetail.tsx b/lib/src/components/BuyModal/BuyModalDetail.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { web3 } from '@project-serum/anchor';
 import { ExplorerLink } from 'components/ExplorerLink';
-import { Tag } from 'components/Tag';
+import { NftAttributes } from 'components/NftAttributes';
 import { CandyShop } from 'core/CandyShop';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Nft, Order as OrderSchema } from 'solana-candy-shop-schema/dist';
@@ -50,31 +50,17 @@ const BuyModalDetail: React.FC<BuyModalDetailProps> = ({
         <div className="buy-modal-thumbnail">
           <LiqImage
             src={order?.nftImageLink || ''}
-            alt="NFT image"
-            style={{ borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
+            alt={order?.name}
+            fit="contain"
           />
         </div>
-        <div className="buy-modal-attributes">
-          <AttributesContainer>
-            {loadingNftInfo ? (
-              <div className="candy-loading" />
-            ) : (
-              nftInfo?.attributes &&
-              nftInfo.attributes.map((attribute) => (
-                <TagWithMargin>
-                  <Tag text={`${attribute.trait_type}: ${attribute.value}`} />
-                </TagWithMargin>
-              ))
-            )}
-          </AttributesContainer>
-        </div>
       </div>
       <div className="buy-modal-container">
-        <div className="buy-modal-title">{order?.name}</div>
+        <div className="candy-title">{order?.name}</div>
         <div className="buy-modal-control">
           <div>
             <div className="candy-label">PRICE</div>
-            <Price>{orderPrice} SOL</Price>
+            <div className="candy-price">{orderPrice} SOL</div>
           </div>
           {!walletPublicKey ? (
             walletConnectComponent
@@ -84,27 +70,27 @@ const BuyModalDetail: React.FC<BuyModalDetailProps> = ({
             </button>
           )}
         </div>
-        {order?.nftDescription && (
-          <div className="buy-modal-description">
+        {order.nftDescription && (
+          <div className="candy-stat">
             <div className="candy-label">DESCRIPTION</div>
             <div className="candy-value">{order?.nftDescription}</div>
           </div>
         )}
-        <div className="buy-modal-info">
+        <div className="candy-stat-horizontal">
           <div>
             <div className="candy-label">MINT ADDRESS</div>
             <div className="candy-value">
               <ExplorerLink type="address" address={order?.tokenMint} />
             </div>
           </div>
-          <div className="buy-modal-info-line" />
+          <div className="candy-stat-horizontal-line" />
           {order?.edition ? (
             <>
               <div>
                 <div className="candy-label">EDITION</div>
                 <div className="candy-value">{order?.edition}</div>
               </div>
-              <div className="buy-modal-info-line" />
+              <div className="candy-stat-horizontal-line" />
             </>
           ) : null}
           <div>
@@ -114,25 +100,13 @@ const BuyModalDetail: React.FC<BuyModalDetailProps> = ({
             </div>
           </div>
         </div>
+        <NftAttributes
+          loading={loadingNftInfo}
+          attributes={nftInfo?.attributes}
+        />
       </div>
     </>
   );
 };
 
 export default BuyModalDetail;
-
-const Price = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-`;
-
-const AttributesContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-`;
-
-const TagWithMargin = styled.div`
-  margin-right: 8px;
-  margin-bottom: 4px;
-`;
diff --git a/lib/src/components/BuyModal/style.less b/lib/src/components/BuyModal/style.less
@@ -1,8 +1,6 @@
 .buy-modal {
   display: flex;
   gap: 24px;
-
-  font-weight: 500;
   font-size: 16px;
   line-height: 24px;
 
@@ -18,11 +16,6 @@
     }
   }
 
-  .buy-modal-attributes {
-    margin-top: 8px;
-    width: 340px;
-  }
-
   .buy-modal-container {
     flex: 1;
     padding-top: 20px;
@@ -39,7 +32,7 @@
       text-align: left;
       justify-content: space-between;
       align-items: center;
-      margin: 24px 0 32px;
+      margin: 20px 0 25px;
 
       .buy-modal-button {
         padding: 8px 50px;
@@ -54,29 +47,6 @@
         }
       }
     }
-
-    .buy-modal-description {
-      text-align: left;
-      margin-bottom: 24px;
-    }
-  }
-
-  .buy-modal-info {
-    display: flex;
-    gap: 32px;
-    text-align: left;
-
-    .buy-modal-info-line {
-      width: 1px;
-      background-color: #bdbdbd;
-      align-self: stretch;
-    }
-
-    .buy-modal-info-value {
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-    }
   }
 
   .buy-modal-price {
@@ -150,13 +120,3 @@
     }
   }
 }
-
-@keyframes buyModalLoading {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/lib/src/components/CancelModal/CancelModalConfirm.stories.tsx b/lib/src/components/CancelModal/CancelModalConfirm.stories.tsx
diff --git a/lib/src/components/CancelModal/CancelModalConfirm.tsx b/lib/src/components/CancelModal/CancelModalConfirm.tsx
@@ -14,24 +14,20 @@ export const CancelModalConfirm = ({
   onCancel,
 }: CancelModalConfirmProps): JSX.Element => {
   return (
-    <Container className="candy-container">
-      <div className="candy-title">
+    <Container>
+      <div className="candy-cancel-modal-confirm-title">
         <IconTick />
       </div>
-      <div className="cds-cancel-modal-confirm-content">
-        <div className="cds-cancel-modal-confirm-content-img">
-          <LiqImage
-            src={order.nftImageLink}
-            alt="NFT Image"
-            style={{ borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
-          />
+      <div className="candy-cancel-modal-confirm-content">
+        <div className="candy-cancel-modal-confirm-content-img">
+          <LiqImage src={order.nftImageLink} alt={order.name} fit="contain" />
         </div>
-        <div className="cds-cancel-modal-confirm-content-text">
+        <div className="candy-cancel-modal-confirm-content-text">
           <span style={{ fontWeight: 'bold' }}>{order.name}</span> is no longer
           listed for sale
         </div>
       </div>
-      <div className="cds-cancel-modal-confirm-success">
+      <div className="candy-cancel-modal-confirm-success">
         <button className="candy-button" onClick={onCancel}>
           Continue Browsing
         </button>
@@ -46,8 +42,23 @@ const Container = styled.div`
   align-items: center;
   max-width: 600px;
   padding: 20px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (max-width: 600px) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .candy-cancel-modal-confirm {
+    &-title {
+      font-weight: bold;
+      font-size: 26px;
+      line-height: 36px;
+      margin-bottom: 42px;
+      text-align: center;
+    }
 
-  .cds-cancel-modal-confirm {
     &-content {
       display: flex;
       align-items: center;