Feature: Integrated platform tips

packages/client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/client",
-    "version": "2.0.8",
+    "version": "2.0.9",
     "license": "MIT",
     "repository": {
         "type": "git",

packages/client/src/utils/createIntent.ts

@@ -1,14 +1,17 @@
-import { Client } from "../client";
-import { Intent, } from "@code-wallet/intents";
 import * as proto from "@code-wallet/rpc";
+import { Intent, IntentWithMessage } from "@code-wallet/intents";
+import { Client } from "../client";
 import { ErrUnexpectedError } from "../errors";
 
 async function createIntent(intent: Intent, client: Client) {
-    const msg = await intent.getSendMessageRequestProto()
-    const res = await client.send(proto.Messaging, 'sendMessage', msg);
+    if (intent.hasMessage()) {
+        const withMessage = intent as IntentWithMessage;
+        const msg = await withMessage.getSendMessageRequestProto();
+        const res = await client.send(proto.Messaging, 'sendMessage', msg);
 
-    if (res.result !== proto.SendMessageResponse_Result.OK) {
-        ErrUnexpectedError();
+        if (res.result !== proto.SendMessageResponse_Result.OK) {
+            ErrUnexpectedError();
+        }
     }
 
     return {

packages/elements/example/index.html

@@ -12,13 +12,17 @@
   <div style="padding: 10%; background-color: lightgray;">
     <span id="button-pay2"></span>
     <span id="button-login2"></span>
+    <span id="button-tip2"></span>
   </div>
 
   <div style="padding: 10%; background-color: black;">
     <span id="button-pay1"></span>
     <span id="button-login1"></span>
+    <span id="button-tip1"></span>
   </div>
 
+  <span id="page-tip3"></span>
+
   <script type="module">
     import code from '../src/index';
 
@@ -70,10 +74,54 @@
       button.mount(id);
     }
 
+    function mount_tip(id, appearance) {
+      const options = {
+        appearance,
+        mode: 'tip',
+        platform: {
+          name: 'twitter',
+          username: 'getcode'
+        }
+      }
+
+      const { button } = code.elements.create('button', options);
+
+      button.on('error', (e) => { console.log('sdk-error', e); });
+      button.on('cancel', (e) => { console.log('sdk-cancel', e); });
+
+      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');
+
     mount_login('#button-login1', 'light');
     mount_login('#button-login2', 'dark');
+
+    mount_tip('#button-tip1', 'light');
+    mount_tip('#button-tip2', 'dark');
+
+
   </script>
 </body>
 

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@code-wallet/elements",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "license": "MIT",
     "repository": {
         "type": "git",

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'),