refactor(docs): move source for doc pages here (#119)

* docs: move dev docs to dev-docs folder

* docs: move source for doc pages here

* docs: improve docs

docs/.gitignore

@@ -0,0 +1,3 @@
+.next
+node_modules
+.DS_Store

docs/Dockerfile

@@ -0,0 +1,72 @@
+# Use the official Node.js 18 slim image as a base
+FROM node:18-slim AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Copy the lockfiles and package.json to install dependencies
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+
+# Copy the installed node_modules and the rest of the app's source code
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Add a system group and user for running the app
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy the public folder and the built .next folder
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Switch to the new user
+USER nextjs
+
+# Expose the port that the app runs on
+EXPOSE 3000
+
+# Set the hostname
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD node server.js

docs/components/SwapProviderTable.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+
+export default function SwapProviderTable() {
+  function satsToBtc(sats) {
+    return sats / 100000000;
+  }
+
+  async function getProviders() {
+    // from https://unstoppableswap.net/api/list with cors disabled
+    const response = await fetch("https://api.unstoppableswap.net/api/list");
+    const data = await response.json();
+    return data;
+  }
+
+  const [providers, setProviders] = useState([]);
+
+  useEffect(() => {
+    getProviders().then((data) => {
+      setProviders(data);
+    });
+  }, []);
+
+  return (
+    <div
+      style={{
+        overflowX: "scroll",
+      }}
+    >
+      <table>
+        <thead>
+          <tr>
+            <th>Multiaddress</th>
+            <th>Peer ID</th>
+            <th>Minimum Amount</th>
+            <th>Maximum Amount</th>
+            <th>Exchange Rate</th>
+            <th>Uptime</th>
+          </tr>
+        </thead>
+        <tbody>
+          {providers.map((provider) => (
+            <tr key={provider.peerId}>
+              <td>{provider.multiAddr}</td>
+              <td>{provider.peerId}</td>
+              <td>{satsToBtc(provider.minSwapAmount)} BTC</td>
+              <td>{satsToBtc(provider.maxSwapAmount)} BTC</td>
+              <td>{satsToBtc(provider.price)} XMR/BTC</td>
+              <td>{(provider.uptime * 100).toFixed(1)}%</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/next.config.js

@@ -0,0 +1,11 @@
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
+
+module.exports = withNextra({
+  output: "standalone",
+});
+
+// If you have other Next.js configurations, you can pass them as the parameter:
+// module.exports = withNextra({ /* other next.js config */ })

docs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "unstoppableswap-docs",
+  "version": "1.0.0",
+  "description": "Documentation for the UnstoppableSwap GUI",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^14.2.4",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.5",
+    "typescript": "5.4.5"
+  }
+}

docs/pages/_meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Home",
+  "getting_started": "Getting Started",
+  "usage": "Usage",
+  "advanced": "Advanced",
+  "donate": "Donate"
+}

docs/pages/advanced/_meta.json

@@ -0,0 +1,3 @@
+{
+  "swap_on_testnet": "How to swap on Testnet"
+}

docs/pages/advanced/swap_on_testnet.mdx

@@ -0,0 +1,49 @@
+# Swapping on Testnet
+
+Swapping on the testnet is a great way to test out the swap functionality without risking your mainnet assets. The testnet is a separate network from the mainnet, and the assets on the testnet are worthless.
+To be exact, `testnet3` bitcoin will be swapped for `stagenet` Monero. You will need to set up two wallets to perform a swap:
+
+- A Testnet3 Electrum Wallet (Bitcoin)
+- A Stagenet Monero GUI Wallet
+
+## Electrum
+
+Download Electrum from the official [site](https://electrum.org/#download) and then start the wallet with the `--testnet` flag.
+
+### Linux
+
+```
+./electrum --testnet
+```
+
+### Mac OS:
+
+```
+open -n /Applications/Electrum.app --args --testnet
+```
+
+### Windows:
+
+If you install Electrum on Windows, you will have two programs you can start. One of them is called "Electrum Testnet".
+
+### Getting testnet coins
+
+To get some free Testnet coins visit a faucet like [this](https://testnet-faucet.mempool.co) one.
+
+## Monero
+
+If you use the `monero-wallet-cli` you simply need to start it with the `--stagenet` flag. If you use the GUI you can follow [this](https://www.youtube.com/watch?v=5E4aO3UAqJo) tutorial by the COMIT guys.
+
+You can use this remote note:
+
+```
+stagenet.melo.tools:38081
+```
+
+## Installing the GUI
+
+View the [Installation Instructions](../getting_started/install_instructions) if you haven't already installed the GUI.
+
+## Making a swap
+
+Start the GUI with the environment variable `TESTNET=true`. From here on you can follow the [Complete your first Atomic Swap](../usage/first_swap) guide with the difference that you will be using the testnet wallets. The process is the same, but you will be using the testnet wallets instead of the mainnet wallets.

docs/pages/donate.mdx

@@ -0,0 +1,13 @@
+# Donate
+
+We rely on generous donors like you to keep development moving forward. To bring Atomic Swaps to life, we need resources. If you have the possibility, please consider making a donation to the project. All funds will be used to support contributors and critical infrastructure.
+
+If you interested in a partnership or want to support the project in a way that requires coordination with the contributors, contact [`@binarybaron:matrix.org`](https://matrix.to/#/@binarybaron:matrix.org) on Matrix.
+
+```copy filename="Monero Donation Address"
+49LEH26DJGuCyr8xzRAzWPUryzp7bpccC7Hie1DiwyfJEyUKvMFAethRLybDYrFdU1eHaMkKQpUPebY4WT3cSjEvThmpjPa
+```
+
+```copy filename="Bitcoin Donation Address"
+bc1qz6lfs0r206396a9psunmkfpqh7sdf2zh3e7tnf
+```

docs/pages/getting_started/_meta.json

@@ -0,0 +1,3 @@
+{
+  "install_instructions": "Installation Instructions"
+}

docs/pages/getting_started/install_instructions.mdx

@@ -0,0 +1,59 @@
+# Installation Instructions
+
+Precompiled binaries of the _GUI_ are available for download for:
+
+- [Windows (64Bit)](#windows)
+- [Mac OS (Silicon)](#mac-os-silicon)
+- [Mac OS (Intel)](#mac-os-intel)
+- [Linux (Debian/Ubuntu, amd64/x86_64)](#linux-debian)
+- [Linux (Arch, x86_64)](#linux-pacman)
+- [Linux (AppImage, x86_64)](#linux-appimage)
+
+## Windows (64Bit) [#windows]
+
+1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/UnstoppableSwap-Setup-0.6.0.exe)
+2. Open the downloaded `.exe` installer
+3. Follow the installation instructions
+4. Open the `UnstoppableSwap` application from your Start menu
+
+## Mac OS (Silicon / ARM / M1 / M2 / M3) [#mac-os-silicon]
+
+1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/UnstoppableSwap-0.6.0-arm64.dmg)
+2. Open the downloaded `.dmg` file
+3. Drag the `UnstoppableSwap` icon to your Applications folder
+4. Open the `UnstoppableSwap` application from your Applications folder
+
+## Mac OS (Intel) [#mac-os-intel]
+
+1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/UnstoppableSwap-0.6.0.dmg)
+2. Open the downloaded `.dmg` file
+3. Drag the `UnstoppableSwap` icon to your Applications folder
+4. Open the `UnstoppableSwap` application from your Applications folder
+
+## Linux (Debian/Ubuntu, amd64/x86_64) [#linux-debian]
+
+For Debian-based distributions, you can download the Debian package and install it using `dpkg`.
+
+```bash filename="install.sh"
+wget https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/unstoppableswap-gui_0.6.0_amd64.deb
+sudo dpkg -i unstoppableswap-gui_0.6.0_amd64.deb
+```
+
+## Linux (Pacman, Arch, x86_64) [#linux-pacman]
+
+For Arch-based distributions, you can download the Pacman package and install it using `pacman`.
+
+```bash filename="install.sh"
+wget https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/unstoppableswap-gui-0.6.0.pacman
+sudo pacman -U unstoppableswap-gui-0.6.0.pacman
+```
+
+## Linux (AppImage) [#linux-appimage]
+
+For other Linux distributions, you can download the AppImage and run it directly. It includes all dependencies and will work on most systems.
+
+```bash filename="install.sh"
+wget https://github.com/UnstoppableSwap/unstoppableswap-gui/releases/download/v0.6.0/UnstoppableSwap-0.6.0.AppImage
+chmod +x UnstoppableSwap-0.6.0.AppImage
+./UnstoppableSwap-0.6.0.AppImage
+```

docs/pages/index.mdx

@@ -0,0 +1 @@
+

docs/pages/usage/_meta.json

@@ -0,0 +1,5 @@
+{
+  "first_swap": "Complete your first Atomic Swap",
+  "market_maker_discovery": "Swap Provider discovery",
+  "refund_punish": "Cancel, Refund and Punish explained"
+}

docs/pages/usage/first_swap.mdx

@@ -0,0 +1,117 @@
+# How to complete your first Atomic Swap
+
+In this guide, we'll walk you through the process of completing your first atomic swap using the UnstoppableSwap GUI.
+Although the process is quite intuitive, there are some nuances to be aware of, so we'll cover everything you need to know to get started.
+
+## Prerequisites
+
+To complete an Atomic Swap, you'll need to have the following:
+
+1. A Monero wallet you can use to receive funds
+2. A Bitcoin wallet you can use with some funds in it. 
+This wallet should also be able to generate a native SegWit address (an address starting with `bc1`). 
+This address will also receive any refunded Bitcoin if the swap is not completed.
+3. _UnstoppableSwap GUI_ installed on your computer. 
+We'll refer to this as _GUI_ from now on. View the [installation instructions](../getting_started/install_instructions) if you haven't already installed the GUI.
+
+import { Steps } from 'nextra/components'
+ 
+## Performing the swap
+<Steps>
+### Choose a _Swap Provider_ to swap with
+
+After opening the GUI, you'll be greeted with the main screen. 
+In the bottom of the screen you can see the currently selected _Swap Provider_. 
+This is who you'll send your Bitcoin to and who you'll receive the Monero from. 
+You can change the _Swap Provider_ by clicking on the arrow and selecting a different _Swap Provider_ from the list.
+
+import { Callout } from 'nextra/components'
+
+<Callout type="info">
+Different _Swap Providers_ offer different exchange rates and differing amounts of liquidity. You may want to choose the _Swap Provider_ that best suits your needs.
+</Callout>
+
+You can also use input field to calculate the approximate amount of Monero you'll receive for a given amount of Bitcoin. 
+
+<Callout type="info">
+The actual swap amount will be determined when you deposit your Bitcoin. 
+This is only used as a reference for you to get a rough idea of how much Monero you'll receive for your Bitcoin.
+</Callout>
+
+![image](/first_swap_1.png)
+
+### Start the Swap
+
+Once you've selected a _Swap Provider_, you can start the swap by clicking the `Swap` button. 
+This will open a new window where you need to enter two addresses:
+
+1. the Monero address you want to receive the Monero to
+2. the Bitcoin address where you want to receive the Bitcoin refund incase the swap is not completed successfully. 
+
+![image](/first_swap_2.png)
+
+### Depositing Bitcoin
+
+After pressing the <img src="/start_swap_button.png" style={{
+    height: "1lh",
+    display: "inline-block",
+    // center vertically
+    verticalAlign: "middle",
+}}/> button, you'll be shown an offer by the _Swap Provider_. This includes:
+
+- the exchange rate (how much Bitcoin they demand for 1 Monero)
+- the minimum and maximum amounts you can swap
+- the network fees that'll be spent on the Bitcoin lock transaction
+
+<Callout type="info">
+You can hover over these values to see their value in `USD`.
+</Callout>
+
+If you're happy with the offer, you can proceed by sending the Bitcoin to the address displayed on the screen.
+All funds sent to this address will be used for the swap as long as they below the maximum amount.
+
+<Callout type="info">
+This is where the actual swap amount is determined.
+Be careful to send only as much Bitcoin as you want to swap.
+</Callout>
+
+![image](/first_swap_3.png)
+
+### Waiting for the swap to complete
+
+After sending the Bitcoin, you'll need to wait a moment for the Bitcoin to be locked.
+After the lock transaction has been confirmed, the other party will lock the Monero funds.
+In most cases, it will take around 10 minutes for the Bitcoin lock transaction to be confirmed and 2 minutes later the Monero lock transaction will be confirmed.
+
+![image](/first_swap_4.png)
+
+
+The swap will go through four stages:
+
+1. **Locking the Bitcoin**:
+Your Bitcoin is locked in a 2-of-2 multisig address.
+
+2. **_Swap Provider_ locks the Monero**:
+The other party locks their Monero as well.
+
+3. **_Swap Provider_ redeems _Bitcoin_**:
+The other party redeems the Bitcoin.
+
+4. **Redeeming the Monero**:
+You redeem the Monero using a key that was revealed in step 3.
+
+<table>
+  <tr>
+    <td>
+      ![imgage](/first_swap_5.png)
+    </td>
+    <td>
+      ![image](/first_swap_6.png)
+    </td>
+    <td>
+      ![image](/first_swap_7.png)
+    </td>
+  </tr>
+</table>
+
+</Steps>

docs/pages/usage/market_maker_discovery.mdx

@@ -0,0 +1,49 @@
+# _Swap Provider_ discovery
+
+A _Swap Provider_ is a service run by a pseudonymous entity that offers to sell Monero in exchange for Bitcoin. To swap your Bitcoin for Monero you need to connect to a one of these _Swap Providers_.
+The different ways to discover _Swap Providers_ are described below.
+
+There are two ways to discover _Swap Providers_:
+
+1. **Public Registry**: Community volunteers maintain a list of _Swap Providers_ that is provided to the GUI and is kept up to date automatically. This list is displayed in the GUI by default. The _Public Registry_ also stores additional information about the _Swap Providers_ such as their uptime and age, and makes it available to the GUI.
+2. **Rendezvous**: The GUI can discover Swap Providers using the [_Rendezvous_ protocol](https://docs.libp2p.io/concepts/discovery-routing/rendezvous/). This protocol enables the GUI to find providers that register themselves at a _Rendezvous Point_. The GUI can query these points to get a list of registered providers. _Rendezvous Points_ are operated by community volunteers, and anyone can run one. The GUI can connect to various _Rendezvous Points_ to discover different _Swap Providers_.
+
+## _Public Registry_
+
+The providers from the registry are displayed in the GUI. If you want to connect to them directly without the GUI choose one from the table below.
+
+import SwapProviderTable from "../../components/SwapProviderTable";
+
+<div>
+  <SwapProviderTable />
+</div>
+
+## How to discover _Swap Providers_ via the _Rendezvous_ protocol
+
+1. Open the _Swap Provider_ list by clicking the right-facing arrow in the widget on the _Swap_ tab.
+
+   <img src="/rendezvous_1.png" />
+
+2. Click the <img src="/rendezvous_button_1.png" style={{
+       height: "1lh",
+       display: "inline-block",
+       // center vertically
+       verticalAlign: "middle",
+   }}/> button to open the _Discover swap providers_ dialog. Enter the _Multiaddress_ of the _Rendezvous Point_ you want to connect to. You can also choose one of the predined ones from the list below the Textfield. Click the _Connect_ button to connect to the rendezvous point.
+   <img src="/rendezvous_2.png" />
+
+## How to add a _Swap Provider_ to the _Public Registry_
+
+If you know of a _Swap Provider_ that is not yet in the _Public Registry_, you can submit it manually. Here's how you can do it:
+
+1. Open the _Swap Provider_ list by clicking the right-facing arrow in the widget on the _Swap_ tab.
+
+   <img src="/rendezvous_1.png" />
+
+2. Click the <img src="/public_registry_button_1.png" style={{
+       height: "1lh",
+       display: "inline-block",
+       // center vertically
+       verticalAlign: "middle",
+   }}/> button. Enter the _Multiaddress_ of the _Swap Provider_ as well as the _Peer ID_ of the provider. Click the _Submit_ button to submit the provider to the _Public Registry_.
+   <img src="/public_registry.png" />

docs/pages/usage/refund_punish.mdx

@@ -0,0 +1,22 @@
+# Cancel, Refund, and Punish explained
+
+Atomic Swaps offer a lot of security and privacy benefits, but they also come with some responsibilities. It is important to recognize that Atomic Swaps are trustless, but not risk-free. As long as you follow the rules of the protocol, you can be sure that you will not lose your funds.
+
+If you want to learn more about technical details, you can read this paper: [Atomic Swaps between Bitcoin and Monero, _Philipp Hoenisch, Lucas Soriano del Pino_](https://arxiv.org/abs/2101.12332) or read this [blog post](https://comit.network/blog/2020/10/06/monero-bitcoin/).
+
+## Cancel
+
+If the _Swap Provider_ has not been able to redeem the Bitcoin within 12 hours (144 Bitcoin blocks) from the start of the swap, the swap will be cancelled.
+This is done by either you or the _Swap Provider_ publishing a special Bitcoin transaction called the `Bitcoin Cancel Transaction`.
+As soon as this transaction is included in the Bitcoin blockchain, the swap is locked in a state where only the [_Refund_](#refund) and [_Punish_](#punish) paths can be activated. The _Happy Path_ path where you redeem the Monero is no longer possible.
+
+## Refund
+
+As soon as the swap is cancelled, you can refund your Bitcoin. This is done by publishing the `Bitcoin Refund Transaction` on the Bitcoin blockchain.
+If this is done within 12 hours (144 Bitcoin blocks) from the inclusion of the `Bitcoin Cancel Transaction`, you will get your Bitcoin back.
+If you do not refund your Bitcoin within this time frame, the _Swap Provider_ can punish you. This is a security measure to ensure that you do not cancel the swap and then refuse to refund your Bitcoin which would result in the _Swap Provider_ losing their Monero.
+
+## Punish
+
+If you do not refund your Bitcoin within 12 hours (144 Bitcoin blocks) from the inclusion of the `Bitcoin Cancel Transaction`, the _Swap Provider_ will _punish_ you. This will result in the _Swap Provider_ taking your Bitcoin as a penalty for not refunding it in time.
+Even if this state is reached and the _Swap Provider_ has punished you, there's still hope to redeem the Monero. The _Swap Provider_ can choose to allow you to redeem the Monero by transmitting a secret key to you. This however is at the discretion of the _Swap Provider_ and they are not obligated to do so.

docs/theme.config.jsx

@@ -0,0 +1,8 @@
+export default {
+  logo: <span>UnstoppableSwap</span>,
+  project: {
+    link: "https://github.com/UnstoppableSwap/unstoppableswap-docs",
+  },
+  primaryHue: 14.3,
+  primarySaturation: 90.68,
+};

docs/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}