paykit: create payments directly from the button #15

dcposch · 2024-12-23T14:06:11Z

Basic

<DaimoPayButton
  appId={APP_ID}
  toChain={8453}
  toAddress="0xFBfa6A0D1F44b60d7CCA4b95d5a2CfB15246DB0D"
  toAmount={120000n}
  toToken={getAddress(baseUSDC.token)}
  onPaymentStarted={printEvent}
  onPaymentCompleted={printEvent}
/>

Contract

  <DaimoPayButton
      appId={APP_ID}
      toChain={8453}
      toAddress="0xFBfa6A0D1F44b60d7CCA4b95d5a2CfB15246DB0D"
      toAmount={parseUnits("0.0001", 18)} /* 10^-4 ETH */
      toToken={zeroAddress} /* Zero address = ETH */
      toCallData={encodeFunctionData({
        abi: parseAbi([
          "function placePrediction(uint256, uint256) external",
        ]),
        functionName: "placePrediction",
        args: [1n, 2n],
      })}
      onPaymentStarted={printEvent}
      onPaymentCompleted={printEvent}
      onPaymentBounced={printEvent}
  />

Checkout

Pregenerated payID:

  const [payId, setPayId] = useState<string>();
  useEffect(() => {
    const payId = generatePayId();
    // Save payId to your backend here. This ensures that you'll be able to
    // correlate all incoming payments even if the user loses network, etc.
    // await saveCartCheckout(payId, ...);
    setPayId(payId);
  }, []);
    
  <DaimoPayButton
    appId={APP_ID}
    newPayId={payId}
    toChain={8453}
    toAddress="0xFBfa6A0D1F44b60d7CCA4b95d5a2CfB15246DB0D"
    toAmount={420000n} /* $0.42 USDC */
    toToken={getAddress(baseUSDC.token)}
    preferredChains={[8453]}
    preferredTokens={[{ chain: 8453, address: getAddress(baseDAI.token) }]}
  />

nalinbhardwaj · 2024-12-25T01:34:52Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

+      /**
+       * Optional nonce. If set, generates a deterministic payID. See docs.
+       */
+      nonce?: bigint;


this is the nonce as in destNonce onchain? Currently we always set nonce = payID onchain, and it's a nice invariant to enforce that the create2 parameters are publicly known by all parties. I'd recommend keeping that / not providing this option perhaps?

invariant is still there. if you provide the nonce, that becomes the id. (Wrote "generates a determinstic payID" to avoid confusion because our payIds are formatted in base58.)

example use case in DonateForm:

generate nonce

on click, save (form info, payment nonce)

then show checkout modal

this creates a guarantee that every payment is attributed.

--

maybe there's a cleaner way to support that.

we could usenewPayId instead of nonce, and we provide a utility function createRandomPayId that returns the base58 form

then we don't have to expose concept of "nonce" in SDK

lmk if that feels cleaner

update to use newPayId to reduce confusion

deleted newPayId, just using onPaymentStarted for now

nalinbhardwaj · 2024-12-25T01:38:00Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

+      /**
+       * Optional calldata to call an arbitrary function on `toAddress`.
+       */
+      toCallData?: Hex;


should all of these be folded into a recipient?

recipient: { address: `0x..`, tokenAddress: `0x..`, amount: 123n, calldata: `0x..`, }

Makes it easier in future if we have something like "Allowed recipients" to add a recipient: {id: "1234.."} option

allowed recipients might be just the contracts (address + chain ID), right?

the calldata and amount still has to vary payment to payment. eg ethOS would whitelist their minting contract on Base.

one other place where IDs would be useful is bank accounts.

some ideas

Send $20.00 to a bank account

recipient={{ id: "06b0e3e3-91a6-4b09-bffe-46eab58ffa18", currency: "USD", quantity: "20.00" }}

vs

toAccount="06b0e3e3-91a6-4b09-bffe-46eab58ffa18" toCurrency="USD" toQuantity="20.00"

updated. using toUnits to match Viem convention

nalinbhardwaj · 2024-12-25T01:38:58Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

+      /**
+       * Preferred chain IDs. Assets on these chains will appear first.
+       */
+      preferredChains?: number[];


