create metadata field

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

@@ -8,6 +8,7 @@ import {
   DaimoPayIntentStatus,
   DaimoPayOrderMode,
   DaimoPayOrderStatusSource,
+  DaimoPayUserMetadata,
   PaymentBouncedEvent,
   PaymentCompletedEvent,
   PaymentStartedEvent,
@@ -64,6 +65,10 @@ type PayButtonPaymentProps =
        * Preferred tokens. These appear first in the token list.
        */
       preferredTokens?: { chain: number; address: Address }[];
+      /**
+       * Developer metadata. E.g. correlation ID.
+       * */
+      metadata?: DaimoPayUserMetadata;
     }
   | {
       /** The payment ID, generated via the Daimo Pay API. Replaces params above. */
@@ -154,6 +159,7 @@ function DaimoPayButtonCustom(props: DaimoPayButtonCustomProps) {
           paymentOptions: props.paymentOptions,
           preferredChains: props.preferredChains,
           preferredTokens: props.preferredTokens,
+          metadata: props.metadata,
         }
       : null;
   let payId = "payId" in props ? props.payId : null;
@@ -191,16 +197,19 @@ function DaimoPayButtonCustom(props: DaimoPayButtonCustomProps) {
   };
   const hide = () => context.setOpen(false);
 
+  // Emit onPaymentStarted event when payment is initiated
   useEffect(() => {
     if (hydOrder == null || !isStarted) return;
     onPaymentStarted?.({
       paymentId: writeDaimoPayOrderID(hydOrder.id),
       type: "payment_started",
       chainId: assertNotNull(hydOrder.sourceTokenAmount).token.chainId,
       txHash: assertNotNull(hydOrder.sourceInitiateTxHash),
+      metadata: hydOrder.userMetadata,
     });
   }, [isStarted]);
 
+  // Emit onPaymentCompleted or onPaymentBounced event when payment is completed or bounced
   useEffect(() => {
     if (hydOrder == null) return;
     if (hydOrder.intentStatus === DaimoPayIntentStatus.PENDING) return;
@@ -211,6 +220,7 @@ function DaimoPayButtonCustom(props: DaimoPayButtonCustomProps) {
       txHash: assertNotNull(
         hydOrder.destFastFinishTxHash ?? hydOrder.destClaimTxHash,
       ),
+      metadata: hydOrder.userMetadata,
     };
     if (hydOrder.intentStatus === DaimoPayIntentStatus.SUCCESSFUL) {
       onPaymentCompleted?.({ type: "payment_completed", ...commonFields });

packages/connectkit/src/components/Pages/Solana/PayWithSolanaToken/index.tsx

@@ -106,34 +106,4 @@ const PayWithSolanaToken: React.FC = () => {
   );
 };
 
-const LoadingContainer = styled(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px auto 16px;
-  height: 120px;
-`;
-const AnimationContainer = styled(motion.div)<{
-  $circle: boolean;
-}>`
-  user-select: none;
-  position: relative;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: var(--ck-body-color-danger);
-    ${(props) =>
-      props.$circle &&
-      css`
-        inset: -5px;
-        border-radius: 50%;
-        background: none;
-        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
-      `}
-  }
-`;
-
 export default PayWithSolanaToken;

packages/connectkit/src/hooks/usePaymentState.ts

@@ -3,6 +3,7 @@ import {
   assertNotNull,
   DaimoPayOrder,
   DaimoPayTokenAmount,
+  DaimoPayUserMetadata,
   DepositAddressPaymentOptionData,
   DepositAddressPaymentOptionMetadata,
   DepositAddressPaymentOptions,
@@ -61,6 +62,8 @@ export interface PayParams {
   preferredChains?: number[];
   /** Preferred tokens. These appear first in the token list. */
   preferredTokens?: { chain: number; address: Address }[];
+  /** Developer metadata. E.g. correlation ID. */
+  metadata?: DaimoPayUserMetadata;
 }
 
 /** Creates (or loads) a payment and manages the corresponding modal. */
@@ -215,6 +218,7 @@ export function usePaymentState({
         id: order.id.toString(),
         toUnits,
         metadata: order.metadata,
+        userMetadata: payParams.metadata,
         isAmountEditable: isDepositFlow,
       },
       platform,
@@ -399,6 +403,7 @@ export function usePaymentState({
           preferredTokens: payParams.preferredTokens,
         },
       },
+      userMetadata: payParams.metadata,
     });
 
     setDaimoPayOrder(orderPreview);