feat: verification autofill (#2342)

Author: broody

packages/keychain/src/components/purchasenew/verification/index.tsx

@@ -43,6 +43,8 @@ interface VerificationStepViewProps {
   isLoading: boolean;
   type: string;
   error: string | null;
+  autoComplete?: string;
+  name?: string;
 }
 
 const VerificationStepView = ({
@@ -56,6 +58,8 @@ const VerificationStepView = ({
   isLoading,
   type,
   error,
+  autoComplete,
+  name,
 }: VerificationStepViewProps) => (
   <>
     <HeaderInner title={title} icon={icon} variant="compressed" />
@@ -65,6 +69,8 @@ const VerificationStepView = ({
           {label}
         </label>
         <Input
+          name={name}
+          autoComplete={autoComplete}
           placeholder={placeholder}
           value={value}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -374,6 +380,8 @@ export function Verification() {
           onContinue={handleSendEmail}
           isLoading={sendEmailMutation.isLoading}
           type="email"
+          autoComplete="email"
+          name="email"
           error={error}
         />
       );
@@ -407,6 +415,8 @@ export function Verification() {
           onContinue={handleSendPhone}
           isLoading={sendPhoneMutation.isLoading}
           type="tel"
+          autoComplete="tel"
+          name="phone"
           error={error}
         />
       );

packages/keychain/src/context/starterpack/onchain-purchase.tsx

@@ -255,6 +255,18 @@ export const OnchainPurchaseProvider = ({
     setDisplayError(undefined);
   }, [selectedToken, selectedWallet, setDisplayError]);
 
+  // Auto-select USDC when Apple Pay is selected
+  useEffect(() => {
+    if (isApplePaySelected && availableTokens.length > 0) {
+      const usdcToken = availableTokens.find(
+        (token) => token.symbol === "USDC",
+      );
+      if (usdcToken && selectedToken?.address !== usdcToken.address) {
+        setSelectedToken(usdcToken);
+      }
+    }
+  }, [isApplePaySelected, availableTokens, selectedToken, setSelectedToken]);
+
   // Wrap onSendDeposit to clear errors before sending
   const onSendDeposit = useCallback(async () => {
     setDisplayError(undefined);
@@ -475,7 +487,7 @@ export const OnchainPurchaseProvider = ({
     convertedPrice,
     swapQuote,
     isFetchingConversion,
-    isTokenSelectionLocked,
+    isTokenSelectionLocked: isTokenSelectionLocked || isApplePaySelected,
     conversionError,
     usdAmount,
     layerswapFees,