[ui] Using union-types for candyShop props to allow OrderDetail publi…

…c component have flexibility [LIQ-767]
LIQNFT · Oct 14, 2022 · c21f7dc · c21f7dc
1 parent 9c69c58
commit c21f7dc
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 39 deletions.
diff --git a/core/cli/src/cli.ts b/core/cli/src/cli.ts
@@ -549,7 +549,7 @@ programCommand('commitEditionDropNft')
       isEnterprise: isEnterprise(isEnterpriseArg)
     });
 
-    const tokenAccountInfo = await getAccount(candyShop.connection(), new PublicKey(nftOwnerTokenAccount), 'finalized');
+    const tokenAccountInfo = await getAccount(candyShop.connection, new PublicKey(nftOwnerTokenAccount), 'finalized');
 
     const txHash = await candyShop.commitMasterNft({
       nftOwnerTokenAccount: new anchor.web3.PublicKey(nftOwnerTokenAccount),
@@ -604,7 +604,7 @@ programCommand('mintPrint')
       isEnterprise: isEnterprise(isEnterpriseArg)
     });
 
-    const tokenAccountInfo = await getAccount(candyShop.connection(), new PublicKey(nftOwnerTokenAccount), 'finalized');
+    const tokenAccountInfo = await getAccount(candyShop.connection, new PublicKey(nftOwnerTokenAccount), 'finalized');
 
     const txHash = await candyShop.mintNewPrint({
       nftOwnerTokenAccount: new PublicKey(nftOwnerTokenAccount),

diff --git a/core/sdk/src/CandyShop.ts b/core/sdk/src/CandyShop.ts
@@ -237,7 +237,7 @@ export class CandyShop extends BaseShop {
   /**
    * Get JSON rpc connection
    */
-  public connection(): web3.Connection {
+  get connection(): web3.Connection {
     const options = Provider.defaultOptions();
     if (this._env === 'devnet') {
       return new web3.Connection(web3.clusterApiUrl('devnet'));
@@ -255,7 +255,7 @@ export class CandyShop extends BaseShop {
    */
   getStaticProgram(wallet: AnchorWallet | web3.Keypair): Program<Idl> {
     if (this._program) return this._program;
-    return getProgram(this.connection(), this._programId, wallet);
+    return getProgram(this.connection, this._programId, wallet);
   }
 
   /**
@@ -312,7 +312,7 @@ export class CandyShop extends BaseShop {
       price
     });
     const txHash = await CandyShopTrade.buy({
-      connection: this.connection(),
+      connection: this.connection,
       shopAddress: this._candyShopAddress,
       candyShopProgramId: this._programId,
       shopCreatorAddress: this._candyShopCreatorAddress,
@@ -340,7 +340,7 @@ export class CandyShop extends BaseShop {
       price
     });
     const txHash = await CandyShopTrade.sell({
-      connection: this.connection(),
+      connection: this.connection,
       tokenAccount: tokenAccount,
       tokenMint: tokenMint,
       price: price,
@@ -366,7 +366,7 @@ export class CandyShop extends BaseShop {
       price
     });
     const txHash = await CandyShopTrade.cancel({
-      connection: this.connection(),
+      connection: this.connection,
       tokenAccount: tokenAccount,
       tokenMint: tokenMint,
       price: price,
@@ -742,7 +742,7 @@ export class CandyShop extends BaseShop {
       salesPeriod,
       whitelistTime,
       isEnterprise: this._isEnterprise,
-      connection: this.connection(),
+      connection: this.connection,
       candyShopProgram: this.getStaticProgram(nftOwner)
     });
 
@@ -782,7 +782,7 @@ export class CandyShop extends BaseShop {
       editionBuyer,
       auctionHouse,
       isEnterprise: this._isEnterprise,
-      connection: this.connection(),
+      connection: this.connection,
       candyShopProgram: this.getStaticProgram(editionBuyer),
       treasuryMint: this._treasuryMint
     });
@@ -812,7 +812,7 @@ export class CandyShop extends BaseShop {
       nftOwnerTokenAccount,
       masterMint,
       isEnterprise: this._isEnterprise,
-      connection: this.connection(),
+      connection: this.connection,
       candyShopProgram: this.getStaticProgram(nftOwner)
     });
 

diff --git a/core/sdk/src/vendor/token/fetchSolNftsFromWallet.ts b/core/sdk/src/vendor/token/fetchSolNftsFromWallet.ts
@@ -24,7 +24,7 @@ const PER_BATCH_UPPER_BOUND_MS = DEFAULT_INTERVAL_MS / DEFAULT_BATCH_SIZE;
 
 /**
  * @note Fetch all NFTs from target wallet on Solana chain
- * @param connection anchor.web3.Connection
+ * @param connection web3.Connection
  * @param walletAddress target wallet anchor.web3.PublicKey to fetch the NFTs
  * @param identifiers for differentiate the collection
  * @param fetchNFTBatchParam the param object to specify batchCallback and batchSize,

diff --git a/core/ui/src/components/BuyModal/BuyModalConfirmed.tsx b/core/ui/src/components/BuyModal/BuyModalConfirmed.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CandyShop } from '@liqnft/candy-shop-sdk';
+import { CandyShop, ExplorerLinkBase } from '@liqnft/candy-shop-sdk';
 import { Order as OrderSchema } from '@liqnft/candy-shop-types';
 import { web3 } from '@project-serum/anchor';
 import { formatDate } from 'utils/timer';
@@ -10,6 +10,11 @@ import { ShopExchangeInfo, PaymentErrorDetails } from 'model';
 import { getPrice } from 'utils/getPrice';
 import { IconError } from 'assets/IconError';
 
+interface ShopInfo {
+  explorerLink: ExplorerLinkBase;
+  env: web3.Cluster;
+}
+
 interface BuyModalConfirmedProps {
   order: OrderSchema;
   txHash: string;
@@ -18,7 +23,7 @@ interface BuyModalConfirmedProps {
   exchangeInfo: ShopExchangeInfo;
   shopPriceDecimalsMin: number;
   shopPriceDecimals: number;
-  candyShop: CandyShop;
+  candyShop: CandyShop | ShopInfo;
   paymentPrice?: number;
   error?: PaymentErrorDetails;
 }

diff --git a/core/ui/src/components/Drop/Selection/index.tsx b/core/ui/src/components/Drop/Selection/index.tsx
@@ -35,7 +35,7 @@ export const DropSelection: React.FC<DropSelectionProps> = ({
   useEffect(() => {
     if (!wallet?.publicKey) return;
     setLoading(LoadStatus.Loading);
-    const connection = candyShop.connection();
+    const connection = candyShop.connection;
 
     fetchUserMasterNFTs(wallet.publicKey, connection)
       .then((result: EditionDrop[]) => {

diff --git a/core/ui/src/components/InfiniteOrderList/index.tsx b/core/ui/src/components/InfiniteOrderList/index.tsx
@@ -64,7 +64,7 @@ export const InfiniteOrderList: React.FC<InfiniteOrderListProps> = ({
           wallet={wallet}
           walletConnectComponent={walletConnectComponent}
           exchangeInfo={exchangeInfo}
-          connection={candyShop.connection()}
+          connection={candyShop.connection}
           isEnterprise={candyShop.isEnterprise}
           shopPriceDecimalsMin={candyShop.priceDecimalsMin}
           shopPriceDecimals={candyShop.priceDecimals}
@@ -79,7 +79,7 @@ export const InfiniteOrderList: React.FC<InfiniteOrderListProps> = ({
           order={selectedOrder}
           wallet={wallet}
           exchangeInfo={exchangeInfo}
-          connection={candyShop.connection()}
+          connection={candyShop.connection}
           shopPriceDecimalsMin={candyShop.priceDecimalsMin}
           shopPriceDecimals={candyShop.priceDecimals}
           candyShop={candyShop}

diff --git a/core/ui/src/components/Nft/index.tsx b/core/ui/src/components/Nft/index.tsx
@@ -50,7 +50,7 @@ export const Nft = ({ nft, wallet, sellDetail, shop, candyShop }: NftProps): JSX
           nft={selection}
           wallet={wallet}
           shop={shop}
-          connection={candyShop.connection()}
+          connection={candyShop.connection}
           shopAddress={candyShop.candyShopAddress}
           candyShopProgramId={candyShop.programId}
           baseUnitsPerCurrency={candyShop.baseUnitsPerCurrency}
@@ -67,7 +67,7 @@ export const Nft = ({ nft, wallet, sellDetail, shop, candyShop }: NftProps): JSX
           order={sellDetail}
           wallet={wallet}
           exchangeInfo={exchangeInfo}
-          connection={candyShop.connection()}
+          connection={candyShop.connection}
           shopPriceDecimalsMin={candyShop.priceDecimalsMin}
           shopPriceDecimals={candyShop.priceDecimals}
           candyShop={candyShop}

diff --git a/core/ui/src/components/NftStat/index.tsx b/core/ui/src/components/NftStat/index.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 import { ExplorerLink } from 'components/ExplorerLink';
 import { shortenAddress } from 'utils/helperFunc';
-import { CandyShop } from '@liqnft/candy-shop-sdk';
+import { CandyShop, ExplorerLinkBase } from '@liqnft/candy-shop-sdk';
+import { web3 } from '@project-serum/anchor';
+
+interface ShopInfo {
+  explorerLink: ExplorerLinkBase;
+  env: web3.Cluster;
+}
 
 export interface NftStatProps {
   tokenMint: string;
   edition?: number | string | null;
   owner?: string;
   sellerUrl?: string;
-  candyShop: CandyShop;
+  candyShop: CandyShop | ShopInfo;
 }
 
 export const NftStat: React.FC<NftStatProps> = ({ tokenMint, edition, owner, sellerUrl, candyShop }) => {

diff --git a/core/ui/src/components/Price/index.tsx b/core/ui/src/components/Price/index.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import { CandyShop } from '@liqnft/candy-shop-sdk';
 
+interface ShopInfo {
+  baseUnitsPerCurrency: number;
+  priceDecimalsMin: number;
+  priceDecimals: number;
+  currencySymbol: string;
+}
+
 interface PriceProps {
   value: string | number | null | undefined;
-  candyShop: CandyShop;
+  candyShop: CandyShop | ShopInfo;
   emptyValue?: string;
 }
 
-const getPrice = (candyShop: CandyShop, price?: string | number | null) => {
+const getPrice = (candyShop: CandyShop | ShopInfo, price?: string | number | null) => {
   if (!price || isNaN(Number(price))) return null;
 
   return (Number(price) / candyShop.baseUnitsPerCurrency).toLocaleString(undefined, {

diff --git a/core/ui/src/public/Auction/CreateAuction.tsx b/core/ui/src/public/Auction/CreateAuction.tsx
@@ -93,7 +93,7 @@ export const CreateAuction: React.FC<CreateAuctionProps> = ({
         enable: cacheUserNFT ?? false
       };
 
-      return fetchNftsFromWallet(candyShop.connection(), walletPublicKey, undefined, fetchBatchParam, cacheNFTParam);
+      return fetchNftsFromWallet(candyShop.connection, walletPublicKey, undefined, fetchBatchParam, cacheNFTParam);
     },
     [getUserNFTFromBatch, cacheUserNFT, candyShop]
   );

diff --git a/core/ui/src/public/OrderDetail/index.tsx b/core/ui/src/public/OrderDetail/index.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { CandyShop } from '@liqnft/candy-shop-sdk';
+import {
+  CandyShop,
+  fetchOrderByShopAndMintAddress,
+  fetchNFTByMintAddress,
+  CandyShopTrade,
+  ExplorerLinkBase
+} from '@liqnft/candy-shop-sdk';
 import { Nft, Order as OrderSchema, SingleBase } from '@liqnft/candy-shop-types';
 import { BN, web3 } from '@project-serum/anchor';
 import { AnchorWallet } from '@solana/wallet-adapter-react';
@@ -18,12 +24,25 @@ import { getExchangeInfo } from 'utils/getExchangeInfo';
 import './style.less';
 import { Price } from 'components/Price';
 
+interface ShopInfo {
+  currencySymbol: string;
+  currencyDecimals: number;
+  candyShopAddress: string;
+  priceDecimalsMin: number;
+  priceDecimals: number;
+  connection: web3.Connection;
+  isEnterprise: boolean;
+  baseUnitsPerCurrency: number;
+  explorerLink: ExplorerLinkBase;
+  env: web3.Cluster;
+}
+
 interface OrderDetailProps {
   tokenMint: string;
   backUrl?: string;
   walletConnectComponent: React.ReactElement;
   wallet: AnchorWallet | undefined;
-  candyShop: CandyShop;
+  candyShop: CandyShop | ShopInfo;
   sellerUrl?: string;
 }
 
@@ -53,8 +72,7 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({
   useEffect(() => {
     if (!order) {
       setLoadingOrder(true);
-      candyShop
-        .activeOrderByMintAddress(tokenMint)
+      fetchOrderByShopAndMintAddress(candyShop.candyShopAddress, tokenMint)
         .then((res: SingleBase<OrderSchema>) => {
           if (!res.success) throw new Error('Order not found');
           setOrder(res.result);
@@ -70,8 +88,7 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({
 
     if (order && !nftInfo) {
       setLoadingNftInfo(true);
-      candyShop
-        .nftInfo(order.tokenMint)
+      fetchNFTByMintAddress(order.tokenMint)
         .then((nft: Nft) => setNftInfo(nft))
         .catch((err: Error) => {
           console.info('fetchNftByMint failed:', err);
@@ -85,14 +102,19 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({
   const buy = async () => {
     if (order && wallet && candyShop) {
       setState(TransactionState.PROCESSING);
-      return candyShop
-        .buy({
-          seller: new web3.PublicKey(order.walletAddress),
-          tokenAccount: new web3.PublicKey(order.tokenAccount),
-          tokenMint: new web3.PublicKey(order.tokenMint),
-          price: new BN(order.price),
-          wallet
-        })
+      return CandyShopTrade.buy({
+        tokenAccount: new web3.PublicKey(order.tokenAccount),
+        tokenMint: new web3.PublicKey(order.tokenMint),
+        price: new BN(order.price),
+        wallet: wallet,
+        seller: new web3.PublicKey(order.walletAddress),
+        connection: candyShop.connection,
+        shopAddress: new web3.PublicKey(candyShop.candyShopAddress),
+        candyShopProgramId: new web3.PublicKey(order.programId),
+        isEnterprise: candyShop.isEnterprise,
+        shopCreatorAddress: new web3.PublicKey(order.candyShopCreatorAddress),
+        shopTreasuryMint: new web3.PublicKey(order.treasuryMint)
+      })
         .then((txHash: any) => {
           setHash(txHash);
           console.log('Buy made with transaction hash', txHash);

diff --git a/core/ui/src/public/Sell/index.tsx b/core/ui/src/public/Sell/index.tsx
@@ -121,7 +121,7 @@ export const Sell: React.FC<SellProps> = ({ wallet, walletConnectComponent, styl
         enable: enableCacheNFT ?? false
       };
       const userNFTs = fetchNftsFromWallet(
-        candyShop.connection(),
+        candyShop.connection,
         walletPublicKey,
         identifiers,
         fetchBatchParam,

diff --git a/core/ui/src/utils/getExchangeInfo.ts b/core/ui/src/utils/getExchangeInfo.ts
@@ -2,7 +2,12 @@ import { CandyShop } from '@liqnft/candy-shop-sdk';
 import { ShopExchangeInfo } from 'model';
 import { Order as OrderSchema } from '@liqnft/candy-shop-types';
 
-export function getExchangeInfo(order: OrderSchema | undefined, candyShop: CandyShop): ShopExchangeInfo {
+interface ShopInfo {
+  currencySymbol: string;
+  currencyDecimals: number;
+}
+
+export function getExchangeInfo(order: OrderSchema | undefined, candyShop: CandyShop | ShopInfo): ShopExchangeInfo {
   return {
     symbol: order?.symbol ?? candyShop.currencySymbol,
     decimals: order?.decimals ?? candyShop.currencyDecimals

diff --git a/example/MarketplaceExample.tsx b/example/MarketplaceExample.tsx
@@ -44,6 +44,26 @@ export const MarketplaceExample: React.FC<MarketplaceExampleProps> = ({ candySho
         candyShop={candyShop}
       />
 
+      {/* Can serve Activity with partial shop info without CandyShop instance to present the same */}
+      {/* <OrderDetail
+        tokenMint={'6WpKPqGYu2ZyRZ1upnmYkPAu2CTGVBE5QErzSUsPptyD'}
+        backUrl={'/'}
+        walletConnectComponent={<WalletMultiButton />}
+        wallet={wallet}
+        candyShop={{
+          currencySymbol: candyShop.currencySymbol,
+          currencyDecimals: candyShop.currencyDecimals,
+          candyShopAddress: candyShop.candyShopAddress,
+          priceDecimalsMin: candyShop.priceDecimalsMin,
+          priceDecimals: candyShop.priceDecimals,
+          connection: candyShop.connection,
+          isEnterprise: candyShop.isEnterprise,
+          baseUnitsPerCurrency: candyShop.baseUnitsPerCurrency,
+          explorerLink: candyShop.explorerLink,
+          env: candyShop.env
+        }}
+      /> */}
+
       <h1 style={{ textAlign: 'center', fontWeight: 'bold', marginBottom: 30 }}>Sell</h1>
       <Sell
         wallet={wallet}