TD-1365: feat: add checkout support for ERC1155 orders & partial fills (

#1770) Co-authored-by: Sam Jeston <[email protected]> Co-authored-by: Leslie Fung <[email protected]>
immutable · May 16, 2024 · fc01002 · fc01002
1 parent e7ce2c6
commit fc01002
Show file tree

Hide file tree

Showing 25 changed files with 2,080 additions and 181 deletions.
diff --git a/packages/checkout/sdk-sample-app/src/components/Buy.tsx b/packages/checkout/sdk-sample-app/src/components/Buy.tsx
@@ -4,8 +4,6 @@ import LoadingButton from './LoadingButton';
 import { useEffect, useState } from 'react';
 import { SuccessMessage, ErrorMessage } from './messages';
 import { Body, Box, FormControl, TextInput } from '@biom3/react';
-import { Orderbook } from '@imtbl/orderbook';
-import { Environment } from '@imtbl/config';
 
 interface BuyProps {
   checkout: Checkout;
@@ -15,6 +13,8 @@ interface BuyProps {
 export default function Buy({ checkout, provider }: BuyProps) {
   const [orderId, setOrderId] = useState<string>('');
   const [orderIdError, setOrderIdError] = useState<any>(null);
+  const [unitsToFill, setUnitsToFill] = useState<string>('1');
+  const [unitsToFillError, setUnitsToFillError] = useState<string>('');
   const [error, setError] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -23,6 +23,10 @@ export default function Buy({ checkout, provider }: BuyProps) {
       setOrderIdError('Please enter an order ID');
       return;
     }
+    if (!unitsToFill) {
+      setUnitsToFillError('Please enter units to fill');
+      return;
+    }
     if (!checkout) {
       console.error('missing checkout, please connect first');
       return;
@@ -36,7 +40,7 @@ export default function Buy({ checkout, provider }: BuyProps) {
     try {
       const buyResult = await checkout.buy({
         provider,
-        orders: [{id: orderId, takerFees: [{amount: {percentageDecimal: 0.01}, recipient: '0x96654086969DCaa88933E753Aa52d46EAB269Ff7'}]}],
+        orders: [{id: orderId, fillAmount: unitsToFill, takerFees: [{amount: {percentageDecimal: 0.01}, recipient: '0x96654086969DCaa88933E753Aa52d46EAB269Ff7'}]}],
       });
       console.log('Buy result', buyResult);
       setLoading(false);
@@ -56,6 +60,12 @@ export default function Buy({ checkout, provider }: BuyProps) {
     setOrderIdError('');
   }
 
+  const updateUnitsToFill = (event: any) => {
+    const value = event.target.value;
+    setUnitsToFill(value);
+    setUnitsToFillError('');
+  }
+
   useEffect(() => {
     setError(null);
     setLoading(false);
@@ -71,6 +81,18 @@ export default function Buy({ checkout, provider }: BuyProps) {
         )}
       </FormControl>
       <br />
+      <FormControl validationStatus={unitsToFillError ? 'error' : 'success'} >
+        <FormControl.Label>Units To Fill</FormControl.Label>
+        <TextInput
+          value={unitsToFill}
+          type='number'
+          onChange={updateUnitsToFill}
+        />
+        {unitsToFillError && (
+          <FormControl.Validation>{unitsToFillError}</FormControl.Validation>
+        )}
+      </FormControl>
+      <br />
       <Box sx={{display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'base.spacing.x2'}}>
       <LoadingButton onClick={buyClick} loading={loading}>
         Buy