fix: big pack opening (metaplex-foundation#1198)

* fix: big pack opening * fix: use pack uri * fix: build * fix: pack resume * fix: add minimal modal height
stayhungry07212 · Dec 13, 2021 · 2252699 · 2252699
1 parent 2deaf4d
commit 2252699
Show file tree

Hide file tree

Showing 16 changed files with 239 additions and 185 deletions.
diff --git a/js/packages/common/src/contexts/connection.tsx b/js/packages/common/src/contexts/connection.tsx
@@ -374,6 +374,78 @@ export const sendTransactions = async (
   return signedTxns.length;
 };
 
+export const sendTransactionsWithRecentBlock = async (
+  connection: Connection,
+  wallet: WalletSigner,
+  instructionSet: TransactionInstruction[][],
+  signersSet: Keypair[][],
+  commitment: Commitment = 'singleGossip',
+): Promise<number> => {
+  if (!wallet.publicKey) throw new WalletNotConnectedError();
+
+  const unsignedTxns: Transaction[] = [];
+
+  for (let i = 0; i < instructionSet.length; i++) {
+    const instructions = instructionSet[i];
+    const signers = signersSet[i];
+
+    if (instructions.length === 0) {
+      continue;
+    }
+
+    const block = await connection.getRecentBlockhash(commitment);
+    await sleep(1200);
+
+    const transaction = new Transaction();
+    instructions.forEach(instruction => transaction.add(instruction));
+    transaction.recentBlockhash = block.blockhash;
+    transaction.setSigners(
+      // fee payed by the wallet owner
+      wallet.publicKey,
+      ...signers.map(s => s.publicKey),
+    );
+
+    if (signers.length > 0) {
+      transaction.partialSign(...signers);
+    }
+
+    unsignedTxns.push(transaction);
+  }
+
+  const signedTxns = await wallet.signAllTransactions(unsignedTxns);
+
+  const breakEarlyObject = { breakEarly: false, i: 0 };
+  console.log(
+    'Signed txns length',
+    signedTxns.length,
+    'vs handed in length',
+    instructionSet.length,
+  );
+  for (let i = 0; i < signedTxns.length; i++) {
+    const signedTxnPromise = sendSignedTransaction({
+      connection,
+      signedTransaction: signedTxns[i],
+    });
+
+    signedTxnPromise.catch(() => {
+      breakEarlyObject.breakEarly = true;
+      breakEarlyObject.i = i;
+    });
+
+    try {
+      await signedTxnPromise;
+    } catch (e) {
+      console.log('Caught failure', e);
+      if (breakEarlyObject.breakEarly) {
+        console.log('Died on ', breakEarlyObject.i);
+        return breakEarlyObject.i; // Return the txn we failed on by index
+      }
+    }
+  }
+
+  return signedTxns.length;
+};
+
 export const sendTransaction = async (
   connection: Connection,
   wallet: WalletSigner,

diff --git a/js/packages/common/src/models/packs/instructions/requestCardToRedeem.ts b/js/packages/common/src/models/packs/instructions/requestCardToRedeem.ts
@@ -17,20 +17,20 @@ import {
 
 interface Params extends RequestCardToRedeemParams {
   packSetKey: PublicKey;
-  edition: StringPublicKey;
+  editionKey: StringPublicKey;
   editionMint: StringPublicKey;
-  packVoucher: StringPublicKey;
-  tokenAccount: StringPublicKey;
+  voucherKey: StringPublicKey;
+  tokenAccount?: StringPublicKey;
   wallet: PublicKey;
   randomOracle: StringPublicKey;
 }
 
 export async function requestCardToRedeem({
   index,
   packSetKey,
-  edition,
+  editionKey,
   editionMint,
-  packVoucher,
+  voucherKey,
   tokenAccount,
   wallet,
   randomOracle,
@@ -75,7 +75,7 @@ export async function requestCardToRedeem({
     },
     // edition
     {
-      pubkey: toPublicKey(edition),
+      pubkey: toPublicKey(editionKey),
       isSigner: false,
       isWritable: false,
     },
@@ -87,7 +87,7 @@ export async function requestCardToRedeem({
     },
     // pack_voucher
     {
-      pubkey: toPublicKey(packVoucher),
+      pubkey: toPublicKey(voucherKey),
       isSigner: false,
       isWritable: false,
     },
@@ -133,13 +133,16 @@ export async function requestCardToRedeem({
       isSigner: false,
       isWritable: false,
     },
+  ];
+
+  if (tokenAccount) {
     // user_token_account
-    {
+    keys.push({
       pubkey: toPublicKey(tokenAccount),
       isSigner: false,
       isWritable: true,
-    },
-  ];
+    });
+  }
 
   return new TransactionInstruction({
     keys,

diff --git a/js/packages/web/src/components/PackCard/index.tsx b/js/packages/web/src/components/PackCard/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useMemo } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 import { Button, Card } from 'antd';
 import { shortenAddress, useMeta } from '@oyster/common';
 
@@ -10,6 +10,7 @@ import { ArtType } from '../../types';
 
 interface Props {
   voucherMetadata: string;
+  uri: string;
   name: string;
   authority: string;
   cardsRedeemed?: number;
@@ -20,6 +21,7 @@ interface Props {
 
 const PackCard = ({
   voucherMetadata,
+  uri,
   name,
   authority,
   cardsRedeemed,
@@ -81,7 +83,7 @@ const PackCard = ({
             )}
           </div>
           <div className="art-content-wrapper">
-            <ArtContent pubkey={voucherMetadata} preview={false} />
+            <ArtContent uri={uri} preview={false} />
           </div>
           <div className="art-name">{name}</div>
         </div>

diff --git a/js/packages/web/src/types/packs.ts b/js/packages/web/src/types/packs.ts
@@ -15,7 +15,7 @@ export type ExtendedPack = ParsedAccount<PackSet> & {
   voucher: StringPublicKey;
   voucherMetadataKey: StringPublicKey;
   cardsRedeemed?: number;
-  edition?: StringPublicKey;
+  mint?: StringPublicKey;
   provingProcessKey?: StringPublicKey;
 };
 export type ProvingProcessByKey = Record<string, ParsedAccount<ProvingProcess>>;
diff --git a/js/packages/web/src/views/artworks/components/ItemCard/index.tsx b/js/packages/web/src/views/artworks/components/ItemCard/index.tsx
@@ -13,14 +13,14 @@ const ItemCard = ({ item }: { item: Item }): ReactElement => {
     const {
       pubkey,
       cardsRedeemed,
-      edition,
-      info: { authority, allowedAmountToRedeem },
+      mint,
+      info: { authority, allowedAmountToRedeem, uri },
       provingProcessKey,
       voucherMetadataKey,
     } = item;
 
-    const search = edition
-      ? `voucherEditionKey=${edition}`
+    const search = mint
+      ? `voucherMint=${mint}`
       : `provingProcessKey=${provingProcessKey}`;
 
     return (
@@ -31,6 +31,7 @@ const ItemCard = ({ item }: { item: Item }): ReactElement => {
           authority={authority}
           cardsRedeemed={cardsRedeemed}
           allowedAmountToRedeem={allowedAmountToRedeem}
+          uri={uri}
           artView
         />
       </Link>

diff --git a/js/packages/web/src/views/artworks/hooks/useUserMetadataWithPacks.ts b/js/packages/web/src/views/artworks/hooks/useUserMetadataWithPacks.ts
@@ -63,7 +63,7 @@ const getMetadataWithPacks = ({
         ...packs[voucher.info.packSet],
         voucher: voucher.pubkey,
         voucherMetadataKey: metadata.metadata.pubkey,
-        edition: metadata.edition.pubkey,
+        mint: metadata.metadata.info.mint,
       },
     ];
   }, []);
diff --git a/js/packages/web/src/views/auctionCreate/AuctionItemCard.tsx b/js/packages/web/src/views/auctionCreate/AuctionItemCard.tsx
@@ -11,38 +11,53 @@ interface IAuctionItemCard {
   onClose?: () => void;
 }
 
-const AuctionItemCard = ({ current, isSelected, onSelect, onClose }: IAuctionItemCard) => {
+const AuctionItemCard = ({
+  current,
+  isSelected,
+  onSelect,
+  onClose,
+}: IAuctionItemCard) => {
   const { packs, vouchers } = useMeta();
   const shouldShowPacks = process.env.NEXT_ENABLE_NFT_PACKS === 'true';
+
   if (shouldShowPacks) {
     const masterEdition = current.masterEdition?.pubkey;
-    const voucher = Object.values(vouchers).find(v => v?.info?.master === masterEdition);
+    const voucher = Object.values(vouchers).find(
+      v => v?.info?.master === masterEdition,
+    );
+
     if (voucher) {
-      const pack = packs[voucher.info.packSet];
       const {
-        info: {authority, allowedAmountToRedeem, name},
-      } = pack;
+        info: { authority, allowedAmountToRedeem, name, uri },
+      } = packs[voucher.info.packSet];
+
       return (
         // use <div> for correct grid rendering
         <div onClick={onSelect}>
           <PackCard
             name={name}
             voucherMetadata={voucher.info.metadata}
+            uri={uri}
             authority={authority}
             allowedAmountToRedeem={allowedAmountToRedeem}
             onClose={onClose}
             artView
           />
         </div>
-      )
+      );
     }
   }
+
   return (
     <ArtCard
       pubkey={current.metadata.pubkey}
       preview={false}
       onClick={onSelect}
-      className={isSelected ? 'selected-card art-card-for-selector' : 'not-selected-card art-card-for-selector'}
+      className={
+        isSelected
+          ? 'selected-card art-card-for-selector'
+          : 'not-selected-card art-card-for-selector'
+      }
       onClose={onClose}
     />
   );

diff --git a/.../pack/components/OpenPackButtom/index.tsx → .../pack/components/OpenPackButton/index.tsx b/.../pack/components/OpenPackButtom/index.tsx → .../pack/components/OpenPackButton/index.tsx
diff --git a/js/packages/web/src/views/pack/components/PackSidebar/index.tsx b/js/packages/web/src/views/pack/components/PackSidebar/index.tsx
@@ -1,24 +1,25 @@
 import { shortenAddress, royalty, pubkeyToString } from '@oyster/common';
 import React from 'react';
 import { Skeleton, Divider } from 'antd';
+import { useWallet } from '@solana/wallet-adapter-react';
 
 import { MetaAvatar } from '../../../../components/MetaAvatar';
 import { ArtContent } from '../../../../components/ArtContent';
 import { ViewOn } from '../../../../components/ViewOn';
 import { useArt } from '../../../../hooks';
 import { usePack } from '../../contexts/PackContext';
-import { useWallet } from '@solana/wallet-adapter-react';
-import OpenPackButton from '../OpenPackButtom';
+import OpenPackButton from '../OpenPackButton';
 
 interface IPropsPackSidebar {
-  onOpenPack: () => void,
+  onOpenPack: () => void;
 }
 
 const PackSidebar = ({ onOpenPack }: IPropsPackSidebar) => {
   const { pack, voucherMetadataKey, provingProcess } = usePack();
 
   const metadataPubkey = voucherMetadataKey || '';
   const art = useArt(metadataPubkey);
+  const uri = pack?.info.uri;
   const { publicKey } = useWallet();
   const userWallet = pubkeyToString(publicKey);
   const isExhausted = provingProcess?.info.isExhausted;
@@ -33,21 +34,16 @@ const PackSidebar = ({ onOpenPack }: IPropsPackSidebar) => {
             <span className="item-name">
               {creator.name || shortenAddress(creator?.address || '')}
             </span>
-            {
-              userWallet === creator.address &&
-              <div className="you-label">
-                You
-              </div>
-            }
+            {userWallet === creator.address && (
+              <div className="you-label">You</div>
+            )}
           </div>
         ))}
       </div>
       <Divider className="divider" />
       <div className="pack-view__art-preview">
-        {metadataPubkey && (
-          <ArtContent pubkey={metadataPubkey} active allowMeshRender artView />
-        )}
-        {!metadataPubkey && <Skeleton.Image />}
+        {uri && <ArtContent uri={uri} active allowMeshRender artView />}
+        {!uri && <Skeleton.Image />}
       </div>
       <h4 className="pack-view__name">
         {pack?.info?.name || <Skeleton paragraph={{ rows: 1 }} />}
@@ -70,10 +66,8 @@ const PackSidebar = ({ onOpenPack }: IPropsPackSidebar) => {
         </div>
       </div>
       <Divider className="divider" />
-      {
-        !isExhausted && <OpenPackButton onClick={onOpenPack} />
-      }
-      <Divider className="divider"/>
+      {!isExhausted && <OpenPackButton onClick={onOpenPack} />}
+      <Divider className="divider" />
       <div className="pack-view__description-block">
         <p className="pack-view__title">DETAILS</p>
         <p className="pack-view__text">
@@ -84,7 +78,7 @@ const PackSidebar = ({ onOpenPack }: IPropsPackSidebar) => {
         <div className="info-item">
           <ViewOn id={metadataPubkey} />
         </div>
-        <Divider className="divider"/>
+        <Divider className="divider" />
       </div>
     </div>
   );

diff --git a/js/packages/web/src/views/pack/components/RedeemModal/components/ClaimingStep/index.less b/js/packages/web/src/views/pack/components/RedeemModal/components/ClaimingStep/index.less
@@ -12,6 +12,7 @@
   justify-content: center;
   padding: 32px 24px 24px;
   background: @grey-70;
+  min-height: 600px;
 
   &__title {
     font-family: @fontFamilyInter;