@layerswap/widget 0.1.16 → 0.1.17-beta.9

package/dist/Models/Theme.d.ts

@@ -8,7 +8,7 @@ export type ThemeData = {
     secondary?: ThemeColor;
     headerLogo?: string;
     footerLogoHeight?: string;
-    footerSticky?: boolean;
+    enablePortal?: boolean;
     borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'extraLarge' | 'default';
 };
 export type ThemeColor = {

package/dist/Models/Theme.js

@@ -1,24 +1,24 @@
 export const THEME_COLORS = {
-    "imxMarketplace": {
-        backdrop: "0, 121, 133",
-        actionButtonText: '0, 0, 0',
-        buttonTextColor: '255, 255, 255',
+    "default": {
+        backdrop: "62, 18, 64",
         placeholderText: '140, 152, 192',
-        logo: '255, 255, 255',
+        actionButtonText: '254, 255, 254',
+        buttonTextColor: '228, 229, 240',
+        logo: '255, 0, 147',
         borderRadius: 'small',
         primary: {
-            DEFAULT: '46, 236, 255',
-            '50': '230, 253, 255',
-            '100': '209, 251, 255',
-            '200': '168, 247, 255',
-            '300': '128, 243, 255',
-            '400': '87, 240, 255',
-            '500': '46, 236, 255',
-            '600': '0, 232, 255',
-            '700': '0, 172, 189',
-            '800': '0, 121, 133',
-            '900': '0, 70, 77',
-            'text': '255, 255, 255',
+            DEFAULT: '228, 37, 117',
+            '50': '248, 200, 220',
+            '100': '246, 182, 209',
+            '200': '241, 146, 186',
+            '300': '237, 110, 163',
+            '400': '232, 73, 140',
+            '500': '228, 37, 117',
+            '600': '166, 51, 94',
+            '700': '136, 17, 67',
+            '800': '147, 8, 99',
+            '900': '110, 0, 64',
+            'text': '254, 255, 254',
             'textMuted': '86, 97, 123',
         },
         secondary: {
@@ -34,47 +34,8 @@ export const THEME_COLORS = {
             '800': '15, 25, 47',
             '900': '12, 21, 39',
             '950': '11, 17, 35',
-            'text': '209, 251, 255',
-        },
-    },
-    "ea7df14a1597407f9f755f05e25bab42": {
-        backdrop: "0, 121, 133",
-        placeholderText: '198, 242, 246',
-        actionButtonText: '0, 0, 0',
-        buttonTextColor: '255, 255, 255',
-        logo: '255, 255, 255',
-        borderRadius: 'small',
-        primary: {
-            DEFAULT: '128, 226, 235',
-            '50': '255, 255, 255',
-            '100': '255, 255, 255',
-            '200': '234, 250, 252',
-            '300': '198, 242, 246',
-            '400': '163, 234, 241',
-            '500': '128, 226, 235',
-            '600': '80, 215, 227',
-            '700': '34, 201, 217',
-            '800': '26, 156, 168',
-            '900': '19, 111, 120',
-            '950': '15, 89, 96',
-            'text': '255, 255, 255',
-            'textMuted': '86, 97, 123',
+            'text': '171, 181, 209',
         },
-        secondary: {
-            DEFAULT: '46, 89, 112',
-            '50': '193, 217, 230',
-            '100': '179, 208, 224',
-            '200': '150, 191, 212',
-            '300': '121, 173, 200',
-            '400': '92, 155, 188',
-            '500': '34, 66, 83',
-            '600': '16, 35, 49',
-            '700': '15, 29, 39',
-            '800': '34, 66, 83',
-            '900': '22, 43, 54',
-            '950': '14, 27, 34',
-            'text': '209, 251, 255',
-        }
     },
     "light": {
         placeholderText: '134, 134, 134',
@@ -113,26 +74,26 @@ export const THEME_COLORS = {
             'text': '108, 108, 108',
         },
     },
-    "default": {
-        backdrop: "62, 18, 64",
+    "imxMarketplace": {
+        backdrop: "0, 121, 133",
+        actionButtonText: '0, 0, 0',
+        buttonTextColor: '255, 255, 255',
         placeholderText: '140, 152, 192',
-        actionButtonText: '254, 255, 254',
-        buttonTextColor: '228, 229, 240',
-        logo: '255, 0, 147',
+        logo: '255, 255, 255',
         borderRadius: 'small',
         primary: {
-            DEFAULT: '228, 37, 117',
-            '50': '248, 200, 220',
-            '100': '246, 182, 209',
-            '200': '241, 146, 186',
-            '300': '237, 110, 163',
-            '400': '232, 73, 140',
-            '500': '228, 37, 117',
-            '600': '166, 51, 94',
-            '700': '136, 17, 67',
-            '800': '147, 8, 99',
-            '900': '110, 0, 64',
-            'text': '254, 255, 254',
+            DEFAULT: '46, 236, 255',
+            '50': '230, 253, 255',
+            '100': '209, 251, 255',
+            '200': '168, 247, 255',
+            '300': '128, 243, 255',
+            '400': '87, 240, 255',
+            '500': '46, 236, 255',
+            '600': '0, 232, 255',
+            '700': '0, 172, 189',
+            '800': '0, 121, 133',
+            '900': '0, 70, 77',
+            'text': '255, 255, 255',
             'textMuted': '86, 97, 123',
         },
         secondary: {
@@ -148,9 +109,48 @@ export const THEME_COLORS = {
             '800': '15, 25, 47',
             '900': '12, 21, 39',
             '950': '11, 17, 35',
-            'text': '171, 181, 209',
+            'text': '209, 251, 255',
         },
     },
+    "ea7df14a1597407f9f755f05e25bab42": {
+        backdrop: "0, 121, 133",
+        placeholderText: '198, 242, 246',
+        actionButtonText: '0, 0, 0',
+        buttonTextColor: '255, 255, 255',
+        logo: '255, 255, 255',
+        borderRadius: 'small',
+        primary: {
+            DEFAULT: '128, 226, 235',
+            '50': '255, 255, 255',
+            '100': '255, 255, 255',
+            '200': '234, 250, 252',
+            '300': '198, 242, 246',
+            '400': '163, 234, 241',
+            '500': '128, 226, 235',
+            '600': '80, 215, 227',
+            '700': '34, 201, 217',
+            '800': '26, 156, 168',
+            '900': '19, 111, 120',
+            '950': '15, 89, 96',
+            'text': '255, 255, 255',
+            'textMuted': '86, 97, 123',
+        },
+        secondary: {
+            DEFAULT: '46, 89, 112',
+            '50': '193, 217, 230',
+            '100': '179, 208, 224',
+            '200': '150, 191, 212',
+            '300': '121, 173, 200',
+            '400': '92, 155, 188',
+            '500': '34, 66, 83',
+            '600': '16, 35, 49',
+            '700': '15, 29, 39',
+            '800': '34, 66, 83',
+            '900': '22, 43, 54',
+            '950': '14, 27, 34',
+            'text': '209, 251, 255',
+        }
+    },
     "evmos": {
         placeholderText: '128, 110, 107',
         actionButtonText: '254, 255, 254',

package/dist/components/ColorSchema.js

@@ -39,6 +39,7 @@ const ColorSchema = ({ themeData }) => {
                     --ls-border-radius-md: ${adjustBorderRadius('medium', borderRadius)};
                     --ls-border-radius-lg: ${adjustBorderRadius('large', borderRadius)};
                     --ls-border-radius-xl: ${adjustBorderRadius('extraLarge', borderRadius)};
+                    --ls-border-radius-full: 9999px;
                     --ls-border-radius-default: ${adjustBorderRadius('small', borderRadius)};
 
                     --ls-colors-backdrop: ${backdrop};

package/dist/components/Common/{AddressIcon.js → AddressIcon/index.js}

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import Jazzicon from "@metamask/jazzicon";
+import Jazzicon from "./jazzicon";
 import { useEffect, useRef } from "react";
 const AddressIcon = ({ address, size, className }) => {
     const ref = useRef(null);

package/dist/components/Common/AddressIcon/jazzicon/colors.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string[];
+export = _exports;

package/dist/components/Common/AddressIcon/jazzicon/colors.js

@@ -0,0 +1,12 @@
+module.exports = [
+    '#01888C', // teal
+    '#FC7500', // bright orange
+    '#034F5D', // dark teal
+    '#F73F01', // orangered
+    '#FC1960', // magenta
+    '#C7144C', // raspberry
+    '#F3C100', // goldenrod
+    '#1598F2', // lightning blue
+    '#2465E1', // sail blue
+    '#F19E02', // gold
+];

package/dist/components/Common/AddressIcon/jazzicon/index.d.ts

@@ -0,0 +1,2 @@
+export = generateIdenticon;
+declare function generateIdenticon(diameter: any, seed: any): HTMLDivElement;

package/dist/components/Common/AddressIcon/jazzicon/index.js

@@ -0,0 +1,62 @@
+var MersenneTwister = require('./mersenne-twister');
+var paperGen = require('./paper');
+var Color = require('color');
+var colors = require('./colors');
+var shapeCount = 4;
+var svgns = 'http://www.w3.org/2000/svg';
+module.exports = generateIdenticon;
+var generator;
+function generateIdenticon(diameter, seed) {
+    generator = new MersenneTwister(seed);
+    var remainingColors = hueShift(colors.slice(), generator);
+    var elements = paperGen(diameter, genColor(remainingColors));
+    var container = elements.container;
+    var svg = document.createElementNS(svgns, 'svg');
+    svg.setAttributeNS(null, 'x', '0');
+    svg.setAttributeNS(null, 'y', '0');
+    svg.setAttributeNS(null, 'width', diameter);
+    svg.setAttributeNS(null, 'height', diameter);
+    container.appendChild(svg);
+    for (var i = 0; i < shapeCount - 1; i++) {
+        genShape(remainingColors, diameter, i, shapeCount - 1, svg);
+    }
+    return container;
+}
+function genShape(remainingColors, diameter, i, total, svg) {
+    var center = diameter / 2;
+    var shape = document.createElementNS(svgns, 'rect');
+    shape.setAttributeNS(null, 'x', '0');
+    shape.setAttributeNS(null, 'y', '0');
+    shape.setAttributeNS(null, 'width', diameter);
+    shape.setAttributeNS(null, 'height', diameter);
+    var firstRot = generator.random();
+    var angle = Math.PI * 2 * firstRot;
+    var velocity = diameter / total * generator.random() + (i * diameter / total);
+    var tx = (Math.cos(angle) * velocity);
+    var ty = (Math.sin(angle) * velocity);
+    var translate = 'translate(' + tx + ' ' + ty + ')';
+    // Third random is a shape rotation on top of all of that.
+    var secondRot = generator.random();
+    var rot = (firstRot * 360) + secondRot * 180;
+    var rotate = 'rotate(' + rot.toFixed(1) + ' ' + center + ' ' + center + ')';
+    var transform = translate + ' ' + rotate;
+    shape.setAttributeNS(null, 'transform', transform);
+    var fill = genColor(remainingColors);
+    shape.setAttributeNS(null, 'fill', fill);
+    svg.appendChild(shape);
+}
+function genColor(colors) {
+    var rand = generator.random();
+    var idx = Math.floor(colors.length * generator.random());
+    var color = colors.splice(idx, 1)[0];
+    return color;
+}
+var wobble = 30;
+function hueShift(colors, generator) {
+    var amount = (generator.random() * 30) - (wobble / 2);
+    return colors.map(function (hex) {
+        var color = Color(hex);
+        color.rotate(amount);
+        return color.hex();
+    });
+}

package/dist/components/Common/AddressIcon/jazzicon/mersenne-twister.d.ts

@@ -0,0 +1,28 @@
+export = MersenneTwister;
+/**
+ * @constructor
+ * @param {number|Array<number>} [seed] - Optional seed for the random number generator
+ */
+declare function MersenneTwister(seed?: number | Array<number>): void;
+declare class MersenneTwister {
+    /**
+     * @constructor
+     * @param {number|Array<number>} [seed] - Optional seed for the random number generator
+     */
+    constructor(seed?: number | Array<number>);
+    N: number;
+    M: number;
+    MATRIX_A: number;
+    UPPER_MASK: number;
+    LOWER_MASK: number;
+    mt: any[];
+    mti: number;
+    init_seed(s: any): void;
+    init_by_array(init_key: any, key_length: any): void;
+    random_int(): number;
+    random_int31(): number;
+    random_incl(): number;
+    random(): number;
+    random_excl(): number;
+    random_long(): number;
+}

package/dist/components/Common/AddressIcon/jazzicon/mersenne-twister.js

@@ -0,0 +1,201 @@
+/*
+  https://github.com/banksean wrapped Makoto Matsumoto and Takuji Nishimura's code in a namespace
+  so it's better encapsulated. Now you can have multiple random number generators
+  and they won't stomp all over eachother's state.
+
+  If you want to use this as a substitute for Math.random(), use the random()
+  method like so:
+
+  var m = new MersenneTwister();
+  var randomNumber = m.random();
+
+  You can also call the other genrand_{foo}() methods on the instance.
+
+  If you want to use a specific seed in order to get a repeatable random
+  sequence, pass an integer into the constructor:
+
+  var m = new MersenneTwister(123);
+
+  and that will always produce the same random sequence.
+
+  Sean McCullough (banksean@gmail.com)
+*/
+/*
+   A C-program for MT19937, with initialization improved 2002/1/26.
+   Coded by Takuji Nishimura and Makoto Matsumoto.
+
+   Before using, initialize the state by using init_seed(seed)
+   or init_by_array(init_key, key_length).
+
+   Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji Nishimura,
+   All rights reserved.
+
+   Redistribution and use in source and binary forms, with or without
+   modification, are permitted provided that the following conditions
+   are met:
+
+     1. Redistributions of source code must retain the above copyright
+        notice, this list of conditions and the following disclaimer.
+
+     2. Redistributions in binary form must reproduce the above copyright
+        notice, this list of conditions and the following disclaimer in the
+        documentation and/or other materials provided with the distribution.
+
+     3. The names of its contributors may not be used to endorse or promote
+        products derived from this software without specific prior written
+        permission.
+
+   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+   "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+   LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+   A PARTICULAR PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+   CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+   EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+   PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+   PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+   LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+   NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+
+   Any feedback is very welcome.
+   http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/emt.html
+   email: m-mat @ math.sci.hiroshima-u.ac.jp (remove space)
+*/
+/**
+ * @constructor
+ * @param {number|Array<number>} [seed] - Optional seed for the random number generator
+ */
+function MersenneTwister(seed) {
+    if (seed == undefined) {
+        seed = new Date().getTime();
+    }
+    /* Period parameters */
+    this.N = 624;
+    this.M = 397;
+    this.MATRIX_A = 0x9908b0df; /* constant vector a */
+    this.UPPER_MASK = 0x80000000; /* most significant w-r bits */
+    this.LOWER_MASK = 0x7fffffff; /* least significant r bits */
+    this.mt = new Array(this.N); /* the array for the state vector */
+    this.mti = this.N + 1; /* mti==N+1 means mt[N] is not initialized */
+    if (seed.constructor == Array) {
+        this.init_by_array(seed, seed.length);
+    }
+    else {
+        this.init_seed(seed);
+    }
+}
+/* initializes mt[N] with a seed */
+/* origin name init_genrand */
+MersenneTwister.prototype.init_seed = function (s) {
+    this.mt[0] = s >>> 0;
+    for (this.mti = 1; this.mti < this.N; this.mti++) {
+        var s = this.mt[this.mti - 1] ^ (this.mt[this.mti - 1] >>> 30);
+        this.mt[this.mti] = (((((s & 0xffff0000) >>> 16) * 1812433253) << 16) + (s & 0x0000ffff) * 1812433253)
+            + this.mti;
+        /* See Knuth TAOCP Vol2. 3rd Ed. P.106 for multiplier. */
+        /* In the previous versions, MSBs of the seed affect   */
+        /* only MSBs of the array mt[].                        */
+        /* 2002/01/09 modified by Makoto Matsumoto             */
+        this.mt[this.mti] >>>= 0;
+        /* for >32 bit machines */
+    }
+};
+/* initialize by an array with array-length */
+/* init_key is the array for initializing keys */
+/* key_length is its length */
+/* slight change for C++, 2004/2/26 */
+MersenneTwister.prototype.init_by_array = function (init_key, key_length) {
+    var i, j, k;
+    this.init_seed(19650218);
+    i = 1;
+    j = 0;
+    k = (this.N > key_length ? this.N : key_length);
+    for (; k; k--) {
+        var s = this.mt[i - 1] ^ (this.mt[i - 1] >>> 30);
+        this.mt[i] = (this.mt[i] ^ (((((s & 0xffff0000) >>> 16) * 1664525) << 16) + ((s & 0x0000ffff) * 1664525)))
+            + init_key[j] + j; /* non linear */
+        this.mt[i] >>>= 0; /* for WORDSIZE > 32 machines */
+        i++;
+        j++;
+        if (i >= this.N) {
+            this.mt[0] = this.mt[this.N - 1];
+            i = 1;
+        }
+        if (j >= key_length)
+            j = 0;
+    }
+    for (k = this.N - 1; k; k--) {
+        var s = this.mt[i - 1] ^ (this.mt[i - 1] >>> 30);
+        this.mt[i] = (this.mt[i] ^ (((((s & 0xffff0000) >>> 16) * 1566083941) << 16) + (s & 0x0000ffff) * 1566083941))
+            - i; /* non linear */
+        this.mt[i] >>>= 0; /* for WORDSIZE > 32 machines */
+        i++;
+        if (i >= this.N) {
+            this.mt[0] = this.mt[this.N - 1];
+            i = 1;
+        }
+    }
+    this.mt[0] = 0x80000000; /* MSB is 1; assuring non-zero initial array */
+};
+/* generates a random number on [0,0xffffffff]-interval */
+/* origin name genrand_int32 */
+MersenneTwister.prototype.random_int = function () {
+    var y;
+    var mag01 = new Array(0x0, this.MATRIX_A);
+    /* mag01[x] = x * MATRIX_A  for x=0,1 */
+    if (this.mti >= this.N) { /* generate N words at one time */
+        var kk;
+        if (this.mti == this.N + 1) /* if init_seed() has not been called, */
+            this.init_seed(5489); /* a default initial seed is used */
+        for (kk = 0; kk < this.N - this.M; kk++) {
+            y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK);
+            this.mt[kk] = this.mt[kk + this.M] ^ (y >>> 1) ^ mag01[y & 0x1];
+        }
+        for (; kk < this.N - 1; kk++) {
+            y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK);
+            this.mt[kk] = this.mt[kk + (this.M - this.N)] ^ (y >>> 1) ^ mag01[y & 0x1];
+        }
+        y = (this.mt[this.N - 1] & this.UPPER_MASK) | (this.mt[0] & this.LOWER_MASK);
+        this.mt[this.N - 1] = this.mt[this.M - 1] ^ (y >>> 1) ^ mag01[y & 0x1];
+        this.mti = 0;
+    }
+    y = this.mt[this.mti++];
+    /* Tempering */
+    y ^= (y >>> 11);
+    y ^= (y << 7) & 0x9d2c5680;
+    y ^= (y << 15) & 0xefc60000;
+    y ^= (y >>> 18);
+    return y >>> 0;
+};
+/* generates a random number on [0,0x7fffffff]-interval */
+/* origin name genrand_int31 */
+MersenneTwister.prototype.random_int31 = function () {
+    return (this.random_int() >>> 1);
+};
+/* generates a random number on [0,1]-real-interval */
+/* origin name genrand_real1 */
+MersenneTwister.prototype.random_incl = function () {
+    return this.random_int() * (1.0 / 4294967295.0);
+    /* divided by 2^32-1 */
+};
+/* generates a random number on [0,1)-real-interval */
+MersenneTwister.prototype.random = function () {
+    return this.random_int() * (1.0 / 4294967296.0);
+    /* divided by 2^32 */
+};
+/* generates a random number on (0,1)-real-interval */
+/* origin name genrand_real3 */
+MersenneTwister.prototype.random_excl = function () {
+    return (this.random_int() + 0.5) * (1.0 / 4294967296.0);
+    /* divided by 2^32 */
+};
+/* generates a random number on [0,1) with 53-bit resolution*/
+/* origin name genrand_res53 */
+MersenneTwister.prototype.random_long = function () {
+    var a = this.random_int() >>> 5, b = this.random_int() >>> 6;
+    return (a * 67108864.0 + b) * (1.0 / 9007199254740992.0);
+};
+/** @type {typeof MersenneTwister} */
+/* These real versions are due to Isaku Wada, 2002/01/09 added */
+module.exports = MersenneTwister;

package/dist/components/Common/AddressIcon/jazzicon/paper.d.ts

@@ -0,0 +1,4 @@
+export = newPaper;
+declare function newPaper(diameter: any, color: any): {
+    container: HTMLDivElement;
+};

package/dist/components/Common/AddressIcon/jazzicon/paper.js

@@ -0,0 +1,15 @@
+function newPaper(diameter, color) {
+    var container = document.createElement('div');
+    container.style.borderRadius = '50px';
+    container.style.overflow = 'hidden';
+    container.style.padding = '0px';
+    container.style.margin = '0px';
+    container.style.width = '' + diameter + 'px';
+    container.style.height = '' + diameter + 'px';
+    container.style.display = 'inline-block';
+    container.style.background = color;
+    return {
+        container: container,
+    };
+}
+module.exports = newPaper;

package/dist/components/HeaderWithMenu/index.js

@@ -13,7 +13,7 @@ function HeaderWithMenu({ goBack }) {
     const { boot, show, update } = useIntercom();
     const updateWithProps = () => update({ userId, customAttributes: { email: email, } });
     const query = useQueryState();
-    return (_jsxs("div", { className: "w-full grid grid-cols-5 px-6 mt-3 pb-2", children: [goBack &&
+    return (_jsxs("div", { className: "w-full grid grid-cols-5 px-6 pt-3 pb-2", children: [goBack &&
                 _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }), _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "fixed-width-container", children: _jsx(LayerswapMenu, {}) }) })] }));
 }
 export default HeaderWithMenu;

package/dist/components/Input/Address/AddressNote.js

@@ -5,7 +5,7 @@ import AddressIcon from "../../Common/AddressIcon";
 const AddressNote = ({ partner, values }) => {
     const { to: destination, destination_address } = values;
     return (destination && destination_address ?
-        _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-700 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center', children: [_jsx("div", { className: 'flex flex-shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] })
+        _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-700 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center', children: [_jsx("div", { className: 'flex flex-shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] })
         : null);
 };
 export default AddressNote;