no preferredToken? fine if no one needs it but I actually thought that was the one people like ethOS wanted (and this one hasn't been used by anyone yet)

nalinbhardwaj · 2024-12-25T01:41:16Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

+  const { paymentState } = context;
+  useEffect(
+    () => {
+      if ("payId" in props) {


don't think this is ever true? how does this work

we still support <DaimoPayButton payId={...} /> used eg. for our own hosted page

nalinbhardwaj · 2024-12-25T01:41:46Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

-    address?: Hash;
-    truncatedAddress?: string;
-    ensName?: string;
-    payId?: string;


I think we need payId and intent if we put text in the button from the payment?

with the new style, the payment isn't saved till hydration. we do generate what the payId will be, but might be confusing to pass thru payId that doesn't exist when looked up in API

can pass thru intent, but this is the client's own page, right? say they make a custom Donate button + make the payment with intent=Donate so modal shows nicely

packages/connectkit/src/components/DaimoPayButton/index.tsx

nalinbhardwaj · 2024-12-25T01:44:28Z

packages/connectkit/src/components/Pages/SelectMethod/index.tsx

@@ -56,17 +56,12 @@ function getDepositAddressOption(depositAddressOptions: {
 }) {
  const { setRoute } = usePayContext();

-  console.log(


nalinbhardwaj · 2024-12-25T01:45:30Z

packages/connectkit/src/hooks/usePayWithSolanaToken.ts

    trpc.processSolanaSourcePayment.mutate({
      orderId: orderId.toString(),
      startIntentTxHash: txHash,
-      amount: chosenFinalTokenAmount,
+      amount: "0", // TODO: replace.


what's the best way to get the amount of input token sent from the txHash (not sure how receipts work on Solana... do they have something like the Transfer event log we can fetch?)

we are using an exact-output swap, so we don't know how much input token will be consumed upfront, only once it's onchain

the previous code was substituting a totally different amount (different token, different decimals) as far as i can tell

nalinbhardwaj · 2024-12-25T01:49:28Z

packages/connectkit/src/index.ts

+// These first two just return configured wagmi chains = not necessarily
+// supported by Daimo Pay.


What do you mean? If dev uses getDefaultConfig as we intend them to those are equivalent?

nalinbhardwaj · 2024-12-25T01:51:54Z

packages/connectkit/src/components/DaimoPayButton/index.tsx

+       */
+      preferredChains?: number[];
+    }
+  | {


maybe we should put functional onPaymentStarted, onPaymentCompleted, onPaymentBounced etc here? Currently if the modal generates a payment, the dev has no way to obtain the ID afaict? (they may want to track it in their backend / webhooks etc later)

100%, coming soon.

socket-security · 2024-12-27T13:18:14Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	environment	`+4`	2.59 MB	ai

View full report↗︎

dcposch · 2024-12-27T13:25:39Z

Solana amount tracking works now

a bugfix shipping with this PR:

.. 1.4778 is the amount sent into the exactOutput swap, recovered from the transaction receipt

dcposch · 2024-12-27T14:46:26Z

Token sort working again

Looks like it was broken for a while in prod. Bugfixed.

dcposch marked this pull request as ready for review December 24, 2024 21:23

dcposch requested a review from nalinbhardwaj December 24, 2024 21:23

paykit: direct payment, API optional

4561609

dcposch force-pushed the dc/sdk branch from 90633e3 to 4561609 Compare December 25, 2024 01:20

nalinbhardwaj reviewed Dec 25, 2024

View reviewed changes

packages/connectkit/src/components/DaimoPayButton/index.tsx Outdated Show resolved Hide resolved

nalinbhardwaj reviewed Dec 25, 2024

View reviewed changes

sdk: add newPayId, onPayment[Started,Completed,Bounced]

8d22417

dcposch force-pushed the dc/sdk branch from e0c013b to 8d22417 Compare December 27, 2024 02:22

sdk: remove newPayId, add amountEditable

ae569dc

dcposch force-pushed the dc/sdk branch 2 times, most recently from d6de290 to b6963e6 Compare December 27, 2024 13:18

dcposch added 3 commits December 27, 2024 06:33

paykit: add examples

772e743

paykit: fix getWalletOptions sorting

a7ee8e1

paykit: 1.0.0

db93f56

dcposch force-pushed the dc/sdk branch from b6963e6 to db93f56 Compare December 27, 2024 14:34

dcposch merged commit db93f56 into main Dec 27, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

paykit: create payments directly from the button #15

paykit: create payments directly from the button #15

dcposch commented Dec 23, 2024 •

edited

Loading

nalinbhardwaj Dec 25, 2024

dcposch Dec 25, 2024

dcposch Dec 25, 2024 •

edited

Loading

dcposch Dec 27, 2024

dcposch Dec 27, 2024

nalinbhardwaj Dec 25, 2024

dcposch Dec 25, 2024

dcposch Dec 27, 2024

dcposch Dec 27, 2024

nalinbhardwaj Dec 25, 2024 •

edited

Loading

dcposch Dec 26, 2024

nalinbhardwaj Dec 25, 2024

dcposch Dec 25, 2024

nalinbhardwaj Dec 25, 2024 •

edited

Loading

dcposch Dec 25, 2024 •

edited

Loading

nalinbhardwaj Dec 25, 2024

nalinbhardwaj Dec 25, 2024

dcposch Dec 25, 2024

nalinbhardwaj Dec 25, 2024

nalinbhardwaj Dec 25, 2024 •

edited

Loading

dcposch Dec 25, 2024

socket-security bot commented Dec 27, 2024 •

edited

Loading

dcposch commented Dec 27, 2024

dcposch commented Dec 27, 2024

		// These first two just return configured wagmi chains = not necessarily
		// supported by Daimo Pay.

paykit: create payments directly from the button #15

paykit: create payments directly from the button #15

Conversation

dcposch commented Dec 23, 2024 • edited Loading

Basic

Contract

Checkout

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcposch Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Send $20.00 to a bank account

Choose a reason for hiding this comment

nalinbhardwaj Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nalinbhardwaj Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

dcposch Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nalinbhardwaj Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

socket-security bot commented Dec 27, 2024 • edited Loading

dcposch commented Dec 27, 2024

Solana amount tracking works now

dcposch commented Dec 27, 2024

Token sort working again

dcposch commented Dec 23, 2024 •

edited

Loading

dcposch Dec 25, 2024 •

edited

Loading

nalinbhardwaj Dec 25, 2024 •

edited

Loading

nalinbhardwaj Dec 25, 2024 •

edited

Loading

dcposch Dec 25, 2024 •

edited

Loading

nalinbhardwaj Dec 25, 2024 •

edited

Loading

socket-security bot commented Dec 27, 2024 •

edited

Loading