@upcoming/multichain-widget 0.1.5 → 0.3.0

package/README.md

@@ -1,3 +1,73 @@
+# Installation
+
+```
+npm install @upcoming/multichain-widget
+```
+
+# Usage
+
+Import the component and accompanying styles:
+
+```ts
+import '@rainbow-me/rainbowkit/styles.css'
+import { MultichainWidget } from '@upcoming/multichain-widget'
+import '@upcoming/multichain-widget/styles.css'
+```
+
+Then simply place the component in your app:
+
+```tsx
+<MultichainWidget />
+```
+
+## 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
 
 1. Cross-swap a token to xDAI using Relay, goes to a temporary wallet.
@@ -6,11 +76,11 @@
 
 # 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.
 
@@ -26,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
 
@@ -38,46 +110,6 @@ Hooks can be set by passing `hooks` prop to the `MultichainWidget` component. Cu
 
 # Known issues / Remaining tasks
 
-## Absolute amounts
-
-The specified xBZZ amount is absolute, not relative. For example, if the user already has 90 xBZZ, they would have to specify 100 xBZZ to receive 10 more.
-
-## No quote available on Relay
-
-This can happen when the amount is too low or too high. May happen more frequently with unpopular tokens.
-
-## SushiSwap transaction failure
-
-This can happen when Gnosis experiences a sudden spike in gas prices.
-
-## xDAI source support
-
-The end user will not receive any quotes if they attempt to use xDAI as the source token. This is because in this case, we attempt to get a quote from xDAI to xDAI.
-
-## Add slippage and fee considerations
-
-The resulting xBZZ and xDAI and currently lower than expected due to fees and slippage. This can never be fully eliminated, and for the MVP a fixed 5% buffer is recommended.
-
-## Network check
-
-The app currently does not check if the user is on the correct network. This leads to failed transactions.
-
-## JSON-RPC provider array
-
-Allow passing an array of JSON-RPC providers to increase reliability.
-
-## Retriable requests
-
-Some requests can fail due to temporary JSON-RPC issues. These should be retried a few times before giving up.
-
-## Gas spike handling
-
-There is an error which is easy to detect: `Details: FeeTooLow, EffectivePriorityFeePerGas too low 0 < 1, BaseFee: 2783571`. This should be handled by retrying the transaction with a higher gas price.
-
 ## React version dependency
 
 It seems that the app only works with React 18+. This may not be compatible with Bee Dashboard using React 17 (due to Material UI 4 dependency). It would be best to upgrade Bee Dashboard to React 18 and Material UI 5. React 18 is already 4 years old.
-
-## Implement other intents
-
-Only the "initial funding" intent is implemented. Other intents should be implemented as well, e.g. "get funds for postage batch", "free funding", etc.

package/dist/Intent.d.ts

@@ -0,0 +1,5 @@
+export type Intent = 'initial-funding' | 'postage-batch' | 'arbitrary';
+export declare function getAmountsForIntent(_intent: Intent): {
+    bzzAmount: number;
+    nativeAmount: number;
+};

package/dist/MultichainTheme.d.ts

@@ -7,6 +7,7 @@ export interface MultichainTheme {
     fontFamily: string;
     smallFontSize: string;
     smallFontWeight: number;
+    secondaryTextColor: string;
     inputBackgroundColor: string;
     inputBorderColor: string;
     inputTextColor: string;

package/dist/Router.d.ts

@@ -1,10 +1,15 @@
 import { MultichainLibrary } from '@upcoming/multichain-library';
+import { Intent } from './Intent';
 import { MultichainHooks } from './MultichainHooks';
 import { MultichainTheme } from './MultichainTheme';
 interface Props {
     theme: MultichainTheme;
     hooks: MultichainHooks;
     library: MultichainLibrary;
+    intent: Intent;
+    destination: string;
+    dai: number;
+    bzz: number;
 }
-export declare function Router({ theme, hooks, library }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Router({ theme, hooks, library, intent, destination, dai, bzz }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tab1.d.ts

@@ -1,11 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
+import { Intent } from './Intent';
 import { MultichainTheme } from './MultichainTheme';
 import { SwapData } from './SwapData';
 interface Props {
     theme: MultichainTheme;
+    intent: Intent;
     setTab: (tab: 1 | 2) => void;
     swapData: SwapData;
     setSwapData: Dispatch<SetStateAction<SwapData>>;
+    setInitialChainId: Dispatch<SetStateAction<number | null>>;
 }
-export declare function Tab1({ theme, setTab, swapData, setSwapData }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Tab1({ theme, intent, setTab, swapData, setSwapData, setInitialChainId }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tab2.d.ts

@@ -7,7 +7,8 @@ interface Props {
     hooks: MultichainHooks;
     setTab: (tab: 1 | 2) => void;
     swapData: SwapData;
+    initialChainId: number;
     library: MultichainLibrary;
 }
-export declare function Tab2({ theme, hooks, setTab, swapData, library }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Tab2({ theme, hooks, setTab, swapData, initialChainId, library }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Utility.d.ts

@@ -0,0 +1 @@
+export declare function shortenHash(hash: string, length?: number): string;

package/dist/{add-DCmjdKhv.mjs → add-DKTOrhmM.mjs}

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

package/dist/{all-wallets-BenOl5cn.mjs → all-wallets-aYzIazvp.mjs}

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

package/dist/{app-store-BAxV9Oss.mjs → app-store-CKrxMlxU.mjs}

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

package/dist/{apple-Js7x0n29.mjs → apple-CJFbfjqC.mjs}

@@ -1,4 +1,4 @@
-import { b as l } from "./core-L3uBGNm9.mjs";
+import { w as l } from "./core-BSjxlOS1.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-C8mDCNTG.mjs → arrow-bottom-6hVe7wm0.mjs}

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

package/dist/{arrow-bottom-circle-Dr2y1qr6.mjs → arrow-bottom-circle-_rfKaesm.mjs}

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

package/dist/{arrow-left-DHVTMU70.mjs → arrow-left-vFsMFs5X.mjs}

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

package/dist/{arrow-right-CIl_WFc-.mjs → arrow-right-DNmCe1hl.mjs}

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

package/dist/{arrow-top-CLhr_7rE.mjs → arrow-top-3kV0--PO.mjs}

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

package/dist/{bank-9jFrSkdD.mjs → bank-UC0Wo-M3.mjs}

@@ -1,4 +1,4 @@
-import { b as e } from "./core-L3uBGNm9.mjs";
+import { w as e } from "./core-BSjxlOS1.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
+};