From a9f0740b3e3273bbd43a3bfb0f28a66f1db68123 Mon Sep 17 00:00:00 2001 From: Samuele Agostinelli Date: Wed, 29 May 2024 13:59:27 -0400 Subject: [PATCH] sardine call data (#49) * sardine call data * path fix * fix tokenDecimals type for sardine api call * onClickCheckout fix * clean up chainid --- examples/react/src/components/Connected.tsx | 59 +++++++++------ examples/react/src/constants/orderbook-abi.ts | 1 + examples/react/src/utils/helpers.ts | 74 +++++++++++++------ packages/checkout/src/api/data.ts | 17 +++-- .../checkout/src/contexts/CheckoutModal.ts | 21 ++++-- .../src/views/CheckoutSelection/index.tsx | 12 +-- .../checkout/src/views/PendingTransaction.tsx | 4 +- .../checkout/src/views/TransactionError.tsx | 2 +- .../checkout/src/views/TransactionSuccess.tsx | 10 +-- 9 files changed, 130 insertions(+), 70 deletions(-) create mode 100644 examples/react/src/constants/orderbook-abi.ts diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index be814a76..fc19e713 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -27,9 +27,8 @@ import { useWriteContract } from 'wagmi' -import { messageToSign } from '../constants' -import { abi } from '../constants/nft-abi' -import { delay, getCheckoutSettings } from '../utils' +import { messageToSign, abi } from '../constants' +import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils' // append ?debug to url to enable debug mode const searchParams = new URLSearchParams(location.search) @@ -242,22 +241,36 @@ export const Connected = () => { }) } - // const onClickCheckout = () => { - // setIsCheckoutInfoModalOpen(true) - // } + const onClickCheckout = () => { + setIsCheckoutInfoModalOpen(true) + } const onCheckoutInfoConfirm = () => { setIsCheckoutInfoModalOpen(false) if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') { - const checkoutSettings = getCheckoutSettings( - checkoutOrderId, - address || '', - checkoutTokenContractAddress, - checkoutTokenId, - ChainId.POLYGON, - 1, - true - ) + const chainId = ChainId.POLYGON + const orderbookAddress = '0xB537a160472183f2150d42EB1c3DD6684A55f74c' + const recipientAddress = address || '' + const nftQuantity = '1' + + const checkoutSettings = getCheckoutSettings({ + chainId, + contractAddress: orderbookAddress, + recipientAddress, + currencyQuantity: '100000', + currencySymbol: 'USDC', + currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359', + currencyDecimals: '6', + nftId: checkoutTokenId, + nftAddress: checkoutTokenContractAddress, + nftQuantity, + isDev: true, + calldata: getOrderbookCalldata({ + orderId: checkoutOrderId, + quantity: nftQuantity, + recipient: recipientAddress + }), + }) triggerCheckout(checkoutSettings) } } @@ -363,13 +376,17 @@ export const Connected = () => { )} {isDebugMode && ( - + <> + + + + )} - {/* */} + { let finalText = text @@ -19,35 +21,65 @@ export const delay = (ms: number) => { return new Promise(resolve => setTimeout(resolve, ms)) } -export const getCheckoutSettings = ( - blockchainNftId: string, - recipientAddress: string | Address, - tokenContractAddress: string, - tokenId: string, - chainId: number, - quantity: number, +export interface GetCheckoutSettings { + chainId: number + contractAddress: string + recipientAddress: string + currencyQuantity: string + currencySymbol: string + currencyAddress: string + currencyDecimals: string + nftId: string + nftAddress: string + nftQuantity: string + calldata: string + nftDecimals?: string isDev?: boolean -) => { +} + +export const getCheckoutSettings = (args: GetCheckoutSettings) => { const checkoutSettings: CheckoutSettings = { - sardineCheckout: { - chainId, + creditCardCheckout: { defaultPaymentMethodType: 'us_debit', - platform: 'horizon', - contractAddress: '0xB537a160472183f2150d42EB1c3DD6684A55f74c', - blockchainNftId: blockchainNftId, - recipientAddress: recipientAddress, - quantity, - isDev + onSuccess: (hash) => { console.log('credit card checkout success', hash) }, + onError: (e) => { console.log('credit card checkout error', e) }, + ...args }, orderSummaryItems: [ { - chainId, - contractAddress: tokenContractAddress, - tokenId, - quantityRaw: String(quantity) + chainId: args.chainId, + contractAddress: args.nftAddress, + tokenId: args.nftId, + quantityRaw: String(args.nftQuantity) } ] } return checkoutSettings } + +export interface GetOrderbookCalldata { + orderId: string, + quantity: string, + recipient: string, +} + +export const getOrderbookCalldata = ({ + orderId, + quantity, + recipient, +}: GetOrderbookCalldata) => { + const calldata = encodeFunctionData({ + abi: orderbookAbi, + functionName: 'acceptRequest', + args: [ + BigInt(orderId), + BigInt(quantity), + recipient as Hex, + [], + [] + ] + }) + + return calldata +} \ No newline at end of file diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts index f9fd658b..2d1c2586 100644 --- a/packages/checkout/src/api/data.ts +++ b/packages/checkout/src/api/data.ts @@ -1,7 +1,7 @@ import { TokenMetadata } from '@0xsequence/metadata' import { ChainId, networks } from '@0xsequence/network' -import { SardineCheckout } from '../contexts/CheckoutModal' +import { CreditCardCheckout } from '../contexts' export interface FetchSardineClientTokenReturn { token: string @@ -13,7 +13,7 @@ export interface MethodArguments { } export const fetchSardineClientToken = async ( - order: SardineCheckout, + order: CreditCardCheckout, isDev: boolean, projectAccessKey: string, tokenMetadata?: TokenMetadata @@ -46,12 +46,17 @@ export const fetchSardineClientToken = async ( imageUrl: tokenMetadata?.image || 'https://www.sequence.market/images/placeholder.png', network: networks[order.chainId as ChainId].name, recipientAddress: order.recipientAddress, - platform: 'horizon', - blockchainNftId: order.blockchainNftId, contractAddress: order.contractAddress, + platform: "calldata_execution", executionType: 'smart_contract', - quantity: Number(order.quantity), - decimals: Number(order.decimals) + blockchainNftId: order.nftId, + quantity: Number(order.nftQuantity), + decimals: Number(order?.nftDecimals || 0), + tokenAmount: order.currencyQuantity, + tokenAddress: order.currencyAddress, + tokenSymbol: order.currencySymbol, + tokenDecimals: Number(order.currencyDecimals), + callData: order.calldata, } }) }) diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts index 7f018c87..9d383dda 100644 --- a/packages/checkout/src/contexts/CheckoutModal.ts +++ b/packages/checkout/src/contexts/CheckoutModal.ts @@ -16,22 +16,27 @@ interface OrderSummaryItem { tokenId: string } -export interface SardineCheckout { +export interface CreditCardCheckout { defaultPaymentMethodType: 'us_debit' | 'us_credit' | 'international_debit' | 'international_credit' | 'ach' chainId: number - platform: string contractAddress: string - blockchainNftId: string recipientAddress: string - quantity: number - decimals?: number - onSuccess?: (transactionHash: string, settings: SardineCheckout) => void - onError?: (error: Error, settings: SardineCheckout) => void + currencyQuantity: string + currencySymbol: string + currencyAddress: string + currencyDecimals: string + nftId: string + nftAddress: string + nftQuantity: string + nftDecimals?: string + calldata: string + onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void + onError?: (error: Error, settings: CreditCardCheckout) => void isDev?: boolean } export interface CheckoutSettings { - sardineCheckout?: SardineCheckout + creditCardCheckout?: CreditCardCheckout cryptoCheckout?: { chainId: number triggerTransaction: () => void diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx index ec4681e0..91ca2b7a 100644 --- a/packages/checkout/src/views/CheckoutSelection/index.tsx +++ b/packages/checkout/src/views/CheckoutSelection/index.tsx @@ -31,7 +31,7 @@ export const CheckoutSelection = () => { const projectAccessKey = useProjectAccessKey() const cryptoCheckoutSettings = settings?.cryptoCheckout - const creditCardCheckoutSettings = settings?.sardineCheckout + const creditCardCheckoutSettings = settings?.creditCardCheckout const displayCreditCardCheckout = !!creditCardCheckoutSettings const displayCryptoCheckout = !!cryptoCheckoutSettings @@ -64,7 +64,7 @@ export const CheckoutSelection = () => { const orderSummaryItems = settings?.orderSummaryItems || [] - const chainId = settings?.cryptoCheckout?.chainId || settings?.sardineCheckout?.chainId || 1 + const chainId = settings?.cryptoCheckout?.chainId || settings?.creditCardCheckout?.chainId || 1 const { data: tokensMetadata } = useTokenMetadata(chainId, orderSummaryItems[0].contractAddress, [orderSummaryItems[0].tokenId]) const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined @@ -72,9 +72,9 @@ export const CheckoutSelection = () => { const triggerSardineTransaction = async () => { console.log('trigger sardine transaction') - if (settings?.sardineCheckout) { - const isDev = settings?.sardineCheckout?.isDev || false - const { token, orderId } = await fetchSardineClientToken(settings.sardineCheckout, isDev, projectAccessKey, tokenMetadata) + if (settings?.creditCardCheckout) { + const isDev = settings?.creditCardCheckout?.isDev || false + const { token, orderId } = await fetchSardineClientToken(settings.creditCardCheckout, isDev, projectAccessKey, tokenMetadata) setNavigation({ location: 'transaction-pending', @@ -84,7 +84,7 @@ export const CheckoutSelection = () => { } const onClickPayWithCard = () => { - if (settings?.sardineCheckout) { + if (settings?.creditCardCheckout) { triggerSardineTransaction() } else { setNavigation({ diff --git a/packages/checkout/src/views/PendingTransaction.tsx b/packages/checkout/src/views/PendingTransaction.tsx index 28494966..05673b41 100644 --- a/packages/checkout/src/views/PendingTransaction.tsx +++ b/packages/checkout/src/views/PendingTransaction.tsx @@ -17,7 +17,7 @@ export const PendingTransaction = () => { const { setNavigation } = nav const projectAccessKey = useProjectAccessKey() - const isDev = settings?.sardineCheckout?.isDev || false + const isDev = settings?.creditCardCheckout?.isDev || false const url = isDev ? `https://crypto.sandbox.sardine.ai/?client_token=${authToken}&show_features=true` : `https://crypto.sardine.ai/?client_token=${authToken}&show_features=true` @@ -25,7 +25,7 @@ export const PendingTransaction = () => { const pollForOrderStatus = async () => { try { console.log('Polling for transaction status') - const isDev = settings?.sardineCheckout?.isDev || false + const isDev = settings?.creditCardCheckout?.isDev || false const pollResponse = await fetchSardineOrderStatus(orderId, isDev, projectAccessKey) const status = pollResponse.resp.status diff --git a/packages/checkout/src/views/TransactionError.tsx b/packages/checkout/src/views/TransactionError.tsx index 5a5090d6..39bb8f39 100644 --- a/packages/checkout/src/views/TransactionError.tsx +++ b/packages/checkout/src/views/TransactionError.tsx @@ -12,7 +12,7 @@ export const TransactionError = () => { useEffect(() => { setTimeout(() => { closeCheckout() - settings?.sardineCheckout?.onError && settings?.sardineCheckout?.onError(navigation.params.error, settings?.sardineCheckout) + settings?.creditCardCheckout?.onError && settings?.creditCardCheckout?.onError(navigation.params.error, settings?.creditCardCheckout) }, 3000) }, []) diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx index 803f9164..2f1a34d0 100644 --- a/packages/checkout/src/views/TransactionSuccess.tsx +++ b/packages/checkout/src/views/TransactionSuccess.tsx @@ -11,14 +11,14 @@ export const TransactionSuccess = () => { const nav = useNavigation() const navigation = nav.navigation as TransactionSuccessNavigation - const chainId = settings?.sardineCheckout?.chainId || ChainId.POLYGON + const chainId = settings?.creditCardCheckout?.chainId || ChainId.POLYGON const network = sequence.network.allNetworks.find(n => n.chainId === chainId) useEffect(() => { - settings?.sardineCheckout?.onSuccess && - settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout) - settings?.sardineCheckout?.onSuccess && - settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout) + settings?.creditCardCheckout?.onSuccess && + settings?.creditCardCheckout?.onSuccess(navigation.params.transactionHash, settings?.creditCardCheckout) + settings?.creditCardCheckout?.onSuccess && + settings?.creditCardCheckout?.onSuccess(navigation.params.transactionHash, settings?.creditCardCheckout) }, []) return (