package/dist/components/Modal/leaflet.js

@@ -10,7 +10,7 @@ export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, ti
     const mobileModalRef = useRef(null);
     const controls = useAnimation();
     const transitionProps = { type: "spring", stiffness: 500, damping: 40 };
-    const { isMobile } = useWindowDimensions();
+    const { isMobileWithPortal: isMobile } = useWindowDimensions();
     const handleDragEnd = useCallback(async (_, info) => {
         const offset = info.offset.y;
         const velocity = info.velocity.y;
@@ -60,5 +60,5 @@ export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, ti
         default:
             wrapperHeightClass = '';
     }
-    return (_jsxs("div", { ref: topmostRef, children: [_jsx(motion.div, { className: `${position} inset-0 z-40 bg-black/50 block`, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCloseModal }, "backdrop"), _jsx(motion.div, { ref: mobileModalRef, animate: controls, className: `max-h-full overflow-y-hidden group ${position} inset-x-0 bottom-0 z-40 w-full ${height != 'full' ? 'rounded-t-2xl' : ''}  bg-secondary-900 ${wrapperHeightClass} ${className} shadow-lg`, initial: { y: "20%" }, exit: { y: "100%" }, transition: transitionProps, drag: height != 'full' ? "y" : false, dragDirectionLock: true, onDragEnd: handleDragEnd, dragElastic: { top: 0, bottom: 1 }, dragConstraints: { top: 0, bottom: 0 }, children: _jsxs("div", { className: `py-3 overflow-y-auto flex flex-col h-full z-40 ${height != 'full' ? 'bg-secondary-900 rounded-t-2xl ' : ''} pb-6`, children: [_jsxs("div", { className: `px-6 pb-2 flex justify-between items-center ${height != 'full' && 'hover:cursor-grab'}`, children: [_jsx("div", { className: "text-lg text-secondary-text font-semibold", children: _jsx("div", { children: title }) }), _jsx("div", { className: '-mr-2', children: _jsx(IconButton, { onClick: handleCloseModal, icon: _jsx(X, { strokeWidth: 3 }) }) })] }), _jsx("div", { className: 'select-text max-h-full overflow-y-auto overflow-x-hidden styled-scroll px-6 h-full', id: "virtualListContainer", children: children })] }) }, "mobile-modal")] }));
+    return (_jsxs("div", { ref: topmostRef, children: [_jsx(motion.div, { className: `${position} inset-0 z-40 bg-black/50 block`, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCloseModal }, "backdrop"), _jsx(motion.div, { ref: mobileModalRef, animate: controls, className: `max-h-full overflow-y-hidden group ${position} inset-x-0 bottom-0 z-40 w-full ${height != 'full' ? 'rounded-t-xl' : ''}  bg-secondary-900 ${wrapperHeightClass} ${className} shadow-lg`, initial: { y: "20%" }, exit: { y: "100%" }, transition: transitionProps, drag: height != 'full' ? "y" : false, dragDirectionLock: true, onDragEnd: handleDragEnd, dragElastic: { top: 0, bottom: 1 }, dragConstraints: { top: 0, bottom: 0 }, children: _jsxs("div", { className: `py-3 overflow-y-auto flex flex-col h-full z-40 ${height != 'full' ? 'bg-secondary-900 rounded-t-xl ' : ''} pb-6`, children: [_jsxs("div", { className: `px-6 pb-2 flex justify-between items-center ${height != 'full' && 'hover:cursor-grab'}`, children: [_jsx("div", { className: "text-lg text-secondary-text font-semibold", children: _jsx("div", { children: title }) }), _jsx("div", { className: '-mr-2', children: _jsx(IconButton, { onClick: handleCloseModal, icon: _jsx(X, { strokeWidth: 3 }) }) })] }), _jsx("div", { className: 'select-text max-h-full overflow-y-auto overflow-x-hidden styled-scroll px-6 h-full', id: "virtualListContainer", children: children })] }) }, "mobile-modal")] }));
 });

