Skip to content

Commit

Permalink
feat(docs): Upgrade versions to 1.0.0-rc.5, clarify wording, use nati…
Browse files Browse the repository at this point in the history
…ve nextra components
  • Loading branch information
binarybaron committed Nov 20, 2024
1 parent 38d68b9 commit b816e84
Show file tree
Hide file tree
Showing 14 changed files with 407 additions and 204 deletions.
40 changes: 21 additions & 19 deletions docs/components/SwapProviderTable.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useState, useEffect } from "react";
import { Table, Td, Th, Tr } from 'nextra/components'

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;
Expand All @@ -26,30 +26,32 @@ export default function SwapProviderTable() {
overflowX: "scroll",
}}
>
<table>
<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>
<Tr>
<Th>Network</Th>
<Th>Multiaddress</Th>
<Th>Peer ID</Th>
<Th>Minimum Amount</Th>
<Th>Maximum Amount</Th>
<Th>Exchange Rate</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>
<Tr key={provider.peerId}>
<Td>
{provider.testnet ? "Testnet" : "Mainnet"}
</Td>
<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>
</Tr>
))}
</tbody>
</table>
</Table>
</div>
);
}
2 changes: 1 addition & 1 deletion docs/next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"start": "next start"
},
"dependencies": {
"next": "^14.2.4",
"next": "^15.0.3",
"nextra": "^2.13.4",
"nextra-theme-docs": "^2.13.4",
"react": "^18.3.1",
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/_meta.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"index": "Home",
"index": "Introduction",
"getting_started": "Getting Started",
"usage": "Usage",
"advanced": "Advanced",
"donate": "Donate"
}
}
65 changes: 35 additions & 30 deletions docs/pages/advanced/swap_on_testnet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,42 +8,47 @@ To be exact, `testnet3` bitcoin will be swapped for `stagenet` Monero. You will

## 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
Download Electrum from the official [site](https://electrum.org/#download) and then start the wallet in testnet mode.

import { Tabs, Tab } from 'nextra/components'

<Tabs items={['Linux', 'macOS', 'Windows']}>
<Tab>
```bash
./electrum --testnet
```
</Tab>
<Tab>
```bash
open -n /Applications/Electrum.app --args --testnet
```
</Tab>
<Tab>
If you install Electrum on Windows, you will have two programs you can start. One of them is called "Electrum Testnet".
</Tab>
</Tabs>

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
```
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. A list of stagenet remote nodes can be found [here](https://monero.fail/?chain=monero&network=stagenet).

## Installing the GUI
## Launching the GUI

View the [Installation Instructions](../getting_started/install_instructions) if you haven't already installed the GUI.
View the [Installation Instructions](../getting_started/install_instructions) if you haven't already installed the GUI. Then start the GUI in testnet mode.

## Making a swap
<Tabs items={['Linux', 'macOS']}>
<Tab>
```bash
./UnstoppableSwap_*_amd64.AppImage --testnet
```
</Tab>
<Tab>
```bash
open -n /Applications/UnstoppableSwap.app --args --testnet
```
</Tab>
</Tabs>

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.
From here on you can follow the [Complete your first 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.
4 changes: 2 additions & 2 deletions docs/pages/getting_started/_meta.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"install_instructions": "Installation Instructions"
}
"install_instructions": "Installation"
}
94 changes: 35 additions & 59 deletions docs/pages/getting_started/install_instructions.mdx
Original file line number Diff line number Diff line change
@@ -1,59 +1,35 @@
# 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
```
import { Tabs } from 'nextra/components'

# Installation

Precompiled binaries of the _GUI_ are available for most platforms. Simply download the appropriate binary for your system and follow the instructions.

<Tabs items={['Windows', 'macOS (Silicon)', 'macOS (Intel)', 'Linux (x86_64)']}>
<Tabs.Tab>
1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/core/releases/download/1.0.0-rc.4/UnstoppableSwap_1.0.0-rc.4_x64-setup.exe)
2. Open the downloaded `.exe` installer
3. Follow the installation instructions
4. Open the `UnstoppableSwap` application from your Start menu
</Tabs.Tab>
<Tabs.Tab>
1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/core/releases/download/1.0.0-rc.4/UnstoppableSwap_1.0.0-rc.4_aarch64.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
</Tabs.Tab>
<Tabs.Tab>
1. Download the latest release from GitHub [here](https://github.com/UnstoppableSwap/core/releases/download/1.0.0-rc.4/UnstoppableSwap_1.0.0-rc.4_x64.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
</Tabs.Tab>
<Tabs.Tab>
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/core/releases/download/1.0.0-rc.4/UnstoppableSwap_1.0.0-rc.4_amd64.AppImage
chmod +x UnstoppableSwap_1.0.0-rc.4_amd64.AppImage
./UnstoppableSwap_1.0.0-rc.4_amd64.AppImage
```
</Tabs.Tab>
</Tabs>
16 changes: 16 additions & 0 deletions docs/pages/index.mdx
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@

import { Cards } from 'nextra/components'

# Introduction

**UnstoppableSwap** is a protocol _and_ desktop application for swapping Monero and Bitcoin. We use atomic swaps to make trustless and private trades possible.

## Quick Start

To start using UnstoppableSwap, you need to install the application. Then you can do your first swap.

<Cards num={2}>
<Cards.Card arrow title="Installation" href="/getting_started/install_instructions">
</Cards.Card>
<Cards.Card arrow title="Completing your first swap" href="/usage/first_swap">
</Cards.Card>
</Cards>
4 changes: 2 additions & 2 deletions docs/pages/usage/_meta.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"first_swap": "Complete your first Atomic Swap",
"first_swap": "Complete your first swap",
"market_maker_discovery": "Swap Provider discovery",
"refund_punish": "Cancel, Refund and Punish explained"
}
}
11 changes: 4 additions & 7 deletions docs/pages/usage/first_swap.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# How to complete your first Atomic Swap
# How to complete your first 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.
Expand All @@ -8,19 +8,16 @@ Although the process is quite intuitive, there are some nuances to be aware of,
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.
2. _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.
3. A Bitcoin wallet you can use with some funds in it which you want to convert to Monero.

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.
Expand All @@ -31,7 +28,7 @@ import { Callout } from 'nextra/components'
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.
You can use the 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.
Expand Down
3 changes: 2 additions & 1 deletion docs/pages/usage/market_maker_discovery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@ The providers from the registry are displayed in the GUI. If you want to connect
import SwapProviderTable from "../../components/SwapProviderTable";

<div>
<br/>
<SwapProviderTable />
</div>

## How to discover _Swap Providers_ via the _Rendezvous_ protocol
## How to discover _Swap Providers_ via _Rendezvous_

1. Open the _Swap Provider_ list by clicking the right-facing arrow in the widget on the _Swap_ tab.

Expand Down
2 changes: 2 additions & 0 deletions docs/pages/usage/refund_punish.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ Atomic Swaps offer a lot of security and privacy benefits, but they also come wi

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/).

We have chosen to include a fairly technical explanation here. However, the GUI will guide you through the process and make it as easy as possible. You do not need to manually do any of the steps described here.

## Cancel

If the _Swap Provider_ has not been able to redeem the Bitcoin within 12 hours (72 Bitcoin blocks) from the start of the swap, the swap will be cancelled.
Expand Down
19 changes: 15 additions & 4 deletions docs/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
Expand All @@ -11,8 +15,15 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
"jsx": "preserve",
"target": "ES2017"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Loading

0 comments on commit b816e84

Please sign in to comment.