@upcoming/multichain-widget 0.2.0 → 0.4.0

package/README.md

@@ -1,12 +1,10 @@
-# Getting started
-
-## Installation
+# Installation
 
 ```
 npm install @upcoming/multichain-widget
 ```
 
-## Usage
+# Usage
 
 Import the component and accompanying styles:
 
@@ -22,7 +20,53 @@ Then simply place the component in your app:
 <MultichainWidget />
 ```
 
-The props `theme`, `hooks`, `settings` can be passed to customize the widget. To be documented.
+## Props and Query params
+
+It is possible to specify query params or pass some props to `<MultichainWidget />` to customize its behavior:
+
+### `theme`
+
+Colors, fonts, sizes, etc. can be overwritten by using this prop.
+
+Does not support query params.
+
+### `hooks`
+
+Callbacks can be specified for various events in the flow. The most important hook is the `onCompletion` hook, which is called when the flow is completed successfully.
+
+Applications embedding the widget and conditionally rendering it can use this hook to unmount the widget when the flow is done.
+
+Does not support query params.
+
+### `settings`
+
+Mainly used to customize the `gnosisJsonRpcProviders` array.
+
+Does not support query params.
+
+### `intent`
+
+The intent modifies the information text displayed on the first screen. Possible values are `initial-funding`, `postage-batch` and `arbitrary`.
+
+Can be specified in the query params with the `intent` key.
+
+### `destination`
+
+The default target address where the xBZZ and xDAI tokens will be sent.
+
+Can be specified in the query params with the `destination` key.
+
+### `dai`
+
+The default amount of xDAI to receive at the end of the flow.
+
+Can be specified in the query params with the `dai` key.
+
+### `bzz`
+
+The default amount of xBZZ to receive at the end of the flow.
+
+Can be specified in the query params with the `bzz` key.
 
 # Flow
 
@@ -32,11 +76,11 @@ The props `theme`, `hooks`, `settings` can be passed to customize the widget. To
 
 # Dependencies
 
-## Relay
+### Relay
 
 We use the Relay API to cross-swap to xDAI.
 
-## SushiSwap
+### SushiSwap
 
 We use SushiSwap contracts and its API to swap xDAI to xBZZ.
 
@@ -52,7 +96,9 @@ A backup of every generated private key is stored in `localStorage` with a times
 
 ## Recoverability
 
-It is OK if the flow errors out or the user navigates away. The app can detect which steps have been completed and resume from there.
+~~It is OK if the flow errors out or the user navigates away. The app can detect which steps have been completed and resume from there.~~
+
+This one is still under investigation. By having absolute amounts for xDAI and xBZZ initially, this used to work, but for the ideal UX we switched to relative amounts. This makes it much harder to guess whether there was a flow interruption or not.
 
 ## Reactivity
 

package/dist/{add-BrehTFvW.mjs → add-D9Yod8Yg.mjs}

@@ -1,4 +1,4 @@
-import { b as l } from "./core-CrknhIf6.mjs";
+import { w as l } from "./core-3Kalvvs_.mjs";
 const o = l`<svg
   width="14"
   height="14"

package/dist/{all-wallets-BttebWF1.mjs → all-wallets-CaHTLk_T.mjs}

@@ -1,4 +1,4 @@
-import { b as l } from "./core-CrknhIf6.mjs";
+import { w as l } from "./core-3Kalvvs_.mjs";
 const o = l`<svg fill="none" viewBox="0 0 24 24">
   <path
     style="fill: var(--wui-color-accent-100);"

package/dist/{app-store-BLAI-64m.mjs → app-store-B6Yo7YGz.mjs}

@@ -1,4 +1,4 @@
-import { b as t } from "./core-CrknhIf6.mjs";
+import { w as t } from "./core-3Kalvvs_.mjs";
 const e = t`
 <svg width="36" height="36">
   <path

package/dist/{apple-CkU5V0mT.mjs → apple-CMNoAIKC.mjs}