package/dist/components/Modal/modal.js

@@ -5,15 +5,15 @@ import useWindowDimensions from "../../hooks/useWindowDimensions";
 import { Leaflet } from "./leaflet";
 import ReactPortal from "../Common/ReactPortal";
 const Modal = (({ header, height, className, children, subHeader, show, setShow, modalId, onClose }) => {
-    const { isMobile, isDesktop } = useWindowDimensions();
+    const { isMobileWithPortal, isDesktop } = useWindowDimensions();
     const mobileModalRef = useRef(null);
     //Fixes draggebles closing
     const [delayedShow, setDelayedShow] = useState();
     useEffect(() => {
         setDelayedShow(show);
     }, [show]);
-    return (_jsxs(_Fragment, { children: [isDesktop && (_jsx(ReactPortal, { wrapperId: "widget_root", children: _jsx(AnimatePresence, { children: delayedShow &&
-                        _jsx(Leaflet, { position: "absolute", height: height ?? 'full', show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, children: children }, modalId) }) })), isMobile && (_jsx(AnimatePresence, { children: delayedShow &&
+    return (_jsxs(_Fragment, { children: [(isDesktop || (!isDesktop && !isMobileWithPortal)) && (_jsx(ReactPortal, { wrapperId: "widget_root", children: _jsx(AnimatePresence, { children: delayedShow &&
+                        _jsx(Leaflet, { position: "absolute", height: height ?? 'full', show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, children: children }, modalId) }) })), isMobileWithPortal && (_jsx(AnimatePresence, { children: delayedShow &&
                     _jsx(Leaflet, { position: "fixed", height: height == 'full' ? '80%' : height == 'fit' ? 'fit' : (height == '80%' || height == '90%') ? height : 'full', ref: mobileModalRef, show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, children: children }, modalId) }))] }));
 });
 export default Modal;