[BA-3103] Utility for creating a link (deeplink, universal link, standard link) with a prolink

examples/testapp/src/pages/prolink-playground/index.page.tsx

@@ -1,4 +1,4 @@
-import { decodeProlink, encodeProlink } from '@base-org/account';
+import { createProlinkUrl, decodeProlink, encodeProlink } from '@base-org/account';
 import {
   Accordion,
   AccordionButton,
@@ -107,6 +107,8 @@ export default function ProlinkPlayground() {
   const [encodedPayload, setEncodedPayload] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [decodedResult, setDecodedResult] = useState<unknown>(null);
+  const [urlWithProlink, setUrlWithProlink] = useState('');
+  const [baseUrl, setBaseUrl] = useState('https://base.app/base-pay');
 
   // Decode section
   const [decodeInput, setDecodeInput] = useState('');
@@ -213,6 +215,10 @@ export default function ProlinkPlayground() {
       const payload = await encodeProlink(request);
       setEncodedPayload(payload);
 
+      // Generate universal link
+      const { link } = createProlinkUrl(payload, baseUrl);
+      setUrlWithProlink(link);
+
       // Decode to verify
       const decoded = await decodeProlink(payload);
       setDecodedResult(decoded);
@@ -247,6 +253,16 @@ export default function ProlinkPlayground() {
     });
   };
 
+  const copyUniversalLinkToClipboard = () => {
+    navigator.clipboard.writeText(urlWithProlink);
+    toast({
+      title: 'Copied!',
+      description: 'Universal link copied to clipboard',
+      status: 'success',
+      duration: 2000,
+    });
+  };
+
   const decodePayload = async () => {
     setDecodeLoading(true);
     setDecodeError(null);
@@ -532,6 +548,19 @@ export default function ProlinkPlayground() {
 
                   <Divider />
 
+                  {/* Base App Environment */}
+                  <FormControl>
+                    <FormLabel>Base URL</FormLabel>
+                    <Input
+                      type="url"
+                      value={baseUrl}
+                      onChange={(e) => setBaseUrl(e.target.value)}
+                      placeholder="https://base.app/base-pay"
+                    />
+                  </FormControl>
+
+                  <Divider />
+
                   {/* Capabilities */}
                   <Accordion allowToggle>
                     <AccordionItem>
@@ -615,6 +644,7 @@ export default function ProlinkPlayground() {
                       <Tabs>
                         <TabList>
                           <Tab>Encoded Payload</Tab>
+                          <Tab>Universal Link</Tab>
                           <Tab>Decoded Result</Tab>
                         </TabList>
 
@@ -637,6 +667,26 @@ export default function ProlinkPlayground() {
                             </VStack>
                           </TabPanel>
 
+                          {/* Universal Link Tab */}
+                          <TabPanel>
+                            <VStack spacing={4} align="stretch">
+                              <HStack>
+                                <Button size="sm" onClick={copyUniversalLinkToClipboard}>
+                                  Copy Link
+                                </Button>
+                              </HStack>
+                              <Box p={4} bg={codeBgColor} borderRadius="md" overflowX="auto">
+                                <Code display="block" whiteSpace="pre-wrap" wordBreak="break-all">
+                                  {urlWithProlink}
+                                </Code>
+                              </Box>
+                              <Text fontSize="sm" color="gray.600">
+                                This link with the prolink can be opened in the Base App to execute
+                                the transaction.
+                              </Text>
+                            </VStack>
+                          </TabPanel>
+
                           {/* Decoded Result Tab */}
                           <TabPanel>
                             <Box p={4} bg={codeBgColor} borderRadius="md" overflowX="auto">
@@ -720,7 +770,15 @@ export default function ProlinkPlayground() {
                       <>
                         <HStack>
                           <Text fontWeight="bold">Method:</Text>
-                          <Text>{(decodeResult as { method: string }).method}</Text>
+                          <Text>
+                            {
+                              (
+                                decodeResult as {
+                                  method: string;
+                                }
+                              ).method
+                            }
+                          </Text>
                           <Button size="sm" onClick={copyDecodedToClipboard}>
                             Copy JSON
                           </Button>

packages/account-sdk/src/index.ts

@@ -1,21 +1,28 @@
 // Copyright (c) 2018-2025 Coinbase, Inc. <https://www.coinbase.com/>
-export type { AppMetadata, Preference, ProviderInterface } from ':core/provider/interface.js';
+export type {
+  AppMetadata,
+  Preference,
+  ProviderInterface,
+} from ':core/provider/interface.js';
 
 export { createBaseAccountSDK } from './interface/builder/core/createBaseAccountSDK.js';
 
-export { getCryptoKeyAccount, removeCryptoKey } from './kms/crypto-key/index.js';
+export {
+  getCryptoKeyAccount,
+  removeCryptoKey,
+} from './kms/crypto-key/index.js';
 
 export { PACKAGE_VERSION as VERSION } from './core/constants.js';
 
 export {
-  CHAIN_IDS,
-  TOKENS,
   base,
+  CHAIN_IDS,
   getPaymentStatus,
   getSubscriptionStatus,
   pay,
   prepareCharge,
   subscribe,
+  TOKENS,
 } from './interface/payment/index.js';
 export type {
   ChargeOptions,
@@ -40,5 +47,12 @@ export type {
   SubscriptionStatusOptions,
 } from './interface/payment/index.js';
 
-export { decodeProlink, encodeProlink } from './interface/public-utilities/prolink/index.js';
-export type { ProlinkDecoded, ProlinkRequest } from './interface/public-utilities/prolink/index.js';
+export {
+  createProlinkUrl,
+  decodeProlink,
+  encodeProlink,
+} from './interface/public-utilities/prolink/index.js';
+export type {
+  ProlinkDecoded,
+  ProlinkRequest,
+} from './interface/public-utilities/prolink/index.js';