@@ -1,4 +1,4 @@
-import { b as l } from "./core-CrknhIf6.mjs";
+import { w as l } from "./core-3Kalvvs_.mjs";
 const f = l`<svg fill="none" viewBox="0 0 40 40">
   <g clip-path="url(#a)">
     <g clip-path="url(#b)">

package/dist/{ar_AR-CTNWGWSS-B2yhhasT.mjs → ar_AR-44JUQ6EW-DZr8TU0E.mjs}

@@ -214,11 +214,11 @@ var u = `{
     }
   },
   "wallet_connectors": {
-    "argent": {
+    "ready": {
       "qr_code": {
         "step1": {
-          "description": "ضع أرجنت على شاشتك الرئيسية للوصول السريع إلى محفظتك.",
-          "title": "افتح تطبيق Argent"
+          "description": "أضف Ready إلى شاشتك الرئيسية للوصول الأسرع إلى محفظتك.",
+          "title": "افتح تطبيق Ready"
         },
         "step2": {
           "description": "أنشئ محفظة واسم مستخدم، أو استورد محفظة موجودة بالفعل.",
@@ -400,6 +400,20 @@ var u = `{
           "description": "بعد الفحص، سيظهر لك موجه الاتصال لتوصيل المحفظة الخاصة بك.",
           "title": "اضغط على زر WalletConnect"
         }
+      },
+      "extension": {
+        "step1": {
+          "title": "ثبّت امتداد محفظة Binance",
+          "description": "نوصي بتثبيت محفظة Binance على شريط المهام للوصول الأسرع إلى محفظتك."
+        },
+        "step2": {
+          "title": "إنشاء أو استيراد محفظة",
+          "description": "تأكد من عمل نسخة احتياطية لمحفظتك باستخدام طريقة آمنة. لا تشارك عبارتك السرية مع أحد."
+        },
+        "step3": {
+          "title": "قم بتحديث متصفحك",
+          "description": "بمجرد إعداد محفظتك، انقر أدناه لتحديث المتصفح وتحميل الامتداد."
+        }
       }
     },
     "coin98": {
@@ -1130,19 +1144,19 @@ var u = `{
         }
       }
     },
-    "xdefi": {
+    "ctrl": {
       "extension": {
         "step1": {
-          "title": "قم بتثبيت إضافة XDEFI Wallet",
-          "description": "نوصي بتثبيت XDEFI Wallet على شريط المهام للوصول الأسرع إلى محفظتك."
+          "title": "قم بتثبيت إضافة CTRL Wallet",
+          "description": "نوصي بتثبيت CTRL Wallet على شريط المهام الخاص بك للوصول الأسرع إلى محفظتك."
         },
         "step2": {
-          "title": "أنشئ محفظة أو استورد محفظة",
-          "description": "تأكد من النسخ الاحتياطي لمحفظتك باستخدام طريقة آمنة. لا تشارك العبارة السرية الخاصة بك مع أي شخص."
+          "title": "إنشاء أو استيراد محفظة",
+          "description": "تأكد من عمل نسخة احتياطية لمحفظتك باستخدام طريقة آمنة. لا تشارك عبارتك السرية مع أحد."
         },
         "step3": {
-          "title": "قم بتحديث المستعرض الخاص بك",
-          "description": "بمجرد إعداد محفظتك، انقر أدناه لتحديث المتصفح وتحميل الإضافة."
+          "title": "قم بتحديث متصفحك",
+          "description": "بمجرد إعداد محفظتك، انقر أدناه لتحديث المتصفح وتحميل الامتداد."
         }
       }
     },
@@ -1374,6 +1388,36 @@ var u = `{
         }
       }
     },
+    "gemini": {
+      "qr_code": {
+        "step1": {
+          "title": "افتح keys.gemini.com",
+          "description": "قم بزيارة keys.gemini.com على متصفح الهاتف المحمول - لا يلزم تنزيل تطبيق."
+        },
+        "step2": {
+          "title": "أنشئ محفظتك فوراً",
+          "description": "قم بإعداد محفظتك الذكية في ثوانٍ باستخدام التحقق المبني في جهازك."
+        },
+        "step3": {
+          "title": "امسح للاتصال",
+          "description": "امسح رمز الاستجابة السريعة للاتصال بمحضتك فوراً - يعمل بكل سلاسة."
+        }
+      },
+      "extension": {
+        "step1": {
+          "title": "اذهب إلى keys.gemini.com",
+          "description": "لا حاجة لملحقات أو تنزيلات - محفظتك تبقى آمنة في المتصفح."
+        },
+        "step2": {
+          "title": "إعداد بنقرة واحدة",
+          "description": "أنشئ محفظتك الذكية فورًا باستخدام مصادقة المفتاح - أسهل من أي محفظة أخرى."
+        },
+        "step3": {
+          "title": "اتصل وانطلق",
+          "description": "قم بالموافقة على الاتصال وستكون جاهزًا - المحفظة الخالية من الآراء والتي تعمل بكل بساطة."
+        }
+      }
+    },
     "xportal": {
       "qr_code": {
         "step1": {
@@ -1405,21 +1449,37 @@ var u = `{
           "title": "اضغط على زر المسح"
         }
       }
-    }
-  },
-  "zilpay": {
-    "qr_code": {
-      "step1": {
-        "title": "افتح تطبيق ZilPay",
-        "description": "أضف ZilPay إلى شاشتك الرئيسية للوصول الأسرع إلى محفظتك."
-      },
-      "step2": {
-        "title": "إنشاء أو استيراد محفظة",
-        "description": "أنشئ محفظة جديدة أو استورد واحدة موجودة بالفعل."
-      },
-      "step3": {
-        "title": "اضغط على زر المسح",
-        "description": "بعد الفحص، سيظهر لك موجه الاتصال لتوصيل المحفظة الخاصة بك."
+    },
+    "zilpay": {
+      "qr_code": {
+        "step1": {
+          "title": "افتح تطبيق ZilPay",
+          "description": "أضف ZilPay إلى شاشتك الرئيسية للوصول الأسرع إلى محفظتك."
+        },
+        "step2": {
+          "title": "إنشاء أو استيراد محفظة",
+          "description": "أنشئ محفظة جديدة أو استورد واحدة موجودة بالفعل."
+        },
+        "step3": {
+          "title": "اضغط على زر المسح",
+          "description": "بعد الفحص، سيظهر لك موجه الاتصال لتوصيل المحفظة الخاصة بك."
+        }
+      }
+    },
+    "nova": {
+      "qr_code": {
+        "step1": {
+          "title": "افتح تطبيق محفظة Nova",
+          "description": "أضف محفظة Nova إلى الشاشة الرئيسية للوصول الأسرع إلى محفظتك."
+        },
+        "step2": {
+          "title": "إنشاء أو استيراد محفظة",
+          "description": "أنشئ محفظة جديدة أو استورد واحدة موجودة بالفعل."
+        },
+        "step3": {
+          "title": "اضغط على زر المسح",
+          "description": "بعد الفحص، سيظهر لك موجه الاتصال لتوصيل المحفظة الخاصة بك."
+        }
       }
     }
   }

package/dist/{arrow-bottom-V8TkUmV_.mjs → arrow-bottom-C2GTmF8J.mjs}

@@ -1,4 +1,4 @@
-import { b as o } from "./core-CrknhIf6.mjs";
+import { w as o } from "./core-3Kalvvs_.mjs";
 const e = o`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-bottom-circle-DCcOe409.mjs → arrow-bottom-circle-nCFjLlyV.mjs}

@@ -1,4 +1,4 @@
-import { b as C } from "./core-CrknhIf6.mjs";
+import { w as C } from "./core-3Kalvvs_.mjs";
 const e = C`<svg
   fill="none"
   viewBox="0 0 21 20"

package/dist/{arrow-left-DbARP9YM.mjs → arrow-left-DAnHMQue.mjs}

@@ -1,4 +1,4 @@
-import { b as e } from "./core-CrknhIf6.mjs";
+import { w as e } from "./core-3Kalvvs_.mjs";
 const o = e`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-right-DutHXxu2.mjs → arrow-right-DK6UF7Q8.mjs}

@@ -1,4 +1,4 @@
-import { b as l } from "./core-CrknhIf6.mjs";
+import { w as l } from "./core-3Kalvvs_.mjs";
 const e = l`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-top-DGUXC4sF.mjs → arrow-top-Cu_11Yy_.mjs}

@@ -1,4 +1,4 @@
-import { b as o } from "./core-CrknhIf6.mjs";
+import { w as o } from "./core-3Kalvvs_.mjs";
 const e = o`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{bank-Z2AjnoUe.mjs → bank-CzDxuuTo.mjs}

@@ -1,4 +1,4 @@
-import { b as e } from "./core-CrknhIf6.mjs";
+import { w as e } from "./core-3Kalvvs_.mjs";
 const o = e`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="12"

package/dist/baseAccount-44UITRK7-BPWMYfgK.mjs

@@ -0,0 +1,4 @@
+var C = "data:image/svg+xml,%3Csvg%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%207.584C0%204.98628%200%203.68742%200.489468%202.68829C0.958114%201.73167%201.73167%200.958114%202.68829%200.489468C3.68742%200%204.98628%200%207.584%200H88.416C91.0137%200%2092.3126%200%2093.3117%200.489468C94.2683%200.958114%2095.0419%201.73167%2095.5105%202.68829C96%203.68742%2096%204.98628%2096%207.584V88.416C96%2091.0137%2096%2092.3126%2095.5105%2093.3117C95.0419%2094.2683%2094.2683%2095.0419%2093.3117%2095.5105C92.3126%2096%2091.0137%2096%2088.416%2096H7.584C4.98628%2096%203.68742%2096%202.68829%2095.5105C1.73167%2095.0419%200.958114%2094.2683%200.489468%2093.3117C0%2092.3126%200%2091.0137%200%2088.416V7.584Z%22%20fill%3D%22%230000FF%22%2F%3E%0A%3C%2Fsvg%3E%0A";
+export {
+  C as default
+};