UNPKG

@getalby/lightning-wallet-connect

Version:

Web components to connect to a lightning wallet and power a website with WebLN

1 lines 313 kB
{"version":3,"file":"index.cjs","sources":["../node_modules/tslib/tslib.es6.mjs","../src/components/utils/loadFonts.ts","../src/connectors/Connector.ts","../src/connectors/ExtensionConnector.ts","../src/connectors/NWCConnector.ts","../src/connectors/index.ts","../src/utils/dispatchLwcEvent.ts","../src/state/store.ts","../src/components/lwc-element.ts","../node_modules/@twind/core/core.js","../node_modules/@twind/preset-tailwind/baseTheme.js","../node_modules/@twind/preset-tailwind/preflight.js","../node_modules/@twind/preset-tailwind/rules.js","../node_modules/@twind/preset-tailwind/variants.js","../node_modules/@twind/preset-tailwind/_/colors-16fd59b8.js","../node_modules/@twind/preset-tailwind/preset-tailwind.js","../node_modules/@twind/preset-tailwind/base.js","../node_modules/@twind/with-web-components/with-web-components.js","../src/components/twind/withTwind.ts","../src/components/connectors/lwc-connector.ts","../src/components/css/colors.ts","../src/components/icons/puzzleIcon.ts","../src/components/icons/albyIcon.ts","../src/components/connectors/lwc-extension-connector.ts","../src/components/icons/nwcIcon.ts","../src/components/connectors/lwc-alby-nwc-connector.ts","../src/components/connectors/lwc-nwc-connector.ts","../src/components/lwc-connector-list.ts","../src/components/icons/loadingIcon.ts","../src/components/icons/exitIcon.ts","../src/components/css/gradientText.ts","../src/components/lwc-modal-content.ts","../src/components/icons/crossIcon.ts","../src/components/icons/bcLogo.ts","../src/components/lwc-modal.ts","../src/components/icons/lwcIcon.ts","../src/components/icons/satIcon.ts","../src/components/templates/innerBorder.ts","../src/components/icons/lwcConnectedIcon.ts","../src/components/lwc-button.ts"],"sourcesContent":["/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","let appendedFonts = false;\nexport function loadFonts() {\n if (appendedFonts) {\n return;\n }\n appendedFonts = true;\n for (const family of ['Inter', 'Roboto Mono']) {\n const font = document.createElement('link');\n font.href = `https://fonts.googleapis.com/css2?family=${family}:wght@400;500;600;700&display=swap`;\n font.rel = 'stylesheet';\n document.head.appendChild(font);\n }\n}\n","import {ConnectorConfig} from '../types/ConnectorConfig';\n\nexport abstract class Connector {\n protected _config: ConnectorConfig;\n\n constructor(config: ConnectorConfig) {\n this._config = config;\n }\n\n async init() {\n if (!window.webln) {\n throw new Error('window.webln does not exist');\n }\n await window.webln.enable();\n }\n\n async getBalance() {\n try {\n if (!window.webln) {\n throw new Error('webln not found');\n }\n const balanceResponse = await window.webln.getBalance?.();\n return balanceResponse?.balance;\n } catch (error) {\n console.error('Failed to get balance', error);\n }\n return undefined;\n }\n\n async getAlias() {\n try {\n if (!window.webln) {\n throw new Error('webln not found');\n }\n const info = await window.webln.getInfo();\n return info.node.alias;\n } catch (error) {\n console.error('Failed to get alias', error);\n return undefined;\n }\n }\n}\n","import {Connector} from './Connector';\nimport {ConnectorConfig} from '../types/ConnectorConfig';\n\nexport class ExtensionConnector extends Connector {\n constructor(config: ConnectorConfig) {\n super(config);\n }\n\n override async init() {\n // FIXME: wait for extension to be loaded (current bug in Alby)\n await new Promise<void>((resolve) => setTimeout(resolve, 1000));\n await super.init();\n }\n}\n","import {webln} from '@getalby/sdk';\nimport {Connector} from './Connector';\nimport {ConnectorConfig} from '../types/ConnectorConfig';\nimport {WebLNProvider} from '@webbtc/webln-types';\n\nexport class NWCConnector extends Connector {\n constructor(config: ConnectorConfig) {\n super(config);\n\n if (!config.nwcUrl) {\n throw new Error('no nwc URL provided');\n }\n const nwc = new webln.NostrWebLNProvider({\n nostrWalletConnectUrl: config.nwcUrl,\n });\n\n // FIXME: typings\n window.webln = nwc as unknown as WebLNProvider;\n }\n}\n","import {ExtensionConnector} from './ExtensionConnector';\nimport {NWCConnector} from './NWCConnector';\n\nexport const connectors = {\n 'extension.generic': ExtensionConnector,\n 'nwc.alby': NWCConnector,\n 'nwc.generic': NWCConnector,\n};\n","export function dispatchLwcEvent(\n type:\n | 'lwc:connected'\n | 'lwc:connecting'\n | 'lwc:disconnected'\n | 'lwc:modalopened'\n | 'lwc:modalclosed'\n) {\n const event = new Event(type, {bubbles: true, composed: true});\n window.dispatchEvent(event);\n}\n","import {createStore} from 'zustand/vanilla';\nimport {ConnectorConfig} from '../types/ConnectorConfig';\nimport {connectors} from '../connectors';\nimport {dispatchLwcEvent} from '../utils/dispatchLwcEvent';\nimport {Connector} from '../connectors/Connector';\n\ninterface PrivateStore {\n readonly connector: Connector | undefined;\n readonly config: ConnectorConfig | undefined;\n setConfig(config: ConnectorConfig | undefined): void;\n setConnector(connector: Connector | undefined): void;\n}\n\nconst privateStore = createStore<PrivateStore>((set) => ({\n connector: undefined,\n config: undefined,\n setConfig: (config) => {\n set({config});\n },\n setConnector: (connector) => {\n set({connector});\n },\n}));\n\ninterface Store {\n readonly connected: boolean;\n readonly connecting: boolean;\n readonly alias: string | undefined;\n readonly balance: number | undefined;\n readonly connectorName: string | undefined;\n\n connect(config: ConnectorConfig): void;\n disconnect(): void;\n setAlias(alias: string | undefined): void;\n setBalance(balance: number | undefined): void;\n}\n\nconst store = createStore<Store>((set) => ({\n connected: false,\n connecting: false,\n alias: undefined,\n balance: undefined,\n connectorName: undefined,\n connect: async (config: ConnectorConfig) => {\n dispatchLwcEvent('lwc:connecting');\n set({\n connecting: true,\n });\n try {\n const connector = new connectors[config.connectorType](config);\n await connector.init();\n const balance = await connector.getBalance();\n const alias = await connector.getAlias();\n privateStore.getState().setConfig(config);\n privateStore.getState().setConnector(connector);\n set({\n connected: true,\n connecting: false,\n balance,\n alias,\n connectorName: config.connectorName,\n });\n dispatchLwcEvent('lwc:connected');\n } catch (error) {\n console.error(error);\n set({\n connecting: false,\n });\n }\n saveConfig(config);\n },\n disconnect: () => {\n privateStore.getState().setConfig(undefined);\n privateStore.getState().setConnector(undefined);\n set({\n connected: false,\n alias: undefined,\n balance: undefined,\n connectorName: undefined,\n });\n deleteConfig();\n dispatchLwcEvent('lwc:disconnected');\n },\n setAlias: (alias) => {\n set({alias});\n },\n setBalance: (balance) => {\n set({balance});\n },\n getConnectorName: () => privateStore.getState().config?.connectorName,\n}));\n\nexport default store;\n\nfunction deleteConfig() {\n window.localStorage.removeItem('lwc:config');\n}\n\nfunction saveConfig(config: ConnectorConfig) {\n window.localStorage.setItem('lwc:config', JSON.stringify(config));\n}\n\nfunction loadConfig() {\n const configJson = window.localStorage.getItem('lwc:config');\n if (configJson) {\n const config = JSON.parse(configJson) as ConnectorConfig;\n store.getState().connect(config);\n }\n}\n\nloadConfig();\n","import {LitElement, css} from 'lit';\nimport {loadFonts} from './utils/loadFonts';\nimport {state} from 'lit/decorators.js';\nimport store from '../state/store';\n\n/**\n * @fires lwc:connected - Indicates a wallet has been connected and window.webln is now available and enabled\n */\nexport class LwcElement extends LitElement {\n @state()\n protected _connected = false;\n @state()\n protected _connecting = false;\n\n @state()\n protected _connectorName: string | undefined = undefined;\n\n @state()\n protected _alias: string | undefined = undefined;\n\n @state()\n protected _balance: number | undefined = undefined;\n\n constructor() {\n super();\n loadFonts();\n this._connected = store.getState().connected;\n this._connecting = store.getState().connecting;\n this._alias = store.getState().alias;\n this._balance = store.getState().balance;\n this._connectorName = store.getState().connectorName;\n\n // TODO: handle unsubscribe\n store.subscribe((store) => {\n this._connected = store.connected;\n this._connecting = store.connecting;\n this._alias = store.alias;\n this._balance = store.balance;\n this._connectorName = store.connectorName;\n });\n }\n\n override connectedCallback() {\n super.connectedCallback();\n }\n\n // global css reset in shadow DOM\n static override styles = css`\n :host {\n all: initial;\n font-variant-numeric: slashed-zero;\n }\n `;\n}\n","let active;\nfunction toClassName(rule) {\n return [\n ...rule.v,\n (rule.i ? '!' : '') + rule.n\n ].join(':');\n}\nfunction format(rules, seperator = ',') {\n return rules.map(toClassName).join(seperator);\n}\n/**\n * @internal\n */ let escape = 'undefined' != typeof CSS && CSS.escape || // Simplified: escaping only special characters\n// Needed for NodeJS and Edge <79 (https://caniuse.com/mdn-api_css_escape)\n((className)=>className.// Simplifed escape testing only for chars that we know happen to be in tailwind directives\n replace(/[!\"'`*+.,;:\\\\/<=>?@#$%&^|~()[\\]{}]/g, '\\\\$&').// If the character is the first character and is in the range [0-9] (2xl, ...)\n // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point\n replace(/^\\d/, '\\\\3$& '));\n// Based on https://stackoverflow.com/a/52171480\n/**\n * @group Configuration\n * @param value\n * @returns\n */ function hash(value) {\n // eslint-disable-next-line no-var\n for(var h = 9, index = value.length; index--;)h = Math.imul(h ^ value.charCodeAt(index), 0x5f356495);\n return '#' + ((h ^ h >>> 9) >>> 0).toString(36);\n}\n/**\n * @internal\n * @param screen\n * @param prefix\n * @returns\n */ function mql(screen, prefix = '@media ') {\n return prefix + asArray(screen).map((screen)=>{\n return 'string' == typeof screen && (screen = {\n min: screen\n }), screen.raw || Object.keys(screen).map((feature)=>`(${feature}-width:${screen[feature]})`).join(' and ');\n }).join(',');\n}\n/**\n * @internal\n * @param value\n * @returns\n */ function asArray(value = []) {\n return Array.isArray(value) ? value : null == value ? [] : [\n value\n ];\n}\n/**\n * @internal\n * @param value\n * @returns\n */ function identity(value) {\n return value;\n}\n/**\n * @internal\n */ function noop() {}\n// no-op\n// Based on https://github.com/kripod/otion\n// License MIT\n// export const enum Shifts {\n// darkMode = 30,\n// layer = 27,\n// screens = 26,\n// responsive = 22,\n// atRules = 18,\n// variants = 0,\n// }\nlet Layer = {\n /**\n * 1. `default` (public)\n */ d: /* efaults */ 0,\n /* Shifts.layer */ /**\n * 2. `base` (public) — for things like reset rules or default styles applied to plain HTML elements.\n */ b: /* ase */ 134217728,\n /* Shifts.layer */ /**\n * 3. `components` (public, used by `style()`) — is for class-based styles that you want to be able to override with utilities.\n */ c: /* omponents */ 268435456,\n /* Shifts.layer */ // reserved for style():\n // - props: 0b011\n // - when: 0b100\n /**\n * 6. `aliases` (public, used by `apply()`) — `~(...)`\n */ a: /* liases */ 671088640,\n /* Shifts.layer */ /**\n * 6. `utilities` (public) — for small, single-purpose classes\n */ u: /* tilities */ 805306368,\n /* Shifts.layer */ /**\n * 7. `overrides` (public, used by `css()`)\n */ o: /* verrides */ 939524096\n};\n/*\nTo set a bit: n |= mask;\nTo clear a bit: n &= ~mask;\nTo test if a bit is set: (n & mask)\n\nBit shifts for the primary bits:\n\n| bits | trait | shift |\n| ---- | ------------------------------------------------------- | ----- |\n| 1 | dark mode | 30 |\n| 3 | layer: preflight, global, components, utilities, css | 27 |\n| 1 | screens: is this a responsive variation of a rule | 26 |\n| 4 | responsive based on min-width, max-width or width | 22 |\n| 4 | at-rules | 18 |\n| 18 | pseudo and group variants | 0 |\n\nLayer: 0 - 7: 3 bits\n - defaults: 0 << 27\n - base: 1 << 27\n - components: 2 << 27\n - variants: 3 << 27\n - joints: 4 << 27\n - aliases: 5 << 27\n - utilities: 6 << 27\n - overrides: 7 << 27\n\nThese are calculated by serialize and added afterwards:\n\n| bits | trait |\n| ---- | ----------------------------------- |\n| 4 | number of selectors (descending) |\n| 4 | number of declarations (descending) |\n| 4 | greatest precedence of properties |\n\nThese are added by shifting the primary bits using multiplication as js only\nsupports bit shift up to 32 bits.\n*/ // Colon and dash count of string (ascending)\nfunction seperatorPrecedence(string) {\n return string.match(/[-=:;]/g)?.length || 0;\n}\nfunction atRulePrecedence(css) {\n // 0 - 15: 4 bits (max 144rem or 2304px)\n // rem -> bit\n // <20 -> 0 (<320px)\n // 20 -> 1 (320px)\n // 24 -> 2 (384px)\n // 28 -> 3 (448px)\n // 32 -> 4 (512px)\n // 36 -> 5 (576px)\n // 42 -> 6 (672px)\n // 48 -> 7 (768px)\n // 56 -> 8 (896px)\n // 64 -> 9 (1024px)\n // 72 -> 10 (1152px)\n // 80 -> 11 (1280px)\n // 96 -> 12 (1536px)\n // 112 -> 13 (1792px)\n // 128 -> 14 (2048px)\n // 144 -> 15 (2304px)\n // https://www.dcode.fr/function-equation-finder\n return Math.min(/(?:^|width[^\\d]+)(\\d+(?:.\\d+)?)(p)?/.test(css) ? Math.max(0, 29.63 * (+RegExp.$1 / (RegExp.$2 ? 15 : 1)) ** 0.137 - 43) : 0, 15) << 22 | /* Shifts.responsive */ Math.min(seperatorPrecedence(css), 15) << 18;\n}\n/* Shifts.atRules */ // Pesudo variant presedence\n// Chars 3 - 8: Uniquely identifies a pseudo selector\n// represented as a bit set for each relevant value\n// 18 bits: one for each variant plus one for unknown variants\n//\n// ':group-*' variants are normalized to their native pseudo class (':group-hover' -> ':hover')\n// as they already have a higher selector presedence due to the add '.group' ('.group:hover .group-hover:...')\n// Sources:\n// - https://bitsofco.de/when-do-the-hover-focus-and-active-pseudo-classes-apply/#orderofstyleshoverthenfocusthenactive\n// - https://developer.mozilla.org/docs/Web/CSS/:active#Active_links\n// - https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L931\nlet PRECEDENCES_BY_PSEUDO_CLASS = [\n /* fi */ 'rst-c',\n /* hild: 0 */ /* la */ 'st-ch',\n /* ild: 1 */ // even and odd use: nth-child\n /* nt */ 'h-chi',\n /* ld: 2 */ /* an */ 'y-lin',\n /* k: 3 */ /* li */ 'nk',\n /* : 4 */ /* vi */ 'sited',\n /* : 5 */ /* ch */ 'ecked',\n /* : 6 */ /* em */ 'pty',\n /* : 7 */ /* re */ 'ad-on',\n /* ly: 8 */ /* fo */ 'cus-w',\n /* ithin : 9 */ /* ho */ 'ver',\n /* : 10 */ /* fo */ 'cus',\n /* : 11 */ /* fo */ 'cus-v',\n /* isible : 12 */ /* ac */ 'tive',\n /* : 13 */ /* di */ 'sable',\n /* d : 14 */ /* op */ 'tiona',\n /* l: 15 */ /* re */ 'quire'\n];\n/** The name to use for `&` expansion in selectors. Maybe empty for at-rules like `@import`, `@font-face`, `@media`, ... */ /** The calculated precedence taking all variants into account. */ /** The rulesets (selectors and at-rules). expanded variants `@media ...`, `@supports ...`, `&:focus`, `.dark &` */ /** Is this rule `!important` eg something like `!underline` or `!bg-red-500` or `!red-500` */ function convert({ n: name , i: important , v: variants = [] }, context, precedence, conditions) {\n name && (name = toClassName({\n n: name,\n i: important,\n v: variants\n }));\n conditions = [\n ...asArray(conditions)\n ];\n for (let variant of variants){\n let screen = context.theme('screens', variant);\n for (let condition of asArray(screen && mql(screen) || context.v(variant))){\n var /* d: 16 */ selector;\n conditions.push(condition);\n precedence |= screen ? 67108864 | /* Shifts.screens */ atRulePrecedence(condition) : 'dark' == variant ? 1073741824 : /* Shifts.darkMode */ '@' == condition[0] ? atRulePrecedence(condition) : (selector = condition, // use first found pseudo-class\n 1 << ~(/:([a-z-]+)/.test(selector) && ~PRECEDENCES_BY_PSEUDO_CLASS.indexOf(RegExp.$1.slice(2, 7)) || -18));\n }\n }\n return {\n n: name,\n p: precedence,\n r: conditions,\n i: important\n };\n}\nlet registry = new Map();\nfunction stringify$1(rule) {\n if (rule.d) {\n let groups = [], selector = replaceEach(// merge all conditions into a selector string\n rule.r.reduce((selector, condition)=>{\n return '@' == condition[0] ? (groups.push(condition), selector) : // Go over the selector and replace the matching multiple selectors if any\n condition ? replaceEach(selector, (selectorPart)=>replaceEach(condition, // If the current condition has a nested selector replace it\n (conditionPart)=>{\n let mergeMatch = /(:merge\\(.+?\\))(:[a-z-]+|\\\\[.+])/.exec(conditionPart);\n if (mergeMatch) {\n let selectorIndex = selectorPart.indexOf(mergeMatch[1]);\n return ~selectorIndex ? // [':merge(.group):hover .rule', ':merge(.group):focus &'] -> ':merge(.group):focus:hover .rule'\n // ':merge(.group)' + ':focus' + ':hover .rule'\n selectorPart.slice(0, selectorIndex) + mergeMatch[0] + selectorPart.slice(selectorIndex + mergeMatch[1].length) : // [':merge(.peer):focus~&', ':merge(.group):hover &'] -> ':merge(.peer):focus~:merge(.group):hover &'\n replaceReference(selectorPart, conditionPart);\n }\n // Return the current selector with the key matching multiple selectors if any\n return replaceReference(conditionPart, selectorPart);\n })) : selector;\n }, '&'), // replace '&' with rule name or an empty string\n (selectorPart)=>replaceReference(selectorPart, rule.n ? '.' + escape(rule.n) : ''));\n return selector && groups.push(selector.replace(/:merge\\((.+?)\\)/g, '$1')), groups.reduceRight((body, grouping)=>grouping + '{' + body + '}', rule.d);\n }\n}\nfunction replaceEach(selector, iteratee) {\n return selector.replace(/ *((?:\\(.+?\\)|\\[.+?\\]|[^,])+) *(,|$)/g, (_, selectorPart, comma)=>iteratee(selectorPart) + comma);\n}\nfunction replaceReference(selector, reference) {\n return selector.replace(/&/g, reference);\n}\nlet collator = new Intl.Collator('en', {\n numeric: true\n});\n/** The calculated precedence taking all variants into account. */ /* The precedence of the properties within {@link d}. */ /** The name to use for `&` expansion in selectors. Maybe empty for at-rules like `@import`, `@font-face`, `@media`, ... */ /**\n * Find the array index of where to add an element to keep it sorted.\n *\n * @returns The insertion index\n */ function sortedInsertionIndex(array, element) {\n // Find position using binary search\n // eslint-disable-next-line no-var\n for(var low = 0, high = array.length; low < high;){\n let pivot = high + low >> 1;\n 0 >= compareTwindRules(array[pivot], element) ? low = pivot + 1 : high = pivot;\n }\n return high;\n}\nfunction compareTwindRules(a, b) {\n // base and overrides (css) layers are kept in order they are declared\n let layer = a.p & Layer.o;\n return layer == (b.p & Layer.o) && (layer == Layer.b || layer == Layer.o) ? 0 : a.p - b.p || a.o - b.o || collator.compare(byModifier(a.n), byModifier(b.n)) || collator.compare(byName(a.n), byName(b.n));\n}\nfunction byModifier(s) {\n return (s || '').split(/:/).pop().split('/').pop() || '\\x00';\n}\nfunction byName(s) {\n return (s || '').replace(/\\W/g, (c)=>String.fromCharCode(127 + c.charCodeAt(0))) + '\\x00';\n}\nfunction parseColorComponent(chars, factor) {\n return Math.round(parseInt(chars, 16) * factor);\n}\n/**\n * @internal\n * @param color\n * @param options\n * @returns\n */ function toColorValue(color, options = {}) {\n if ('function' == typeof color) return color(options);\n let { opacityValue ='1' , opacityVariable } = options, opacity = opacityVariable ? `var(${opacityVariable})` : opacityValue;\n if (color.includes('<alpha-value>')) return color.replace('<alpha-value>', opacity);\n // rgb hex: #0123 and #001122\n if ('#' == color[0] && (4 == color.length || 7 == color.length)) {\n let size = (color.length - 1) / 3, factor = [\n 17,\n 1,\n 0.062272\n ][size - 1];\n return `rgba(${[\n parseColorComponent(color.substr(1, size), factor),\n parseColorComponent(color.substr(1 + size, size), factor),\n parseColorComponent(color.substr(1 + 2 * size, size), factor),\n opacity\n ]})`;\n }\n return '1' == opacity ? color : '0' == opacity ? '#0000' : // convert rgb and hsl to alpha variant\n color.replace(/^(rgb|hsl)(\\([^)]+)\\)$/, `$1a$2,${opacity})`);\n}\n/**\n * Looks for a matching dark color within a [tailwind color palette](https://tailwindcss.com/docs/customizing-colors) (`50`, `100`, `200`, ..., `800`, `900`).\n *\n * ```js\n * defineConfig({\n * darkColor: autoDarkColor,\n * })\n * ```\n *\n * **Note**: Does not work for arbitrary values like `[theme(colors.gray.500)]` or `[theme(colors.gray.500, #ccc)]`.\n *\n * @group Configuration\n * @param section within theme to use\n * @param key of the light color or an arbitrary value\n * @param context to use\n * @returns the dark color if found\n */ function autoDarkColor(section, key, { theme }) {\n return theme(section, // 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50\n // key: gray-50, gray.50\n key = key.replace(/\\d+$/, (shade)=>// ~~(parseInt(shade, 10) / 100): 50 -> 0, 900 -> 9\n 100 * // (9 - 0) -> 900, (9 - 9) -> 50\n (9 - ~~(parseInt(shade, 10) / 100) || 0.5)));\n}\nfunction serialize(style, rule, context, precedence, conditions = []) {\n return function serialize$(style, { n: name , p: precedence , r: conditions = [] , i: important }, context) {\n let rules = [], // The generated declaration block eg body of the css rule\n declarations = '', // This ensures that 'border-top-width' has a higher precedence than 'border-top'\n maxPropertyPrecedence = 0, // More specific utilities have less declarations and a higher precedence\n numberOfDeclarations = 0;\n for(let key in style || {}){\n var layer, // https://github.com/kripod/otion/blob/main/packages/otion/src/propertyMatchers.ts\n // \"+1\": [\n // \t/* ^border-.*(w|c|sty) */\n // \t\"border-.*(width,color,style)\",\n // \t/* ^[tlbr].{2,4}m?$ */\n // \t\"top\",\n // \t\"left\",\n // \t\"bottom\",\n // \t\"right\",\n // \t/* ^c.{7}$ */\n // \t\"continue\",\n // \t/* ^c.{8}$ */\n // \t\"container\",\n // ],\n // \"-1\": [\n // \t/* ^[fl].{5}l */\n // \t\"flex-flow\",\n // \t\"line-clamp\",\n // \t/* ^g.{8}$ */\n // \t\"grid-area\",\n // \t/* ^pl */\n // \t\"place-content\",\n // \t\"place-items\",\n // \t\"place-self\",\n // ],\n // group: 1 => +1\n // group: 2 => -1\n // 0 - 15 => 4 bits\n // Ignore vendor prefixed and custom properties\n property;\n let value = style[key];\n if ('@' == key[0]) {\n // at rules: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule\n if (!value) continue;\n // @apply ...;\n if ('a' == key[1]) {\n rules.push(...translateWith(name, precedence, parse('' + value), context, precedence, conditions, important, true));\n continue;\n }\n // @layer <layer>\n if ('l' == key[1]) {\n for (let css of asArray(value))rules.push(...serialize$(css, {\n n: name,\n p: (layer = Layer[key[7]], // Set layer (first reset, than set)\n precedence & ~Layer.o | layer),\n r: 'd' == key[7] ? [] : conditions,\n i: important\n }, context));\n continue;\n }\n // @import\n if ('i' == key[1]) {\n rules.push(...asArray(value).map((value)=>({\n // before all layers\n p: -1,\n o: 0,\n r: [],\n d: key + ' ' + value\n })));\n continue;\n }\n // @keyframes\n if ('k' == key[1]) {\n // Use defaults layer\n rules.push({\n p: Layer.d,\n o: 0,\n r: [\n key\n ],\n d: serialize$(value, {\n p: Layer.d\n }, context).map(stringify$1).join('')\n });\n continue;\n }\n // @font-face\n // TODO @font-feature-values\n if ('f' == key[1]) {\n // Use defaults layer\n rules.push(...asArray(value).map((value)=>({\n p: Layer.d,\n o: 0,\n r: [\n key\n ],\n d: serialize$(value, {\n p: Layer.d\n }, context).map(stringify$1).join('')\n })));\n continue;\n }\n }\n // -> All other are handled below; same as selector\n // @media\n // @supports\n // selector\n if ('object' != typeof value || Array.isArray(value)) {\n if ('label' == key && value) name = value + hash(JSON.stringify([\n precedence,\n important,\n style\n ]));\n else if (value || 0 === value) {\n // property -> hyphenate\n key = key.replace(/[A-Z]/g, (_)=>'-' + _.toLowerCase());\n // Update precedence\n numberOfDeclarations += 1;\n maxPropertyPrecedence = Math.max(maxPropertyPrecedence, '-' == (property = key)[0] ? 0 : seperatorPrecedence(property) + (/^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7,8}$)|([fl].{5}l|g.{8}$|pl))/.test(property) ? +!!RegExp.$1 || /* +1 */ -!!RegExp.$2 : /* -1 */ 0) + 1);\n declarations += (declarations ? ';' : '') + asArray(value).map((value)=>context.s(key, // support theme(...) function in values\n // calc(100vh - theme('spacing.12'))\n resolveThemeFunction('' + value, context.theme) + (important ? ' !important' : ''))).join(';');\n }\n } else // at-rule or non-global selector\n if ('@' == key[0] || key.includes('&')) {\n let rulePrecedence = precedence;\n if ('@' == key[0]) {\n // Handle `@media screen(sm)` and `@media (screen(sm) or ...)`\n key = key.replace(/\\bscreen\\(([^)]+)\\)/g, (_, screenKey)=>{\n let screen = context.theme('screens', screenKey);\n return screen ? (rulePrecedence |= 67108864, /* Shifts.screens */ mql(screen, '')) : _;\n });\n rulePrecedence |= atRulePrecedence(key);\n }\n rules.push(...serialize$(value, {\n n: name,\n p: rulePrecedence,\n r: [\n ...conditions,\n key\n ],\n i: important\n }, context));\n } else // global selector\n rules.push(...serialize$(value, {\n p: precedence,\n r: [\n ...conditions,\n key\n ]\n }, context));\n }\n return(// PERF: prevent unshift using `rules = [{}]` above and then `rules[0] = {...}`\n rules.unshift({\n n: name,\n p: precedence,\n o: // number of declarations (descending)\n Math.max(0, 15 - numberOfDeclarations) + // greatest precedence of properties\n // if there is no property precedence this is most likely a custom property only declaration\n // these have the highest precedence\n 1.5 * Math.min(maxPropertyPrecedence || 15, 15),\n r: conditions,\n // stringified declarations\n d: declarations\n }), rules.sort(compareTwindRules));\n }(style, convert(rule, context, precedence, conditions), context);\n}\nfunction resolveThemeFunction(value, theme) {\n // support theme(...) function in values\n // calc(100vh - theme('spacing.12'))\n // theme('borderColor.DEFAULT', 'currentColor')\n // PERF: check for theme before running the regexp\n // if (value.includes('theme')) {\n return value.replace(/theme\\(([\"'`])?(.+?)\\1(?:\\s*,\\s*([\"'`])?(.+?)\\3)?\\)/g, (_, __, key, ___, defaultValue = '')=>{\n let value = theme(key, defaultValue);\n return 'function' == typeof value && /color|fill|stroke/i.test(key) ? toColorValue(value) : '' + asArray(value).filter((v)=>Object(v) !== v);\n });\n}\n// }\n// return value\nfunction merge(rules, name) {\n let current;\n // merge:\n // - same conditions\n // - replace name with hash of name + condititions + declarations\n // - precedence:\n // - combine bits or use max precendence\n // - set layer bit to merged\n let result = [];\n for (let rule of rules)// only merge rules with declarations and names (eg no global rules)\n if (rule.d && rule.n) {\n if (current?.p == rule.p && '' + current.r == '' + rule.r) {\n current.c = [\n current.c,\n rule.c\n ].filter(Boolean).join(' ');\n current.d = current.d + ';' + rule.d;\n } else // only set name for named rules eg not for global or className propagation rules\n result.push(current = {\n ...rule,\n n: rule.n && name\n });\n } else result.push({\n ...rule,\n n: rule.n && name\n });\n return result;\n}\nfunction translate(rules, context, precedence = Layer.u, conditions, important) {\n // Sorted by precedence\n let result = [];\n for (let rule of rules)for (let cssRule of function(rule, context, precedence, conditions, important) {\n rule = {\n ...rule,\n i: rule.i || important\n };\n let resolved = function(rule, context) {\n let factory = registry.get(rule.n);\n return factory ? factory(rule, context) : context.r(rule.n, 'dark' == rule.v[0]);\n }(rule, context);\n return resolved ? // a list of class names\n 'string' == typeof resolved ? ({ r: conditions , p: precedence } = convert(rule, context, precedence, conditions), merge(translate(parse(resolved), context, precedence, conditions, rule.i), rule.n)) : Array.isArray(resolved) ? resolved.map((rule)=>{\n var /* Shifts.layer */ /*\nTo have a predictable styling the styles must be ordered.\n\nThis order is represented by a precedence number. The lower values\nare inserted before higher values. Meaning higher preceden