\n \n \n \n
\n \n \n
\n );\n}\n","import { useEffect } from \"react\";\nimport icon from \"../assets/icon.jpg\";\n\nexport default function Header({ isConnected, children }) {\n useEffect(() => {\n if (!(\"theme\" in localStorage)) {\n if (window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {\n localStorage.theme = \"dark\";\n } else {\n localStorage.theme = \"light\";\n }\n }\n\n if (localStorage.theme === \"dark\") {\n return document.documentElement.classList.add(\"dark\");\n }\n return document.documentElement.classList.remove(\"dark\");\n }, []);\n\n function toggleDarkMode() {\n if (localStorage.theme === \"light\") {\n localStorage.theme = \"dark\";\n return document.documentElement.classList.add(\"dark\");\n }\n localStorage.theme = \"light\";\n return document.documentElement.classList.remove(\"dark\");\n }\n return (\n \n
\n\n {children}\n \n
\n \n
\n );\n}\n","export default function Footer({ leftContent, rightContent }) {\n return (\n \n );\n}\n","export default function Card({ className = \"\", heading, children }) {\n return (\n \n {\n event.stopPropagation(); // prevent event from bubbling up to the document\n toggleDarkMode();\n }}\n >\n \n \n \n \n \n
\n \n
\n \n
\n {children}\n \n
\n \n
\n \n
\n \n {isConnected ? (\n \n \n \n ) : (\n \n \n \n \n )}\n
\n {isConnected ? (\n Running
\n ) : (\n\n Connecting to relay...\n
\n )}\n\n Nostr Relay\n
\n\n \n Private Relay\n \n
\n \n {heading}\n
\n\n {children}\n \n );\n}\n","import { useState } from \"react\";\n\nexport default function CopyText({ value }) {\n const [isCopied, setIsCopied] = useState(false);\n\n async function copyText() {\n if (navigator.clipboard && window.isSecureContext) {\n navigator.clipboard.writeText(value);\n } else {\n let textArea = document.createElement(\"textarea\");\n textArea.value = value;\n textArea.style.position = \"absolute\";\n textArea.style.opacity = 0;\n document.body.appendChild(textArea);\n textArea.select();\n await document.execCommand(\"copy\");\n textArea.remove();\n }\n\n setIsCopied(true);\n setTimeout(() => setIsCopied(false), 1000);\n }\n\n return (\n
\n \n {value}\n \n \n
\n );\n}\n","export default function ConnectClientCard({ relayPort }) {\n return (\n \n
\n );\n}\n","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);\n }\n}\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}","const frameData = {\n delta: 0,\n timestamp: 0,\n};\n\nexport { frameData };\n","/*\n Detect and load appropriate clock setting for the execution environment\n */\nconst defaultTimestep = (1 / 60) * 1000;\nconst getCurrentTime = typeof performance !== \"undefined\"\n ? () => performance.now()\n : () => Date.now();\nconst onNextFrame = typeof window !== \"undefined\"\n ? (callback) => window.requestAnimationFrame(callback)\n : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);\n\nexport { defaultTimestep, onNextFrame };\n","import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';\nimport { createRenderStep } from './create-render-step.mjs';\nimport { frameData } from './data.mjs';\n\nconst maxElapsed = 40;\nlet useDefaultElapsed = true;\nlet runNextFrame = false;\nlet isProcessing = false;\nconst stepsOrder = [\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n}, {});\nconst sync = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n}, {});\nconst cancelSync = stepsOrder.reduce((acc, key) => {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nconst flushSync = stepsOrder.reduce((acc, key) => {\n acc[key] = () => steps[key].process(frameData);\n return acc;\n}, {});\nconst processStep = (stepId) => steps[stepId].process(frameData);\nconst processFrame = (timestamp) => {\n runNextFrame = false;\n frameData.delta = useDefaultElapsed\n ? defaultTimestep\n : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);\n frameData.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n if (runNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\nconst startLoop = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing)\n onNextFrame(processFrame);\n};\n\nexport { cancelSync, flushSync, sync };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two arrays, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let toRun = [];\n let toRunNextFrame = [];\n /**\n *\n */\n let numToRun = 0;\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n // If the buffer doesn't already contain this callback, add it\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n // If we're adding it to the currently running buffer, update its measured size\n if (addToCurrentFrame && isProcessing)\n numToRun = toRun.length;\n }\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n const index = toRunNextFrame.indexOf(callback);\n if (index !== -1)\n toRunNextFrame.splice(index, 1);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [toRun, toRunNextFrame] = [toRunNextFrame, toRun];\n // Clear the next frame list\n toRunNextFrame.length = 0;\n // Execute this frame\n numToRun = toRun.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = toRun[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (let i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","import { frameData } from '../frameloop/data.mjs';\nimport { sync } from '../frameloop/index.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\n\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"8.5.5\";\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n this.lastUpdated = 0;\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = false;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n this.prev = this.current;\n this.current = v;\n // Update timestamp\n const { delta, timestamp } = frameData;\n if (this.lastUpdated !== timestamp) {\n this.timeDelta = delta;\n this.lastUpdated = timestamp;\n sync.postRender(this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (this.prev !== this.current && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update velocity subscribers\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);\n /**\n * Updates `prev` with `current` if the value hasn't been updated this frame.\n * This ensures velocity calculations return `0`.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.velocityCheck = ({ timestamp }) => {\n if (timestamp !== this.lastUpdated) {\n this.prev = this.current;\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n this.owner = options.owner;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n \n 1\n \n
\n \n
\n
\n \n Connect your Nostr client (e.g., Damus, Amethyst) to your private\n relay for seamless backup of all Nostr activity. In Damus, add your\n Relay URL via Settings {\">\"} Relays.\n
\n\n Tip: Install{\" \"}\n
\n
\n \n 2\n \n
\n \n
\n \n Tap the globe icon on the top to back up past Nostr activity from\n your public relays and ensure uninterrupted future backups, even if\n the connection between your private relay and Nostr client is\n disrupted.\n
\n\n
\n
\n \n );\n })}\n \n \n );\n }\n\n return (\n \n \n \n \n \n
\n\n
- \n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => {\n return (\n
- \n \n \n\n\n\n\n \n \n \n \n \n \n\n
\n
\n ) : null}\n
\n );\n}\n","import { motion, LayoutGroup } from \"framer-motion\";\n\nimport moment from \"moment\";\n\nexport default function LatestActions({\n loading,\n events,\n eventsToRenderLimit,\n supportedEventKinds,\n}) {\n let eventsToRender = [];\n // Filter, sort and slice the events array to get the eventsToRender array\n // We run this after loading to not cause unnecessary compute while the\n // relay is sending the initial batch of events\n if (!loading) {\n eventsToRender = events\n .filter(({ kind }) => !!supportedEventKinds[kind])\n .sort((a, b) => b.created_at - a.created_at)\n .slice(0, eventsToRenderLimit);\n }\n\n function getFormattedDate(timestamp) {\n return moment.unix(timestamp).format(\"HH:mm MMM DD, YYYY\");\n }\n\n if (loading) {\n return (\n \n
\n ) : null}\n
\n
\n - \n
\n \n {supportedEventKinds[kind][\"icon\"]}\n \n
\n \n \n
\n \n );\n })}\n \n \n {`${supportedEventKinds[kind][\"name\"]}${\n total > 1 ? \"s\" : \"\"\n }`}\n \n \n {total}\n \n
\n - \n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {\n return (\n
- \n {/*
![](\"avatar.png\")
*/}\n \n \n\n\n \n \n \n \n \n \n\n \n );\n })}\n
- \n
\n
\n \n \n {eventKind.name}\n \n \n {getFormattedDate(created_at)}\n \n
\n {eventKind.showContent ? (\n \n
\n ) : null}\n \n {eventKind.contentKey\n ? JSON.parse(content)[eventKind.contentKey]\n : content}\n
\n\n Your Nostr activity will show up here after you have connected your\n client.\n
\n );\n}\n","'use strict';\n\nexport default function bind(fn, thisArg) {\n return function wrap() {\n return fn.apply(thisArg, arguments);\n };\n}\n","'use strict';\n\nimport bind from './helpers/bind.js';\n\n// utils is a library of generic helper functions non-specific to axios\n\nconst {toString} = Object.prototype;\nconst {getPrototypeOf} = Object;\n\nconst kindOf = (cache => thing => {\n const str = toString.call(thing);\n return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());\n})(Object.create(null));\n\nconst kindOfTest = (type) => {\n type = type.toLowerCase();\n return (thing) => kindOf(thing) === type\n}\n\nconst typeOfTest = type => thing => typeof thing === type;\n\n/**\n * Determine if a value is an Array\n *\n * @param {Object} val The value to test\n *\n * @returns {boolean} True if value is an Array, otherwise false\n */\nconst {isArray} = Array;\n\n/**\n * Determine if a value is undefined\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if the value is undefined, otherwise false\n */\nconst isUndefined = typeOfTest('undefined');\n\n/**\n * Determine if a value is a Buffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Buffer, otherwise false\n */\nfunction isBuffer(val) {\n return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)\n && isFunction(val.constructor.isBuffer) && val.constructor.isBuffer(val);\n}\n\n/**\n * Determine if a value is an ArrayBuffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is an ArrayBuffer, otherwise false\n */\nconst isArrayBuffer = kindOfTest('ArrayBuffer');\n\n\n/**\n * Determine if a value is a view on an ArrayBuffer\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false\n */\nfunction isArrayBufferView(val) {\n let result;\n if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {\n result = ArrayBuffer.isView(val);\n } else {\n result = (val) && (val.buffer) && (isArrayBuffer(val.buffer));\n }\n return result;\n}\n\n/**\n * Determine if a value is a String\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a String, otherwise false\n */\nconst isString = typeOfTest('string');\n\n/**\n * Determine if a value is a Function\n *\n * @param {*} val The value to test\n * @returns {boolean} True if value is a Function, otherwise false\n */\nconst isFunction = typeOfTest('function');\n\n/**\n * Determine if a value is a Number\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Number, otherwise false\n */\nconst isNumber = typeOfTest('number');\n\n/**\n * Determine if a value is an Object\n *\n * @param {*} thing The value to test\n *\n * @returns {boolean} True if value is an Object, otherwise false\n */\nconst isObject = (thing) => thing !== null && typeof thing === 'object';\n\n/**\n * Determine if a value is a Boolean\n *\n * @param {*} thing The value to test\n * @returns {boolean} True if value is a Boolean, otherwise false\n */\nconst isBoolean = thing => thing === true || thing === false;\n\n/**\n * Determine if a value is a plain Object\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a plain Object, otherwise false\n */\nconst isPlainObject = (val) => {\n if (kindOf(val) !== 'object') {\n return false;\n }\n\n const prototype = getPrototypeOf(val);\n return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in val) && !(Symbol.iterator in val);\n}\n\n/**\n * Determine if a value is a Date\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Date, otherwise false\n */\nconst isDate = kindOfTest('Date');\n\n/**\n * Determine if a value is a File\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a File, otherwise false\n */\nconst isFile = kindOfTest('File');\n\n/**\n * Determine if a value is a Blob\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Blob, otherwise false\n */\nconst isBlob = kindOfTest('Blob');\n\n/**\n * Determine if a value is a FileList\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a File, otherwise false\n */\nconst isFileList = kindOfTest('FileList');\n\n/**\n * Determine if a value is a Stream\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a Stream, otherwise false\n */\nconst isStream = (val) => isObject(val) && isFunction(val.pipe);\n\n/**\n * Determine if a value is a FormData\n *\n * @param {*} thing The value to test\n *\n * @returns {boolean} True if value is an FormData, otherwise false\n */\nconst isFormData = (thing) => {\n let kind;\n return thing && (\n (typeof FormData === 'function' && thing instanceof FormData) || (\n isFunction(thing.append) && (\n (kind = kindOf(thing)) === 'formdata' ||\n // detect form-data instance\n (kind === 'object' && isFunction(thing.toString) && thing.toString() === '[object FormData]')\n )\n )\n )\n}\n\n/**\n * Determine if a value is a URLSearchParams object\n *\n * @param {*} val The value to test\n *\n * @returns {boolean} True if value is a URLSearchParams object, otherwise false\n */\nconst isURLSearchParams = kindOfTest('URLSearchParams');\n\n/**\n * Trim excess whitespace off the beginning and end of a string\n *\n * @param {String} str The String to trim\n *\n * @returns {String} The String freed of excess whitespace\n */\nconst trim = (str) => str.trim ?\n str.trim() : str.replace(/^[\\s\\uFEFF\\xA0]+|[\\s\\uFEFF\\xA0]+$/g, '');\n\n/**\n * Iterate over an Array or an Object invoking a function for each item.\n *\n * If `obj` is an Array callback will be called passing\n * the value, index, and complete array for each item.\n *\n * If 'obj' is an Object callback will be called passing\n * the value, key, and complete object for each property.\n *\n * @param {Object|Array} obj The object to iterate\n * @param {Function} fn The callback to invoke for each item\n *\n * @param {Boolean} [allOwnKeys = false]\n * @returns {any}\n */\nfunction forEach(obj, fn, {allOwnKeys = false} = {}) {\n // Don't bother if no value provided\n if (obj === null || typeof obj === 'undefined') {\n return;\n }\n\n let i;\n let l;\n\n // Force an array if not already something iterable\n if (typeof obj !== 'object') {\n /*eslint no-param-reassign:0*/\n obj = [obj];\n }\n\n if (isArray(obj)) {\n // Iterate over array values\n for (i = 0, l = obj.length; i < l; i++) {\n fn.call(null, obj[i], i, obj);\n }\n } else {\n // Iterate over object keys\n const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);\n const len = keys.length;\n let key;\n\n for (i = 0; i < len; i++) {\n key = keys[i];\n fn.call(null, obj[key], key, obj);\n }\n }\n}\n\nfunction findKey(obj, key) {\n key = key.toLowerCase();\n const keys = Object.keys(obj);\n let i = keys.length;\n let _key;\n while (i-- > 0) {\n _key = keys[i];\n if (key === _key.toLowerCase()) {\n return _key;\n }\n }\n return null;\n}\n\nconst _global = (() => {\n /*eslint no-undef:0*/\n if (typeof globalThis !== \"undefined\") return globalThis;\n return typeof self !== \"undefined\" ? self : (typeof window !== 'undefined' ? window : global)\n})();\n\nconst isContextDefined = (context) => !isUndefined(context) && context !== _global;\n\n/**\n * Accepts varargs expecting each argument to be an object, then\n * immutably merges the properties of each object and returns result.\n *\n * When multiple objects contain the same key the later object in\n * the arguments list will take precedence.\n *\n * Example:\n *\n * ```js\n * var result = merge({foo: 123}, {foo: 456});\n * console.log(result.foo); // outputs 456\n * ```\n *\n * @param {Object} obj1 Object to merge\n *\n * @returns {Object} Result of all merge properties\n */\nfunction merge(/* obj1, obj2, obj3, ... */) {\n const {caseless} = isContextDefined(this) && this || {};\n const result = {};\n const assignValue = (val, key) => {\n const targetKey = caseless && findKey(result, key) || key;\n if (isPlainObject(result[targetKey]) && isPlainObject(val)) {\n result[targetKey] = merge(result[targetKey], val);\n } else if (isPlainObject(val)) {\n result[targetKey] = merge({}, val);\n } else if (isArray(val)) {\n result[targetKey] = val.slice();\n } else {\n result[targetKey] = val;\n }\n }\n\n for (let i = 0, l = arguments.length; i < l; i++) {\n arguments[i] && forEach(arguments[i], assignValue);\n }\n return result;\n}\n\n/**\n * Extends object a by mutably adding to it the properties of object b.\n *\n * @param {Object} a The object to be extended\n * @param {Object} b The object to copy properties from\n * @param {Object} thisArg The object to bind function to\n *\n * @param {Boolean} [allOwnKeys]\n * @returns {Object} The resulting value of object a\n */\nconst extend = (a, b, thisArg, {allOwnKeys}= {}) => {\n forEach(b, (val, key) => {\n if (thisArg && isFunction(val)) {\n a[key] = bind(val, thisArg);\n } else {\n a[key] = val;\n }\n }, {allOwnKeys});\n return a;\n}\n\n/**\n * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)\n *\n * @param {string} content with BOM\n *\n * @returns {string} content value without BOM\n */\nconst stripBOM = (content) => {\n if (content.charCodeAt(0) === 0xFEFF) {\n content = content.slice(1);\n }\n return content;\n}\n\n/**\n * Inherit the prototype methods from one constructor into another\n * @param {function} constructor\n * @param {function} superConstructor\n * @param {object} [props]\n * @param {object} [descriptors]\n *\n * @returns {void}\n */\nconst inherits = (constructor, superConstructor, props, descriptors) => {\n constructor.prototype = Object.create(superConstructor.prototype, descriptors);\n constructor.prototype.constructor = constructor;\n Object.defineProperty(constructor, 'super', {\n value: superConstructor.prototype\n });\n props && Object.assign(constructor.prototype, props);\n}\n\n/**\n * Resolve object with deep prototype chain to a flat object\n * @param {Object} sourceObj source object\n * @param {Object} [destObj]\n * @param {Function|Boolean} [filter]\n * @param {Function} [propFilter]\n *\n * @returns {Object}\n */\nconst toFlatObject = (sourceObj, destObj, filter, propFilter) => {\n let props;\n let i;\n let prop;\n const merged = {};\n\n destObj = destObj || {};\n // eslint-disable-next-line no-eq-null,eqeqeq\n if (sourceObj == null) return destObj;\n\n do {\n props = Object.getOwnPropertyNames(sourceObj);\n i = props.length;\n while (i-- > 0) {\n prop = props[i];\n if ((!propFilter || propFilter(prop, sourceObj, destObj)) && !merged[prop]) {\n destObj[prop] = sourceObj[prop];\n merged[prop] = true;\n }\n }\n sourceObj = filter !== false && getPrototypeOf(sourceObj);\n } while (sourceObj && (!filter || filter(sourceObj, destObj)) && sourceObj !== Object.prototype);\n\n return destObj;\n}\n\n/**\n * Determines whether a string ends with the characters of a specified string\n *\n * @param {String} str\n * @param {String} searchString\n * @param {Number} [position= 0]\n *\n * @returns {boolean}\n */\nconst endsWith = (str, searchString, position) => {\n str = String(str);\n if (position === undefined || position > str.length) {\n position = str.length;\n }\n position -= searchString.length;\n const lastIndex = str.indexOf(searchString, position);\n return lastIndex !== -1 && lastIndex === position;\n}\n\n\n/**\n * Returns new array from array like object or null if failed\n *\n * @param {*} [thing]\n *\n * @returns {?Array}\n */\nconst toArray = (thing) => {\n if (!thing) return null;\n if (isArray(thing)) return thing;\n let i = thing.length;\n if (!isNumber(i)) return null;\n const arr = new Array(i);\n while (i-- > 0) {\n arr[i] = thing[i];\n }\n return arr;\n}\n\n/**\n * Checking if the Uint8Array exists and if it does, it returns a function that checks if the\n * thing passed in is an instance of Uint8Array\n *\n * @param {TypedArray}\n *\n * @returns {Array}\n */\n// eslint-disable-next-line func-names\nconst isTypedArray = (TypedArray => {\n // eslint-disable-next-line func-names\n return thing => {\n return TypedArray && thing instanceof TypedArray;\n };\n})(typeof Uint8Array !== 'undefined' && getPrototypeOf(Uint8Array));\n\n/**\n * For each entry in the object, call the function with the key and value.\n *\n * @param {Object\n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n","import LoadSpinner from \"./LoadSpinner\";\n\nexport default function AddIdentifierButton() {\n return (\n \n
\n );\n}\n","import { useState, useRef, useEffect } from \"react\";\n\nexport default function InfoPopup() {\n const [isOpen, setIsOpen] = useState(false);\n const popupRef = useRef();\n\n const handleOpen = () => {\n setIsOpen(!isOpen);\n };\n\n useEffect(() => {\n const handleDocumentClick = (event) => {\n if (popupRef.current && !popupRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"click\", handleDocumentClick);\n\n return () => {\n document.removeEventListener(\"click\", handleDocumentClick);\n };\n }, [isOpen]);\n\n return (\n \n {error}\n
\n {\n event.stopPropagation();\n handleOpen();\n }}\n className=\"cursor-pointer text-[#263143] dark:text-[#CDDDF6]\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n fill=\"currentColor\"\n fillOpacity=\"0.35\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n
\n );\n}\n","var _path, _defs;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgConnectedRelay(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 10,\n height: 10,\n viewBox: \"0 0 10 10\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.41917 7.97536C5.4751 8.03109 5.51947 8.09732 5.54975 8.17024C5.58003 8.24316 5.59562 8.32134 5.59562 8.4003C5.59562 8.47925 5.58003 8.55743 5.54975 8.63035C5.51947 8.70327 5.4751 8.7695 5.41917 8.82523L5.12221 9.12219C4.55951 9.6849 3.79631 10.001 3.00052 10.001C2.20474 10.001 1.44154 9.6849 0.878833 9.12219C0.316126 8.55948 0 7.79629 0 7.0005C0 6.20471 0.316126 5.44152 0.878833 4.87881L2.08466 3.67349C2.62532 3.13149 3.35276 2.81672 4.11797 2.79367C4.88318 2.77062 5.62825 3.04103 6.20056 3.5495C6.25964 3.60202 6.30781 3.66567 6.3423 3.7368C6.37679 3.80794 6.39693 3.88517 6.40157 3.96409C6.40621 4.04301 6.39526 4.12207 6.36935 4.19675C6.34344 4.27144 6.30307 4.34029 6.25055 4.39938C6.19803 4.45847 6.13438 4.50663 6.06325 4.54112C5.99211 4.57561 5.91488 4.59575 5.83597 4.60039C5.75705 4.60503 5.67799 4.59409 5.6033 4.56817C5.52861 4.54226 5.45976 4.50189 5.40067 4.44937C5.05748 4.14458 4.61081 3.98243 4.15201 3.99609C3.69322 4.00975 3.25698 4.19819 2.93253 4.52286L1.72771 5.72669C1.39014 6.06426 1.20049 6.5221 1.20049 6.9995C1.20049 7.4769 1.39014 7.93474 1.72771 8.27231C2.06528 8.60989 2.52313 8.79953 3.00052 8.79953C3.47792 8.79953 3.93577 8.60989 4.27334 8.27231L4.57029 7.97536C4.62601 7.91958 4.69217 7.87533 4.765 7.84514C4.83783 7.81495 4.9159 7.79941 4.99473 7.79941C5.07357 7.79941 5.15164 7.81495 5.22446 7.84514C5.29729 7.87533 5.36345 7.91958 5.41917 7.97536ZM9.12263 0.876394C8.55946 0.314552 7.79644 -0.000976562 7.00094 -0.000976562C6.20544 -0.000976562 5.44242 0.314552 4.87925 0.876394L4.58229 1.17335C4.46959 1.28605 4.40628 1.43891 4.40628 1.59829C4.40628 1.75767 4.46959 1.91053 4.58229 2.02323C4.69499 2.13593 4.84785 2.19924 5.00723 2.19924C5.16661 2.19924 5.31947 2.13593 5.43217 2.02323L5.72913 1.72627C6.0667 1.3887 6.52454 1.19905 7.00194 1.19905C7.47934 1.19905 7.93718 1.3887 8.27475 1.72627C8.61233 2.06384 8.80197 2.52169 8.80197 2.99908C8.80197 3.47648 8.61233 3.93433 8.27475 4.2719L7.06943 5.47772C6.7447 5.80226 6.30822 5.99042 5.84931 6.00371C5.3904 6.017 4.94376 5.85441 4.60079 5.54921C4.5417 5.49669 4.47285 5.45632 4.39816 5.43041C4.32348 5.4045 4.24442 5.39355 4.1655 5.39819C4.08658 5.40284 4.00935 5.42298 3.93821 5.45747C3.86708 5.49196 3.80344 5.54012 3.75091 5.5992C3.69839 5.65829 3.65802 5.72714 3.63211 5.80183C3.6062 5.87652 3.59525 5.95558 3.5999 6.0345C3.60454 6.11341 3.62468 6.19065 3.65917 6.26178C3.69366 6.33291 3.74182 6.39656 3.80091 6.44908C4.37281 6.95744 5.11738 7.22802 5.88223 7.20543C6.64708 7.18285 7.37439 6.86882 7.91531 6.3276L9.12113 5.12227C9.68363 4.55925 9.99972 3.79601 10 3.00014C10.0003 2.20428 9.68473 1.44082 9.12263 0.877394V0.876394Z\",\n fill: \"url(#paint0_linear_117_156)\"\n })), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint0_linear_117_156\",\n x1: 2.39664,\n y1: 1.82717,\n x2: 6.94908,\n y2: 7.58468,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"white\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\",\n stopOpacity: 0.72\n })))));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgConnectedRelay);\nexport default __webpack_public_path__ + \"static/media/connected-relay.af611dd73d7d8400ecb90e0d101fa2a9.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _defs;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgDisconnectedRelay(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 10,\n height: 10,\n viewBox: \"0 0 10 10\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.11301 1.73534L5.92769 1.94893C5.87159 2.01366 5.80329 2.06671 5.7267 2.10505C5.6501 2.14338 5.5667 2.16626 5.48126 2.17237C5.39582 2.17847 5.31001 2.16769 5.22874 2.14064C5.14747 2.11358 5.07232 2.07078 5.00759 2.01469C4.94286 1.95859 4.88981 1.89029 4.85147 1.81369C4.81313 1.7371 4.79026 1.6537 4.78415 1.56826C4.77182 1.3957 4.82854 1.22532 4.94183 1.09459L5.144 0.861438C5.15433 0.850025 5.16465 0.838612 5.17552 0.827743C5.70552 0.297748 6.42435 0 7.17387 0C7.545 0 7.91249 0.073099 8.25537 0.215123C8.59825 0.357148 8.90979 0.565316 9.17222 0.827743C9.43465 1.09017 9.64281 1.40172 9.78484 1.74459C9.92686 2.08747 9.99996 2.45496 9.99996 2.82609C9.99996 3.19722 9.92686 3.56471 9.78484 3.90759C9.64281 4.25047 9.43465 4.56201 9.17222 4.82444C9.16135 4.83531 9.14994 4.84564 9.13852 4.85596L8.90537 5.05813C8.84064 5.11423 8.76549 5.15703 8.68422 5.18408C8.60295 5.21114 8.51714 5.22192 8.43171 5.21581C8.34627 5.20971 8.26287 5.18683 8.18627 5.14849C8.10967 5.11016 8.04137 5.05711 7.98528 4.99237C7.92918 4.92764 7.88638 4.85249 7.85933 4.77122C7.83227 4.68995 7.82149 4.60414 7.8276 4.5187C7.8337 4.43326 7.85658 4.34987 7.89492 4.27327C7.93325 4.19667 7.9863 4.12837 8.05104 4.07227L8.26462 3.88695C8.54055 3.59972 8.69286 3.21575 8.68886 2.81747C8.68486 2.4192 8.52487 2.03836 8.24324 1.75673C7.9616 1.47509 7.58077 1.3151 7.18249 1.3111C6.78422 1.3071 6.40025 1.45942 6.11301 1.73534ZM4.99237 7.98528C4.92765 7.92917 4.8525 7.88636 4.77123 7.8593C4.68995 7.83223 4.60414 7.82145 4.5187 7.82756C4.43326 7.83366 4.34986 7.85654 4.27326 7.89489C4.19666 7.93323 4.12836 7.98629 4.07227 8.05104L3.88695 8.26462C3.59972 8.54055 3.21575 8.69286 2.81747 8.68886C2.4192 8.68486 2.03836 8.52487 1.75673 8.24324C1.47509 7.9616 1.3151 7.58077 1.3111 7.18249C1.3071 6.78422 1.45942 6.40025 1.73534 6.11301L1.94893 5.92769C2.07966 5.8144 2.16003 5.65381 2.17237 5.48126C2.1847 5.30871 2.12798 5.13832 2.01469 5.00759C1.90139 4.87686 1.74081 4.79648 1.56826 4.78415C1.3957 4.77182 1.22532 4.82854 1.09459 4.94183L0.861438 5.144C0.850025 5.15433 0.838612 5.16465 0.827743 5.17552C0.297748 5.70552 -7.89754e-09 6.42435 0 7.17387C7.89754e-09 7.9234 0.297748 8.64222 0.827743 9.17222C1.35774 9.70221 2.07657 9.99996 2.82609 9.99996C3.57562 9.99996 4.29444 9.70221 4.82444 9.17222C4.83531 9.16135 4.84564 9.14994 4.85596 9.13852L5.05813 8.90537C5.11424 8.84065 5.15705 8.7655 5.18411 8.68423C5.21117 8.60296 5.22196 8.51715 5.21585 8.4317C5.20975 8.34626 5.18687 8.26286 5.14852 8.18626C5.11018 8.10966 5.05712 8.04137 4.99237 7.98528ZM9.34776 6.08693H8.26082C8.08785 6.08693 7.92197 6.15564 7.79966 6.27794C7.67736 6.40025 7.60865 6.56613 7.60865 6.73909C7.60865 6.91206 7.67736 7.07794 7.79966 7.20024C7.92197 7.32255 8.08785 7.39126 8.26082 7.39126H9.34776C9.52073 7.39126 9.68661 7.32255 9.80891 7.20024C9.93122 7.07794 9.99993 6.91206 9.99993 6.73909C9.99993 6.56613 9.93122 6.40025 9.80891 6.27794C9.68661 6.15564 9.52073 6.08693 9.34776 6.08693ZM0.652201 3.91304H1.73915C1.91211 3.91304 2.07799 3.84433 2.2003 3.72202C2.3226 3.59972 2.39131 3.43383 2.39131 3.26087C2.39131 3.0879 2.3226 2.92202 2.2003 2.79972C2.07799 2.67741 1.91211 2.6087 1.73915 2.6087H0.652201C0.479236 2.6087 0.313355 2.67741 0.19105 2.79972C0.0687446 2.92202 3.44148e-05 3.0879 3.44148e-05 3.26087C3.44148e-05 3.43383 0.0687446 3.59972 0.19105 3.72202C0.313355 3.84433 0.479236 3.91304 0.652201 3.91304ZM6.73909 7.60865C6.56613 7.60865 6.40025 7.67736 6.27794 7.79966C6.15564 7.92197 6.08693 8.08785 6.08693 8.26082V9.34776C6.08693 9.52073 6.15564 9.68661 6.27794 9.80891C6.40025 9.93122 6.56613 9.99993 6.73909 9.99993C6.91206 9.99993 7.07794 9.93122 7.20024 9.80891C7.32255 9.68661 7.39126 9.52073 7.39126 9.34776V8.26082C7.39126 8.08785 7.32255 7.92197 7.20024 7.79966C7.07794 7.67736 6.91206 7.60865 6.73909 7.60865ZM3.26087 2.39131C3.43383 2.39131 3.59972 2.3226 3.72202 2.2003C3.84433 2.07799 3.91304 1.91211 3.91304 1.73915V0.652201C3.91304 0.479236 3.84433 0.313355 3.72202 0.19105C3.59972 0.0687446 3.43383 3.44148e-05 3.26087 3.44148e-05C3.0879 3.44148e-05 2.92202 0.0687446 2.79972 0.19105C2.67741 0.313355 2.6087 0.479236 2.6087 0.652201V1.73915C2.6087 1.91211 2.67741 2.07799 2.79972 2.2003C2.92202 2.3226 3.0879 2.39131 3.26087 2.39131Z\",\n fill: \"url(#paint0_linear_117_188)\"\n })), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint0_linear_117_188\",\n x1: 2.39663,\n y1: 1.82778,\n x2: 6.94793,\n y2: 7.58499,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"white\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\",\n stopOpacity: 0.72\n })))));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgDisconnectedRelay);\nexport default __webpack_public_path__ + \"static/media/disconnected-relay.0bb9f4509e41acd0d068c76cfaac4484.svg\";\nexport { ForwardRef as ReactComponent };","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t\n
\n )}\n \n Simply add your NIP-05 identifier or npub address to automatically\n detect your public relays. Your private relay will then establish\n connections with your public relays, fetching your Nostr activity\n from them.\n
\n\n This process backs up your past activity from before you started\n using your private relay, as well as any future activity—even if\n your Nostr client is not connected to your private relay at the\n time.\n
\n\n Any updates to your public relays in the future will be\n automatically detected, ensuring continuous synchronization.\n
\n{message}
\n \n );\n};\n\nexport default SyncConfirmationMsg;\n","export const PORT = window.location.port;\n// export const PORT = 3000;\nexport const WEB_SOCKET_RELAY_URL = `${\n window.location.protocol === \"https:\" ? \"wss:\" : \"ws:\"\n}//${window.location.hostname}:${PORT}`;\nexport const HTTP_RELAY_URL = `${window.location.protocol}//${window.location.hostname}:${PORT}`;\nexport const RELAY_PROXY_URL = `${window.location.protocol}//${window.location.hostname}:${PORT}/relay-proxy`;\n","import { useState, useEffect, useRef } from \"react\";\nimport axios from \"axios\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport AddIdentifierButton from \"./AddIdentifierButton\";\nimport RemoveIdentiferButton from \"./RemoveIdentifierButton\";\nimport LoadingButton from \"./LoadingButton\";\nimport ErrorMessage from \"./utility/ErrorMessage\";\nimport InfoPopup from \"./InfoPopup\";\nimport connectedRelayIcon from \"../assets/connected-relay.svg\";\nimport disconnectedRelayIcon from \"../assets/disconnected-relay.svg\";\nimport { toast } from \"react-toastify\";\nimport SyncConfirmationMsg from \"./SyncConfirmationMsg\";\n\nimport { RELAY_PROXY_URL } from \"../constants/constants\";\n\nexport default function PublicRelaysModal({\n onClose,\n isPreventModalClose,\n setIsPreventModalClose,\n}) {\n const [publicRelays, setPublicRelays] = useState(null);\n const fetchIntervalRef = useRef();\n const [serverConnectionError, setServerConnectionError] = useState(null);\n const [error, setError] = useState(null);\n const errorTimeoutRef = useRef();\n const [inputValue, setInputValue] = useState(\"\");\n const modalRef = useRef();\n const [isLoading, setIsLoading] = useState(false);\n const [openPopup, setOpenPopup] = useState(false);\n // sync confirmation modal state\n const [isTimerRunning, setIsTimerRunning] = useState(false);\n const timerRef = useRef();\n\n // When the modal is open, we prevent background scrolling and compensate for the scrollbar disappearing so the page doesn't jump\n useEffect(() => {\n const scrollBarWidth =\n window.innerWidth - document.documentElement.clientWidth;\n document.body.style.overflow = \"hidden\";\n document.body.style.paddingRight = `${scrollBarWidth}px`;\n\n return () => {\n document.body.style.overflow = \"unset\";\n document.body.style.paddingRight = \"unset\";\n };\n }, []);\n\n useEffect(() => {\n fetchPublicRelaysOnMount();\n\n return () => {\n clearInterval(fetchIntervalRef.current);\n };\n }, []);\n\n useEffect(() => {\n const handleDocumentClick = (event) => {\n if (modalRef.current && !modalRef.current.contains(event.target)) {\n onClose();\n }\n };\n\n document.addEventListener(\"click\", handleDocumentClick);\n\n return () => {\n document.removeEventListener(\"click\", handleDocumentClick);\n };\n }, [onClose]);\n\n // clear the confirmation timeout when we receive the first event from syncing public relays\n // and show confirmation modal right away\n // TODO: refactor so that we are not using publicRelays object in dependency array\n useEffect(() => {\n if (isTimerRunning && publicRelays?.firstEventReceived) {\n clearTimeout(timerRef.current);\n setIsTimerRunning(false);\n setIsPreventModalClose(false);\n toast(\n\n
\n \n Sync from public relays\n
\n\n
\n \n Back up all your past Nostr activity from your public relays and\n ensure future activity is backed up, even if the connection between\n your private relay and Nostr client is interrupted.\n
\n\n setInputValue(e.target.value)}\n />\n {(isLoading && publicRelays.relayStates.length === 0) ||\n isPreventModalClose ? (\n handleButtonClick(e, \"remove\")}\n />\n ) : (\n handleButtonClick(e, \"add\")}\n disabled={\n publicRelays?.identifier || !inputValue || serverConnectionError\n }\n />\n )}\n
\n {serverConnectionError && \n
\n )}\n \n No relays discovered\n
\n\n {publicRelays !== null &&\n publicRelays.relayStates.map((relay, index) => (\n \n \n \n ))}\n
\n \n );\n}\n","import { useEffect, useState, useRef } from \"react\";\nimport { usePopper } from \"react-popper\";\n\nimport Layout from \"./components/Layout\";\nimport Header from \"./components/Header\";\nimport Footer from \"./components/Footer\";\n\nimport Card from \"./components/utility/Card\";\nimport CopyText from \"./components/utility/CopyText\";\nimport ConnectClient from \"./components/ConnectClient\";\nimport TotalBackups from \"./components/TotalBackups\";\nimport LatestActions from \"./components/LatestActions\";\nimport PublicRelaysModal from \"./components/PublicRelaysModal\";\nimport { ToastContainer } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\n\nimport {\n PORT,\n WEB_SOCKET_RELAY_URL, // Websocket URL of the private relay\n HTTP_RELAY_URL, // http URL of the private relay\n} from \"./constants/constants\";\n\n// Event kinds that we want to render in the UI\nconst supportedEventKinds = {\n 0: {\n icon: \"📝\",\n name: \"Profile Update\",\n },\n 1: {\n icon: \"💭\",\n name: \"Post\",\n showContent: true,\n },\n 2: {\n icon: \"📶\",\n name: \"Relay Update\",\n },\n 3: {\n icon: \"🤝\",\n name: \"Following Update\",\n },\n 4: {\n icon: \"🔏\",\n name: \"Encrypted DM\",\n },\n 5: {\n icon: \"🗑\",\n name: \"Deleted Action\",\n },\n 6: {\n icon: \"🔁\",\n name: \"Repost\",\n },\n 7: {\n icon: \"🤙\",\n name: \"Reaction\",\n },\n 40: {\n icon: \"🧙♂️\",\n name: \"Channel Creation\",\n showContent: true,\n contentKey: \"name\",\n },\n 41: {\n icon: \"🪄\",\n name: \"Channel Update\",\n showContent: true,\n contentKey: \"name\",\n },\n 42: {\n icon: \"📢\",\n name: \"Channel Message\",\n showContent: true,\n },\n 43: {\n icon: \"🙈\",\n name: \"Hid Message\",\n },\n 44: {\n icon: \"🙊\",\n name: \"Muted User\",\n },\n 22242: {\n icon: \"🔓\",\n name: \"Authenticated Relay\",\n },\n other: {\n icon: \"🛠\",\n name: \"Other Action\",\n },\n};\n\n// Total events we want to render in the activity list\nconst eventsToRenderLimit = 300;\n\nexport default function App() {\n // State to store events from websocket\n const [events, setEvents] = useState([]);\n // State to store the connection status of websocket\n const [isConnected, setIsConnected] = useState(false);\n // State to keep track of whether all stored events have been fetched\n const [hasFetchedAllEvents, setHasFetchedAllEvents] = useState(false);\n // State to store the relay info as per NIP-11: https://github.com/nostr-protocol/nips/blob/master/11.md\n const [relayInformationDocument, setRelayInformationDocument] = useState({});\n // State to track the public relays modal\n const [showModal, setShowModal] = useState(false);\n const [isPreventModalClose, setIsPreventModalClose] = useState(false);\n // State to store the reference and popper elements for the public relays modal\n const [offset, setOffset] = useState(\n window.innerWidth > 768 ? [-170, 10] : [0, 10],\n );\n const [referenceElement, setReferenceElement] = useState(null);\n const [popperElement, setPopperElement] = useState(null);\n const { styles, attributes, update } = usePopper(\n referenceElement,\n popperElement,\n {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: offset,\n },\n },\n ],\n },\n );\n const updatePopper = useRef(update);\n\n useEffect(() => {\n // Create websocket connection\n const socket = new WebSocket(WEB_SOCKET_RELAY_URL);\n\n // Generate a random subscription ID\n const subscriptionID =\n Math.random().toString(36).substring(2, 15) +\n Math.random().toString(36).substring(2, 15);\n\n // Handle websocket connection open event\n socket.onopen = () => {\n setIsConnected(true);\n // Reset events array to clear previous events\n setEvents([]);\n // Request latest 3000 events\n socket.send(JSON.stringify([\"REQ\", subscriptionID, { limit: 3000 }]));\n };\n\n // Handle websocket message event\n socket.onmessage = (message) => {\n // Parse the message data\n const data = JSON.parse(message.data);\n\n if (!data.length) {\n console.error(\"Error: No data length\", data);\n return;\n }\n\n // Check if data is End of Stored Events Notice\n // https://github.com/nostr-protocol/nips/blob/master/15.md\n if (data[0] === \"EOSE\") {\n setHasFetchedAllEvents(true);\n return;\n }\n\n // If the data is of type EVENT\n if (data[0] === \"EVENT\") {\n // Add the event to the events array\n setEvents((prevEvents) => {\n // Extract the relevant data from the event\n const { id, kind, created_at, content } = data[2];\n return [{ id, kind, created_at, content }, ...prevEvents];\n });\n }\n };\n\n // Handle websocket error\n socket.onerror = () => {\n setIsConnected(false);\n };\n\n // Handle websocket close\n socket.onclose = () => {\n setIsConnected(false);\n };\n\n // get nostr-rs-relay version\n fetch(HTTP_RELAY_URL, {\n method: \"GET\",\n headers: {\n Accept: \"application/nostr+json\",\n },\n }).then(async (response) => {\n if (response.ok) {\n const relayInfoDoc = await response.json();\n setRelayInformationDocument(relayInfoDoc);\n }\n });\n\n // Cleanup function to run on component unmount\n return () => {\n // Check if the websocket is open\n if (socket.readyState === WebSocket.OPEN) {\n // Stop previous subscription and close the websocket\n socket.send(JSON.stringify([\"CLOSE\", subscriptionID]));\n socket.close();\n }\n };\n }, []);\n\n // Update popper offset for the public relays modal when the window is resized\n useEffect(() => {\n const handleResize = () => {\n setOffset(window.innerWidth > 768 ? [-150, 10] : [0, 10]);\n updatePopper.current?.();\n };\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n return (\n \n \n \n\n \n \n\n © Umbrel 2023.}\n rightContent={\n <>\n Powered by{\" \"}\n \n nostr-rs-relay\n {relayInformationDocument.version\n ? ` ${relayInformationDocument.version}`\n : \"\"}\n \n .\n \n }\n />\n {showModal && (\n \n {\n if (isPreventModalClose) return;\n setShowModal(false);\n }}\n isPreventModalClose={isPreventModalClose}\n setIsPreventModalClose={setIsPreventModalClose}\n />\n
\n )}\n \n \n {\n event.stopPropagation();\n setShowModal((prevState) => !prevState); // toggles the current state of showModal\n }}\n className={`self-center p-3 m-1 rounded-md bg-white ring-1 ring-gray-900/5 dark:ring-white/10 hover:bg-[#CEC8F4] dark:hover:bg-[#264D96] ${\n showModal\n ? \"bg-[#CEC8F4] dark:bg-[#264D96] ring-violet-400 dark:ring-white/30\"\n : \"dark:bg-slate-900\"\n }`}\n >\n \n \n
\n \n \n Relay URL: \n \n
\n