this is getting painful, need a build target generator script

Author: zfedoran

packages/elements/example/index.html

@@ -21,6 +21,8 @@
     <span id="button-tip1"></span>
   </div>
 
+  <span id="page-tip3"></span>
+
   <script type="module">
     import code from '../src/index';
 
@@ -90,6 +92,26 @@
       button.mount(id);
     }
 
+    /*
+    function mount_page(id) {
+      const options = {
+        mode: 'tip',
+        platform: {
+          name: 'twitter',
+          username: 'getcode'
+        }
+      }
+
+      const { page } = code.elements.create('page', options);
+
+      page.on('error', (e) => { console.log('sdk-error', e); });
+      page.on('cancel', (e) => { console.log('sdk-cancel', e); });
+
+      page.mount(id);
+    }
+    mount_page('#page-tip3');
+    */
+
     mount_payment('#button-pay1', 'light');
     mount_payment('#button-pay2', 'dark');
 
@@ -99,6 +121,7 @@
     mount_tip('#button-tip1', 'light');
     mount_tip('#button-tip2', 'dark');
 
+
   </script>
 </body>
 

packages/elements/src/components/elements/IntentRequestModalDesktop.vue

@@ -6,7 +6,10 @@
 
     const config = useConfig();
     const options = inject<ElementOptions>('options');
-    const mode = options?.mode ?? 'payment';
+
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
 
     const emit = defineEmits([
         'codeScanned',
@@ -20,7 +23,9 @@
     ]);
 
     const channel = new EventChannel<InternalEvents>();
