Implement view-in-wallet

packages/@magic-sdk/provider/src/modules/nft.ts

@@ -16,8 +16,23 @@ export class NFTModule extends BaseModule {
   }
 
   /* Start an NFT Checkout flow with Paypal */
-  public checkout(options: NFTCheckoutRequest) {
+  public async checkout(options: NFTCheckoutRequest) {
     const requestPayload = createJsonRpcRequestPayload(MagicPayloadMethod.NFTCheckout, [options]);
-    return this.request<NFTCheckoutResponse>(requestPayload);
+    const response = await this.request<NFTCheckoutResponse>(requestPayload);
+
+    if (response?.viewInWallet) {
+      const requestViewInWalletPayload = createJsonRpcRequestPayload(MagicPayloadMethod.ShowUI, [
+        {
+          deeplink: 'collectible-details',
+          params: {
+            contractAddress: options.contractAddress,
+            tokenId: options.tokenId,
+          },
+        },
+      ]);
+      await this.request<NFTCheckoutResponse>(requestViewInWalletPayload);
+    }
+
+    return response;
   }
 }

packages/@magic-sdk/provider/test/spec/modules/nft/checkout.spec.ts

@@ -0,0 +1,39 @@
+import browserEnv from '@ikscodes/browser-env';
+import { createMagicSDK } from '../../../factories';
+import { isPromiEvent } from '../../../../src/util';
+
+beforeEach(() => {
+  browserEnv.restore();
+});
+
+test('checkout method should return a PromiEvent', () => {
+  const magic = createMagicSDK();
+
+  magic.nft.request = jest.fn().mockReturnValue({
+    status: 'complete',
+    viewInWallet: true,
+  });
+
+  magic.nft.checkout({
+    contractId: '1cd4cfe8-b997-466e-8b0d-ff1177222ba4',
+    contractAddress: '0x375625833431b22623ce222e55b1cd15a459ba49',
+    tokenId: '1',
+    name: 'NFT Checkout Test',
+    imageUrl: 'https://nft-cdn.alchemy.com/matic-mumbai/382ceb42f28fb4df0d12897d5d433084',
+    quantity: 1,
+  });
+
+  const requestPayload = magic.nft.request.mock.calls[0][0];
+  console.log(requestPayload.params);
+  expect(requestPayload.method).toBe('magic_nft_checkout');
+  expect(requestPayload.params).toMatchObject([
+    {
+      contractId: '1cd4cfe8-b997-466e-8b0d-ff1177222ba4',
+      contractAddress: '0x375625833431b22623ce222e55b1cd15a459ba49',
+      tokenId: '1',
+      name: 'NFT Checkout Test',
+      imageUrl: 'https://nft-cdn.alchemy.com/matic-mumbai/382ceb42f28fb4df0d12897d5d433084',
+      quantity: 1,
+    },
+  ]);
+});

packages/@magic-sdk/provider/test/spec/modules/nft/purchase.spec.ts

@@ -21,8 +21,3 @@ test('purchase method should return a PromiEvent', () => {
   const magic = createMagicSDK();
   expect(isPromiEvent(magic.nft.purchase())).toBeTruthy();
 });
-
-test('method should return a PromiEvent', () => {
-  const magic = createMagicSDK();
-  expect(isPromiEvent(magic.nft.checkout())).toBeTruthy();
-});

packages/@magic-sdk/types/src/core/json-rpc-types.ts

@@ -84,19 +84,21 @@ export interface NFTPurchaseResponse {
 export interface NFTCheckoutRequest {
   // given by magic / found in the developer dashboard in future
   contractId: string;
+  contractAddress: string;
   // in contract, if ERC1155… for ERC721, use token ID = 0
   tokenId: string;
-  // Checkout UI compares against session wallet, if == then show “Magic Wallet”
-  walletAddress: string;
-  quantity: number;
-  imageUrl: string;
   name: string;
+  imageUrl: string;
+  quantity: number;
+  // Checkout UI compares against session wallet, if == then show “Magic Wallet”
+  walletAddress?: string;
 }
 
 export type NFTCheckoutStatus = 'processed' | 'declined' | 'expired';
 
 export interface NFTCheckoutResponse {
   status: NFTCheckoutStatus;
+  viewInWallet?: boolean;
 }
 
 export enum Wallets {