\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
\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}\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 _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function _toPropertyKey(arg) {\n var key = toPrimitive(arg, \"string\");\n return _typeof(key) === \"symbol\" ? key : String(key);\n}","import _typeof from \"./typeof.js\";\nexport default function _toPrimitive(input, hint) {\n if (_typeof(input) !== \"object\" || input === null) return input;\n var prim = input[Symbol.toPrimitive];\n if (prim !== undefined) {\n var res = prim.call(input, hint || \"default\");\n if (_typeof(res) !== \"object\") return res;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (hint === \"string\" ? String : Number)(input);\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 Connect your Nostr clients, such as Damus, Astral, and Amethyst, to your\n private relay for seamless backup of all your activity on Nostr. This\n ensures that your activity is not lost even if you are censored or\n blocked by public relays.\n
\n \n\n In Damus, go to Settings > Relays, and add your Relay URL.\n
\n\n
\n Tip: Install{\" \"}\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","import { useEffect, useState } from \"react\";\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\";\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\nconst relayPort = window.location.port;\n\n// Websocket URL of the relay\nconst webSocketProtocol =\n window.location.protocol === \"https:\" ? \"wss:\" : \"ws:\";\nconst webSocketRelayUrl = `${webSocketProtocol}//${window.location.hostname}:${relayPort}`;\n\n// HTTP URL of the relay\nconst HttpRelayUrl = `${window.location.protocol}//${window.location.hostname}:${relayPort}`;\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\n useEffect(() => {\n // Create websocket connection\n const socket = new WebSocket(webSocketRelayUrl);\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 100 events\n socket.send(JSON.stringify([\"REQ\", subscriptionID, { limit: 1000 }]));\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(HttpRelayUrl, {\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 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
\n \n \n Relay URL: \n \n
\n