-    const url = `${config.codeSdk()}/${mode}-request-modal-desktop/#/${channel.id}/p=${encode(options)}`;
+    const mode = options?.mode ?? 'payment';
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-desktop/#/${channel.id}/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     console.log('url', url);
@@ -79,9 +84,10 @@
 
     function getStyle() : { [key:string]: string } {
         const _ = (v:string) => v + ' !important';
+        const inset = { inset: _('0'), top: _('0'), left: _('0'), right: _('0'), bottom: _('0'), }
         return {
+            ...inset,
             position: _('fixed'),
-            inset: _('0'),
             zIndex: _('2147483647'),
             overflow: _('hidden'),
             width: _('100dvw'),

packages/elements/src/components/elements/IntentRequestModalMobile.vue

@@ -8,6 +8,10 @@
     const options = inject<ElementOptions>('options');
     const mode = options?.mode ?? 'payment';
 
+    const props = defineProps<{
+        asPage?: boolean,
+    }>();
+
     const emit = defineEmits([
         'codeScanned',
         'clientRejectedPayment',
@@ -20,7 +24,8 @@
     ]);
 
     const channel = new EventChannel<InternalEvents>();
-    const url = `${config.codeSdk()}/${mode}-request-modal-mobile/#/${channel.id}/p=${encode(options)}`;
+    const kind = props.asPage ? 'page' : 'modal';
+    const url = `${config.codeSdk()}/${mode}-request-${kind}-mobile/#/${channel.id}/p=${encode(options)}`;
     const el = ref<HTMLIFrameElement | null>(null);
 
     channel.on('codeScanned' , () => { emit('codeScanned'); });
@@ -82,9 +87,10 @@
 
     function getStyle() : { [key:string]: string } {
         const _ = (v:string) => v + ' !important';
+        const inset = { inset: _('0'), top: _('0'), left: _('0'), right: _('0'), bottom: _('0'), }
         return {
+            ...inset,
             position: _('fixed'),
-            inset: _('0'),
             zIndex: _('2147483647'),
             overflow: _('hidden'),
             width: _('100dvw'),

packages/elements/src/components/flows/ButtonFlow.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Ref, inject, nextTick, ref } from 'vue';
+import { Ref, inject, nextTick, reactive, ref } from 'vue';
 import { 
   ElementEventEmitter, 
   ElementOptions, 
   ExternalPlatformOptions, 
   LoginRequestIntent, 
   LoginRequestOptions, 
   PaymentRequestIntent,
-PaymentRequestOptions,
-TipRequestIntent
+  PaymentRequestOptions,
+  TipRequestIntent
 } from '@code-wallet/intents';
 import { EventChannel, InternalEvents } from '@code-wallet/events';
 import * as code from "@code-wallet/client";
@@ -26,15 +26,19 @@ import {
 
 import { isMobileDevice } from '../../utils/user-agent';
 import { getURLParam } from '../../utils/url';
+import { sleep } from '../../utils/delay';
 
 const fadeDuration = 500; // Animation duration in milliseconds (we use this to delay emitting events)
-const sleep = (ms:number) => new Promise(resolve => setTimeout(resolve, ms));
+
 const options = inject<ElementOptions>('options');
 const sdkEmit = inject<ElementEventEmitter>('emit', async () => false);
 const channel : Ref<EventChannel<InternalEvents> | null> = ref(null);
-const intent = ref<string | null>(null);
-const open = ref(false);
-const mobile = isMobileDevice();
+
+const state = reactive({
+  intent: null as string | null,
+  open: false,
+  mobile: isMobileDevice(),
+});
 
 // We're going to try to guess these values later, so we have to keep track of
 // whether or not the user has provided them before we do that.
@@ -63,7 +67,7 @@ function onChannelCreated(val: EventChannel<InternalEvents>) {
 }
 
 async function onInvoke() {
-  open.value = true;
+  state.open = true;
 
   // Wait for the modal to be mounted, this is necessary because we need to wait
   // for the iframe to be mounted before we can get the channel for it.
@@ -78,27 +82,27 @@ async function onInvoke() {
   // Invoke user code, if the user returns true, we'll cancel the invocation
   const preventAction = await sdkEmit('invoke');
   if (preventAction) {
-    open.value = false;
+    state.open = false;
     return;
   }
 
   // Get the intent id from the receiving app or iframe
   switch (options.mode) {
     case 'login':
-      intent.value = new LoginRequestIntent(options as ElementOptions & LoginRequestOptions).getIntentId();
+      state.intent = new LoginRequestIntent(options as ElementOptions & LoginRequestOptions).getIntentId();
       break;
     case 'payment':
-      intent.value = new PaymentRequestIntent(options as ElementOptions & PaymentRequestOptions).getIntentId();
+      state.intent = new PaymentRequestIntent(options as ElementOptions & PaymentRequestOptions).getIntentId();
       break;
     case 'tip':
-      intent.value = new TipRequestIntent(options as ElementOptions & ExternalPlatformOptions).getIntentId();
+      state.intent = new TipRequestIntent(options as ElementOptions & ExternalPlatformOptions).getIntentId();
       break;
     default:
       throw new Error('Invalid mode');
   }
 
   const variables = {
-    INTENT_ID: intent.value,
+    INTENT_ID: state.intent,
     // ...
   }
 
@@ -125,13 +129,13 @@ async function onInvoke() {
 }
 
 async function onSuccess() {
-  open.value = false;
+  state.open = false;
 
   // Ensure that the modal is fully closed before emitting events
   await sleep(fadeDuration); 
 
   const url = options?.confirmParams?.success?.url;
-  const preventAction = await sdkEmit('success', { url, options, intent: intent.value });
+  const preventAction = await sdkEmit('success', { url, options, intent: state.intent });
   if (preventAction) {
     return;
   }
@@ -142,13 +146,13 @@ async function onSuccess() {
 }
 
 async function onCancel() {
-  open.value = false;
+  state.open = false;
 
   // Ensure that the modal is fully closed before emitting events
   await sleep(fadeDuration);
 
   const url = options?.confirmParams?.cancel?.url;
-  const preventAction = await sdkEmit('cancel', { url, options, intent: intent.value });
+  const preventAction = await sdkEmit('cancel', { url, options, intent: state.intent });
   if (preventAction) {
     return;
   }
@@ -164,23 +168,23 @@ async function onError(err: any) {
 }
 
 async function onStreamTimeout() {
-  open.value = false;
+  state.open = false;
   await onError('stream_timed_out');
 }
 
 async function onStreamClosed() {
-  open.value = false;
+  state.open = false;
   await onError('stream_closed');
 }
 
 // Add an event listener for the 'visibilitychange' event
 document.addEventListener("visibilitychange", async () => {
   if (document.visibilityState === "visible") {
-    if (!intent.value) { return; }
+    if (!state.intent) { return; }
 
     // Background tabs that might miss the 'intent-submitted' event, so we need
     // to check if the intent has been confirmed when the tab becomes visible.
-    const { status } = await code.paymentIntents.getStatus({ intent: intent.value }); 
+    const { status } = await code.paymentIntents.getStatus({ intent: state.intent }); 
 
     if (status === 'confirmed') {
       onSuccess();
@@ -195,9 +199,9 @@ document.addEventListener("visibilitychange", async () => {
       @invoke="onInvoke" />
 
     <Teleport to="body">
-      <div v-if="open">
+      <div v-if="state.open">
         <IntentRequestModalMobile
-          v-if="mobile"
+          v-if="state.mobile"
           @channel-created="onChannelCreated"
           @intent-submitted="onSuccess"
           @client-rejected-payment="onCancel"
@@ -219,7 +223,7 @@ document.addEventListener("visibilitychange", async () => {
         />
       </div>
       <div v-else>
-        <PreloadIntentRequestModalMobile v-if="mobile" />
+        <PreloadIntentRequestModalMobile v-if="state.mobile" />
         <PreloadIntentRequestModalDesktop v-else />
       </div>
     </Teleport>