commit bc188870afe1abe98447be0699339e081b72b7a4
Author: binarybaron <86064887+binarybaron@users.noreply.github.com>
Date: Sat Jul 6 21:34:33 2024 +0200
Initial commit
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..dfe07704
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..24d7cc6d
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..102e3668
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# Tauri + React + Typescript
+
+This template should help get you started developing with Tauri, React and Typescript in Vite.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..70cdab17
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Tauri + React + Typescript
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..c483bc8e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "unstoppableswap-gui-rs",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview",
+ "tauri": "tauri"
+ },
+ "dependencies": {
+ "@material-ui/core": "^4.12.4",
+ "@material-ui/icons": "^4.11.3",
+ "@material-ui/lab": "^4.0.0-alpha.61",
+ "@reduxjs/toolkit": "^2.2.6",
+ "@tauri-apps/api": ">=2.0.0-beta.0",
+ "@tauri-apps/plugin-shell": ">=2.0.0-beta.0",
+ "humanize-duration": "^3.32.1",
+ "lodash": "^4.17.21",
+ "multiaddr": "^10.0.1",
+ "notistack": "^3.0.1",
+ "pino": "^9.2.0",
+ "pino-pretty": "^11.2.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-qr-code": "^2.0.15",
+ "react-redux": "^9.1.2",
+ "react-router-dom": "^6.24.1",
+ "semver": "^7.6.2",
+ "virtua": "^0.33.2"
+ },
+ "devDependencies": {
+ "@tauri-apps/cli": ">=2.0.0-beta.0",
+ "@types/humanize-duration": "^3.27.4",
+ "@types/lodash": "^4.17.6",
+ "@types/node": "^20.14.10",
+ "@types/react": "^18.2.15",
+ "@types/react-dom": "^18.2.7",
+ "@types/semver": "^7.5.8",
+ "@vitejs/plugin-react": "^4.2.1",
+ "internal-ip": "^7.0.0",
+ "typescript": "^5.2.2",
+ "vite": "^5.3.1",
+ "vite-tsconfig-paths": "^4.3.2"
+ }
+}
diff --git a/public/tauri.svg b/public/tauri.svg
new file mode 100644
index 00000000..31b62c92
--- /dev/null
+++ b/public/tauri.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+(log: CliLog, key: string): T | null {
+ const span = log.spans?.find((s) => s[key]);
+ if (!span) {
+ return null;
+ }
+ return span[key] as T;
+}
+
+export function getCliLogSpanSwapId(log: CliLog): string | null {
+ return getCliLogSpanAttribute(log, 'swap_id');
+}
+
+export function getCliLogSpanLogReferenceId(log: CliLog): string | null {
+ return (
+ getCliLogSpanAttribute(log, 'log_reference_id')?.replace(
+ /"/g,
+ '',
+ ) || null
+ );
+}
+
+export function hasCliLogOneOfMultipleSpans(
+ log: CliLog,
+ spanNames: string[],
+): boolean {
+ return log.spans?.some((s) => spanNames.includes(s.name)) ?? false;
+}
+
+export interface CliLogStartedSyncingMoneroWallet extends CliLog {
+ fields: {
+ message: 'Syncing Monero wallet';
+ current_sync_height?: boolean;
+ };
+}
+
+export function isCliLogStartedSyncingMoneroWallet(
+ log: CliLog,
+): log is CliLogStartedSyncingMoneroWallet {
+ return log.fields.message === 'Syncing Monero wallet';
+}
+
+export interface CliLogFinishedSyncingMoneroWallet extends CliLog {
+ fields: {
+ message: 'Synced Monero wallet';
+ };
+}
+
+export interface CliLogFailedToSyncMoneroWallet extends CliLog {
+ fields: {
+ message: 'Failed to sync Monero wallet';
+ error: string;
+ };
+}
+
+export function isCliLogFailedToSyncMoneroWallet(
+ log: CliLog,
+): log is CliLogFailedToSyncMoneroWallet {
+ return log.fields.message === 'Failed to sync Monero wallet';
+}
+
+export function isCliLogFinishedSyncingMoneroWallet(
+ log: CliLog,
+): log is CliLogFinishedSyncingMoneroWallet {
+ return log.fields.message === 'Monero wallet synced';
+}
+
+export interface CliLogDownloadingMoneroWalletRpc extends CliLog {
+ fields: {
+ message: 'Downloading monero-wallet-rpc';
+ progress: string;
+ size: string;
+ download_url: string;
+ };
+}
+
+export function isCliLogDownloadingMoneroWalletRpc(
+ log: CliLog,
+): log is CliLogDownloadingMoneroWalletRpc {
+ return log.fields.message === 'Downloading monero-wallet-rpc';
+}
+
+export interface CliLogStartedSyncingMoneroWallet extends CliLog {
+ fields: {
+ message: 'Syncing Monero wallet';
+ current_sync_height?: boolean;
+ };
+}
+
+export interface CliLogDownloadingMoneroWalletRpc extends CliLog {
+ fields: {
+ message: 'Downloading monero-wallet-rpc';
+ progress: string;
+ size: string;
+ download_url: string;
+ };
+}
+
+export interface CliLogGotNotificationForNewBlock extends CliLog {
+ fields: {
+ message: 'Got notification for new block';
+ block_height: string;
+ };
+}
+
+export function isCliLogGotNotificationForNewBlock(
+ log: CliLog,
+): log is CliLogGotNotificationForNewBlock {
+ return log.fields.message === 'Got notification for new block';
+}
+
+export interface CliLogAttemptingToCooperativelyRedeemXmr extends CliLog {
+ fields: {
+ message: 'Attempting to cooperatively redeem XMR after being punished';
+ };
+}
+
+export function isCliLogAttemptingToCooperativelyRedeemXmr(
+ log: CliLog,
+): log is CliLogAttemptingToCooperativelyRedeemXmr {
+ return log.fields.message === 'Attempting to cooperatively redeem XMR after being punished';
+}
+
+export interface CliLogAliceHasAcceptedOurRequestToCooperativelyRedeemTheXmr extends CliLog {
+ fields: {
+ message: 'Alice has accepted our request to cooperatively redeem the XMR';
+ };
+}
+
+export function isCliLogAliceHasAcceptedOurRequestToCooperativelyRedeemTheXmr(
+ log: CliLog,
+): log is CliLogAliceHasAcceptedOurRequestToCooperativelyRedeemTheXmr {
+ return log.fields.message === 'Alice has accepted our request to cooperatively redeem the XMR';
+}
\ No newline at end of file
diff --git a/src/models/downloaderModel.ts b/src/models/downloaderModel.ts
new file mode 100644
index 00000000..779d4378
--- /dev/null
+++ b/src/models/downloaderModel.ts
@@ -0,0 +1,4 @@
+export interface Binary {
+ dirPath: string; // Path without filename appended
+ fileName: string;
+}
diff --git a/src/models/rpcModel.ts b/src/models/rpcModel.ts
new file mode 100644
index 00000000..506fb399
--- /dev/null
+++ b/src/models/rpcModel.ts
@@ -0,0 +1,336 @@
+import { piconerosToXmr, satsToBtc } from 'utils/conversionUtils';
+import { exhaustiveGuard } from 'utils/typescriptUtils';
+
+export enum RpcMethod {
+ GET_BTC_BALANCE = 'get_bitcoin_balance',
+ WITHDRAW_BTC = 'withdraw_btc',
+ BUY_XMR = 'buy_xmr',
+ RESUME_SWAP = 'resume_swap',
+ LIST_SELLERS = 'list_sellers',
+ CANCEL_REFUND_SWAP = 'cancel_refund_swap',
+ GET_SWAP_INFO = 'get_swap_info',
+ SUSPEND_CURRENT_SWAP = 'suspend_current_swap',
+ GET_HISTORY = 'get_history',
+ GET_MONERO_RECOVERY_KEYS = 'get_monero_recovery_info',
+}
+
+export enum RpcProcessStateType {
+ STARTED = 'starting...',
+ LISTENING_FOR_CONNECTIONS = 'running',
+ EXITED = 'exited',
+ NOT_STARTED = 'not started',
+}
+
+export type RawRpcResponseSuccess = {
+ jsonrpc: string;
+ id: string;
+ result: T;
+};
+
+export type RawRpcResponseError = {
+ jsonrpc: string;
+ id: string;
+ error: { code: number; message: string };
+};
+
+export type RawRpcResponse = RawRpcResponseSuccess | RawRpcResponseError;
+
+export function isSuccessResponse(
+ response: RawRpcResponse,
+): response is RawRpcResponseSuccess {
+ return 'result' in response;
+}
+
+export function isErrorResponse(
+ response: RawRpcResponse,
+): response is RawRpcResponseError {
+ return 'error' in response;
+}
+
+export interface RpcSellerStatus {
+ status:
+ | {
+ Online: {
+ price: number;
+ min_quantity: number;
+ max_quantity: number;
+ };
+ }
+ | 'Unreachable';
+ multiaddr: string;
+}
+
+export interface WithdrawBitcoinResponse {
+ txid: string;
+}
+
+export interface BuyXmrResponse {
+ swapId: string;
+}
+
+export type SwapTimelockInfoNone = {
+ None: {
+ blocks_left: number;
+ };
+};
+
+export type SwapTimelockInfoCancelled = {
+ Cancel: {
+ blocks_left: number;
+ };
+};
+
+export type SwapTimelockInfoPunished = 'Punish';
+
+export type SwapTimelockInfo =
+ | SwapTimelockInfoNone
+ | SwapTimelockInfoCancelled
+ | SwapTimelockInfoPunished;
+
+export function isSwapTimelockInfoNone(
+ info: SwapTimelockInfo,
+): info is SwapTimelockInfoNone {
+ return typeof info === 'object' && 'None' in info;
+}
+
+export function isSwapTimelockInfoCancelled(
+ info: SwapTimelockInfo,
+): info is SwapTimelockInfoCancelled {
+ return typeof info === 'object' && 'Cancel' in info;
+}
+
+export function isSwapTimelockInfoPunished(
+ info: SwapTimelockInfo,
+): info is SwapTimelockInfoPunished {
+ return info === 'Punish';
+}
+
+export type SwapSellerInfo = {
+ peerId: string;
+ addresses: string[];
+};
+
+export interface GetSwapInfoResponse {
+ swapId: string;
+ completed: boolean;
+ seller: SwapSellerInfo;
+ startDate: string;
+ stateName: SwapStateName;
+ timelock: null | SwapTimelockInfo;
+ txLockId: string;
+ txCancelFee: number;
+ txRefundFee: number;
+ txLockFee: number;
+ btcAmount: number;
+ xmrAmount: number;
+ btcRefundAddress: string;
+ cancelTimelock: number;
+ punishTimelock: number;
+}
+
+export type MoneroRecoveryResponse = {
+ address: string;
+ spend_key: string;
+ view_key: string;
+ restore_height: number;
+};
+
+export interface BalanceBitcoinResponse {
+ balance: number;
+}
+
+export interface GetHistoryResponse {
+ swaps: [swapId: string, stateName: SwapStateName][];
+}
+
+export enum SwapStateName {
+ Started = 'quote has been requested',
+ SwapSetupCompleted = 'execution setup done',
+ BtcLocked = 'btc is locked',
+ XmrLockProofReceived = 'XMR lock transaction transfer proof received',
+ XmrLocked = 'xmr is locked',
+ EncSigSent = 'encrypted signature is sent',
+ BtcRedeemed = 'btc is redeemed',
+ CancelTimelockExpired = 'cancel timelock is expired',
+ BtcCancelled = 'btc is cancelled',
+ BtcRefunded = 'btc is refunded',
+ XmrRedeemed = 'xmr is redeemed',
+ BtcPunished = 'btc is punished',
+ SafelyAborted = 'safely aborted',
+}
+
+export type SwapStateNameRunningSwap = Exclude<
+ SwapStateName,
+ | SwapStateName.Started
+ | SwapStateName.SwapSetupCompleted
+ | SwapStateName.BtcRefunded
+ | SwapStateName.BtcPunished
+ | SwapStateName.SafelyAborted
+ | SwapStateName.XmrRedeemed
+>;
+
+export type GetSwapInfoResponseRunningSwap = GetSwapInfoResponse & {
+ stateName: SwapStateNameRunningSwap;
+};
+
+export function isSwapStateNameRunningSwap(
+ state: SwapStateName,
+): state is SwapStateNameRunningSwap {
+ return ![
+ SwapStateName.Started,
+ SwapStateName.SwapSetupCompleted,
+ SwapStateName.BtcRefunded,
+ SwapStateName.BtcPunished,
+ SwapStateName.SafelyAborted,
+ SwapStateName.XmrRedeemed,
+ ].includes(state);
+}
+
+export type SwapStateNameCompletedSwap =
+ | SwapStateName.XmrRedeemed
+ | SwapStateName.BtcRefunded
+ | SwapStateName.BtcPunished
+ | SwapStateName.SafelyAborted;
+
+export function isSwapStateNameCompletedSwap(
+ state: SwapStateName,
+): state is SwapStateNameCompletedSwap {
+ return [
+ SwapStateName.XmrRedeemed,
+ SwapStateName.BtcRefunded,
+ SwapStateName.BtcPunished,
+ SwapStateName.SafelyAborted,
+ ].includes(state);
+}
+
+export type SwapStateNamePossiblyCancellableSwap =
+ | SwapStateName.BtcLocked
+ | SwapStateName.XmrLockProofReceived
+ | SwapStateName.XmrLocked
+ | SwapStateName.EncSigSent
+ | SwapStateName.CancelTimelockExpired;
+
+/**
+Checks if a swap is in a state where it can possibly be cancelled
+
+The following conditions must be met:
+ - The bitcoin must be locked
+ - The bitcoin must not be redeemed
+ - The bitcoin must not be cancelled
+ - The bitcoin must not be refunded
+ - The bitcoin must not be punished
+
+See: https://github.com/comit-network/xmr-btc-swap/blob/7023e75bb51ab26dff4c8fcccdc855d781ca4b15/swap/src/cli/cancel.rs#L16-L35
+ */
+export function isSwapStateNamePossiblyCancellableSwap(
+ state: SwapStateName,
+): state is SwapStateNamePossiblyCancellableSwap {
+ return [
+ SwapStateName.BtcLocked,
+ SwapStateName.XmrLockProofReceived,
+ SwapStateName.XmrLocked,
+ SwapStateName.EncSigSent,
+ SwapStateName.CancelTimelockExpired,
+ ].includes(state);
+}
+
+export type SwapStateNamePossiblyRefundableSwap =
+ | SwapStateName.BtcLocked
+ | SwapStateName.XmrLockProofReceived
+ | SwapStateName.XmrLocked
+ | SwapStateName.EncSigSent
+ | SwapStateName.CancelTimelockExpired
+ | SwapStateName.BtcCancelled;
+
+/**
+Checks if a swap is in a state where it can possibly be refunded (meaning it's not impossible)
+
+The following conditions must be met:
+ - The bitcoin must be locked
+ - The bitcoin must not be redeemed
+ - The bitcoin must not be refunded
+ - The bitcoin must not be punished
+
+See: https://github.com/comit-network/xmr-btc-swap/blob/7023e75bb51ab26dff4c8fcccdc855d781ca4b15/swap/src/cli/refund.rs#L16-L34
+ */
+export function isSwapStateNamePossiblyRefundableSwap(
+ state: SwapStateName,
+): state is SwapStateNamePossiblyRefundableSwap {
+ return [
+ SwapStateName.BtcLocked,
+ SwapStateName.XmrLockProofReceived,
+ SwapStateName.XmrLocked,
+ SwapStateName.EncSigSent,
+ SwapStateName.CancelTimelockExpired,
+ SwapStateName.BtcCancelled,
+ ].includes(state);
+}
+
+/**
+ * Type guard for GetSwapInfoResponseRunningSwap
+ * "running" means the swap is in progress and not yet completed
+ * If a swap is not "running" it means it is either completed or no Bitcoin have been locked yet
+ * @param response
+ */
+export function isGetSwapInfoResponseRunningSwap(
+ response: GetSwapInfoResponse,
+): response is GetSwapInfoResponseRunningSwap {
+ return isSwapStateNameRunningSwap(response.stateName);
+}
+
+export function isSwapMoneroRecoverable(swapStateName: SwapStateName): boolean {
+ return [SwapStateName.BtcRedeemed].includes(swapStateName);
+}
+
+// See https://github.com/comit-network/xmr-btc-swap/blob/50ae54141255e03dba3d2b09036b1caa4a63e5a3/swap/src/protocol/bob/state.rs#L55
+export function getHumanReadableDbStateType(type: SwapStateName): string {
+ switch (type) {
+ case SwapStateName.Started:
+ return 'Quote has been requested';
+ case SwapStateName.SwapSetupCompleted:
+ return 'Swap has been initiated';
+ case SwapStateName.BtcLocked:
+ return 'Bitcoin has been locked';
+ case SwapStateName.XmrLockProofReceived:
+ return 'Monero lock transaction transfer proof has been received';
+ case SwapStateName.XmrLocked:
+ return 'Monero has been locked';
+ case SwapStateName.EncSigSent:
+ return 'Encrypted signature has been sent';
+ case SwapStateName.BtcRedeemed:
+ return 'Bitcoin has been redeemed';
+ case SwapStateName.CancelTimelockExpired:
+ return 'Cancel timelock has expired';
+ case SwapStateName.BtcCancelled:
+ return 'Swap has been cancelled';
+ case SwapStateName.BtcRefunded:
+ return 'Bitcoin has been refunded';
+ case SwapStateName.XmrRedeemed:
+ return 'Monero has been redeemed';
+ case SwapStateName.BtcPunished:
+ return 'Bitcoin has been punished';
+ case SwapStateName.SafelyAborted:
+ return 'Swap has been safely aborted';
+ default:
+ return exhaustiveGuard(type);
+ }
+}
+
+export function getSwapTxFees(swap: GetSwapInfoResponse): number {
+ return satsToBtc(swap.txLockFee);
+}
+
+export function getSwapBtcAmount(swap: GetSwapInfoResponse): number {
+ return satsToBtc(swap.btcAmount);
+}
+
+export function getSwapXmrAmount(swap: GetSwapInfoResponse): number {
+ return piconerosToXmr(swap.xmrAmount);
+}
+
+export function getSwapExchangeRate(swap: GetSwapInfoResponse): number {
+ const btcAmount = getSwapBtcAmount(swap);
+ const xmrAmount = getSwapXmrAmount(swap);
+
+ return btcAmount / xmrAmount;
+}
diff --git a/src/models/storeModel.ts b/src/models/storeModel.ts
new file mode 100644
index 00000000..de6b8754
--- /dev/null
+++ b/src/models/storeModel.ts
@@ -0,0 +1,218 @@
+import { CliLog, SwapSpawnType } from './cliModel';
+import { Provider } from './apiModel';
+
+export interface SwapSlice {
+ state: SwapState | null;
+ logs: CliLog[];
+ processRunning: boolean;
+ provider: Provider | null;
+ spawnType: SwapSpawnType | null;
+ swapId: string | null;
+}
+
+export type MoneroWalletRpcUpdateState = {
+ progress: string;
+ downloadUrl: string;
+};
+
+export interface SwapState {
+ type: SwapStateType;
+}
+
+export enum SwapStateType {
+ INITIATED = 'initiated',
+ RECEIVED_QUOTE = 'received quote',
+ WAITING_FOR_BTC_DEPOSIT = 'waiting for btc deposit',
+ STARTED = 'started',
+ BTC_LOCK_TX_IN_MEMPOOL = 'btc lock tx is in mempool',
+ XMR_LOCK_TX_IN_MEMPOOL = 'xmr lock tx is in mempool',
+ XMR_LOCKED = 'xmr is locked',
+ BTC_REDEEMED = 'btc redeemed',
+ XMR_REDEEM_IN_MEMPOOL = 'xmr redeem tx is in mempool',
+ PROCESS_EXITED = 'process exited',
+ BTC_CANCELLED = 'btc cancelled',
+ BTC_REFUNDED = 'btc refunded',
+ BTC_PUNISHED = 'btc punished',
+ ATTEMPTING_COOPERATIVE_REDEEM = 'attempting cooperative redeem',
+ COOPERATIVE_REDEEM_REJECTED = 'cooperative redeem rejected',
+}
+
+export function isSwapState(state?: SwapState | null): state is SwapState {
+ return state?.type != null;
+}
+
+export interface SwapStateInitiated extends SwapState {
+ type: SwapStateType.INITIATED;
+}
+
+export function isSwapStateInitiated(
+ state?: SwapState | null,
+): state is SwapStateInitiated {
+ return state?.type === SwapStateType.INITIATED;
+}
+
+export interface SwapStateReceivedQuote extends SwapState {
+ type: SwapStateType.RECEIVED_QUOTE;
+ price: number;
+ minimumSwapAmount: number;
+ maximumSwapAmount: number;
+}
+
+export function isSwapStateReceivedQuote(
+ state?: SwapState | null,
+): state is SwapStateReceivedQuote {
+ return state?.type === SwapStateType.RECEIVED_QUOTE;
+}
+
+export interface SwapStateWaitingForBtcDeposit extends SwapState {
+ type: SwapStateType.WAITING_FOR_BTC_DEPOSIT;
+ depositAddress: string;
+ maxGiveable: number;
+ minimumAmount: number;
+ maximumAmount: number;
+ minDeposit: number;
+ maxDeposit: number;
+ minBitcoinLockTxFee: number;
+ price: number | null;
+}
+
+export function isSwapStateWaitingForBtcDeposit(
+ state?: SwapState | null,
+): state is SwapStateWaitingForBtcDeposit {
+ return state?.type === SwapStateType.WAITING_FOR_BTC_DEPOSIT;
+}
+
+export interface SwapStateStarted extends SwapState {
+ type: SwapStateType.STARTED;
+ txLockDetails: {
+ amount: number;
+ fees: number;
+ } | null;
+}
+
+export function isSwapStateStarted(
+ state?: SwapState | null,
+): state is SwapStateStarted {
+ return state?.type === SwapStateType.STARTED;
+}
+
+export interface SwapStateBtcLockInMempool extends SwapState {
+ type: SwapStateType.BTC_LOCK_TX_IN_MEMPOOL;
+ bobBtcLockTxId: string;
+ bobBtcLockTxConfirmations: number;
+}
+
+export function isSwapStateBtcLockInMempool(
+ state?: SwapState | null,
+): state is SwapStateBtcLockInMempool {
+ return state?.type === SwapStateType.BTC_LOCK_TX_IN_MEMPOOL;
+}
+
+export interface SwapStateXmrLockInMempool extends SwapState {
+ type: SwapStateType.XMR_LOCK_TX_IN_MEMPOOL;
+ aliceXmrLockTxId: string;
+ aliceXmrLockTxConfirmations: number;
+}
+
+export function isSwapStateXmrLockInMempool(
+ state?: SwapState | null,
+): state is SwapStateXmrLockInMempool {
+ return state?.type === SwapStateType.XMR_LOCK_TX_IN_MEMPOOL;
+}
+
+export interface SwapStateXmrLocked extends SwapState {
+ type: SwapStateType.XMR_LOCKED;
+}
+
+export function isSwapStateXmrLocked(
+ state?: SwapState | null,
+): state is SwapStateXmrLocked {
+ return state?.type === SwapStateType.XMR_LOCKED;
+}
+
+export interface SwapStateBtcRedemeed extends SwapState {
+ type: SwapStateType.BTC_REDEEMED;
+}
+
+export function isSwapStateBtcRedemeed(
+ state?: SwapState | null,
+): state is SwapStateBtcRedemeed {
+ return state?.type === SwapStateType.BTC_REDEEMED;
+}
+
+export interface SwapStateAttemptingCooperativeRedeeem extends SwapState {
+ type: SwapStateType.ATTEMPTING_COOPERATIVE_REDEEM;
+}
+
+export function isSwapStateAttemptingCooperativeRedeeem(
+ state?: SwapState | null,
+): state is SwapStateAttemptingCooperativeRedeeem {
+ return state?.type === SwapStateType.ATTEMPTING_COOPERATIVE_REDEEM;
+}
+
+export interface SwapStateCooperativeRedeemRejected extends SwapState {
+ type: SwapStateType.COOPERATIVE_REDEEM_REJECTED;
+ reason: string;
+}
+
+export function isSwapStateCooperativeRedeemRejected(
+ state?: SwapState | null,
+): state is SwapStateCooperativeRedeemRejected {
+ return state?.type === SwapStateType.COOPERATIVE_REDEEM_REJECTED;
+}
+
+export interface SwapStateXmrRedeemInMempool extends SwapState {
+ type: SwapStateType.XMR_REDEEM_IN_MEMPOOL;
+ bobXmrRedeemTxId: string;
+ bobXmrRedeemAddress: string;
+}
+
+export function isSwapStateXmrRedeemInMempool(
+ state?: SwapState | null,
+): state is SwapStateXmrRedeemInMempool {
+ return state?.type === SwapStateType.XMR_REDEEM_IN_MEMPOOL;
+}
+
+export interface SwapStateBtcCancelled extends SwapState {
+ type: SwapStateType.BTC_CANCELLED;
+ btcCancelTxId: string;
+}
+
+export function isSwapStateBtcCancelled(
+ state?: SwapState | null,
+): state is SwapStateBtcCancelled {
+ return state?.type === SwapStateType.BTC_CANCELLED;
+}
+
+export interface SwapStateBtcRefunded extends SwapState {
+ type: SwapStateType.BTC_REFUNDED;
+ bobBtcRefundTxId: string;
+}
+
+export function isSwapStateBtcRefunded(
+ state?: SwapState | null,
+): state is SwapStateBtcRefunded {
+ return state?.type === SwapStateType.BTC_REFUNDED;
+}
+
+export interface SwapStateBtcPunished extends SwapState {
+ type: SwapStateType.BTC_PUNISHED;
+}
+
+export function isSwapStateBtcPunished(
+ state?: SwapState | null,
+): state is SwapStateBtcPunished {
+ return state?.type === SwapStateType.BTC_PUNISHED;
+}
+
+export interface SwapStateProcessExited extends SwapState {
+ type: SwapStateType.PROCESS_EXITED;
+ prevState: SwapState | null;
+ rpcError: string | null;
+}
+
+export function isSwapStateProcessExited(
+ state?: SwapState | null,
+): state is SwapStateProcessExited {
+ return state?.type === SwapStateType.PROCESS_EXITED;
+}
diff --git a/src/renderer/api.ts b/src/renderer/api.ts
new file mode 100644
index 00000000..222d0307
--- /dev/null
+++ b/src/renderer/api.ts
@@ -0,0 +1,61 @@
+import { Alert, ExtendedProviderStatus } from 'models/apiModel';
+
+const API_BASE_URL = 'https://api.unstoppableswap.net';
+
+export async function fetchProvidersViaHttp(): Promise<
+ ExtendedProviderStatus[]
+> {
+ const response = await fetch(`${API_BASE_URL}/api/list`);
+ return (await response.json()) as ExtendedProviderStatus[];
+}
+
+export async function fetchAlertsViaHttp(): Promise {
+ const response = await fetch(`${API_BASE_URL}/api/alerts`);
+ return (await response.json()) as Alert[];
+}
+
+export async function submitFeedbackViaHttp(
+ body: string,
+ attachedData: string,
+): Promise {
+ type Response = {
+ feedbackId: string;
+ };
+
+ const response = await fetch(`${API_BASE_URL}/api/submit-feedback`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ body, attachedData }),
+ });
+
+ if (!response.ok) {
+ throw new Error(`Status: ${response.status}`);
+ }
+
+ const responseBody = (await response.json()) as Response;
+
+ return responseBody.feedbackId;
+}
+
+async function fetchCurrencyUsdPrice(currency: string): Promise {
+ try {
+ const response = await fetch(
+ `https://api.coingecko.com/api/v3/simple/price?ids=${currency}&vs_currencies=usd`,
+ );
+ const data = await response.json();
+ return data[currency].usd;
+ } catch (error) {
+ console.error(`Error fetching ${currency} price:`, error);
+ throw error;
+ }
+}
+
+export async function fetchBtcPrice(): Promise {
+ return fetchCurrencyUsdPrice('bitcoin');
+}
+
+export async function fetchXmrPrice(): Promise {
+ return fetchCurrencyUsdPrice('monero');
+}
diff --git a/src/renderer/components/App.tsx b/src/renderer/components/App.tsx
new file mode 100644
index 00000000..1063537e
--- /dev/null
+++ b/src/renderer/components/App.tsx
@@ -0,0 +1,67 @@
+import { Box, makeStyles, CssBaseline } from '@material-ui/core';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { indigo } from '@material-ui/core/colors';
+import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
+import Navigation, { drawerWidth } from './navigation/Navigation';
+import HistoryPage from './pages/history/HistoryPage';
+import SwapPage from './pages/swap/SwapPage';
+import WalletPage from './pages/wallet/WalletPage';
+import HelpPage from './pages/help/HelpPage';
+import GlobalSnackbarProvider from './snackbar/GlobalSnackbarProvider';
+
+const useStyles = makeStyles((theme) => ({
+ innerContent: {
+ padding: theme.spacing(4),
+ marginLeft: drawerWidth,
+ maxHeight: `100vh`,
+ flex: 1,
+ },
+}));
+
+const theme = createTheme({
+ palette: {
+ type: 'dark',
+ primary: {
+ main: '#f4511e',
+ },
+ secondary: indigo,
+ },
+ transitions: {
+ create: () => 'none',
+ },
+ props: {
+ MuiButtonBase: {
+ disableRipple: true,
+ },
+ },
+});
+
+function InnerContent() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ );
+}
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/IpcInvokeButton.tsx b/src/renderer/components/IpcInvokeButton.tsx
new file mode 100644
index 00000000..c2a39266
--- /dev/null
+++ b/src/renderer/components/IpcInvokeButton.tsx
@@ -0,0 +1,166 @@
+import {
+ Button,
+ ButtonProps,
+ CircularProgress,
+ IconButton,
+ Tooltip,
+} from '@material-ui/core';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
+import { useSnackbar } from 'notistack';
+import { useAppSelector } from 'store/hooks';
+import { RpcProcessStateType } from 'models/rpcModel';
+import { isExternalRpc } from 'store/config';
+
+function IpcButtonTooltip({
+ requiresRpcAndNotReady,
+ children,
+ processType,
+ tooltipTitle,
+}: {
+ requiresRpcAndNotReady: boolean;
+ children: ReactElement;
+ processType: RpcProcessStateType;
+ tooltipTitle?: string;
+}) {
+ if (tooltipTitle) {
+ return {children} ;
+ }
+
+ const getMessage = () => {
+ if (!requiresRpcAndNotReady) return '';
+
+ switch (processType) {
+ case RpcProcessStateType.LISTENING_FOR_CONNECTIONS:
+ return '';
+ case RpcProcessStateType.STARTED:
+ return 'Cannot execute this action because the Swap Daemon is still starting and not yet ready to accept connections. Please wait a moment and try again';
+ case RpcProcessStateType.EXITED:
+ return 'Cannot execute this action because the Swap Daemon has been stopped. Please start the Swap Daemon again to continue';
+ case RpcProcessStateType.NOT_STARTED:
+ return 'Cannot execute this action because the Swap Daemon has not been started yet. Please start the Swap Daemon first';
+ default:
+ return '';
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+interface IpcInvokeButtonProps {
+ ipcArgs: unknown[];
+ ipcChannel: string;
+ onSuccess?: (data: T) => void;
+ isLoadingOverride?: boolean;
+ isIconButton?: boolean;
+ loadIcon?: ReactNode;
+ requiresRpc?: boolean;
+ disabled?: boolean;
+ displayErrorSnackbar?: boolean;
+ tooltipTitle?: string;
+}
+
+const DELAY_BEFORE_SHOWING_LOADING_MS = 0;
+
+export default function IpcInvokeButton({
+ disabled,
+ ipcChannel,
+ ipcArgs,
+ onSuccess,
+ onClick,
+ endIcon,
+ loadIcon,
+ isLoadingOverride,
+ isIconButton,
+ requiresRpc,
+ displayErrorSnackbar,
+ tooltipTitle,
+ ...rest
+}: IpcInvokeButtonProps & ButtonProps) {
+ const { enqueueSnackbar } = useSnackbar();
+
+ const rpcProcessType = useAppSelector((state) => state.rpc.process.type);
+ const isRpcReady =
+ rpcProcessType === RpcProcessStateType.LISTENING_FOR_CONNECTIONS;
+ const [isPending, setIsPending] = useState(false);
+ const [hasMinLoadingTimePassed, setHasMinLoadingTimePassed] = useState(false);
+
+ const isLoading = (isPending && hasMinLoadingTimePassed) || isLoadingOverride;
+ const actualEndIcon = isLoading
+ ? loadIcon || ) {
+ onClick?.(event);
+
+ if (!isPending) {
+ setIsPending(true);
+ try {
+ // const result = await ipcRenderer.invoke(ipcChannel, ...ipcArgs);
+ throw new Error('Not implemented');
+ // onSuccess?.(result);
+ } catch (e: unknown) {
+ if (displayErrorSnackbar) {
+ enqueueSnackbar((e as Error).message, {
+ autoHideDuration: 60 * 1000,
+ variant: 'error',
+ });
+ }
+ } finally {
+ setIsPending(false);
+ }
+ }
+ }
+
+ const requiresRpcAndNotReady =
+ !!requiresRpc && !isRpcReady && !isExternalRpc();
+ const isDisabled = disabled || requiresRpcAndNotReady || isLoading;
+
+ return (
+
+
+ {isIconButton ? (
+
+ {actualEndIcon}
+
+ ) : (
+
+
+ );
+}
+
+IpcInvokeButton.defaultProps = {
+ requiresRpc: true,
+ disabled: false,
+ onSuccess: undefined,
+ isLoadingOverride: false,
+ isIconButton: false,
+ loadIcon: undefined,
+ displayErrorSnackbar: true,
+};
diff --git a/src/renderer/components/alert/FundsLeftInWalletAlert.tsx b/src/renderer/components/alert/FundsLeftInWalletAlert.tsx
new file mode 100644
index 00000000..269b8973
--- /dev/null
+++ b/src/renderer/components/alert/FundsLeftInWalletAlert.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
+import { useNavigate } from 'react-router-dom';
+import { useAppSelector } from 'store/hooks';
+
+export default function FundsLeftInWalletAlert() {
+ const fundsLeft = useAppSelector((state) => state.rpc.state.balance);
+ const navigate = useNavigate();
+
+ if (fundsLeft != null && fundsLeft > 0) {
+ return (
+ navigate('/wallet')}
+ >
+ View
+
+ }
+ >
+ There are some Bitcoin left in your wallet
+
+ );
+ }
+ return null;
+}
diff --git a/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx b/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx
new file mode 100644
index 00000000..d58a2dd1
--- /dev/null
+++ b/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx
@@ -0,0 +1,30 @@
+import { Alert } from '@material-ui/lab';
+import { Box, LinearProgress } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+
+export default function MoneroWalletRpcUpdatingAlert() {
+ const updateState = useAppSelector(
+ (s) => s.rpc.state.moneroWalletRpc.updateState,
+ );
+
+ if (updateState === false) {
+ return null;
+ }
+
+ const progress = Number.parseFloat(
+ updateState.progress.substring(0, updateState.progress.length - 1),
+ );
+
+ return (
+
+
+ The Monero wallet is updating. This may take a few moments
+
+
+ );
+}
diff --git a/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx b/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx
new file mode 100644
index 00000000..e297d063
--- /dev/null
+++ b/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx
@@ -0,0 +1,35 @@
+import { Alert } from '@material-ui/lab';
+import { Box, makeStyles } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+import WalletRefreshButton from '../pages/wallet/WalletRefreshButton';
+import { SatsAmount } from '../other/Units';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ paddingBottom: theme.spacing(1),
+ },
+}));
+
+export default function RemainingFundsWillBeUsedAlert() {
+ const classes = useStyles();
+ const balance = useAppSelector((s) => s.rpc.state.balance);
+
+ if (balance == null || balance <= 0) {
+ return <>;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/renderer/components/alert/RpcStatusAlert.tsx b/src/renderer/components/alert/RpcStatusAlert.tsx
new file mode 100644
index 00000000..a03aff54
--- /dev/null
+++ b/src/renderer/components/alert/RpcStatusAlert.tsx
@@ -0,0 +1,27 @@
+import { Alert } from '@material-ui/lab';
+import { CircularProgress } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+import { RpcProcessStateType } from 'models/rpcModel';
+
+export default function RpcStatusAlert() {
+ const rpcProcess = useAppSelector((s) => s.rpc.process);
+ if (rpcProcess.type === RpcProcessStateType.STARTED) {
+ return (
+ The swap daemon is running ;
+ }
+ if (rpcProcess.type === RpcProcessStateType.NOT_STARTED) {
+ return The swap daemon is being started ;
+ }
+ if (rpcProcess.type === RpcProcessStateType.EXITED) {
+ return (
+ The swap daemon has stopped unexpectedly
+ );
+ }
+ return <>;
+}
diff --git a/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx b/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx
new file mode 100644
index 00000000..4bd2cd62
--- /dev/null
+++ b/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx
@@ -0,0 +1,97 @@
+import { makeStyles } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import { useActiveSwapInfo } from 'store/hooks';
+import {
+ isSwapTimelockInfoCancelled,
+ isSwapTimelockInfoNone,
+} from 'models/rpcModel';
+import HumanizedBitcoinBlockDuration from '../other/HumanizedBitcoinBlockDuration';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ marginBottom: theme.spacing(1),
+ },
+ list: {
+ margin: theme.spacing(0.25),
+ },
+}));
+
+export default function SwapMightBeCancelledAlert({
+ bobBtcLockTxConfirmations,
+}: {
+ bobBtcLockTxConfirmations: number;
+}) {
+ const classes = useStyles();
+ const swap = useActiveSwapInfo();
+
+ if (
+ bobBtcLockTxConfirmations < 5 ||
+ swap === null ||
+ swap.timelock === null
+ ) {
+ return <>;
+ }
+
+ const { timelock } = swap;
+ const punishTimelockOffset = swap.punishTimelock;
+
+ return (
+
+ Be careful!
+ The swap provider has taken a long time to lock their Monero. This might
+ mean that:
+
+
+ There is a technical issue that prevents them from locking their funds
+
+ They are a malicious actor (unlikely)
+
+
+ {isSwapTimelockInfoNone(timelock) && (
+ <>
+
+
+ You will be able to refund in about{' '}
+
+
+
+
+
+ If you have not refunded or completed the swap in about{' '}
+
+
+
+ )}
+ {isSwapTimelockInfoCancelled(timelock) && (
+
+
+ If you have not refunded or completed the swap in about{' '}
+
+
+ )}
+
+ As long as you see this screen, the swap will be refunded
+ automatically when the time comes. If this fails, you have to manually
+ refund by navigating to the History page.
+
+
+
+ );
+}
diff --git a/src/renderer/components/alert/SwapStatusAlert.tsx b/src/renderer/components/alert/SwapStatusAlert.tsx
new file mode 100644
index 00000000..91fcb06b
--- /dev/null
+++ b/src/renderer/components/alert/SwapStatusAlert.tsx
@@ -0,0 +1,233 @@
+import { Alert, AlertTitle } from '@material-ui/lab/';
+import { Box, makeStyles } from '@material-ui/core';
+import { ReactNode } from 'react';
+import { exhaustiveGuard } from 'utils/typescriptUtils';
+import {
+ SwapCancelRefundButton,
+ SwapResumeButton,
+} from '../pages/history/table/HistoryRowActions';
+import HumanizedBitcoinBlockDuration from '../other/HumanizedBitcoinBlockDuration';
+import {
+ GetSwapInfoResponse,
+ GetSwapInfoResponseRunningSwap,
+ isGetSwapInfoResponseRunningSwap,
+ isSwapTimelockInfoCancelled,
+ isSwapTimelockInfoNone,
+ isSwapTimelockInfoPunished,
+ SwapStateName,
+ SwapTimelockInfoCancelled,
+ SwapTimelockInfoNone,
+} from '../../../models/rpcModel';
+import { SwapMoneroRecoveryButton } from '../pages/history/table/SwapMoneroRecoveryButton';
+
+const useStyles = makeStyles({
+ box: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '0.5rem',
+ },
+ list: {
+ padding: '0px',
+ margin: '0px',
+ },
+});
+
+/**
+ * Component for displaying a list of messages.
+ * @param messages - Array of messages to display.
+ * @returns JSX.Element
+ */
+const MessageList = ({ messages }: { messages: ReactNode[] }) => {
+ const classes = useStyles();
+ return (
+
+ {messages.map((msg, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+ {msg}
+ ))}
+
+ );
+};
+
+/**
+ * Sub-component for displaying alerts when the swap is in a safe state.
+ * @param swap - The swap information.
+ * @returns JSX.Element
+ */
+const BitcoinRedeemedStateAlert = ({ swap }: { swap: GetSwapInfoResponse }) => {
+ const classes = useStyles();
+ return (
+
+
+ );
+};
+
+/**
+ * Sub-component for displaying alerts when the swap is in a state with no timelock info.
+ * @param swap - The swap information.
+ * @param punishTimelockOffset - The punish timelock offset.
+ * @returns JSX.Element
+ */
+const BitcoinLockedNoTimelockExpiredStateAlert = ({
+ timelock,
+ punishTimelockOffset,
+}: {
+ timelock: SwapTimelockInfoNone;
+ punishTimelockOffset: number;
+}) => (
+
+ Your Bitcoin is locked. If the swap is not completed in approximately{' '}
+
+
+ You will lose your funds if you do not refund within{' '}
+
+ );
+};
+
+/**
+ * Sub-component for displaying alerts requiring immediate action.
+ * @returns JSX.Element
+ */
+const ImmediateActionAlert = () => (
+ <>Resume the swap immediately to avoid losing your funds
+);
+
+/**
+ * Main component for displaying the appropriate swap alert status text.
+ * @param swap - The swap information.
+ * @returns JSX.Element | null
+ */
+function SwapAlertStatusText({
+ swap,
+}: {
+ swap: GetSwapInfoResponseRunningSwap;
+}) {
+ switch (swap.stateName) {
+ // This is the state where the swap is safe because the other party has redeemed the Bitcoin
+ // It cannot be punished anymore
+ case SwapStateName.BtcRedeemed:
+ return
+ Swap {swap.swapId.substring(0, 5)}... is unfinished
+
+
+ {swaps.map((swap) => (
+
+ );
+}
diff --git a/src/renderer/components/alert/UnfinishedSwapsAlert.tsx b/src/renderer/components/alert/UnfinishedSwapsAlert.tsx
new file mode 100644
index 00000000..bdeda601
--- /dev/null
+++ b/src/renderer/components/alert/UnfinishedSwapsAlert.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
+import { useNavigate } from 'react-router-dom';
+import { useResumeableSwapsCount } from 'store/hooks';
+
+export default function UnfinishedSwapsAlert() {
+ const resumableSwapsCount = useResumeableSwapsCount();
+ const navigate = useNavigate();
+
+ if (resumableSwapsCount > 0) {
+ return (
+ navigate('/history')}
+ >
+ VIEW
+
+ }
+ >
+ You have{' '}
+ {resumableSwapsCount > 1
+ ? `${resumableSwapsCount} unfinished swaps`
+ : 'one unfinished swap'}
+
+ );
+ }
+ return null;
+}
diff --git a/src/renderer/components/icons/BitcoinIcon.tsx b/src/renderer/components/icons/BitcoinIcon.tsx
new file mode 100644
index 00000000..b42f17f9
--- /dev/null
+++ b/src/renderer/components/icons/BitcoinIcon.tsx
@@ -0,0 +1,24 @@
+import { SvgIcon } from '@material-ui/core';
+import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+
+export default function BitcoinIcon(props: SvgIconProps) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/icons/DiscordIcon.tsx b/src/renderer/components/icons/DiscordIcon.tsx
new file mode 100644
index 00000000..d913b884
--- /dev/null
+++ b/src/renderer/components/icons/DiscordIcon.tsx
@@ -0,0 +1,24 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+import { SvgIcon } from '@material-ui/core';
+
+export default function DiscordIcon(props: SvgIconProps) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/icons/LinkIconButton.tsx b/src/renderer/components/icons/LinkIconButton.tsx
new file mode 100644
index 00000000..ad6c6ef4
--- /dev/null
+++ b/src/renderer/components/icons/LinkIconButton.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { IconButton } from '@material-ui/core';
+
+export default function LinkIconButton({
+ url,
+ children,
+}: {
+ url: string;
+ children: ReactNode;
+}) {
+ return (
+ window.open(url, '_blank')}>
+ {children}
+
+ );
+}
diff --git a/src/renderer/components/icons/MoneroIcon.tsx b/src/renderer/components/icons/MoneroIcon.tsx
new file mode 100644
index 00000000..b5433385
--- /dev/null
+++ b/src/renderer/components/icons/MoneroIcon.tsx
@@ -0,0 +1,28 @@
+import { SvgIcon } from '@material-ui/core';
+import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+
+export default function MoneroIcon(props: SvgIconProps) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/icons/TorIcon.tsx b/src/renderer/components/icons/TorIcon.tsx
new file mode 100644
index 00000000..4d77e587
--- /dev/null
+++ b/src/renderer/components/icons/TorIcon.tsx
@@ -0,0 +1,24 @@
+import { SvgIcon } from '@material-ui/core';
+import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+
+export default function TorIcon(props: SvgIconProps) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/inputs/BitcoinAddressTextField.tsx b/src/renderer/components/inputs/BitcoinAddressTextField.tsx
new file mode 100644
index 00000000..a5ec21db
--- /dev/null
+++ b/src/renderer/components/inputs/BitcoinAddressTextField.tsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { TextField } from '@material-ui/core';
+import { TextFieldProps } from '@material-ui/core/TextField/TextField';
+import { isBtcAddressValid } from 'utils/conversionUtils';
+import { isTestnet } from 'store/config';
+
+export default function BitcoinAddressTextField({
+ address,
+ onAddressChange,
+ onAddressValidityChange,
+ helperText,
+ ...props
+}: {
+ address: string;
+ onAddressChange: (address: string) => void;
+ onAddressValidityChange: (valid: boolean) => void;
+ helperText: string;
+} & TextFieldProps) {
+ const placeholder = isTestnet() ? 'tb1q4aelwalu...' : 'bc18ociqZ9mZ...';
+ const errorText = isBtcAddressValid(address, isTestnet())
+ ? null
+ : `Only bech32 addresses are supported. They begin with "${
+ isTestnet() ? 'tb1' : 'bc1'
+ }"`;
+
+ useEffect(() => {
+ onAddressValidityChange(!errorText);
+ }, [address, errorText, onAddressValidityChange]);
+
+ return (
+ onAddressChange(e.target.value)}
+ error={!!errorText && address.length > 0}
+ helperText={address.length > 0 ? errorText || helperText : helperText}
+ placeholder={placeholder}
+ variant="outlined"
+ {...props}
+ />
+ );
+}
diff --git a/src/renderer/components/inputs/MoneroAddressTextField.tsx b/src/renderer/components/inputs/MoneroAddressTextField.tsx
new file mode 100644
index 00000000..4418c588
--- /dev/null
+++ b/src/renderer/components/inputs/MoneroAddressTextField.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { TextField } from '@material-ui/core';
+import { TextFieldProps } from '@material-ui/core/TextField/TextField';
+import { isXmrAddressValid } from 'utils/conversionUtils';
+import { isTestnet } from 'store/config';
+
+export default function MoneroAddressTextField({
+ address,
+ onAddressChange,
+ onAddressValidityChange,
+ helperText,
+ ...props
+}: {
+ address: string;
+ onAddressChange: (address: string) => void;
+ onAddressValidityChange: (valid: boolean) => void;
+ helperText: string;
+} & TextFieldProps) {
+ const placeholder = isTestnet() ? '59McWTPGc745...' : '888tNkZrPN6J...';
+ const errorText = isXmrAddressValid(address, isTestnet())
+ ? null
+ : 'Not a valid Monero address';
+
+ useEffect(() => {
+ onAddressValidityChange(!errorText);
+ }, [address, onAddressValidityChange, errorText]);
+
+ return (
+ onAddressChange(e.target.value)}
+ error={!!errorText && address.length > 0}
+ helperText={address.length > 0 ? errorText || helperText : helperText}
+ placeholder={placeholder}
+ variant="outlined"
+ {...props}
+ />
+ );
+}
diff --git a/src/renderer/components/modal/DialogHeader.tsx b/src/renderer/components/modal/DialogHeader.tsx
new file mode 100644
index 00000000..c550b65f
--- /dev/null
+++ b/src/renderer/components/modal/DialogHeader.tsx
@@ -0,0 +1,22 @@
+import { DialogTitle, makeStyles, Typography } from '@material-ui/core';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ },
+});
+
+type DialogTitleProps = {
+ title: string;
+};
+
+export default function DialogHeader({ title }: DialogTitleProps) {
+ const classes = useStyles();
+
+ return (
+
+ {title}
+
+ );
+}
diff --git a/src/renderer/components/modal/PaperTextBox.tsx b/src/renderer/components/modal/PaperTextBox.tsx
new file mode 100644
index 00000000..490f94aa
--- /dev/null
+++ b/src/renderer/components/modal/PaperTextBox.tsx
@@ -0,0 +1,33 @@
+import { Button, makeStyles, Paper, Typography } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+ logsOuter: {
+ overflow: 'auto',
+ padding: theme.spacing(1),
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ maxHeight: '10rem',
+ },
+ copyButton: {
+ marginTop: theme.spacing(1),
+ },
+}));
+
+export default function PaperTextBox({ stdOut }: { stdOut: string }) {
+ const classes = useStyles();
+
+ function handleCopyLogs() {
+ throw new Error('Not implemented');
+ }
+
+ return (
+
+
+ {stdOut}
+
+
+ Copy
+
+
+ );
+}
diff --git a/src/renderer/components/modal/SwapSuspendAlert.tsx b/src/renderer/components/modal/SwapSuspendAlert.tsx
new file mode 100644
index 00000000..fa594cfe
--- /dev/null
+++ b/src/renderer/components/modal/SwapSuspendAlert.tsx
@@ -0,0 +1,44 @@
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+import IpcInvokeButton from '../IpcInvokeButton';
+
+type SwapCancelAlertProps = {
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function SwapSuspendAlert({
+ open,
+ onClose,
+}: SwapCancelAlertProps) {
+ return (
+
+ Force stop running operation?
+
+
+ Are you sure you want to force stop the running swap?
+
+
+
+
+ No
+
+
+ Force stop
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/feedback/FeedbackDialog.tsx b/src/renderer/components/modal/feedback/FeedbackDialog.tsx
new file mode 100644
index 00000000..b8ed07d5
--- /dev/null
+++ b/src/renderer/components/modal/feedback/FeedbackDialog.tsx
@@ -0,0 +1,170 @@
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ MenuItem,
+ Select,
+ TextField,
+} from '@material-ui/core';
+import { useState } from 'react';
+import { useSnackbar } from 'notistack';
+import {
+ useActiveSwapInfo,
+ useAppSelector,
+} from 'store/hooks';
+import { parseDateString } from 'utils/parseUtils';
+import { store } from 'renderer/store/storeRenderer';
+import { CliLog } from 'models/cliModel';
+import { submitFeedbackViaHttp } from '../../../api';
+import { PiconeroAmount } from '../../other/Units';
+import LoadingButton from '../../other/LoadingButton';
+
+async function submitFeedback(body: string, swapId: string | number) {
+ let attachedBody = '';
+
+ if (swapId !== 0 && typeof swapId === 'string') {
+ const swapInfo = store.getState().rpc.state.swapInfos[swapId];
+ const logs = [] as CliLog[];
+
+ throw new Error('Not implemented');
+
+ if (swapInfo === undefined) {
+ throw new Error(`Swap with id ${swapId} not found`);
+ }
+
+ attachedBody = `${JSON.stringify(swapInfo, null, 4)} \n\nLogs: ${logs
+ .map((l) => JSON.stringify(l))
+ .join('\n====\n')}`;
+ }
+
+ await submitFeedbackViaHttp(body, attachedBody);
+}
+
+/*
+ * This component is a dialog that allows the user to submit feedback to the
+ * developers. The user can enter a message and optionally attach logs from a
+ * specific swap.
+ * selectedSwap = 0 means no swap is attached
+ */
+function SwapSelectDropDown({
+ selectedSwap,
+ setSelectedSwap,
+}: {
+ selectedSwap: string | number;
+ setSelectedSwap: (swapId: string | number) => void;
+}) {
+ const swaps = useAppSelector((state) =>
+ Object.values(state.rpc.state.swapInfos),
+ );
+
+ return (
+ setSelectedSwap(e.target.value as string)}
+ >
+ Do not attach logs
+ {swaps.map((swap) => (
+
+ Swap {swap.swapId.substring(0, 5)}... from{' '}
+ {new Date(parseDateString(swap.startDate)).toDateString()} (
+
+ ))}
+
+ );
+}
+
+const MAX_FEEDBACK_LENGTH = 4000;
+
+export default function FeedbackDialog({
+ open,
+ onClose,
+}: {
+ open: boolean;
+ onClose: () => void;
+}) {
+ const [pending, setPending] = useState(false);
+ const [bodyText, setBodyText] = useState('');
+ const currentSwapId = useActiveSwapInfo();
+
+ const { enqueueSnackbar } = useSnackbar();
+
+ const [selectedAttachedSwap, setSelectedAttachedSwap] = useState<
+ string | number
+ >(currentSwapId?.swapId || 0);
+
+ const bodyTooLong = bodyText.length > MAX_FEEDBACK_LENGTH;
+
+ return (
+
+ Submit Feedback
+
+
+ Got something to say? Drop us a message below. If you had an issue
+ with a specific swap, select it from the dropdown to attach the logs.
+ It will help us figure out what went wrong. Hit that submit button
+ when you are ready. We appreciate you taking the time to share your
+ thoughts!
+
+
+ setBodyText(e.target.value)}
+ label={
+ bodyTooLong
+ ? `Text is too long (${bodyText.length}/${MAX_FEEDBACK_LENGTH})`
+ : 'Feedback'
+ }
+ multiline
+ minRows={4}
+ maxRows={4}
+ fullWidth
+ error={bodyTooLong}
+ />
+
+
+
+ Cancel
+ {
+ if (pending) {
+ return;
+ }
+
+ try {
+ setPending(true);
+ await submitFeedback(bodyText, selectedAttachedSwap);
+ enqueueSnackbar('Feedback submitted successfully!', {
+ variant: 'success',
+ });
+ } catch (e) {
+ console.error(`Failed to submit feedback: ${e}`);
+ enqueueSnackbar(`Failed to submit feedback (${e})`, {
+ variant: 'error',
+ });
+ } finally {
+ setPending(false);
+ }
+ onClose();
+ }}
+ loading={pending}
+ >
+ Submit
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/listSellers/ListSellersDialog.tsx b/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
new file mode 100644
index 00000000..72c2dded
--- /dev/null
+++ b/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
@@ -0,0 +1,136 @@
+import { ChangeEvent, useState } from 'react';
+import {
+ DialogTitle,
+ Dialog,
+ DialogContent,
+ DialogContentText,
+ TextField,
+ DialogActions,
+ Button,
+ Box,
+ Chip,
+ makeStyles,
+ Theme,
+} from '@material-ui/core';
+import { Multiaddr } from 'multiaddr';
+import { useSnackbar } from 'notistack';
+import IpcInvokeButton from '../../IpcInvokeButton';
+
+const PRESET_RENDEZVOUS_POINTS = [
+ '/dns4/discover.unstoppableswap.net/tcp/8888/p2p/12D3KooWA6cnqJpVnreBVnoro8midDL9Lpzmg8oJPoAGi7YYaamE',
+ '/dns4/eratosthen.es/tcp/7798/p2p/12D3KooWAh7EXXa2ZyegzLGdjvj1W4G3EXrTGrf6trraoT1MEobs',
+];
+
+const useStyles = makeStyles((theme: Theme) => ({
+ chipOuter: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: theme.spacing(1),
+ },
+}));
+
+type ListSellersDialogProps = {
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function ListSellersDialog({
+ open,
+ onClose,
+}: ListSellersDialogProps) {
+ const classes = useStyles();
+ const [rendezvousAddress, setRendezvousAddress] = useState('');
+ const { enqueueSnackbar } = useSnackbar();
+
+ function handleMultiAddrChange(event: ChangeEvent) {
+ setRendezvousAddress(event.target.value);
+ }
+
+ function getMultiAddressError(): string | null {
+ try {
+ const multiAddress = new Multiaddr(rendezvousAddress);
+ if (!multiAddress.protoNames().includes('p2p')) {
+ return 'The multi address must contain the peer id (/p2p/)';
+ }
+ return null;
+ } catch (e) {
+ return 'Not a valid multi address';
+ }
+ }
+
+ function handleSuccess(amountOfSellers: number) {
+ let message: string;
+
+ switch (amountOfSellers) {
+ case 0:
+ message = `No providers were discovered at the rendezvous point`;
+ break;
+ case 1:
+ message = `Discovered one provider at the rendezvous point`;
+ break;
+ default:
+ message = `Discovered ${amountOfSellers} providers at the rendezvous point`;
+ }
+
+ enqueueSnackbar(message, {
+ variant: 'success',
+ autoHideDuration: 5000,
+ });
+
+ onClose();
+ }
+
+ return (
+
+ Discover swap providers
+
+
+ The rendezvous protocol provides a way to discover providers (trading
+ partners) without relying on one singular centralized institution. By
+ manually connecting to a rendezvous point run by a volunteer, you can
+ discover providers and then connect and swap with them.
+
+
+ {PRESET_RENDEZVOUS_POINTS.map((rAddress) => (
+ setRendezvousAddress(rAddress)}
+ />
+ ))}
+
+
+
+ Cancel
+
+ Connect
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/provider/ProviderInfo.tsx b/src/renderer/components/modal/provider/ProviderInfo.tsx
new file mode 100644
index 00000000..592bf1de
--- /dev/null
+++ b/src/renderer/components/modal/provider/ProviderInfo.tsx
@@ -0,0 +1,75 @@
+import { makeStyles, Box, Typography, Chip, Tooltip } from '@material-ui/core';
+import { VerifiedUser } from '@material-ui/icons';
+import { satsToBtc, secondsToDays } from 'utils/conversionUtils';
+import { ExtendedProviderStatus } from 'models/apiModel';
+import {
+ MoneroBitcoinExchangeRate,
+ SatsAmount,
+} from 'renderer/components/other/Units';
+
+const useStyles = makeStyles((theme) => ({
+ content: {
+ flex: 1,
+ '& *': {
+ lineBreak: 'anywhere',
+ },
+ },
+ chipsOuter: {
+ display: 'flex',
+ marginTop: theme.spacing(1),
+ gap: theme.spacing(0.5),
+ flexWrap: 'wrap',
+ },
+}));
+
+export default function ProviderInfo({
+ provider,
+}: {
+ provider: ExtendedProviderStatus;
+}) {
+ const classes = useStyles();
+
+ return (
+
+
+ Swap Provider
+
+
+ {provider.multiAddr}
+
+
+ {provider.peerId.substring(0, 8)}...{provider.peerId.slice(-8)}
+
+
+ Exchange rate:{' '}
+
+
+
+
+ )}
+ {provider.age ? (
+
+
+ )}
+
+
+ );
+}
diff --git a/src/renderer/components/modal/provider/ProviderListDialog.tsx b/src/renderer/components/modal/provider/ProviderListDialog.tsx
new file mode 100644
index 00000000..7309ae51
--- /dev/null
+++ b/src/renderer/components/modal/provider/ProviderListDialog.tsx
@@ -0,0 +1,129 @@
+import {
+ Avatar,
+ List,
+ ListItem,
+ ListItemAvatar,
+ ListItemText,
+ DialogTitle,
+ Dialog,
+ DialogActions,
+ Button,
+ DialogContent,
+ makeStyles,
+ CircularProgress,
+} from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import { useState } from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+import { ExtendedProviderStatus } from 'models/apiModel';
+import {
+ useAllProviders,
+ useAppDispatch,
+ useIsRpcEndpointBusy,
+} from 'store/hooks';
+import { setSelectedProvider } from 'store/features/providersSlice';
+import { RpcMethod } from 'models/rpcModel';
+import ProviderSubmitDialog from './ProviderSubmitDialog';
+import ListSellersDialog from '../listSellers/ListSellersDialog';
+import ProviderInfo from './ProviderInfo';
+
+const useStyles = makeStyles({
+ dialogContent: {
+ padding: 0,
+ },
+});
+
+type ProviderSelectDialogProps = {
+ open: boolean;
+ onClose: () => void;
+};
+
+export function ProviderSubmitDialogOpenButton() {
+ const [open, setOpen] = useState(false);
+
+ return (
+ {
+ // Prevents background from being clicked and reopening dialog
+ if (!open) {
+ setOpen(true);
+ }
+ }}
+ >
+ setOpen(false)} />
+
+
+
+
+
+ );
+}
+
+export function ListSellersDialogOpenButton() {
+ const [open, setOpen] = useState(false);
+ const running = useIsRpcEndpointBusy(RpcMethod.LIST_SELLERS);
+
+ return (
+ {
+ // Prevents background from being clicked and reopening dialog
+ if (!open) {
+ setOpen(true);
+ }
+ }}
+ >
+ setOpen(false)} />
+
+ {running ?
+
+
+ );
+}
+
+export default function ProviderListDialog({
+ open,
+ onClose,
+}: ProviderSelectDialogProps) {
+ const classes = useStyles();
+ const providers = useAllProviders();
+ const dispatch = useAppDispatch();
+
+ function handleProviderChange(provider: ExtendedProviderStatus) {
+ dispatch(setSelectedProvider(provider));
+ onClose();
+ }
+
+ return (
+
+ Select a swap provider
+
+
+
+ {providers.map((provider) => (
+ handleProviderChange(provider)}
+ key={provider.peerId}
+ >
+
+ ))}
+
+
+
+
+ Cancel
+
+
+ );
+}
diff --git a/src/renderer/components/modal/provider/ProviderSelect.tsx b/src/renderer/components/modal/provider/ProviderSelect.tsx
new file mode 100644
index 00000000..1aeea214
--- /dev/null
+++ b/src/renderer/components/modal/provider/ProviderSelect.tsx
@@ -0,0 +1,62 @@
+import {
+ makeStyles,
+ Card,
+ CardContent,
+ Box,
+ IconButton,
+} from '@material-ui/core';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import { useState } from 'react';
+import { useAppSelector } from 'store/hooks';
+import ProviderInfo from './ProviderInfo';
+import ProviderListDialog from './ProviderListDialog';
+
+const useStyles = makeStyles({
+ inner: {
+ textAlign: 'left',
+ width: '100%',
+ height: '100%',
+ },
+ providerCard: {
+ width: '100%',
+ },
+ providerCardContent: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+});
+
+export default function ProviderSelect() {
+ const classes = useStyles();
+ const [selectDialogOpen, setSelectDialogOpen] = useState(false);
+ const selectedProvider = useAppSelector(
+ (state) => state.providers.selectedProvider,
+ );
+
+ if (!selectedProvider) return <>No provider selected;
+
+ function handleSelectDialogClose() {
+ setSelectDialogOpen(false);
+ }
+
+ function handleSelectDialogOpen() {
+ setSelectDialogOpen(true);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/provider/ProviderSubmitDialog.tsx b/src/renderer/components/modal/provider/ProviderSubmitDialog.tsx
new file mode 100644
index 00000000..0452db5e
--- /dev/null
+++ b/src/renderer/components/modal/provider/ProviderSubmitDialog.tsx
@@ -0,0 +1,111 @@
+import { ChangeEvent, useState } from 'react';
+import {
+ DialogTitle,
+ Dialog,
+ DialogContent,
+ DialogContentText,
+ TextField,
+ DialogActions,
+ Button,
+} from '@material-ui/core';
+import { Multiaddr } from 'multiaddr';
+
+type ProviderSubmitDialogProps = {
+ open: boolean;
+ onClose: () => void;
+};
+
+export default function ProviderSubmitDialog({
+ open,
+ onClose,
+}: ProviderSubmitDialogProps) {
+ const [multiAddr, setMultiAddr] = useState('');
+ const [peerId, setPeerId] = useState('');
+
+ async function handleProviderSubmit() {
+ if (multiAddr && peerId) {
+ await fetch('https://api.unstoppableswap.net/api/submit-provider', {
+ method: 'post',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ multiAddr,
+ peerId,
+ }),
+ });
+ setMultiAddr('');
+ setPeerId('');
+ onClose();
+ }
+ }
+
+ function handleMultiAddrChange(event: ChangeEvent) {
+ setMultiAddr(event.target.value);
+ }
+
+ function handlePeerIdChange(event: ChangeEvent) {
+ setPeerId(event.target.value);
+ }
+
+ function getMultiAddressError(): string | null {
+ try {
+ const multiAddress = new Multiaddr(multiAddr);
+ if (multiAddress.protoNames().includes('p2p')) {
+ return 'The multi address should not contain the peer id (/p2p/)';
+ }
+ if (multiAddress.protoNames().find((name) => name.includes('onion'))) {
+ return 'It is currently not possible to add a provider that is only reachable via Tor';
+ }
+ return null;
+ } catch (e) {
+ return 'Not a valid multi address';
+ }
+ }
+
+ return (
+
+ Submit a provider to the public registry
+
+
+ If the provider is valid and reachable, it will be displayed to all
+ other users to trade with.
+
+
+
+ Cancel
+
+ Submit
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/BitcoinQrCode.tsx b/src/renderer/components/modal/swap/BitcoinQrCode.tsx
new file mode 100644
index 00000000..83ef6545
--- /dev/null
+++ b/src/renderer/components/modal/swap/BitcoinQrCode.tsx
@@ -0,0 +1,22 @@
+import QRCode from 'react-qr-code';
+import { Box } from '@material-ui/core';
+
+export default function BitcoinQrCode({ address }: { address: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx b/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx
new file mode 100644
index 00000000..252833d4
--- /dev/null
+++ b/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx
@@ -0,0 +1,25 @@
+import { isTestnet } from 'store/config';
+import { getBitcoinTxExplorerUrl } from 'utils/conversionUtils';
+import BitcoinIcon from 'renderer/components/icons/BitcoinIcon';
+import { ReactNode } from 'react';
+import TransactionInfoBox from './TransactionInfoBox';
+
+type Props = {
+ title: string;
+ txId: string;
+ additionalContent: ReactNode;
+ loading: boolean;
+};
+
+export default function BitcoinTransactionInfoBox({ txId, ...props }: Props) {
+ const explorerUrl = getBitcoinTxExplorerUrl(txId, isTestnet());
+
+ return (
+
+
+ {description}
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/ClipbiardIconButton.tsx b/src/renderer/components/modal/swap/ClipbiardIconButton.tsx
new file mode 100644
index 00000000..8ad35b68
--- /dev/null
+++ b/src/renderer/components/modal/swap/ClipbiardIconButton.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@material-ui/core';
+import { ButtonProps } from '@material-ui/core/Button/Button';
+
+export default function ClipboardIconButton({
+ text,
+ ...props
+}: { text: string } & ButtonProps) {
+ function writeToClipboard() {
+ throw new Error('Not implemented');
+ }
+
+ return (
+
+ Copy
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/DepositAddressInfoBox.tsx b/src/renderer/components/modal/swap/DepositAddressInfoBox.tsx
new file mode 100644
index 00000000..9de60c26
--- /dev/null
+++ b/src/renderer/components/modal/swap/DepositAddressInfoBox.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { Box, Typography } from '@material-ui/core';
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import InfoBox from './InfoBox';
+import ClipboardIconButton from './ClipbiardIconButton';
+import BitcoinQrCode from './BitcoinQrCode';
+
+type Props = {
+ title: string;
+ address: string;
+ additionalContent: ReactNode;
+ icon: ReactNode;
+};
+
+export default function DepositAddressInfoBox({
+ title,
+ address,
+ additionalContent,
+ icon,
+}: Props) {
+ return (
+ {address}}
+ additionalContent={
+
+
+
+ {additionalContent}
+
+
+
+ }
+ icon={icon}
+ loading={false}
+ />
+ );
+}
diff --git a/src/renderer/components/modal/swap/InfoBox.tsx b/src/renderer/components/modal/swap/InfoBox.tsx
new file mode 100644
index 00000000..e58a45bf
--- /dev/null
+++ b/src/renderer/components/modal/swap/InfoBox.tsx
@@ -0,0 +1,53 @@
+import {
+ Box,
+ LinearProgress,
+ makeStyles,
+ Paper,
+ Typography,
+} from '@material-ui/core';
+import { ReactNode } from 'react';
+
+type Props = {
+ title: ReactNode;
+ mainContent: ReactNode;
+ additionalContent: ReactNode;
+ loading: boolean;
+ icon: ReactNode;
+};
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ padding: theme.spacing(1.5),
+ overflow: 'hidden',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(1),
+ },
+ upperContent: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(0.5),
+ },
+}));
+
+export default function InfoBox({
+ title,
+ mainContent,
+ additionalContent,
+ icon,
+ loading,
+}: Props) {
+ const classes = useStyles();
+
+ return (
+
+ {title}
+
+ {icon}
+ {mainContent}
+
+ {loading ? {additionalContent}
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx b/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx
new file mode 100644
index 00000000..894f23d6
--- /dev/null
+++ b/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx
@@ -0,0 +1,25 @@
+import { isTestnet } from 'store/config';
+import { getMoneroTxExplorerUrl } from 'utils/conversionUtils';
+import MoneroIcon from 'renderer/components/icons/MoneroIcon';
+import { ReactNode } from 'react';
+import TransactionInfoBox from './TransactionInfoBox';
+
+type Props = {
+ title: string;
+ txId: string;
+ additionalContent: ReactNode;
+ loading: boolean;
+};
+
+export default function MoneroTransactionInfoBox({ txId, ...props }: Props) {
+ const explorerUrl = getMoneroTxExplorerUrl(txId, isTestnet());
+
+ return (
+
+
+ {debug ? (
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+ setOpenSuspendAlert(false)}
+ />
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/SwapDialogTitle.tsx b/src/renderer/components/modal/swap/SwapDialogTitle.tsx
new file mode 100644
index 00000000..7592fc3d
--- /dev/null
+++ b/src/renderer/components/modal/swap/SwapDialogTitle.tsx
@@ -0,0 +1,45 @@
+import {
+ Box,
+ DialogTitle,
+ makeStyles,
+ Typography,
+} from '@material-ui/core';
+import TorStatusBadge from './pages/TorStatusBadge';
+import FeedbackSubmitBadge from './pages/FeedbackSubmitBadge';
+import DebugPageSwitchBadge from './pages/DebugPageSwitchBadge';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ rightSide: {
+ display: 'flex',
+ alignItems: 'center',
+ gridGap: theme.spacing(1),
+ },
+}));
+
+export default function SwapDialogTitle({
+ title,
+ debug,
+ setDebug,
+}: {
+ title: string;
+ debug: boolean;
+ setDebug: (d: boolean) => void;
+}) {
+ const classes = useStyles();
+
+ return (
+
+ {title}
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/SwapStateStepper.tsx b/src/renderer/components/modal/swap/SwapStateStepper.tsx
new file mode 100644
index 00000000..10d0491b
--- /dev/null
+++ b/src/renderer/components/modal/swap/SwapStateStepper.tsx
@@ -0,0 +1,166 @@
+import { Step, StepLabel, Stepper, Typography } from '@material-ui/core';
+import { SwapSpawnType } from 'models/cliModel';
+import { SwapStateName } from 'models/rpcModel';
+import { useActiveSwapInfo, useAppSelector } from 'store/hooks';
+import { exhaustiveGuard } from 'utils/typescriptUtils';
+
+export enum PathType {
+ HAPPY_PATH = 'happy path',
+ UNHAPPY_PATH = 'unhappy path',
+}
+
+function getActiveStep(
+ stateName: SwapStateName | null,
+ processExited: boolean,
+): [PathType, number, boolean] {
+ switch (stateName) {
+ /// // Happy Path
+ // Step: 0 (Waiting for Bitcoin lock tx to be published)
+ case null:
+ return [PathType.HAPPY_PATH, 0, false];
+ case SwapStateName.Started:
+ case SwapStateName.SwapSetupCompleted:
+ return [PathType.HAPPY_PATH, 0, processExited];
+
+ // Step: 1 (Waiting for Bitcoin Lock confirmation and XMR Lock Publication)
+ // We have locked the Bitcoin and are waiting for the other party to lock their XMR
+ case SwapStateName.BtcLocked:
+ return [PathType.HAPPY_PATH, 1, processExited];
+
+ // Step: 2 (Waiting for XMR Lock confirmation)
+ // We have locked the Bitcoin and the other party has locked their XMR
+ case SwapStateName.XmrLockProofReceived:
+ return [PathType.HAPPY_PATH, 1, processExited];
+
+ // Step: 3 (Sending Encrypted Signature and waiting for Bitcoin Redemption)
+ // The XMR lock transaction has been confirmed
+ // We now need to send the encrypted signature to the other party and wait for them to redeem the Bitcoin
+ case SwapStateName.XmrLocked:
+ case SwapStateName.EncSigSent:
+ return [PathType.HAPPY_PATH, 2, processExited];
+
+ // Step: 4 (Waiting for XMR Redemption)
+ case SwapStateName.BtcRedeemed:
+ return [PathType.HAPPY_PATH, 3, processExited];
+
+ // Step: 4 (Completed) (Swap completed, XMR redeemed)
+ case SwapStateName.XmrRedeemed:
+ return [PathType.HAPPY_PATH, 4, false];
+
+ // Edge Case of Happy Path where the swap is safely aborted. We "fail" at the first step.
+ case SwapStateName.SafelyAborted:
+ return [PathType.HAPPY_PATH, 0, true];
+
+ // // Unhappy Path
+ // Step: 1 (Cancelling swap, checking if cancel transaction has been published already by the other party)
+ case SwapStateName.CancelTimelockExpired:
+ return [PathType.UNHAPPY_PATH, 0, processExited];
+
+ // Step: 2 (Attempt to publish the Bitcoin refund transaction)
+ case SwapStateName.BtcCancelled:
+ return [PathType.UNHAPPY_PATH, 1, processExited];
+
+ // Step: 2 (Completed) (Bitcoin refunded)
+ case SwapStateName.BtcRefunded:
+ return [PathType.UNHAPPY_PATH, 2, false];
+
+ // Step: 2 (We failed to publish the Bitcoin refund transaction)
+ // We failed to publish the Bitcoin refund transaction because the timelock has expired.
+ // We will be punished. Nothing we can do about it now.
+ case SwapStateName.BtcPunished:
+ return [PathType.UNHAPPY_PATH, 1, true];
+ default:
+ return exhaustiveGuard(stateName);
+ }
+}
+
+function HappyPathStepper({
+ activeStep,
+ error,
+}: {
+ activeStep: number;
+ error: boolean;
+}) {
+ return (
+
+
+ ~12min}
+ error={error && activeStep === 0}
+ >
+ Locking your BTC
+
+
+
+ ~18min}
+ error={error && activeStep === 1}
+ >
+ They lock their XMR
+
+
+
+ ~2min}
+ error={error && activeStep === 2}
+ >
+ They redeem the BTC
+
+
+
+ ~2min}
+ error={error && activeStep === 3}
+ >
+ Redeeming your XMR
+
+
+
+ );
+}
+
+function UnhappyPathStepper({
+ activeStep,
+ error,
+}: {
+ activeStep: number;
+ error: boolean;
+}) {
+ return (
+
+
+ ~20min}
+ error={error && activeStep === 0}
+ >
+ Cancelling swap
+
+
+
+ ~20min}
+ error={error && activeStep === 1}
+ >
+ Refunding your BTC
+
+
+
+ );
+}
+
+export default function SwapStateStepper() {
+ const currentSwapSpawnType = useAppSelector((s) => s.swap.spawnType);
+ const stateName = useActiveSwapInfo()?.stateName ?? null;
+ const processExited = useAppSelector((s) => !s.swap.processRunning);
+ const [pathType, activeStep, error] = getActiveStep(stateName, processExited);
+
+ // If the current swap is being manually cancelled and refund, we want to show the unhappy path even though the current state is not a "unhappy" state
+ if (currentSwapSpawnType === SwapSpawnType.CANCEL_REFUND) {
+ return {txId}}
+ loading={loading}
+ additionalContent={
+ <>
+ {additionalContent}
+
+
+
+ }
+ icon={icon}
+ />
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/DebugPage.tsx b/src/renderer/components/modal/swap/pages/DebugPage.tsx
new file mode 100644
index 00000000..a3aee47c
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/DebugPage.tsx
@@ -0,0 +1,36 @@
+import { Box, DialogContentText } from '@material-ui/core';
+import { useActiveSwapInfo, useAppSelector } from 'store/hooks';
+import CliLogsBox from '../../../other/RenderedCliLog';
+import JsonTreeView from '../../../other/JSONViewTree';
+
+export default function DebugPage() {
+ const torStdOut = useAppSelector((s) => s.tor.stdOut);
+ const logs = useAppSelector((s) => s.swap.logs);
+ const guiState = useAppSelector((s) => s.swap);
+ const cliState = useActiveSwapInfo();
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/DebugPageSwitchBadge.tsx b/src/renderer/components/modal/swap/pages/DebugPageSwitchBadge.tsx
new file mode 100644
index 00000000..49a2ee43
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/DebugPageSwitchBadge.tsx
@@ -0,0 +1,26 @@
+import { Tooltip } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import DeveloperBoardIcon from '@material-ui/icons/DeveloperBoard';
+
+export default function DebugPageSwitchBadge({
+ enabled,
+ setEnabled,
+}: {
+ enabled: boolean;
+ setEnabled: (enabled: boolean) => void;
+}) {
+ const handleToggle = () => {
+ setEnabled(!enabled);
+ };
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/FeedbackSubmitBadge.tsx b/src/renderer/components/modal/swap/pages/FeedbackSubmitBadge.tsx
new file mode 100644
index 00000000..08ddccd7
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/FeedbackSubmitBadge.tsx
@@ -0,0 +1,22 @@
+import { IconButton } from '@material-ui/core';
+import FeedbackIcon from '@material-ui/icons/Feedback';
+import FeedbackDialog from '../../feedback/FeedbackDialog';
+import { useState } from 'react';
+
+export default function FeedbackSubmitBadge() {
+ const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
+
+ return (
+ <>
+ {showFeedbackDialog && (
+ setShowFeedbackDialog(false)}
+ />
+ )}
+ setShowFeedbackDialog(true)}>
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/SwapStatePage.tsx b/src/renderer/components/modal/swap/pages/SwapStatePage.tsx
new file mode 100644
index 00000000..de0429a2
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/SwapStatePage.tsx
@@ -0,0 +1,106 @@
+import { Box } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+import {
+ isSwapStateBtcCancelled,
+ isSwapStateBtcLockInMempool,
+ isSwapStateBtcPunished,
+ isSwapStateBtcRedemeed,
+ isSwapStateBtcRefunded,
+ isSwapStateInitiated,
+ isSwapStateProcessExited,
+ isSwapStateReceivedQuote,
+ isSwapStateStarted,
+ isSwapStateWaitingForBtcDeposit,
+ isSwapStateXmrLocked,
+ isSwapStateXmrLockInMempool,
+ isSwapStateXmrRedeemInMempool,
+ SwapState,
+} from '../../../../../models/storeModel';
+import InitiatedPage from './init/InitiatedPage';
+import WaitingForBitcoinDepositPage from './init/WaitingForBitcoinDepositPage';
+import StartedPage from './in_progress/StartedPage';
+import BitcoinLockTxInMempoolPage from './in_progress/BitcoinLockTxInMempoolPage';
+import XmrLockTxInMempoolPage from './in_progress/XmrLockInMempoolPage';
+// eslint-disable-next-line import/no-cycle
+import ProcessExitedPage from './exited/ProcessExitedPage';
+import XmrRedeemInMempoolPage from './done/XmrRedeemInMempoolPage';
+import ReceivedQuotePage from './in_progress/ReceivedQuotePage';
+import BitcoinRedeemedPage from './in_progress/BitcoinRedeemedPage';
+import InitPage from './init/InitPage';
+import XmrLockedPage from './in_progress/XmrLockedPage';
+import BitcoinCancelledPage from './in_progress/BitcoinCancelledPage';
+import BitcoinRefundedPage from './done/BitcoinRefundedPage';
+import BitcoinPunishedPage from './done/BitcoinPunishedPage';
+import { SyncingMoneroWalletPage } from './in_progress/SyncingMoneroWalletPage';
+
+export default function SwapStatePage({
+ swapState,
+}: {
+ swapState: SwapState | null;
+}) {
+ const isSyncingMoneroWallet = useAppSelector(
+ (state) => state.rpc.state.moneroWallet.isSyncing,
+ );
+
+ if (isSyncingMoneroWallet) {
+ return
+ No information to display
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/TorStatusBadge.tsx b/src/renderer/components/modal/swap/pages/TorStatusBadge.tsx
new file mode 100644
index 00000000..6cf6d18e
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/TorStatusBadge.tsx
@@ -0,0 +1,19 @@
+import { IconButton, Tooltip } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+import TorIcon from '../../../icons/TorIcon';
+
+export default function TorStatusBadge() {
+ const tor = useAppSelector((s) => s.tor);
+
+ if (tor.processRunning) {
+ return (
+
+
+
+
+ );
+ }
+
+ return <>;
+}
diff --git a/src/renderer/components/modal/swap/pages/done/BitcoinPunishedPage.tsx b/src/renderer/components/modal/swap/pages/done/BitcoinPunishedPage.tsx
new file mode 100644
index 00000000..e98f9fc1
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/done/BitcoinPunishedPage.tsx
@@ -0,0 +1,15 @@
+import { Box, DialogContentText } from '@material-ui/core';
+import FeedbackInfoBox from '../../../../pages/help/FeedbackInfoBox';
+
+export default function BitcoinPunishedPage() {
+ return (
+
+
+ Unfortunately, the swap was not successful, and you've incurred a
+ penalty because the swap was not refunded in time. Both the Bitcoin and
+ Monero are irretrievable.
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/done/BitcoinRefundedPage.tsx b/src/renderer/components/modal/swap/pages/done/BitcoinRefundedPage.tsx
new file mode 100644
index 00000000..91f3a4cd
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/done/BitcoinRefundedPage.tsx
@@ -0,0 +1,43 @@
+import { Box, DialogContentText } from '@material-ui/core';
+import { SwapStateBtcRefunded } from 'models/storeModel';
+import { useActiveSwapInfo } from 'store/hooks';
+import BitcoinTransactionInfoBox from '../../BitcoinTransactionInfoBox';
+import FeedbackInfoBox from '../../../../pages/help/FeedbackInfoBox';
+
+export default function BitcoinRefundedPage({
+ state,
+}: {
+ state: SwapStateBtcRefunded | null;
+}) {
+ const swap = useActiveSwapInfo();
+ const additionalContent = swap
+ ? `Refund address: ${swap.btcRefundAddress}`
+ : null;
+
+ return (
+
+
+ Unfortunately, the swap was not successful. However, rest assured that
+ all your Bitcoin has been refunded to the specified address. The swap
+ process is now complete, and you are free to exit the application.
+
+
+ {state && (
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx b/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx
new file mode 100644
index 00000000..18f49597
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx
@@ -0,0 +1,49 @@
+import { Box, DialogContentText } from '@material-ui/core';
+import { SwapStateXmrRedeemInMempool } from 'models/storeModel';
+import { useActiveSwapInfo } from 'store/hooks';
+import { getSwapXmrAmount } from 'models/rpcModel';
+import MoneroTransactionInfoBox from '../../MoneroTransactionInfoBox';
+import FeedbackInfoBox from '../../../../pages/help/FeedbackInfoBox';
+
+type XmrRedeemInMempoolPageProps = {
+ state: SwapStateXmrRedeemInMempool | null;
+};
+
+export default function XmrRedeemInMempoolPage({
+ state,
+}: XmrRedeemInMempoolPageProps) {
+ const swap = useActiveSwapInfo();
+ const additionalContent = swap
+ ? `This transaction transfers ${getSwapXmrAmount(swap).toFixed(6)} XMR to ${
+ state?.bobXmrRedeemAddress
+ }`
+ : null;
+
+ return (
+
+
+ The swap was successful and the Monero has been sent to the address you
+ specified. The swap is completed and you may exit the application now.
+
+
+ {state && (
+ <>
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/exited/ProcessExitedAndNotDonePage.tsx b/src/renderer/components/modal/swap/pages/exited/ProcessExitedAndNotDonePage.tsx
new file mode 100644
index 00000000..beea3154
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/exited/ProcessExitedAndNotDonePage.tsx
@@ -0,0 +1,71 @@
+import { Box, DialogContentText } from '@material-ui/core';
+import { useActiveSwapInfo, useAppSelector } from 'store/hooks';
+import { SwapStateProcessExited } from 'models/storeModel';
+import CliLogsBox from '../../../../other/RenderedCliLog';
+import { SwapSpawnType } from 'models/cliModel';
+
+export default function ProcessExitedAndNotDonePage({
+ state,
+}: {
+ state: SwapStateProcessExited;
+}) {
+ const swap = useActiveSwapInfo();
+ const logs = useAppSelector((s) => s.swap.logs);
+ const spawnType = useAppSelector((s) => s.swap.spawnType);
+
+ function getText() {
+ const isCancelRefund = spawnType === SwapSpawnType.CANCEL_REFUND;
+ const hasRpcError = state.rpcError != null;
+ const hasSwap = swap != null;
+
+ let messages = [];
+
+ messages.push(
+ isCancelRefund
+ ? 'The manual cancel and refund was unsuccessful.'
+ : 'The swap exited unexpectedly without completing.',
+ );
+
+ if (!hasSwap && !isCancelRefund) {
+ messages.push('No funds were locked.');
+ }
+
+ messages.push(
+ hasRpcError
+ ? 'Check the error and the logs below for more information.'
+ : 'Check the logs below for more information.',
+ );
+
+ if (hasSwap) {
+ messages.push(`The swap is in the "${swap.stateName}" state.`);
+ if (!isCancelRefund) {
+ messages.push(
+ 'Try resuming the swap or attempt to initiate a manual cancel and refund.',
+ );
+ }
+ }
+
+ return messages.join(' ');
+ }
+
+ return (
+
+ {getText()}
+
+ {state.rpcError && (
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/exited/ProcessExitedPage.tsx b/src/renderer/components/modal/swap/pages/exited/ProcessExitedPage.tsx
new file mode 100644
index 00000000..2e78ff86
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/exited/ProcessExitedPage.tsx
@@ -0,0 +1,47 @@
+import { useActiveSwapInfo } from 'store/hooks';
+import { SwapStateName } from 'models/rpcModel';
+import {
+ isSwapStateBtcPunished,
+ isSwapStateBtcRefunded,
+ isSwapStateXmrRedeemInMempool,
+ SwapStateProcessExited,
+} from '../../../../../../models/storeModel';
+import XmrRedeemInMempoolPage from '../done/XmrRedeemInMempoolPage';
+import BitcoinPunishedPage from '../done/BitcoinPunishedPage';
+// eslint-disable-next-line import/no-cycle
+import SwapStatePage from '../SwapStatePage';
+import BitcoinRefundedPage from '../done/BitcoinRefundedPage';
+import ProcessExitedAndNotDonePage from './ProcessExitedAndNotDonePage';
+
+type ProcessExitedPageProps = {
+ state: SwapStateProcessExited;
+};
+
+export default function ProcessExitedPage({ state }: ProcessExitedPageProps) {
+ const swap = useActiveSwapInfo();
+
+ // If we have a swap state, for a "done" state we should use it to display additional information that can't be extracted from the database
+ if (
+ isSwapStateXmrRedeemInMempool(state.prevState) ||
+ isSwapStateBtcRefunded(state.prevState) ||
+ isSwapStateBtcPunished(state.prevState)
+ ) {
+ return
+
+ The Bitcoin lock transaction has been published. The swap will proceed
+ once the transaction is confirmed and the swap provider locks their
+ Monero.
+
+
+ Most swap providers require one confirmation before locking their
+ Monero
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/in_progress/BitcoinRedeemedPage.tsx b/src/renderer/components/modal/swap/pages/in_progress/BitcoinRedeemedPage.tsx
new file mode 100644
index 00000000..c484ce97
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/in_progress/BitcoinRedeemedPage.tsx
@@ -0,0 +1,5 @@
+import CircularProgressWithSubtitle from '../../CircularProgressWithSubtitle';
+
+export default function BitcoinRedeemedPage() {
+ return
+
+ They have published their Monero lock transaction. The swap will proceed
+ once the transaction has been confirmed.
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/in_progress/XmrLockedPage.tsx b/src/renderer/components/modal/swap/pages/in_progress/XmrLockedPage.tsx
new file mode 100644
index 00000000..8fe447d3
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/in_progress/XmrLockedPage.tsx
@@ -0,0 +1,7 @@
+import CircularProgressWithSubtitle from '../../CircularProgressWithSubtitle';
+
+export default function XmrLockedPage() {
+ return (
+
+
+ Depositing {bitcoinBalance > 0 && <>another}
+
+ setAmount(parseFloat(e.target.value))}
+ size="small"
+ type="number"
+ className={classes.textField}
+ />
+
+ BTC will give you approximately{' '}
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/init/DownloadingMoneroWalletRpcPage.tsx b/src/renderer/components/modal/swap/pages/init/DownloadingMoneroWalletRpcPage.tsx
new file mode 100644
index 00000000..7cc43bd6
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/init/DownloadingMoneroWalletRpcPage.tsx
@@ -0,0 +1,14 @@
+import CircularProgressWithSubtitle from '../../CircularProgressWithSubtitle';
+import { MoneroWalletRpcUpdateState } from '../../../../../../models/storeModel';
+
+export default function DownloadingMoneroWalletRpcPage({
+ updateState,
+}: {
+ updateState: MoneroWalletRpcUpdateState;
+}) {
+ return (
+
+
+ Please specify the address to which the Monero should be sent upon
+ completion of the swap and the address for receiving a Bitcoin refund if
+ the swap fails.
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/swap/pages/init/InitiatedPage.tsx b/src/renderer/components/modal/swap/pages/init/InitiatedPage.tsx
new file mode 100644
index 00000000..b4890f95
--- /dev/null
+++ b/src/renderer/components/modal/swap/pages/init/InitiatedPage.tsx
@@ -0,0 +1,21 @@
+import { useAppSelector } from 'store/hooks';
+import { SwapSpawnType } from 'models/cliModel';
+import CircularProgressWithSubtitle from '../../CircularProgressWithSubtitle';
+
+export default function InitiatedPage() {
+ const description = useAppSelector((s) => {
+ switch (s.swap.spawnType) {
+ case SwapSpawnType.INIT:
+ return 'Requesting quote from provider...';
+ case SwapSpawnType.RESUME:
+ return 'Resuming swap...';
+ case SwapSpawnType.CANCEL_REFUND:
+ return 'Attempting to cancel & refund swap...';
+ default:
+ // Should never be hit
+ return 'Initiating swap...';
+ }
+ });
+
+ return
+
+
+
+ {bitcoinBalance > 0 ? (
+
+ You have already deposited{' '}
+
+ ) : null}
+
+ Send any amount between{' '}
+
+
+ All Bitcoin sent to this this address will converted into
+ Monero at an exchance rate of{' '}
+
+
+ The network fee of{' '}
+
+
+ The swap will start automatically as soon as the minimum
+ amount is deposited
+
+
+
+
+ }
+ icon={
+
+ );
+}
diff --git a/src/renderer/components/modal/wallet/WithdrawDialogContent.tsx b/src/renderer/components/modal/wallet/WithdrawDialogContent.tsx
new file mode 100644
index 00000000..87083079
--- /dev/null
+++ b/src/renderer/components/modal/wallet/WithdrawDialogContent.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Box, DialogContent, makeStyles } from '@material-ui/core';
+import WithdrawStepper from './WithdrawStepper';
+
+const useStyles = makeStyles({
+ outer: {
+ minHeight: '15rem',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ },
+});
+
+export default function WithdrawDialogContent({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ const classes = useStyles();
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/renderer/components/modal/wallet/WithdrawStatePage.tsx b/src/renderer/components/modal/wallet/WithdrawStatePage.tsx
new file mode 100644
index 00000000..0e2a7771
--- /dev/null
+++ b/src/renderer/components/modal/wallet/WithdrawStatePage.tsx
@@ -0,0 +1,27 @@
+import { useAppSelector, useIsRpcEndpointBusy } from 'store/hooks';
+import { RpcMethod } from 'models/rpcModel';
+import AddressInputPage from './pages/AddressInputPage';
+import InitiatedPage from './pages/InitiatedPage';
+import BtcTxInMempoolPageContent from './pages/BitcoinWithdrawTxInMempoolPage';
+
+export default function WithdrawStatePage({
+ onCancel,
+}: {
+ onCancel: () => void;
+}) {
+ const isRpcEndpointBusy = useIsRpcEndpointBusy(RpcMethod.WITHDRAW_BTC);
+ const withdrawTxId = useAppSelector((state) => state.rpc.state.withdrawTxId);
+
+ if (withdrawTxId !== null) {
+ return (
+
+
+ Enter withdraw address
+
+
+ Transfer funds to wallet
+
+
+ );
+}
diff --git a/src/renderer/components/modal/wallet/pages/AddressInputPage.tsx b/src/renderer/components/modal/wallet/pages/AddressInputPage.tsx
new file mode 100644
index 00000000..37d4126a
--- /dev/null
+++ b/src/renderer/components/modal/wallet/pages/AddressInputPage.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { Button, DialogActions, DialogContentText } from '@material-ui/core';
+import BitcoinAddressTextField from '../../../inputs/BitcoinAddressTextField';
+import WithdrawDialogContent from '../WithdrawDialogContent';
+import IpcInvokeButton from '../../../IpcInvokeButton';
+
+export default function AddressInputPage({
+ onCancel,
+}: {
+ onCancel: () => void;
+}) {
+ const [withdrawAddressValid, setWithdrawAddressValid] = useState(false);
+ const [withdrawAddress, setWithdrawAddress] = useState('');
+
+ return (
+ <>
+
+
+ To withdraw the BTC of the internal wallet, please enter an address.
+ All funds will be sent to that address.
+
+
+
+
+
+
+ Cancel
+
+
+ Withdraw
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/wallet/pages/BitcoinWithdrawTxInMempoolPage.tsx b/src/renderer/components/modal/wallet/pages/BitcoinWithdrawTxInMempoolPage.tsx
new file mode 100644
index 00000000..153e9941
--- /dev/null
+++ b/src/renderer/components/modal/wallet/pages/BitcoinWithdrawTxInMempoolPage.tsx
@@ -0,0 +1,36 @@
+import { Button, DialogActions, DialogContentText } from '@material-ui/core';
+import BitcoinTransactionInfoBox from '../../swap/BitcoinTransactionInfoBox';
+import WithdrawDialogContent from '../WithdrawDialogContent';
+
+export default function BtcTxInMempoolPageContent({
+ withdrawTxId,
+ onCancel,
+}: {
+ withdrawTxId: string;
+ onCancel: () => void;
+}) {
+ return (
+ <>
+
+
+ All funds of the internal Bitcoin wallet have been transferred to your
+ withdraw address.
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+ );
+}
diff --git a/src/renderer/components/modal/wallet/pages/InitiatedPage.tsx b/src/renderer/components/modal/wallet/pages/InitiatedPage.tsx
new file mode 100644
index 00000000..875737a3
--- /dev/null
+++ b/src/renderer/components/modal/wallet/pages/InitiatedPage.tsx
@@ -0,0 +1,21 @@
+import { Button, DialogActions } from '@material-ui/core';
+import CircularProgressWithSubtitle from '../../swap/CircularProgressWithSubtitle';
+import WithdrawDialogContent from '../WithdrawDialogContent';
+
+export default function InitiatedPage({ onCancel }: { onCancel: () => void }) {
+ return (
+ <>
+
+
+
+
+ Cancel
+
+
+ Done
+
+
+
+ );
+}
diff --git a/src/renderer/components/navigation/Navigation.tsx b/src/renderer/components/navigation/Navigation.tsx
new file mode 100644
index 00000000..5228a7b4
--- /dev/null
+++ b/src/renderer/components/navigation/Navigation.tsx
@@ -0,0 +1,41 @@
+import { Drawer, makeStyles, Box } from '@material-ui/core';
+import NavigationHeader from './NavigationHeader';
+import NavigationFooter from './NavigationFooter';
+
+export const drawerWidth = 240;
+
+const useStyles = makeStyles({
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerContainer: {
+ overflow: 'auto',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ height: '100%',
+ },
+});
+
+export default function Navigation() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/navigation/NavigationFooter.tsx b/src/renderer/components/navigation/NavigationFooter.tsx
new file mode 100644
index 00000000..01df1bb3
--- /dev/null
+++ b/src/renderer/components/navigation/NavigationFooter.tsx
@@ -0,0 +1,47 @@
+import RedditIcon from '@material-ui/icons/Reddit';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import { Box, makeStyles } from '@material-ui/core';
+import LinkIconButton from '../icons/LinkIconButton';
+import UnfinishedSwapsAlert from '../alert/UnfinishedSwapsAlert';
+import FundsLeftInWalletAlert from '../alert/FundsLeftInWalletAlert';
+import RpcStatusAlert from '../alert/RpcStatusAlert';
+import DiscordIcon from '../icons/DiscordIcon';
+import { DISCORD_URL } from '../pages/help/ContactInfoBox';
+import MoneroWalletRpcUpdatingAlert from '../alert/MoneroWalletRpcUpdatingAlert';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ display: 'flex',
+ flexDirection: 'column',
+ padding: theme.spacing(1),
+ gap: theme.spacing(1),
+ },
+ linksOuter: {
+ display: 'flex',
+ justifyContent: 'space-evenly',
+ },
+}));
+
+export default function NavigationFooter() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/navigation/NavigationHeader.tsx b/src/renderer/components/navigation/NavigationHeader.tsx
new file mode 100644
index 00000000..0d208e20
--- /dev/null
+++ b/src/renderer/components/navigation/NavigationHeader.tsx
@@ -0,0 +1,30 @@
+import { Box, List } from '@material-ui/core';
+import SwapHorizOutlinedIcon from '@material-ui/icons/SwapHorizOutlined';
+import HistoryOutlinedIcon from '@material-ui/icons/HistoryOutlined';
+import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+import RouteListItemIconButton from './RouteListItemIconButton';
+import UnfinishedSwapsBadge from './UnfinishedSwapsCountBadge';
+
+export default function NavigationHeader() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/navigation/RouteListItemIconButton.tsx b/src/renderer/components/navigation/RouteListItemIconButton.tsx
new file mode 100644
index 00000000..4e29f8b0
--- /dev/null
+++ b/src/renderer/components/navigation/RouteListItemIconButton.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+
+export default function RouteListItemIconButton({
+ name,
+ route,
+ children,
+}: {
+ name: string;
+ route: string;
+ children: ReactNode;
+}) {
+ const navigate = useNavigate();
+
+ return (
+ navigate(route)} key={name}>
+ {children}
+
+ );
+}
diff --git a/src/renderer/components/navigation/UnfinishedSwapsCountBadge.tsx b/src/renderer/components/navigation/UnfinishedSwapsCountBadge.tsx
new file mode 100644
index 00000000..1304b775
--- /dev/null
+++ b/src/renderer/components/navigation/UnfinishedSwapsCountBadge.tsx
@@ -0,0 +1,19 @@
+import { Badge } from '@material-ui/core';
+import { useResumeableSwapsCount } from 'store/hooks';
+
+export default function UnfinishedSwapsBadge({
+ children,
+}: {
+ children: JSX.Element;
+}) {
+ const resumableSwapsCount = useResumeableSwapsCount();
+
+ if (resumableSwapsCount > 0) {
+ return (
+
+ {children}
+
+ );
+ }
+ return children;
+}
diff --git a/src/renderer/components/other/ExpandableSearchBox.tsx b/src/renderer/components/other/ExpandableSearchBox.tsx
new file mode 100644
index 00000000..3cbee92c
--- /dev/null
+++ b/src/renderer/components/other/ExpandableSearchBox.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Box, IconButton, TextField } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import CloseIcon from '@material-ui/icons/Close';
+
+export function ExpandableSearchBox({
+ query,
+ setQuery,
+}: {
+ query: string;
+ setQuery: (query: string) => void;
+}) {
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+
+
+ {expanded ? (
+ <>
+ setQuery(e.target.value)}
+ autoFocus
+ size="small"
+ />
+ {
+ setExpanded(false);
+ setQuery('');
+ }}
+ size="small"
+ >
+
+
+ ) : (
+ setExpanded(true)} size="small">
+
+ )}
+
+
+ );
+}
diff --git a/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx b/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx
new file mode 100644
index 00000000..00ed29cc
--- /dev/null
+++ b/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx
@@ -0,0 +1,17 @@
+import humanizeDuration from 'humanize-duration';
+
+const AVG_BLOCK_TIME_MS = 10 * 60 * 1000;
+
+export default function HumanizedBitcoinBlockDuration({
+ blocks,
+}: {
+ blocks: number;
+}) {
+ return (
+ <>
+ {`${humanizeDuration(blocks * AVG_BLOCK_TIME_MS, {
+ conjunction: ' and ',
+ })} (${blocks} blocks)`}
+
+ );
+}
diff --git a/src/renderer/components/other/JSONViewTree.tsx b/src/renderer/components/other/JSONViewTree.tsx
new file mode 100644
index 00000000..ecdd2979
--- /dev/null
+++ b/src/renderer/components/other/JSONViewTree.tsx
@@ -0,0 +1,50 @@
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+import ScrollablePaperTextBox from './ScrollablePaperTextBox';
+
+interface JsonTreeViewProps {
+ data: any;
+ label: string;
+}
+
+export default function JsonTreeView({ data, label }: JsonTreeViewProps) {
+ const renderTree = (nodes: any, parentId: string) => {
+ return Object.keys(nodes).map((key, _) => {
+ const nodeId = `${parentId}.${key}`;
+ if (typeof nodes[key] === 'object' && nodes[key] !== null) {
+ return (
+
+ {renderTree(nodes[key], nodeId)}
+
+ );
+ }
+ return (
+
+ {renderTree(data ?? {}, 'root')}
+
+ ,
+ ]}
+ />
+ );
+}
diff --git a/src/renderer/components/other/LoadingButton.tsx b/src/renderer/components/other/LoadingButton.tsx
new file mode 100644
index 00000000..dafe51a9
--- /dev/null
+++ b/src/renderer/components/other/LoadingButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+interface LoadingButtonProps extends ButtonProps {
+ loading: boolean;
+}
+
+const LoadingButton: React.FC = ({
+ loading,
+ disabled,
+ children,
+ ...props
+}) => {
+ return (
+
+
+ {fields.message}
+
+
+ {Object.entries(fields).map(([key, value]) => {
+ if (key !== 'message') {
+ return (
+
+ {key}: {JSON.stringify(value)}
+
+ );
+ }
+ return null;
+ })}
+
+
+ );
+}
+
+export default function CliLogsBox({
+ label,
+ logs,
+}: {
+ label: string;
+ logs: (CliLog | string)[];
+}) {
+ const [searchQuery, setSearchQuery] = useState('');
+
+ const memoizedLogs = useMemo(() => {
+ if (searchQuery.length === 0) {
+ return logs;
+ }
+ return logs.filter((log) =>
+ JSON.stringify(log).toLowerCase().includes(searchQuery.toLowerCase()),
+ );
+ }, [logs, searchQuery]);
+
+ return (
+
+ typeof log === 'string' ? (
+ {log}
+ ) : (
+ (null);
+
+ function onCopy() {
+ navigator.clipboard.writeText(copyValue);
+ }
+
+ function scrollToBottom() {
+ virtuaEl.current?.scrollToIndex(rows.length - 1);
+ }
+
+ function scrollToTop() {
+ virtuaEl.current?.scrollToIndex(0);
+ }
+
+ return (
+
+ {title}
+
+
+ {rows}
+
+
+
+
+
+
+
+
+
+ {searchQuery !== undefined && setSearchQuery !== undefined && (
+
+
+ );
+}
+
+ScrollablePaperTextBox.defaultProps = {
+ searchQuery: undefined,
+ setSearchQuery: undefined,
+ minHeight: MIN_HEIGHT,
+};
diff --git a/src/renderer/components/other/Units.tsx b/src/renderer/components/other/Units.tsx
new file mode 100644
index 00000000..445f2dcf
--- /dev/null
+++ b/src/renderer/components/other/Units.tsx
@@ -0,0 +1,80 @@
+import { piconerosToXmr, satsToBtc } from 'utils/conversionUtils';
+import { Tooltip } from '@material-ui/core';
+import { useAppSelector } from 'store/hooks';
+
+type Amount = number | null | undefined;
+
+export function AmountWithUnit({
+ amount,
+ unit,
+ fixedPrecision,
+ dollarRate,
+}: {
+ amount: Amount;
+ unit: string;
+ fixedPrecision: number;
+ dollarRate?: Amount;
+}) {
+ return (
+
+
+ {amount != null
+ ? Number.parseFloat(amount.toFixed(fixedPrecision))
+ : '?'}{' '}
+ {unit}
+
+
+ );
+}
+
+AmountWithUnit.defaultProps = {
+ dollarRate: null,
+};
+
+export function BitcoinAmount({ amount }: { amount: Amount }) {
+ const btcUsdRate = useAppSelector((state) => state.rates.btcPrice);
+
+ return (
+
+ If you need help or just want to reach out to the contributors of this
+ project you can open a GitHub issue, join our Matrix room or Discord
+
+ }
+ additionalContent={
+
+ window.open(GITHUB_ISSUE_URL)}
+ >
+ Open GitHub issue
+
+ window.open(MATRIX_ROOM_URL)}
+ >
+ Join Matrix room
+
+ window.open(DISCORD_URL)}>
+ Join Discord
+
+
+ }
+ icon={null}
+ loading={false}
+ />
+ );
+}
diff --git a/src/renderer/components/pages/help/DonateInfoBox.tsx b/src/renderer/components/pages/help/DonateInfoBox.tsx
new file mode 100644
index 00000000..a3dd510a
--- /dev/null
+++ b/src/renderer/components/pages/help/DonateInfoBox.tsx
@@ -0,0 +1,25 @@
+import { Typography } from '@material-ui/core';
+import DepositAddressInfoBox from '../../modal/swap/DepositAddressInfoBox';
+import MoneroIcon from '../../icons/MoneroIcon';
+
+const XMR_DONATE_ADDRESS =
+ '87jS4C7ngk9EHdqFFuxGFgg8AyH63dRUoULshWDybFJaP75UA89qsutG5B1L1QTc4w228nsqsv8EjhL7bz8fB3611Mh98mg';
+
+export default function DonateInfoBox() {
+ return (
+
+ 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.
+
+ }
+ />
+ );
+}
diff --git a/src/renderer/components/pages/help/FeedbackInfoBox.tsx b/src/renderer/components/pages/help/FeedbackInfoBox.tsx
new file mode 100644
index 00000000..7c89d2fd
--- /dev/null
+++ b/src/renderer/components/pages/help/FeedbackInfoBox.tsx
@@ -0,0 +1,35 @@
+import { Button, Typography } from '@material-ui/core';
+import { useState } from 'react';
+import InfoBox from '../../modal/swap/InfoBox';
+import FeedbackDialog from '../../modal/feedback/FeedbackDialog';
+
+export default function FeedbackInfoBox() {
+ const [showDialog, setShowDialog] = useState(false);
+
+ return (
+
+ The main goal of this project is to make Atomic Swaps easier to use,
+ and for that we need genuine users' input. Please leave some
+ feedback, it takes just two minutes. I'll read each and every
+ survey response and take your feedback into consideration.
+
+ }
+ additionalContent={
+ <>
+ setShowDialog(true)}>
+ Give feedback
+
+ setShowDialog(false)}
+ />
+
+ }
+ icon={null}
+ loading={false}
+ />
+ );
+}
diff --git a/src/renderer/components/pages/help/HelpPage.tsx b/src/renderer/components/pages/help/HelpPage.tsx
new file mode 100644
index 00000000..7a6a2d1f
--- /dev/null
+++ b/src/renderer/components/pages/help/HelpPage.tsx
@@ -0,0 +1,28 @@
+import { Box, makeStyles } from '@material-ui/core';
+import ContactInfoBox from './ContactInfoBox';
+import FeedbackInfoBox from './FeedbackInfoBox';
+import DonateInfoBox from './DonateInfoBox';
+import TorInfoBox from './TorInfoBox';
+import RpcControlBox from './RpcControlBox';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ display: 'flex',
+ gap: theme.spacing(2),
+ flexDirection: 'column',
+ },
+}));
+
+export default function HelpPage() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
diff --git a/src/renderer/components/pages/help/RpcControlBox.tsx b/src/renderer/components/pages/help/RpcControlBox.tsx
new file mode 100644
index 00000000..78dc1395
--- /dev/null
+++ b/src/renderer/components/pages/help/RpcControlBox.tsx
@@ -0,0 +1,74 @@
+import { Box, makeStyles } from '@material-ui/core';
+import IpcInvokeButton from 'renderer/components/IpcInvokeButton';
+import { useAppSelector } from 'store/hooks';
+import StopIcon from '@material-ui/icons/Stop';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import { RpcProcessStateType } from 'models/rpcModel';
+import InfoBox from '../../modal/swap/InfoBox';
+import CliLogsBox from '../../other/RenderedCliLog';
+import FolderOpenIcon from '@material-ui/icons/FolderOpen';
+
+const useStyles = makeStyles((theme) => ({
+ actionsOuter: {
+ display: 'flex',
+ gap: theme.spacing(1),
+ alignItems: 'center',
+ },
+}));
+
+export default function RpcControlBox() {
+ const rpcProcess = useAppSelector((state) => state.rpc.process);
+ const isRunning =
+ rpcProcess.type === RpcProcessStateType.STARTED ||
+ rpcProcess.type === RpcProcessStateType.LISTENING_FOR_CONNECTIONS;
+ const classes = useStyles();
+
+ return (
+
+
+ }
+ icon={null}
+ loading={false}
+ />
+ );
+}
diff --git a/src/renderer/components/pages/help/TorInfoBox.tsx b/src/renderer/components/pages/help/TorInfoBox.tsx
new file mode 100644
index 00000000..d787fa8e
--- /dev/null
+++ b/src/renderer/components/pages/help/TorInfoBox.tsx
@@ -0,0 +1,71 @@
+import { Box, makeStyles, Typography } from '@material-ui/core';
+import IpcInvokeButton from 'renderer/components/IpcInvokeButton';
+import { useAppSelector } from 'store/hooks';
+import StopIcon from '@material-ui/icons/Stop';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import InfoBox from '../../modal/swap/InfoBox';
+import CliLogsBox from '../../other/RenderedCliLog';
+
+const useStyles = makeStyles((theme) => ({
+ actionsOuter: {
+ display: 'flex',
+ gap: theme.spacing(1),
+ },
+}));
+
+export default function TorInfoBox() {
+ const isTorRunning = useAppSelector((state) => state.tor.processRunning);
+ const torStdOut = useAppSelector((s) => s.tor.stdOut);
+ const classes = useStyles();
+
+ return (
+
+
+ Tor is a network that allows you to anonymously connect to the
+ internet. It is a free and open network that is operated by
+ volunteers. You can start and stop Tor by clicking the buttons
+ below. If Tor is running, all traffic will be routed through it and
+ the swap provider will not be able to see your IP address.
+
+
+
+ }
+ icon={null}
+ loading={false}
+ />
+ );
+}
diff --git a/src/renderer/components/pages/history/HistoryPage.tsx b/src/renderer/components/pages/history/HistoryPage.tsx
new file mode 100644
index 00000000..7ea72a48
--- /dev/null
+++ b/src/renderer/components/pages/history/HistoryPage.tsx
@@ -0,0 +1,18 @@
+import { Typography } from '@material-ui/core';
+import { useIsSwapRunning } from 'store/hooks';
+import HistoryTable from './table/HistoryTable';
+import SwapDialog from '../../modal/swap/SwapDialog';
+import SwapTxLockAlertsBox from '../../alert/SwapTxLockAlertsBox';
+
+export default function HistoryPage() {
+ const showDialog = useIsSwapRunning();
+
+ return (
+ <>
+ History
+ {}} />
+
+ );
+}
diff --git a/src/renderer/components/pages/history/table/HistoryRow.tsx b/src/renderer/components/pages/history/table/HistoryRow.tsx
new file mode 100644
index 00000000..bbd0bf3c
--- /dev/null
+++ b/src/renderer/components/pages/history/table/HistoryRow.tsx
@@ -0,0 +1,86 @@
+import {
+ Box,
+ Collapse,
+ IconButton,
+ makeStyles,
+ TableCell,
+ TableRow,
+} from '@material-ui/core';
+import { useState } from 'react';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import {
+ getHumanReadableDbStateType,
+ getSwapBtcAmount,
+ getSwapXmrAmount,
+ GetSwapInfoResponse,
+} from '../../../../../models/rpcModel';
+import HistoryRowActions from './HistoryRowActions';
+import HistoryRowExpanded from './HistoryRowExpanded';
+import { BitcoinAmount, MoneroAmount } from '../../../other/Units';
+
+type HistoryRowProps = {
+ swap: GetSwapInfoResponse;
+};
+
+const useStyles = makeStyles((theme) => ({
+ amountTransferContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ },
+}));
+
+function AmountTransfer({
+ btcAmount,
+ xmrAmount,
+}: {
+ xmrAmount: number;
+ btcAmount: number;
+}) {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default function HistoryRow({ swap }: HistoryRowProps) {
+ const btcAmount = getSwapBtcAmount(swap);
+ const xmrAmount = getSwapXmrAmount(swap);
+
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+ <>
+
+
+ setExpanded(!expanded)}>
+ {expanded ?
+
+ {swap.swapId.substring(0, 5)}...
+
+
+ {getHumanReadableDbStateType(swap.stateName)}
+
+
+
+
+
+
+
+ {expanded &&
+
+
+
+ );
+}
diff --git a/src/renderer/components/pages/history/table/HistoryRowActions.tsx b/src/renderer/components/pages/history/table/HistoryRowActions.tsx
new file mode 100644
index 00000000..0caf8543
--- /dev/null
+++ b/src/renderer/components/pages/history/table/HistoryRowActions.tsx
@@ -0,0 +1,90 @@
+import { Tooltip } from '@material-ui/core';
+import Button, { ButtonProps } from '@material-ui/core/Button/Button';
+import DoneIcon from '@material-ui/icons/Done';
+import ErrorIcon from '@material-ui/icons/Error';
+import { green, red } from '@material-ui/core/colors';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import IpcInvokeButton from '../../../IpcInvokeButton';
+import {
+ GetSwapInfoResponse,
+ SwapStateName,
+ isSwapStateNamePossiblyCancellableSwap,
+ isSwapStateNamePossiblyRefundableSwap,
+} from '../../../../../models/rpcModel';
+
+export function SwapResumeButton({
+ swap,
+ ...props
+}: { swap: GetSwapInfoResponse } & ButtonProps) {
+ return (
+
+ Attempt manual Cancel & Refund
+
+ );
+}
+
+export default function HistoryRowActions({
+ swap,
+}: {
+ swap: GetSwapInfoResponse;
+}) {
+ if (swap.stateName === SwapStateName.XmrRedeemed) {
+ return (
+
+
+ );
+ }
+
+ if (swap.stateName === SwapStateName.BtcRefunded) {
+ return (
+
+
+ );
+ }
+
+ if (swap.stateName === SwapStateName.BtcPunished) {
+ return (
+
+
+ );
+ }
+
+ return
+
+
+
+
+ Started on
+ {startDate}
+
+
+ Swap ID
+ {swap.swapId}
+
+
+ State Name
+
+ {getHumanReadableDbStateType(swap.stateName)}
+
+
+
+ Monero Amount
+
+
+
+
+ Bitcoin Amount
+
+
+
+
+ Exchange Rate
+
+
+
+
+ Bitcoin Network Fees
+
+
+
+
+ Provider Address
+
+ {seller.addresses.join(', ')}
+
+
+
+ Bitcoin lock transaction
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/pages/history/table/HistoryTable.tsx b/src/renderer/components/pages/history/table/HistoryTable.tsx
new file mode 100644
index 00000000..163456cf
--- /dev/null
+++ b/src/renderer/components/pages/history/table/HistoryTable.tsx
@@ -0,0 +1,53 @@
+import {
+ Box,
+ makeStyles,
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+} from '@material-ui/core';
+import { sortBy } from 'lodash';
+import { parseDateString } from 'utils/parseUtils';
+import {
+ useAppSelector,
+ useSwapInfosSortedByDate,
+} from '../../../../../store/hooks';
+import HistoryRow from './HistoryRow';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ paddingTop: theme.spacing(1),
+ paddingBottom: theme.spacing(1),
+ },
+}));
+
+export default function HistoryTable() {
+ const classes = useStyles();
+ const swapSortedByDate = useSwapInfosSortedByDate();
+
+ return (
+
+
+
+
+
+ ID
+ Amount
+ State
+
+
+
+ {swapSortedByDate.map((swap) => (
+
+
+
+
+ );
+}
diff --git a/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx b/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx
new file mode 100644
index 00000000..681f0b6c
--- /dev/null
+++ b/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx
@@ -0,0 +1,45 @@
+import { ButtonProps } from '@material-ui/core/Button/Button';
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+} from '@material-ui/core';
+import { useState } from 'react';
+import { CliLog } from 'models/cliModel';
+import IpcInvokeButton from '../../../IpcInvokeButton';
+import CliLogsBox from '../../../other/RenderedCliLog';
+
+export default function SwapLogFileOpenButton({
+ swapId,
+ ...props
+}: { swapId: string } & ButtonProps) {
+ const [logs, setLogs] = useState(null);
+
+ return (
+ <>
+ {
+ setLogs(data as CliLog[]);
+ }}
+ {...props}
+ >
+ view log
+
+ {logs && (
+ setLogs(null)} fullWidth maxWidth="lg">
+ Logs of swap {swapId}
+
+
+
+ setLogs(null)}>Close
+
+
+ )}
+
+ );
+}
diff --git a/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx b/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
new file mode 100644
index 00000000..e20e056e
--- /dev/null
+++ b/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
@@ -0,0 +1,119 @@
+import { ButtonProps } from '@material-ui/core/Button/Button';
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ Link,
+} from '@material-ui/core';
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { rpcResetMoneroRecoveryKeys } from 'store/features/rpcSlice';
+import {
+ GetSwapInfoResponse,
+ isSwapMoneroRecoverable,
+} from '../../../../../models/rpcModel';
+import IpcInvokeButton from '../../../IpcInvokeButton';
+import DialogHeader from '../../../modal/DialogHeader';
+import ScrollablePaperTextBox from '../../../other/ScrollablePaperTextBox';
+
+function MoneroRecoveryKeysDialog({ swap }: { swap: GetSwapInfoResponse }) {
+ const dispatch = useAppDispatch();
+ const keys = useAppSelector((s) => s.rpc.state.moneroRecovery);
+
+ function onClose() {
+ dispatch(rpcResetMoneroRecoveryKeys());
+ }
+
+ if (keys === null || keys.swapId !== swap.swapId) {
+ return <>;
+ }
+
+ return (
+
+
+
+ You can use the keys below to manually redeem the Monero funds from
+ the multi-signature wallet.
+
+
+ This is useful if the swap daemon fails to redeem the funds itself
+
+
+ If you have come this far, there is no risk of losing funds. You
+ are the only one with access to these keys and can use them to
+ access your funds
+
+
+ View{' '}
+
+
+
+
+ {[
+ ['Primary Address', keys.keys.address],
+ ['View Key', keys.keys.view_key],
+ ['Spend Key', keys.keys.spend_key],
+ ['Restore Height', keys.keys.restore_height.toString()],
+ ].map(([title, value]) => (
+
+
+
+
+ Done
+
+
+
+ );
+}
+
+export function SwapMoneroRecoveryButton({
+ swap,
+ ...props
+}: { swap: GetSwapInfoResponse } & ButtonProps) {
+ const isRecoverable = isSwapMoneroRecoverable(swap.stateName);
+
+ if (!isRecoverable) {
+ return <>;
+ }
+
+ return (
+ <>
+
+ Display Monero Recovery Keys
+
+
+ {alerts.map((alert) => (
+ onRemoveAlert(alert.id)}
+ >
+ {alert.title}
+ {alert.body}
+
+ ))}
+
+ );
+}
diff --git a/src/renderer/components/pages/swap/SwapPage.tsx b/src/renderer/components/pages/swap/SwapPage.tsx
new file mode 100644
index 00000000..f13171c6
--- /dev/null
+++ b/src/renderer/components/pages/swap/SwapPage.tsx
@@ -0,0 +1,25 @@
+import { Box, makeStyles } from '@material-ui/core';
+import SwapWidget from './SwapWidget';
+import ApiAlertsBox from './ApiAlertsBox';
+
+const useStyles = makeStyles((theme) => ({
+ outer: {
+ display: 'flex',
+ width: '100%',
+ flexDirection: 'column',
+ alignItems: 'center',
+ paddingBottom: theme.spacing(1),
+ gap: theme.spacing(1),
+ },
+}));
+
+export default function SwapPage() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
diff --git a/src/renderer/components/pages/swap/SwapWidget.tsx b/src/renderer/components/pages/swap/SwapWidget.tsx
new file mode 100644
index 00000000..75840215
--- /dev/null
+++ b/src/renderer/components/pages/swap/SwapWidget.tsx
@@ -0,0 +1,274 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import {
+ makeStyles,
+ Box,
+ Paper,
+ Typography,
+ TextField,
+ LinearProgress,
+ Fab,
+} from '@material-ui/core';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
+import { Alert } from '@material-ui/lab';
+import { satsToBtc } from 'utils/conversionUtils';
+import { useAppSelector } from 'store/hooks';
+import { ExtendedProviderStatus } from 'models/apiModel';
+import { isSwapState } from 'models/storeModel';
+import SwapDialog from '../../modal/swap/SwapDialog';
+import ProviderSelect from '../../modal/provider/ProviderSelect';
+import {
+ ListSellersDialogOpenButton,
+ ProviderSubmitDialogOpenButton,
+} from '../../modal/provider/ProviderListDialog';
+
+// After RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN failed reconnection attempts we can assume the public registry is down
+const RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN = 1;
+
+function isRegistryDown(reconnectionAttempts: number): boolean {
+ return reconnectionAttempts > RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN;
+}
+
+const useStyles = makeStyles((theme) => ({
+ inner: {
+ width: 'min(480px, 100%)',
+ minHeight: '150px',
+ display: 'grid',
+ padding: theme.spacing(1),
+ gridGap: theme.spacing(1),
+ },
+ header: {
+ padding: 0,
+ },
+ headerText: {
+ padding: theme.spacing(1),
+ },
+ providerInfo: {
+ padding: theme.spacing(1),
+ },
+ swapIconOuter: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ swapIcon: {
+ marginRight: theme.spacing(1),
+ },
+ noProvidersAlertOuter: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(1),
+ },
+ noProvidersAlertButtonsOuter: {
+ display: 'flex',
+ gap: theme.spacing(1),
+ },
+}));
+
+function Title() {
+ const classes = useStyles();
+
+ return (
+
+
+ Swap
+
+
+ );
+}
+
+function HasProviderSwapWidget({
+ selectedProvider,
+}: {
+ selectedProvider: ExtendedProviderStatus;
+}) {
+ const classes = useStyles();
+
+ const forceShowDialog = useAppSelector((state) =>
+ isSwapState(state.swap.state),
+ );
+ const [showDialog, setShowDialog] = useState(false);
+ const [btcFieldValue, setBtcFieldValue] = useState(
+ satsToBtc(selectedProvider.minSwapAmount),
+ );
+ const [xmrFieldValue, setXmrFieldValue] = useState(1);
+
+ function onBtcAmountChange(event: ChangeEvent) {
+ setBtcFieldValue(event.target.value);
+ }
+
+ function updateXmrValue() {
+ const parsedBtcAmount = Number(btcFieldValue);
+ if (Number.isNaN(parsedBtcAmount)) {
+ setXmrFieldValue(0);
+ } else {
+ const convertedXmrAmount =
+ parsedBtcAmount / satsToBtc(selectedProvider.price);
+ setXmrFieldValue(convertedXmrAmount);
+ }
+ }
+
+ function getBtcFieldError(): string | null {
+ const parsedBtcAmount = Number(btcFieldValue);
+ if (Number.isNaN(parsedBtcAmount)) {
+ return 'This is not a valid number';
+ }
+ if (parsedBtcAmount < satsToBtc(selectedProvider.minSwapAmount)) {
+ return `The minimum swap amount is ${satsToBtc(
+ selectedProvider.minSwapAmount,
+ )} BTC. Switch to a different provider if you want to swap less.`;
+ }
+ if (parsedBtcAmount > satsToBtc(selectedProvider.maxSwapAmount)) {
+ return `The maximum swap amount is ${satsToBtc(
+ selectedProvider.maxSwapAmount,
+ )} BTC. Switch to a different provider if you want to swap more.`;
+ }
+ return null;
+ }
+
+ function handleGuideDialogOpen() {
+ setShowDialog(true);
+ }
+
+ useEffect(updateXmrValue, [btcFieldValue, selectedProvider]);
+
+ return (
+ // 'elevation' prop can't be passed down (type def issue)
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+
+ BTC,
+ }}
+ />
+
+
+ XMR,
+ }}
+ />
+
+
+ setShowDialog(false)}
+ />
+
+ );
+}
+
+function HasNoProvidersSwapWidget() {
+ const forceShowDialog = useAppSelector((state) =>
+ isSwapState(state.swap.state),
+ );
+ const isPublicRegistryDown = useAppSelector((state) =>
+ isRegistryDown(
+ state.providers.registry.failedReconnectAttemptsSinceLastSuccess,
+ ),
+ );
+ const classes = useStyles();
+
+ const alertBox = isPublicRegistryDown ? (
+
+
+
+ Currently, the public registry of providers seems to be unreachable.
+ Here's what you can do:
+
+
+ Try discovering a provider by connecting to a rendezvous point
+
+
+ Try again later when the public registry may be reachable again
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ Currently, there are no providers (trading partners) available in the
+ official registry. Here's what you can do:
+
+
+ Try discovering a provider by connecting to a rendezvous point
+
+ Add a new provider to the public registry
+ Try again later when more providers may be available
+
+
+
+
+
+
+ );
+
+ return (
+
+ {alertBox}
+ {}} />
+
+ );
+}
+
+function ProviderLoadingSwapWidget() {
+ const classes = useStyles();
+
+ return (
+ // 'elevation' prop can't be passed down (type def issue)
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+
+
+ );
+}
+
+export default function SwapWidget() {
+ const selectedProvider = useAppSelector(
+ (state) => state.providers.selectedProvider,
+ );
+ // If we fail more than RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN reconnect attempts, we'll show the "no providers" widget. We can assume the public registry is down.
+ const providerLoading = useAppSelector(
+ (state) =>
+ state.providers.registry.providers === null &&
+ !isRegistryDown(
+ state.providers.registry.failedReconnectAttemptsSinceLastSuccess,
+ ),
+ );
+
+ if (providerLoading) {
+ return
+ Wallet
+
+ You do not have to deposit money before starting a swap. Instead, you
+ will be greeted with a deposit address after you initiate one.
+
+
+ If funds are left in your wallet after a swap, you can withdraw them to
+ your wallet. If you decide to leave them inside the internal wallet, the
+ funds will automatically be used when starting a new swap.
+
+
+ );
+}
diff --git a/src/renderer/components/pages/wallet/WalletRefreshButton.tsx b/src/renderer/components/pages/wallet/WalletRefreshButton.tsx
new file mode 100644
index 00000000..8bc57772
--- /dev/null
+++ b/src/renderer/components/pages/wallet/WalletRefreshButton.tsx
@@ -0,0 +1,16 @@
+import { CircularProgress } from '@material-ui/core';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import IpcInvokeButton from '../../IpcInvokeButton';
+
+export default function WalletRefreshButton() {
+ return (
+
+ Wallet Balance
+
+
+ }
+ icon={ setShowDialog(false)} />
+
+ );
+}
diff --git a/src/renderer/components/snackbar/GlobalSnackbarProvider.tsx b/src/renderer/components/snackbar/GlobalSnackbarProvider.tsx
new file mode 100644
index 00000000..3a09bd63
--- /dev/null
+++ b/src/renderer/components/snackbar/GlobalSnackbarProvider.tsx
@@ -0,0 +1,46 @@
+import {
+ MaterialDesignContent,
+ SnackbarKey,
+ SnackbarProvider,
+ useSnackbar,
+} from 'notistack';
+import { IconButton, styled } from '@material-ui/core';
+import { Close } from '@material-ui/icons';
+import { ReactNode } from 'react';
+
+const StyledMaterialDesignContent = styled(MaterialDesignContent)(() => ({
+ '&.notistack-MuiContent': {
+ maxWidth: '50vw',
+ },
+}));
+
+function CloseSnackbarButton({ snackbarId }: { snackbarId: SnackbarKey }) {
+ const { closeSnackbar } = useSnackbar();
+
+ return (
+ closeSnackbar(snackbarId)}>
+
+ );
+}
+
+export default function GlobalSnackbarManager({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ return (
+
+ );
+}
diff --git a/src/renderer/index.ejs b/src/renderer/index.ejs
new file mode 100644
index 00000000..d19d4b7f
--- /dev/null
+++ b/src/renderer/index.ejs
@@ -0,0 +1,23 @@
+
+
+
+
+
+
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
new file mode 100644
index 00000000..61846800
--- /dev/null
+++ b/src/renderer/index.tsx
@@ -0,0 +1,57 @@
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { store } from './store/storeRenderer';
+import { setRegistryProviders } from 'store/features/providersSlice';
+import { setAlerts } from 'store/features/alertsSlice';
+import { setXmrPrice, setBtcPrice } from 'store/features/ratesSlice';
+import {
+ fetchAlertsViaHttp,
+ fetchBtcPrice,
+ fetchProvidersViaHttp,
+ fetchXmrPrice,
+} from './api';
+import logger from '../utils/logger';
+import App from './components/App';
+
+render(
+
+ ,
+ document.getElementById('root'),
+);
+
+async function fetchInitialData() {
+ try {
+ const providerList = await fetchProvidersViaHttp();
+ store.dispatch(setRegistryProviders(providerList));
+
+ logger.info(
+ { providerList },
+ 'Fetched providers via UnstoppableSwap HTTP API',
+ );
+ } catch (e) {
+ logger.error(e, 'Failed to fetch providers via UnstoppableSwap HTTP API');
+ }
+
+ try {
+ const alerts = await fetchAlertsViaHttp();
+ store.dispatch(setAlerts(alerts));
+ logger.info({ alerts }, 'Fetched alerts via UnstoppableSwap HTTP API');
+ } catch (e) {
+ logger.error(e, 'Failed to fetch alerts via UnstoppableSwap HTTP API');
+ }
+
+ try {
+ const xmrPrice = await fetchXmrPrice();
+ store.dispatch(setXmrPrice(xmrPrice));
+ logger.info({ xmrPrice }, 'Fetched XMR price');
+
+ const btcPrice = await fetchBtcPrice();
+ store.dispatch(setBtcPrice(btcPrice));
+ logger.info({ btcPrice }, 'Fetched BTC price');
+ } catch (e) {
+ logger.error(e, 'Error retrieving fiat prices');
+ }
+}
+
+fetchInitialData();
\ No newline at end of file
diff --git a/src/renderer/store/storeRenderer.ts b/src/renderer/store/storeRenderer.ts
new file mode 100644
index 00000000..4656033a
--- /dev/null
+++ b/src/renderer/store/storeRenderer.ts
@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { reducers } from 'store/combinedReducer';
+
+export const store = configureStore({
+ reducer: reducers,
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType;
diff --git a/src/store/combinedReducer.ts b/src/store/combinedReducer.ts
new file mode 100644
index 00000000..c2c18b82
--- /dev/null
+++ b/src/store/combinedReducer.ts
@@ -0,0 +1,15 @@
+import swapReducer from './features/swapSlice';
+import providersSlice from './features/providersSlice';
+import torSlice from './features/torSlice';
+import rpcSlice from './features/rpcSlice';
+import alertsSlice from './features/alertsSlice';
+import ratesSlice from './features/ratesSlice';
+
+export const reducers = {
+ swap: swapReducer,
+ providers: providersSlice,
+ tor: torSlice,
+ rpc: rpcSlice,
+ alerts: alertsSlice,
+ rates: ratesSlice,
+};
diff --git a/src/store/config.ts b/src/store/config.ts
new file mode 100644
index 00000000..2c475a5e
--- /dev/null
+++ b/src/store/config.ts
@@ -0,0 +1,18 @@
+import { ExtendedProviderStatus } from 'models/apiModel';
+
+export const isTestnet = () =>
+ false
+
+export const isExternalRpc = () =>
+ true
+
+export const isDevelopment =
+ true
+
+export function getStubTestnetProvider(): ExtendedProviderStatus | null {
+ return null;
+}
+
+export const getPlatform = () => {
+ return 'mac';
+};
diff --git a/src/store/features/alertsSlice.ts b/src/store/features/alertsSlice.ts
new file mode 100644
index 00000000..4a1ce04a
--- /dev/null
+++ b/src/store/features/alertsSlice.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Alert } from 'models/apiModel';
+
+export interface AlertsSlice {
+ alerts: Alert[];
+}
+
+const initialState: AlertsSlice = {
+ alerts: [],
+};
+
+const alertsSlice = createSlice({
+ name: 'alerts',
+ initialState,
+ reducers: {
+ setAlerts(slice, action: PayloadAction) {
+ slice.alerts = action.payload;
+ },
+ removeAlert(slice, action: PayloadAction) {
+ slice.alerts = slice.alerts.filter(
+ (alert) => alert.id !== action.payload,
+ );
+ },
+ },
+});
+
+export const { setAlerts, removeAlert } = alertsSlice.actions;
+export default alertsSlice.reducer;
diff --git a/src/store/features/providersSlice.ts b/src/store/features/providersSlice.ts
new file mode 100644
index 00000000..d4af559d
--- /dev/null
+++ b/src/store/features/providersSlice.ts
@@ -0,0 +1,117 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ExtendedProviderStatus, ProviderStatus } from 'models/apiModel';
+import { sortProviderList } from 'utils/sortUtils';
+import { isProviderCompatible } from 'utils/multiAddrUtils';
+import { getStubTestnetProvider } from 'store/config';
+
+const stubTestnetProvider = getStubTestnetProvider();
+
+export interface ProvidersSlice {
+ rendezvous: {
+ providers: (ExtendedProviderStatus | ProviderStatus)[];
+ };
+ registry: {
+ providers: ExtendedProviderStatus[] | null;
+ failedReconnectAttemptsSinceLastSuccess: number;
+ };
+ selectedProvider: ExtendedProviderStatus | null;
+}
+
+const initialState: ProvidersSlice = {
+ rendezvous: {
+ providers: [],
+ },
+ registry: {
+ providers: stubTestnetProvider ? [stubTestnetProvider] : null,
+ failedReconnectAttemptsSinceLastSuccess: 0,
+ },
+ selectedProvider: null,
+};
+
+function selectNewSelectedProvider(
+ slice: ProvidersSlice,
+ peerId?: string,
+): ProviderStatus {
+ const selectedPeerId = peerId || slice.selectedProvider?.peerId;
+
+ return (
+ slice.registry.providers?.find((prov) => prov.peerId === selectedPeerId) ||
+ slice.rendezvous.providers.find((prov) => prov.peerId === selectedPeerId) ||
+ slice.registry.providers?.at(0) ||
+ slice.rendezvous.providers[0] ||
+ null
+ );
+}
+
+export const providersSlice = createSlice({
+ name: 'providers',
+ initialState,
+ reducers: {
+ discoveredProvidersByRendezvous(
+ slice,
+ action: PayloadAction,
+ ) {
+ action.payload.forEach((discoveredProvider) => {
+ if (
+ !slice.registry.providers?.some(
+ (prov) =>
+ prov.peerId === discoveredProvider.peerId &&
+ prov.multiAddr === discoveredProvider.multiAddr,
+ )
+ ) {
+ const indexOfExistingProvider = slice.rendezvous.providers.findIndex(
+ (prov) =>
+ prov.peerId === discoveredProvider.peerId &&
+ prov.multiAddr === discoveredProvider.multiAddr,
+ );
+
+ // Avoid duplicates, replace instead
+ if (indexOfExistingProvider !== -1) {
+ slice.rendezvous.providers[indexOfExistingProvider] =
+ discoveredProvider;
+ } else {
+ slice.rendezvous.providers.push(discoveredProvider);
+ }
+ }
+ });
+
+ slice.rendezvous.providers = sortProviderList(slice.rendezvous.providers);
+ },
+ setRegistryProviders(
+ slice,
+ action: PayloadAction,
+ ) {
+ if (stubTestnetProvider) {
+ action.payload.push(stubTestnetProvider);
+ }
+
+ slice.registry.providers = sortProviderList(action.payload).filter(
+ isProviderCompatible,
+ );
+ slice.selectedProvider = selectNewSelectedProvider(slice);
+ },
+ increaseFailedRegistryReconnectAttemptsSinceLastSuccess(slice) {
+ slice.registry.failedReconnectAttemptsSinceLastSuccess += 1;
+ },
+ setSelectedProvider(
+ slice,
+ action: PayloadAction<{
+ peerId: string;
+ }>,
+ ) {
+ slice.selectedProvider = selectNewSelectedProvider(
+ slice,
+ action.payload.peerId,
+ );
+ },
+ },
+});
+
+export const {
+ discoveredProvidersByRendezvous,
+ setRegistryProviders,
+ increaseFailedRegistryReconnectAttemptsSinceLastSuccess,
+ setSelectedProvider,
+} = providersSlice.actions;
+
+export default providersSlice.reducer;
diff --git a/src/store/features/ratesSlice.ts b/src/store/features/ratesSlice.ts
new file mode 100644
index 00000000..67c8d11e
--- /dev/null
+++ b/src/store/features/ratesSlice.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface RatesState {
+ btcPrice: number | null;
+ xmrPrice: number | null;
+}
+
+const initialState: RatesState = {
+ btcPrice: null,
+ xmrPrice: null,
+};
+
+const ratesSlice = createSlice({
+ name: 'rates',
+ initialState,
+ reducers: {
+ setBtcPrice: (state, action: PayloadAction) => {
+ state.btcPrice = action.payload;
+ },
+ setXmrPrice: (state, action: PayloadAction) => {
+ state.xmrPrice = action.payload;
+ },
+ },
+});
+
+export const { setBtcPrice, setXmrPrice } = ratesSlice.actions;
+
+export default ratesSlice.reducer;
diff --git a/src/store/features/rpcSlice.ts b/src/store/features/rpcSlice.ts
new file mode 100644
index 00000000..19f5865d
--- /dev/null
+++ b/src/store/features/rpcSlice.ts
@@ -0,0 +1,218 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ExtendedProviderStatus, ProviderStatus } from 'models/apiModel';
+import { MoneroWalletRpcUpdateState } from 'models/storeModel';
+import {
+ GetSwapInfoResponse,
+ MoneroRecoveryResponse,
+ RpcProcessStateType,
+} from '../../models/rpcModel';
+import {
+ CliLog,
+ isCliLog,
+ isCliLogDownloadingMoneroWalletRpc,
+ isCliLogFailedToSyncMoneroWallet,
+ isCliLogFinishedSyncingMoneroWallet,
+ isCliLogStartedRpcServer,
+ isCliLogStartedSyncingMoneroWallet,
+} from '../../models/cliModel';
+import { getLogsAndStringsFromRawFileString } from 'utils/parseUtils';
+
+type Process =
+ | {
+ type: RpcProcessStateType.STARTED;
+ logs: (CliLog | string)[];
+ }
+ | {
+ type: RpcProcessStateType.LISTENING_FOR_CONNECTIONS;
+ logs: (CliLog | string)[];
+ address: string;
+ }
+ | {
+ type: RpcProcessStateType.EXITED;
+ logs: (CliLog | string)[];
+ exitCode: number | null;
+ }
+ | {
+ type: RpcProcessStateType.NOT_STARTED;
+ };
+
+interface State {
+ balance: number | null;
+ withdrawTxId: string | null;
+ rendezvous_discovered_sellers: (ExtendedProviderStatus | ProviderStatus)[];
+ swapInfos: {
+ [swapId: string]: GetSwapInfoResponse;
+ };
+ moneroRecovery: {
+ swapId: string;
+ keys: MoneroRecoveryResponse;
+ } | null;
+ moneroWallet: {
+ isSyncing: boolean;
+ };
+ moneroWalletRpc: {
+ updateState: false | MoneroWalletRpcUpdateState;
+ };
+}
+
+export interface RPCSlice {
+ process: Process;
+ state: State;
+ busyEndpoints: string[];
+}
+
+const initialState: RPCSlice = {
+ process: {
+ type: RpcProcessStateType.NOT_STARTED,
+ },
+ state: {
+ balance: null,
+ withdrawTxId: null,
+ rendezvous_discovered_sellers: [],
+ swapInfos: {},
+ moneroRecovery: null,
+ moneroWallet: {
+ isSyncing: false,
+ },
+ moneroWalletRpc: {
+ updateState: false,
+ },
+ },
+ busyEndpoints: [],
+};
+
+export const rpcSlice = createSlice({
+ name: 'rpc',
+ initialState,
+ reducers: {
+ rpcAddLogs(slice, action: PayloadAction<(CliLog | string)[]>) {
+ if (
+ slice.process.type === RpcProcessStateType.STARTED ||
+ slice.process.type === RpcProcessStateType.LISTENING_FOR_CONNECTIONS ||
+ slice.process.type === RpcProcessStateType.EXITED
+ ) {
+ const logs = action.payload;
+ slice.process.logs.push(...logs);
+
+ logs.filter(isCliLog).forEach((log) => {
+ if (
+ isCliLogStartedRpcServer(log) &&
+ slice.process.type === RpcProcessStateType.STARTED
+ ) {
+ slice.process = {
+ type: RpcProcessStateType.LISTENING_FOR_CONNECTIONS,
+ logs: slice.process.logs,
+ address: log.fields.addr,
+ };
+ } else if (isCliLogDownloadingMoneroWalletRpc(log)) {
+ slice.state.moneroWalletRpc.updateState = {
+ progress: log.fields.progress,
+ downloadUrl: log.fields.download_url,
+ };
+
+ if (log.fields.progress === '100%') {
+ slice.state.moneroWalletRpc.updateState = false;
+ }
+ } else if (isCliLogStartedSyncingMoneroWallet(log)) {
+ slice.state.moneroWallet.isSyncing = true;
+ } else if (isCliLogFinishedSyncingMoneroWallet(log)) {
+ slice.state.moneroWallet.isSyncing = false;
+ } else if (isCliLogFailedToSyncMoneroWallet(log)) {
+ slice.state.moneroWallet.isSyncing = false;
+ }
+ });
+ }
+ },
+ rpcInitiate(slice) {
+ slice.process = {
+ type: RpcProcessStateType.STARTED,
+ logs: [],
+ };
+ },
+ rpcProcessExited(
+ slice,
+ action: PayloadAction<{
+ exitCode: number | null;
+ exitSignal: NodeJS.Signals | null;
+ }>,
+ ) {
+ if (
+ slice.process.type === RpcProcessStateType.STARTED ||
+ slice.process.type === RpcProcessStateType.LISTENING_FOR_CONNECTIONS
+ ) {
+ slice.process = {
+ type: RpcProcessStateType.EXITED,
+ logs: slice.process.logs,
+ exitCode: action.payload.exitCode,
+ };
+ slice.state.moneroWalletRpc = {
+ updateState: false,
+ };
+ slice.state.moneroWallet = {
+ isSyncing: false,
+ };
+ }
+ },
+ rpcSetBalance(slice, action: PayloadAction) {
+ slice.state.balance = action.payload;
+ },
+ rpcSetWithdrawTxId(slice, action: PayloadAction) {
+ slice.state.withdrawTxId = action.payload;
+ },
+ rpcSetRendezvousDiscoveredProviders(
+ slice,
+ action: PayloadAction<(ExtendedProviderStatus | ProviderStatus)[]>,
+ ) {
+ slice.state.rendezvous_discovered_sellers = action.payload;
+ },
+ rpcResetWithdrawTxId(slice) {
+ slice.state.withdrawTxId = null;
+ },
+ rpcSetSwapInfo(slice, action: PayloadAction) {
+ slice.state.swapInfos[action.payload.swapId] = action.payload;
+ },
+ rpcSetEndpointBusy(slice, action: PayloadAction) {
+ if (!slice.busyEndpoints.includes(action.payload)) {
+ slice.busyEndpoints.push(action.payload);
+ }
+ },
+ rpcSetEndpointFree(slice, action: PayloadAction) {
+ const index = slice.busyEndpoints.indexOf(action.payload);
+ if (index >= 0) {
+ slice.busyEndpoints.splice(index);
+ }
+ },
+ rpcSetMoneroRecoveryKeys(
+ slice,
+ action: PayloadAction<[string, MoneroRecoveryResponse]>,
+ ) {
+ const swapId = action.payload[0];
+ const keys = action.payload[1];
+
+ slice.state.moneroRecovery = {
+ swapId,
+ keys,
+ };
+ },
+ rpcResetMoneroRecoveryKeys(slice) {
+ slice.state.moneroRecovery = null;
+ },
+ },
+});
+
+export const {
+ rpcProcessExited,
+ rpcAddLogs,
+ rpcInitiate,
+ rpcSetBalance,
+ rpcSetWithdrawTxId,
+ rpcResetWithdrawTxId,
+ rpcSetEndpointBusy,
+ rpcSetEndpointFree,
+ rpcSetRendezvousDiscoveredProviders,
+ rpcSetSwapInfo,
+ rpcSetMoneroRecoveryKeys,
+ rpcResetMoneroRecoveryKeys,
+} = rpcSlice.actions;
+
+export default rpcSlice.reducer;
diff --git a/src/store/features/swapSlice.ts b/src/store/features/swapSlice.ts
new file mode 100644
index 00000000..c1cd8eab
--- /dev/null
+++ b/src/store/features/swapSlice.ts
@@ -0,0 +1,323 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { extractAmountFromUnitString } from 'utils/parseUtils';
+import { Provider } from 'models/apiModel';
+import {
+ isSwapStateBtcLockInMempool,
+ isSwapStateProcessExited,
+ isSwapStateXmrLockInMempool,
+ SwapSlice,
+ SwapStateAttemptingCooperativeRedeeem,
+ SwapStateBtcCancelled,
+ SwapStateBtcLockInMempool,
+ SwapStateBtcPunished,
+ SwapStateBtcRedemeed,
+ SwapStateBtcRefunded,
+ SwapStateInitiated,
+ SwapStateProcessExited,
+ SwapStateReceivedQuote,
+ SwapStateStarted,
+ SwapStateType,
+ SwapStateWaitingForBtcDeposit,
+ SwapStateXmrLocked,
+ SwapStateXmrLockInMempool,
+ SwapStateXmrRedeemInMempool,
+} from '../../models/storeModel';
+import {
+ isCliLogAliceLockedXmr,
+ isCliLogBtcTxStatusChanged,
+ isCliLogPublishedBtcTx,
+ isCliLogReceivedQuote,
+ isCliLogReceivedXmrLockTxConfirmation,
+ isCliLogRedeemedXmr,
+ isCliLogStartedSwap,
+ isCliLogWaitingForBtcDeposit,
+ CliLog,
+ isCliLogAdvancingState,
+ SwapSpawnType,
+ isCliLogBtcTxFound,
+ isCliLogReleasingSwapLockLog,
+ isYouHaveBeenPunishedCliLog,
+ isCliLogAcquiringSwapLockLog,
+ isCliLogApiCallError,
+ isCliLogDeterminedSwapAmount,
+ isCliLogAttemptingToCooperativelyRedeemXmr,
+} from '../../models/cliModel';
+import logger from '../../utils/logger';
+
+const initialState: SwapSlice = {
+ state: null,
+ processRunning: false,
+ swapId: null,
+ logs: [],
+ provider: null,
+ spawnType: null,
+};
+
+export const swapSlice = createSlice({
+ name: 'swap',
+ initialState,
+ reducers: {
+ swapAddLog(
+ slice,
+ action: PayloadAction<{ logs: CliLog[]; isFromRestore: boolean }>,
+ ) {
+ const { logs } = action.payload;
+ slice.logs.push(...logs);
+
+ logs.forEach((log) => {
+ if (
+ isCliLogAcquiringSwapLockLog(log) &&
+ !action.payload.isFromRestore
+ ) {
+ slice.processRunning = true;
+ slice.swapId = log.fields.swap_id;
+ // TODO: Maybe we can infer more info here (state) from the log
+ } else if (isCliLogReceivedQuote(log)) {
+ const price = extractAmountFromUnitString(log.fields.price);
+ const minimumSwapAmount = extractAmountFromUnitString(
+ log.fields.minimum_amount,
+ );
+ const maximumSwapAmount = extractAmountFromUnitString(
+ log.fields.maximum_amount,
+ );
+
+ if (
+ price != null &&
+ minimumSwapAmount != null &&
+ maximumSwapAmount != null
+ ) {
+ const nextState: SwapStateReceivedQuote = {
+ type: SwapStateType.RECEIVED_QUOTE,
+ price,
+ minimumSwapAmount,
+ maximumSwapAmount,
+ };
+
+ slice.state = nextState;
+ }
+ } else if (isCliLogWaitingForBtcDeposit(log)) {
+ const maxGiveable = extractAmountFromUnitString(
+ log.fields.max_giveable,
+ );
+ const minDeposit = extractAmountFromUnitString(
+ log.fields.min_deposit_until_swap_will_start,
+ );
+ const maxDeposit = extractAmountFromUnitString(
+ log.fields.max_deposit_until_maximum_amount_is_reached,
+ );
+ const minimumAmount = extractAmountFromUnitString(
+ log.fields.minimum_amount,
+ );
+ const maximumAmount = extractAmountFromUnitString(
+ log.fields.maximum_amount,
+ );
+ const minBitcoinLockTxFee = extractAmountFromUnitString(
+ log.fields.min_bitcoin_lock_tx_fee,
+ );
+ const price = extractAmountFromUnitString(log.fields.price);
+
+ const depositAddress = log.fields.deposit_address;
+
+ if (
+ maxGiveable != null &&
+ minimumAmount != null &&
+ maximumAmount != null &&
+ minDeposit != null &&
+ maxDeposit != null &&
+ minBitcoinLockTxFee != null &&
+ price != null
+ ) {
+ const nextState: SwapStateWaitingForBtcDeposit = {
+ type: SwapStateType.WAITING_FOR_BTC_DEPOSIT,
+ depositAddress,
+ maxGiveable,
+ minimumAmount,
+ maximumAmount,
+ minDeposit,
+ maxDeposit,
+ price,
+ minBitcoinLockTxFee,
+ };
+
+ slice.state = nextState;
+ }
+ } else if (isCliLogDeterminedSwapAmount(log)) {
+ const amount = extractAmountFromUnitString(log.fields.amount);
+ const fees = extractAmountFromUnitString(log.fields.fees);
+
+ const nextState: SwapStateStarted = {
+ type: SwapStateType.STARTED,
+ txLockDetails:
+ amount != null && fees != null ? { amount, fees } : null,
+ };
+
+ slice.state = nextState;
+ } else if (isCliLogStartedSwap(log)) {
+ if (slice.state?.type !== SwapStateType.STARTED) {
+ const nextState: SwapStateStarted = {
+ type: SwapStateType.STARTED,
+ txLockDetails: null,
+ };
+
+ slice.state = nextState;
+ }
+
+ slice.swapId = log.fields.swap_id;
+ } else if (isCliLogPublishedBtcTx(log)) {
+ if (log.fields.kind === 'lock') {
+ const nextState: SwapStateBtcLockInMempool = {
+ type: SwapStateType.BTC_LOCK_TX_IN_MEMPOOL,
+ bobBtcLockTxId: log.fields.txid,
+ bobBtcLockTxConfirmations: 0,
+ };
+
+ slice.state = nextState;
+ } else if (log.fields.kind === 'cancel') {
+ const nextState: SwapStateBtcCancelled = {
+ type: SwapStateType.BTC_CANCELLED,
+ btcCancelTxId: log.fields.txid,
+ };
+
+ slice.state = nextState;
+ } else if (log.fields.kind === 'refund') {
+ const nextState: SwapStateBtcRefunded = {
+ type: SwapStateType.BTC_REFUNDED,
+ bobBtcRefundTxId: log.fields.txid,
+ };
+
+ slice.state = nextState;
+ }
+ } else if (isCliLogBtcTxStatusChanged(log) || isCliLogBtcTxFound(log)) {
+ if (isSwapStateBtcLockInMempool(slice.state)) {
+ if (slice.state.bobBtcLockTxId === log.fields.txid) {
+ const newStatusText = isCliLogBtcTxStatusChanged(log)
+ ? log.fields.new_status
+ : log.fields.status;
+
+ if (newStatusText.startsWith('confirmed with')) {
+ const confirmations = Number.parseInt(
+ newStatusText.split(' ')[2],
+ 10,
+ );
+
+ slice.state.bobBtcLockTxConfirmations = confirmations;
+ }
+ }
+ }
+ } else if (isCliLogAliceLockedXmr(log)) {
+ const nextState: SwapStateXmrLockInMempool = {
+ type: SwapStateType.XMR_LOCK_TX_IN_MEMPOOL,
+ aliceXmrLockTxId: log.fields.txid,
+ aliceXmrLockTxConfirmations: 0,
+ };
+
+ slice.state = nextState;
+ } else if (isCliLogReceivedXmrLockTxConfirmation(log)) {
+ if (isSwapStateXmrLockInMempool(slice.state)) {
+ if (slice.state.aliceXmrLockTxId === log.fields.txid) {
+ slice.state.aliceXmrLockTxConfirmations = Number.parseInt(
+ log.fields.seen_confirmations,
+ 10,
+ );
+ }
+ }
+ } else if (isCliLogAdvancingState(log)) {
+ if (log.fields.state === 'xmr is locked') {
+ const nextState: SwapStateXmrLocked = {
+ type: SwapStateType.XMR_LOCKED,
+ };
+
+ slice.state = nextState;
+ } else if (log.fields.state === 'btc is redeemed') {
+ const nextState: SwapStateBtcRedemeed = {
+ type: SwapStateType.BTC_REDEEMED,
+ };
+
+ slice.state = nextState;
+ }
+ } else if (isCliLogRedeemedXmr(log)) {
+ const nextState: SwapStateXmrRedeemInMempool = {
+ type: SwapStateType.XMR_REDEEM_IN_MEMPOOL,
+ bobXmrRedeemTxId: log.fields.txid,
+ bobXmrRedeemAddress: log.fields.monero_receive_address,
+ };
+
+ slice.state = nextState;
+ } else if (isYouHaveBeenPunishedCliLog(log)) {
+ const nextState: SwapStateBtcPunished = {
+ type: SwapStateType.BTC_PUNISHED,
+ };
+
+ slice.state = nextState;
+ } else if (isCliLogAttemptingToCooperativelyRedeemXmr(log)) {
+ const nextState: SwapStateAttemptingCooperativeRedeeem = {
+ type: SwapStateType.ATTEMPTING_COOPERATIVE_REDEEM,
+ };
+
+ slice.state = nextState;
+ }
+ else if (
+ isCliLogReleasingSwapLockLog(log) &&
+ !action.payload.isFromRestore
+ ) {
+ const nextState: SwapStateProcessExited = {
+ type: SwapStateType.PROCESS_EXITED,
+ prevState: slice.state,
+ rpcError: null,
+ };
+
+ slice.state = nextState;
+ slice.processRunning = false;
+ } else if (isCliLogApiCallError(log) && !action.payload.isFromRestore) {
+ if (isSwapStateProcessExited(slice.state)) {
+ slice.state.rpcError = log.fields.err;
+ }
+ } else {
+ logger.debug({ log }, `Swap log was not reduced`);
+ }
+ });
+ },
+ swapReset() {
+ return initialState;
+ },
+ swapInitiate(
+ swap,
+ action: PayloadAction<{
+ provider: Provider | null;
+ spawnType: SwapSpawnType;
+ swapId: string | null;
+ }>,
+ ) {
+ const nextState: SwapStateInitiated = {
+ type: SwapStateType.INITIATED,
+ };
+
+ swap.processRunning = true;
+ swap.state = nextState;
+ swap.logs = [];
+ swap.provider = action.payload.provider;
+ swap.spawnType = action.payload.spawnType;
+ swap.swapId = action.payload.swapId;
+ },
+ swapProcessExited(swap, action: PayloadAction) {
+ if (!swap.processRunning) {
+ logger.warn(`swapProcessExited called on a swap that is not running`);
+ return;
+ }
+
+ const nextState: SwapStateProcessExited = {
+ type: SwapStateType.PROCESS_EXITED,
+ prevState: swap.state,
+ rpcError: action.payload,
+ };
+
+ swap.state = nextState;
+ swap.processRunning = false;
+ },
+ },
+});
+
+export const { swapInitiate, swapProcessExited, swapReset, swapAddLog } =
+ swapSlice.actions;
+
+export default swapSlice.reducer;
diff --git a/src/store/features/torSlice.ts b/src/store/features/torSlice.ts
new file mode 100644
index 00000000..74b535b3
--- /dev/null
+++ b/src/store/features/torSlice.ts
@@ -0,0 +1,74 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface TorSlice {
+ exitCode: number | null;
+ processRunning: boolean;
+ stdOut: string;
+ proxyStatus:
+ | false
+ | {
+ proxyHostname: string;
+ proxyPort: number;
+ bootstrapped: boolean;
+ };
+}
+
+const initialState: TorSlice = {
+ processRunning: false,
+ exitCode: null,
+ stdOut: '',
+ proxyStatus: false,
+};
+
+const socksListenerRegex =
+ /Opened Socks listener connection.*on (\d+\.\d+\.\d+\.\d+):(\d+)/;
+const bootstrapDoneRegex = /Bootstrapped 100% \(done\)/;
+
+export const torSlice = createSlice({
+ name: 'tor',
+ initialState,
+ reducers: {
+ torAppendStdOut(slice, action: PayloadAction) {
+ slice.stdOut += action.payload;
+
+ const logs = slice.stdOut.split('\n');
+ logs.forEach((log) => {
+ if (socksListenerRegex.test(log)) {
+ const match = socksListenerRegex.exec(log);
+ if (match) {
+ slice.proxyStatus = {
+ proxyHostname: match[1],
+ proxyPort: Number.parseInt(match[2], 10),
+ bootstrapped: slice.proxyStatus
+ ? slice.proxyStatus.bootstrapped
+ : false,
+ };
+ }
+ } else if (bootstrapDoneRegex.test(log)) {
+ if (slice.proxyStatus) {
+ slice.proxyStatus.bootstrapped = true;
+ }
+ }
+ });
+ },
+ torInitiate(slice) {
+ slice.processRunning = true;
+ },
+ torProcessExited(
+ slice,
+ action: PayloadAction<{
+ exitCode: number | null;
+ exitSignal: NodeJS.Signals | null;
+ }>,
+ ) {
+ slice.processRunning = false;
+ slice.exitCode = action.payload.exitCode;
+ slice.proxyStatus = false;
+ },
+ },
+});
+
+export const { torAppendStdOut, torInitiate, torProcessExited } =
+ torSlice.actions;
+
+export default torSlice.reducer;
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
new file mode 100644
index 00000000..df19f6e5
--- /dev/null
+++ b/src/store/hooks.ts
@@ -0,0 +1,56 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from 'renderer/store/storeRenderer';
+import { sortBy } from 'lodash';
+import { parseDateString } from 'utils/parseUtils';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector: TypedUseSelectorHook = useSelector;
+
+export function useResumeableSwapsCount() {
+ return useAppSelector(
+ (state) =>
+ Object.values(state.rpc.state.swapInfos).filter(
+ (swapInfo) => !swapInfo.completed,
+ ).length,
+ );
+}
+
+export function useIsSwapRunning() {
+ return useAppSelector((state) => state.swap.state !== null);
+}
+
+export function useSwapInfo(swapId: string | null) {
+ return useAppSelector((state) =>
+ swapId ? state.rpc.state.swapInfos[swapId] ?? null : null,
+ );
+}
+
+export function useActiveSwapId() {
+ return useAppSelector((s) => s.swap.swapId);
+}
+
+export function useActiveSwapInfo() {
+ const swapId = useActiveSwapId();
+ return useSwapInfo(swapId);
+}
+
+export function useIsRpcEndpointBusy(method: string) {
+ return useAppSelector((state) => state.rpc.busyEndpoints.includes(method));
+}
+
+export function useAllProviders() {
+ return useAppSelector((state) => {
+ const registryProviders = state.providers.registry.providers || [];
+ const listSellersProviders = state.providers.rendezvous.providers || [];
+ return [...registryProviders, ...listSellersProviders];
+ });
+}
+
+export function useSwapInfosSortedByDate() {
+ const swapInfos = useAppSelector((state) => state.rpc.state.swapInfos);
+ return sortBy(
+ Object.values(swapInfos),
+ (swap) => -parseDateString(swap.startDate),
+ );
+}
diff --git a/src/utils/conversionUtils.ts b/src/utils/conversionUtils.ts
new file mode 100644
index 00000000..f43dcc6c
--- /dev/null
+++ b/src/utils/conversionUtils.ts
@@ -0,0 +1,42 @@
+export function satsToBtc(sats: number): number {
+ return sats / 100000000;
+}
+
+export function btcToSats(btc: number): number {
+ return btc * 100000000;
+}
+
+export function piconerosToXmr(piconeros: number): number {
+ return piconeros / 1000000000000;
+}
+
+export function isXmrAddressValid(address: string, stagenet: boolean) {
+ const re = stagenet
+ ? '[57][0-9AB][1-9A-HJ-NP-Za-km-z]{93}'
+ : '[48][0-9AB][1-9A-HJ-NP-Za-km-z]{93}';
+ return new RegExp(`(?:^${re}$)`).test(address);
+}
+
+export function isBtcAddressValid(address: string, testnet: boolean) {
+ const re = testnet
+ ? '(tb1)[a-zA-HJ-NP-Z0-9]{25,49}'
+ : '(bc1)[a-zA-HJ-NP-Z0-9]{25,49}';
+ return new RegExp(`(?:^${re}$)`).test(address);
+}
+
+export function getBitcoinTxExplorerUrl(txid: string, testnet: boolean) {
+ return `https://blockchair.com/bitcoin${
+ testnet ? '/testnet' : ''
+ }/transaction/${txid}`;
+}
+
+export function getMoneroTxExplorerUrl(txid: string, stagenet: boolean) {
+ if (stagenet) {
+ return `https://stagenet.xmrchain.net/tx/${txid}`;
+ }
+ return `https://xmrchain.net/tx/${txid}`;
+}
+
+export function secondsToDays(seconds: number): number {
+ return seconds / 86400;
+}
diff --git a/src/utils/cryptoUtils.ts b/src/utils/cryptoUtils.ts
new file mode 100644
index 00000000..4cef19f5
--- /dev/null
+++ b/src/utils/cryptoUtils.ts
@@ -0,0 +1,5 @@
+import { createHash } from 'crypto';
+
+export function sha256(data: string): string {
+ return createHash('md5').update(data).digest('hex');
+}
diff --git a/src/utils/event.ts b/src/utils/event.ts
new file mode 100644
index 00000000..7aace594
--- /dev/null
+++ b/src/utils/event.ts
@@ -0,0 +1,21 @@
+export class SingleTypeEventEmitter {
+ private listeners: Array<(data: T) => void> = [];
+
+ // Method to add a listener for the event
+ on(listener: (data: T) => void) {
+ this.listeners.push(listener);
+ }
+
+ // Method to remove a listener
+ off(listener: (data: T) => void) {
+ const index = this.listeners.indexOf(listener);
+ if (index > -1) {
+ this.listeners.splice(index, 1);
+ }
+ }
+
+ // Method to emit the event
+ emit(data: T) {
+ this.listeners.forEach((listener) => listener(data));
+ }
+}
diff --git a/src/utils/logger.ts b/src/utils/logger.ts
new file mode 100644
index 00000000..36d35c49
--- /dev/null
+++ b/src/utils/logger.ts
@@ -0,0 +1,7 @@
+import pino from 'pino';
+
+export default pino(
+ {
+ level: 'trace',
+ }
+);
diff --git a/src/utils/multiAddrUtils.ts b/src/utils/multiAddrUtils.ts
new file mode 100644
index 00000000..71a36696
--- /dev/null
+++ b/src/utils/multiAddrUtils.ts
@@ -0,0 +1,24 @@
+import { Multiaddr } from 'multiaddr';
+import semver from 'semver';
+import { ExtendedProviderStatus, Provider } from 'models/apiModel';
+import { isTestnet } from 'store/config';
+
+const MIN_ASB_VERSION = '0.12.0';
+
+export function providerToConcatenatedMultiAddr(provider: Provider) {
+ return new Multiaddr(provider.multiAddr)
+ .encapsulate(`/p2p/${provider.peerId}`)
+ .toString();
+}
+
+export function isProviderCompatible(
+ provider: ExtendedProviderStatus,
+): boolean {
+ if (provider.version) {
+ if (!semver.satisfies(provider.version, `>=${MIN_ASB_VERSION}`))
+ return false;
+ }
+ if (provider.testnet !== isTestnet()) return false;
+
+ return true;
+}
diff --git a/src/utils/parseUtils.ts b/src/utils/parseUtils.ts
new file mode 100644
index 00000000..642ddf08
--- /dev/null
+++ b/src/utils/parseUtils.ts
@@ -0,0 +1,65 @@
+import { CliLog, isCliLog } from 'models/cliModel';
+
+/*
+Extract btc amount from string
+
+E.g: "0.00100000 BTC"
+Output: 0.001
+ */
+export function extractAmountFromUnitString(text: string): number | null {
+ if (text != null) {
+ const parts = text.split(' ');
+ if (parts.length === 2) {
+ const amount = Number.parseFloat(parts[0]);
+ return amount;
+ }
+ }
+ return null;
+}
+
+// E.g 2021-12-29 14:25:59.64082 +00:00:00
+export function parseDateString(str: string): number {
+ const parts = str.split(' ').slice(0, -1);
+ if (parts.length !== 2) {
+ throw new Error(
+ `Date string does not consist solely of date and time Str: ${str} Parts: ${parts}`,
+ );
+ }
+ const wholeString = parts.join(' ');
+ const date = Date.parse(wholeString);
+ if (Number.isNaN(date)) {
+ throw new Error(
+ `Date string could not be parsed Str: ${str} Parts: ${parts}`,
+ );
+ }
+ return date;
+}
+
+export function getLinesOfString(data: string): string[] {
+ return data
+ .toString()
+ .replace('\r\n', '\n')
+ .replace('\r', '\n')
+ .split('\n')
+ .filter((l) => l.length > 0);
+}
+
+export function getLogsAndStringsFromRawFileString(
+ rawFileData: string,
+): (CliLog | string)[] {
+ return getLinesOfString(rawFileData).map((line) => {
+ try {
+ return JSON.parse(line);
+ } catch (e) {
+ return line;
+ }
+ });
+}
+
+export function getLogsFromRawFileString(rawFileData: string): CliLog[] {
+ return getLogsAndStringsFromRawFileString(rawFileData).filter(isCliLog);
+}
+
+export function logsToRawString(logs: (CliLog | string)[]): string {
+ return logs.map((l) => JSON.stringify(l)).join('\n');
+}
diff --git a/src/utils/sortUtils.ts b/src/utils/sortUtils.ts
new file mode 100644
index 00000000..0b6185c0
--- /dev/null
+++ b/src/utils/sortUtils.ts
@@ -0,0 +1,19 @@
+import { ExtendedProviderStatus } from 'models/apiModel';
+
+export function sortProviderList(list: ExtendedProviderStatus[]) {
+ return list.concat().sort((firstEl, secondEl) => {
+ // If neither of them have a relevancy score, sort by max swap amount
+ if (firstEl.relevancy === undefined && secondEl.relevancy === undefined) {
+ if (firstEl.maxSwapAmount > secondEl.maxSwapAmount) {
+ return -1;
+ }
+ }
+ // If only on of the two don't have a relevancy score, prioritize the one that does
+ if (firstEl.relevancy === undefined) return 1;
+ if (secondEl.relevancy === undefined) return -1;
+ if (firstEl.relevancy > secondEl.relevancy) {
+ return -1;
+ }
+ return 1;
+ });
+}
diff --git a/src/utils/typescriptUtils.tsx b/src/utils/typescriptUtils.tsx
new file mode 100644
index 00000000..19c75b2d
--- /dev/null
+++ b/src/utils/typescriptUtils.tsx
@@ -0,0 +1,7 @@
+export function exhaustiveGuard(_value: never): never {
+ throw new Error(
+ `ERROR! Reached forbidden guard function with unexpected value: ${JSON.stringify(
+ _value,
+ )}`,
+ );
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..ed772106
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+///