chore(passport): ID-4038: Improved Passport sdk-sample-app seaport examples (#2731)

haydenfowler · web-flow · commit fbcb1f671a08 · 2025-10-15T04:42:02.000Z
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/SeaportCancel.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/SeaportCancel.tsx
@@ -0,0 +1,131 @@
+import React, {
+  useCallback, useEffect, useMemo, useState,
+} from 'react';
+import {
+  Accordion, Form, Spinner, Stack,
+} from 'react-bootstrap';
+import WorkflowButton from '@/components/WorkflowButton';
+import { RequestExampleProps } from '@/types';
+import { useImmutableProvider } from '@/context/ImmutableProvider';
+import { usePassportProvider } from '@/context/PassportProvider';
+import { PreparedTransactionRequest } from 'ethers';
+
+function SeaportCancel({ disabled, handleExampleSubmitted }: RequestExampleProps) {
+  const { orderbookClient } = useImmutableProvider();
+  const { zkEvmProvider } = usePassportProvider();
+
+  const [orderIds, setOrderIds] = useState<string>('');
+  const [walletAddress, setWalletAddress] = useState<string>('');
+  const [isBuildingTransaction, setIsBuildingTransaction] = useState<boolean>(false);
+  const [transaction, setTransaction] = useState<PreparedTransactionRequest>();
+  const [transactionError, setTransactionError] = useState<string>('');
+
+  const seaportContractAddress = useMemo(
+    () => (
+      orderbookClient.config().seaportContractAddress
+    ),
+    [orderbookClient],
+  );
+
+  useEffect(() => {
+    const getAddress = async () => {
+      if (zkEvmProvider) {
+        const [address] = await zkEvmProvider.request({
+          method: 'eth_requestAccounts',
+        });
+        setWalletAddress(address || '');
+      }
+    };
+
+    getAddress().catch(console.log);
+  }, [zkEvmProvider, setWalletAddress]);
+
+  useEffect(() => {
+    setTransactionError('');
+    setTransaction(undefined);
+  }, [orderIds]);
+
+  const validate = useCallback(async () => {
+    setTransactionError('');
+    setTransaction(undefined);
+    setIsBuildingTransaction(true);
+
+    try {
+      const { cancellationAction } = await orderbookClient.cancelOrdersOnChain(
+        orderIds.replaceAll(' ', '').split(','),
+        walletAddress,
+      );
+
+      setTransaction(await cancellationAction.buildTransaction());
+    } catch (err) {
+      setTransactionError(`Failed to build Seaport cancellation transaction: ${err}`);
+    } finally {
+      setIsBuildingTransaction(false);
+    }
+  }, [orderIds, orderbookClient, walletAddress]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    return handleExampleSubmitted({
+      method: 'eth_sendTransaction',
+      params: [transaction],
+    });
+  }, [handleExampleSubmitted, transaction]);
+
+  return (
+    <Accordion.Item eventKey="7">
+      <Accordion.Header>Seaport Cancel</Accordion.Header>
+      <Accordion.Body>
+        <Form onSubmit={handleSubmit} className="mb-4">
+          <Form.Group className="mb-3">
+            <Form.Label>
+              Seaport Contract Address
+            </Form.Label>
+            <Form.Control
+              required
+              disabled
+              type="text"
+              value={seaportContractAddress}
+            />
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Label>
+              Order IDs (comma separated)
+            </Form.Label>
+            <Form.Control
+              required
+              type="text"
+              value={orderIds}
+              isValid={transaction && !transactionError}
+              isInvalid={!!transactionError || !orderIds}
+              onChange={(e) => setOrderIds(e.target.value)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {transactionError}
+            </Form.Control.Feedback>
+          </Form.Group>
+          <Stack direction="horizontal" gap={3}>
+            <WorkflowButton
+              disabled={disabled || isBuildingTransaction || !!transaction}
+              type="button"
+              onClick={validate}
+            >
+              Validate
+            </WorkflowButton>
+            <WorkflowButton
+              disabled={disabled || !transaction}
+              type="submit"
+            >
+              Submit
+            </WorkflowButton>
+            { isBuildingTransaction && <Spinner /> }
+          </Stack>
+        </Form>
+      </Accordion.Body>
+    </Accordion.Item>
+  );
+}
+
+export default SeaportCancel;
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/SeaportFulfillAvailableAdvancedOrders.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/SeaportFulfillAvailableAdvancedOrders.tsx
@@ -53,7 +53,7 @@ function SeaportFulfillAvailableAdvancedOrders({ disabled, handleExampleSubmitte
 
     try {
       const fulfillResponse = await orderbookClient.fulfillBulkOrders(
-        listingIds.replace(' ', '').split(',').map((orderId) => ({
+        listingIds.replaceAll(' ', '').split(',').map((orderId) => ({
           listingId: orderId,
           takerFees: [],
         })),
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts
@@ -2,6 +2,7 @@ import TransferImx from './TransferImx';
 import SpendingCapApproval from './SpendingCapApproval';
 import NFTApproval from './NFTApproval';
 import SeaportFulfillAvailableAdvancedOrders from './SeaportFulfillAvailableAdvancedOrders';
+import SeaportCancel from './SeaportCancel';
 import ShowGenericConfirmationScreen from './DefaultTransaction';
 import TransferERC20 from './TransferERC20';
 import NFTTransfer from './NFTTransfer';
@@ -14,6 +15,7 @@ const EthSendTransactionExamples = [
   NFTApproval,
   NFTTransfer,
   SeaportFulfillAvailableAdvancedOrders,
+  SeaportCancel,
 ];
 
 export default EthSendTransactionExamples;
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSignTypedDataV4Examples/SeaportCreateListing.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSignTypedDataV4Examples/SeaportCreateListing.tsx
@@ -9,9 +9,11 @@ import { RequestExampleProps } from '@/types';
 import { useImmutableProvider } from '@/context/ImmutableProvider';
 import { usePassportProvider } from '@/context/PassportProvider';
 import {
-  ActionType, ERC1155Item, ERC721Item, SignableAction, SignablePurpose,
+  ActionType, ERC1155Item, ERC721Item, CreateListingParams, SignableAction, SignablePurpose,
+  TransactionAction,
+  TransactionPurpose,
 } from '@imtbl/orderbook';
-import { TypedDataEncoder } from 'ethers';
+import { BrowserProvider, TypedDataEncoder } from 'ethers';
 
 type TokenType = 'NATIVE' | 'ERC20';
 
@@ -32,6 +34,9 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
   const [sellTokenUnits, setSellTokenUnits] = useState<string>('1');
   const [showSellTokenUnitsField, setShowSellTokenUnitsField] = useState(false);
   const [sellTokenType, setSellTokenType] = useState<'ERC721' | 'ERC1155'>('ERC721');
+  const [submitTransaction, setSubmitTransaction] = useState<boolean>(false);
+  const [orderComponents, setOrderComponents] = useState<CreateListingParams['orderComponents'] | undefined>();
+  const [orderHash, setOrderHash] = useState<string>('');
 
   const seaportContractAddress = useMemo(
     () => (
@@ -67,6 +72,9 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
     setBuyType('NATIVE');
     setSellTokenUnits('1');
     setShowSellTokenUnitsField(false);
+    setSubmitTransaction(false);
+    setOrderComponents(undefined);
+    setOrderHash('');
   };
 
   const validate = useCallback(async () => {
@@ -92,13 +100,36 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
         throw new Error('Units for sale must be greater than 0');
       }
 
-      const { actions } = await orderbookClient.prepareListing({
+      const preparedListing = await orderbookClient.prepareListing({
         makerAddress: walletAddress,
         buy,
         sell,
       });
 
-      const signAction = actions.find((action) => (
+      if (submitTransaction) {
+        const approvalActions = preparedListing.actions.filter((action) => (
+          action.type === ActionType.TRANSACTION && action.purpose === TransactionPurpose.APPROVAL
+        )) as TransactionAction[];
+
+        for (const approvalAction of approvalActions) {
+          // eslint-disable-next-line no-await-in-loop
+          const unsignedTx = await approvalAction.buildTransaction();
+
+          // eslint-disable-next-line no-await-in-loop
+          const transactionHash = await zkEvmProvider!.request({
+            method: 'eth_sendTransaction',
+            params: [unsignedTx],
+          });
+
+          // eslint-disable-next-line no-await-in-loop
+          await new BrowserProvider(zkEvmProvider!).waitForTransaction(transactionHash);
+        }
+
+        setOrderComponents(preparedListing.orderComponents);
+        setOrderHash(preparedListing.orderHash);
+      }
+
+      const signAction = preparedListing.actions.find((action) => (
         action.type === ActionType.SIGNABLE && action.purpose === SignablePurpose.CREATE_LISTING
       )) as SignableAction | undefined;
 
@@ -117,7 +148,7 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
       setIsBuildingTransaction(false);
     }
   }, [NFTContractAddress, buyAmount, buyType, orderbookClient,
-    tokenContractAddress, tokenId, walletAddress, sellTokenUnits, sellTokenType]);
+    tokenContractAddress, tokenId, walletAddress, sellTokenUnits, sellTokenType, submitTransaction, zkEvmProvider]);
 
   const handleSetSellTokenType = (e: React.ChangeEvent<HTMLSelectElement>) => {
     resetForm();
@@ -133,19 +164,36 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
     e.preventDefault();
     e.stopPropagation();
 
+    let onSuccess;
+    if (submitTransaction) {
+      onSuccess = async (result: any) => {
+        await orderbookClient.createListing({
+          orderComponents: orderComponents!,
+          orderHash,
+          orderSignature: result,
+          makerFees: [],
+        });
+      };
+    }
+
     return handleExampleSubmitted({
       method: 'eth_signTypedData_v4',
       params: [walletAddress, transaction],
-    });
-  }, [handleExampleSubmitted, transaction, walletAddress]);
+    }, onSuccess);
+  }, [
+    handleExampleSubmitted,
+    transaction,
+    walletAddress,
+    orderComponents,
+    orderHash,
+    submitTransaction,
+    orderbookClient,
+  ]);
 
   return (
     <Accordion.Item eventKey="3">
       <Accordion.Header>Seaport Create Listing</Accordion.Header>
       <Accordion.Body>
-        <Alert variant="warning">
-          Note: This method only returns a signed message, it does not submit an order to the orderbook.
-        </Alert>
         {transactionError
         && (
         <Alert variant="danger" style={{ wordBreak: 'break-word' }}>
@@ -255,6 +303,15 @@ function SeaportCreateListing({ disabled, handleExampleSubmitted }: RequestExamp
               onChange={(e) => setBuyAmount(e.target.value)}
             />
           </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Check
+              onClick={() => {
+                setSubmitTransaction(!submitTransaction);
+              }}
+              type="checkbox"
+              label="Submit Transaction"
+            />
+          </Form.Group>
           <Stack direction="horizontal" gap={3}>
             <WorkflowButton
               disabled={disabled || isBuldingTransaction || !!transaction || !!transactionError}
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/Request.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/Request.tsx
@@ -169,21 +169,24 @@ function Request({ showModal, setShowModal }: ModalProps) {
     setShowModal(false);
   };
 
-  const performRequest = async (request: RequestArguments) => {
+  const performRequest = async (request: RequestArguments, onSuccess?: (result?: any) => Promise<void>) => {
     setInvalid(false);
     setLoadingRequest(true);
     try {
       const result = await zkEvmProvider?.request(request);
       setLoadingRequest(false);
       addMessage(request.method, result);
+      if (onSuccess) {
+        await onSuccess(result);
+      }
       handleClose();
     } catch (err) {
       addMessage('Request', err);
       handleClose();
     }
   };
 
-  const handleExampleSubmitted = async (request: RequestArguments) => {
+  const handleExampleSubmitted = async (request: RequestArguments, onSuccess?: (result?: any) => Promise<void>) => {
     if (request.params) {
       const newParams = params;
       request.params.forEach((param, i) => {
@@ -195,7 +198,7 @@ function Request({ showModal, setShowModal }: ModalProps) {
       });
       setParams(newParams);
     }
-    await performRequest(request);
+    return performRequest(request, onSuccess);
   };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/RequestExampleAccordion.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/RequestExampleAccordion.tsx
@@ -25,9 +25,9 @@ function RequestExampleAccordion({ disabled, examples, handleExampleSubmitted }:
           examples?.map((component) => (
             React.createElement(component, {
               key: component.name,
-              handleExampleSubmitted: (request: RequestArguments) => {
+              handleExampleSubmitted: (request: RequestArguments, onSuccess?: (result?: any) => Promise<void>) => {
                 setActiveAccordionKey('');
-                return handleExampleSubmitted(request);
+                return handleExampleSubmitted(request, onSuccess);
               },
               disabled,
             })
diff --git a/packages/passport/sdk-sample-app/src/types/index.ts b/packages/passport/sdk-sample-app/src/types/index.ts
@@ -37,13 +37,18 @@ export interface ViewOffersModalProps extends ModalProps {
   onClose?: () => void;
 }
 
+export type HandleExampleSubmitted = (
+  request: RequestArguments,
+  onSuccess?: (result?: any) => Promise<void>,
+) => Promise<void>;
+
 export interface RequestExampleProps {
-  handleExampleSubmitted: (request: RequestArguments) => Promise<void>;
+  handleExampleSubmitted: HandleExampleSubmitted;
   disabled: boolean;
 }
 
 export interface RequestExampleAccordionProps {
   disabled: boolean;
-  handleExampleSubmitted: (request: RequestArguments) => Promise<void>;
+  handleExampleSubmitted: HandleExampleSubmitted;
   examples: Array<ComponentType<RequestExampleProps>>;
 }

Original file line number	Diff line number	Diff line change
`@@ -37,13 +37,18 @@ export interface ViewOffersModalProps extends ModalProps {`
`37`	`37`	`onClose?: () => void;`
`38`	`38`	`}`
`39`	`39`
	`40`	`+export type HandleExampleSubmitted = (`
	`41`	`+ request: RequestArguments,`
	`42`	`+ onSuccess?: (result?: any) => Promise<void>,`
	`43`	`+) => Promise<void>;`
	`44`	`+`
`40`	`45`	`export interface RequestExampleProps {`
`41`		`- handleExampleSubmitted: (request: RequestArguments) => Promise<void>;`
	`46`	`+ handleExampleSubmitted: HandleExampleSubmitted;`
`42`	`47`	`disabled: boolean;`
`43`	`48`	`}`
`44`	`49`
`45`	`50`	`export interface RequestExampleAccordionProps {`
`46`	`51`	`disabled: boolean;`
`47`		`- handleExampleSubmitted: (request: RequestArguments) => Promise<void>;`
	`52`	`+ handleExampleSubmitted: HandleExampleSubmitted;`
`48`	`53`	`examples: Array<ComponentType<RequestExampleProps>>;`
`49`	`54`	`}`