Git-Mirrors/xmr-btc-swap
1
0
Fork 0
mirror of https://github.com/comit-network/xmr-btc-swap.git synced 2025-08-22 21:15:21 -04:00
Code Issues Projects Releases Packages Wiki Activity

feat(gui): Migrate to Tauri events

Browse source 
- Replace Electron IPC with Tauri invoke() for API calls
- Implement TauriSwapProgressEvent for state management
- Remove IpcInvokeButton, replace with PromiseInvokeButton
- Update models: new tauriModel.ts, refactor rpcModel.ts
- Simplify SwapSlice state, remove processRunning flag
- Refactor SwapStatePage to use TauriSwapProgressEvent
- Update HistoryRow and HistoryRowActions for new data structures
- Remove unused Electron-specific components (e.g., RpcStatusAlert)
- Update dependencies: React 18, Material-UI v4 to v5
- Implement typeshare for Rust/TypeScript type synchronization
- Add BobStateName enum for more precise swap state tracking
- Refactor utility functions for Tauri compatibility
- Remove JSONStream and other Electron-specific dependencies
This commit is contained in:
binarybaron 2024-08-26 15:32:28 +02:00
parent d54f5c6c77
commit cf641bc8bb
No known key found for this signature in database
GPG key ID: 99B75D3E1476A26E
77 changed files with 2484 additions and 2167 deletions
Download patch file Download diff file Expand all files Collapse all files

166
src-gui/src/renderer/components/IpcInvokeButton.tsx
View file

@ -1,166 +0,0 @@
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 <Tooltip title={tooltipTitle}>{children}</Tooltip>;
}
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 (
<Tooltip title={getMessage()} color="red">
{children}
</Tooltip>
);
}
interface IpcInvokeButtonProps<T> {
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<T>({
disabled,
ipcChannel,
ipcArgs,
onSuccess,
onClick,
endIcon,
loadIcon,
isLoadingOverride,
isIconButton,
requiresRpc,
displayErrorSnackbar,
tooltipTitle,
...rest
}: IpcInvokeButtonProps<T> & 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 || <CircularProgress size="1rem" />
: endIcon;
useEffect(() => {
setHasMinLoadingTimePassed(false);
setTimeout(
() => setHasMinLoadingTimePassed(true),
DELAY_BEFORE_SHOWING_LOADING_MS,
);
}, [isPending]);
async function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
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 (
<IpcButtonTooltip
requiresRpcAndNotReady={requiresRpcAndNotReady}
processType={rpcProcessType}
tooltipTitle={tooltipTitle}
>
<span>
{isIconButton ? (
<IconButton
onClick={handleClick}
disabled={isDisabled}
{...(rest as any)}
>
{actualEndIcon}
</IconButton>
) : (
<Button
onClick={handleClick}
disabled={isDisabled}
endIcon={actualEndIcon}
{...rest}
/>
)}
</span>
</IpcButtonTooltip>
);
}
IpcInvokeButton.defaultProps = {
requiresRpc: true,
disabled: false,
onSuccess: undefined,
isLoadingOverride: false,
isIconButton: false,
loadIcon: undefined,
displayErrorSnackbar: true,
};

13
src-gui/src/renderer/components/PromiseInvokeButton.tsx
View file

@ -1,9 +1,9 @@
import { Button, ButtonProps, IconButton, Tooltip } from "@material-ui/core";
import { Button, ButtonProps, IconButton } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import { useSnackbar } from "notistack";
import { ReactNode, useEffect, useState } from "react";
import { ReactNode, useState } from "react";
interface IpcInvokeButtonProps<T> {
interface PromiseInvokeButtonProps<T> {
onSuccess?: (data: T) => void;
onClick: () => Promise<T>;
onPendingChange?: (isPending: boolean) => void;
@ -24,10 +24,9 @@ export default function PromiseInvokeButton<T>({
isLoadingOverride,
isIconButton,
displayErrorSnackbar,
tooltipTitle,
onPendingChange,
...rest
}: IpcInvokeButtonProps<T> & ButtonProps) {
}: ButtonProps & PromiseInvokeButtonProps<T>) {
const { enqueueSnackbar } = useSnackbar();
const [isPending, setIsPending] = useState(false);
@ -42,11 +41,11 @@ export default function PromiseInvokeButton<T>({
try {
onPendingChange?.(true);
setIsPending(true);
let result = await onClick();
const result = await onClick();
onSuccess?.(result);
} catch (e: unknown) {
if (displayErrorSnackbar) {
enqueueSnackbar(e as String, {
enqueueSnackbar(e as string, {
autoHideDuration: 60 * 1000,
variant: "error",
});

5
src-gui/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx
View file

@ -1,8 +1,11 @@
import { Alert } from "@material-ui/lab";
import { Box, LinearProgress } from "@material-ui/core";
import { Alert } from "@material-ui/lab";
import { useAppSelector } from "store/hooks";
export default function MoneroWalletRpcUpdatingAlert() {
// TODO: Reimplement this using Tauri Events
return <></>;
const updateState = useAppSelector(
(s) => s.rpc.state.moneroWalletRpc.updateState,
);

4
src-gui/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx
View file

@ -1,8 +1,8 @@
import { Alert } from "@material-ui/lab";
import { Box, makeStyles } from "@material-ui/core";
import { Alert } from "@material-ui/lab";
import { useAppSelector } from "store/hooks";
import WalletRefreshButton from "../pages/wallet/WalletRefreshButton";
import { SatsAmount } from "../other/Units";
import WalletRefreshButton from "../pages/wallet/WalletRefreshButton";
const useStyles = makeStyles((theme) => ({
outer: {

7
src-gui/src/renderer/components/alert/RpcStatusAlert.tsx
View file

@ -1,8 +1,11 @@
import { Alert } from "@material-ui/lab";
import { CircularProgress } from "@material-ui/core";
import { useAppSelector } from "store/hooks";
import { Alert } from "@material-ui/lab";
import { RpcProcessStateType } from "models/rpcModel";
import { useAppSelector } from "store/hooks";
// TODO: Reimplement this using Tauri
// Currently the RPC process is always available, so this component is not needed
// since the UI is only displayed when the RPC process is available
export default function RpcStatusAlert() {
const rpcProcess = useAppSelector((s) => s.rpc.process);
if (rpcProcess.type === RpcProcessStateType.STARTED) {

5
src-gui/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx
View file

@ -1,10 +1,10 @@
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 { useActiveSwapInfo } from "store/hooks";
import HumanizedBitcoinBlockDuration from "../other/HumanizedBitcoinBlockDuration";
const useStyles = makeStyles((theme) => ({
@ -21,6 +21,9 @@ export default function SwapMightBeCancelledAlert({
}: {
bobBtcLockTxConfirmations: number;
}) {
// TODO: Reimplement this using Tauri
return <></>;
const classes = useStyles();
const swap = useActiveSwapInfo();

117
src-gui/src/renderer/components/alert/SwapStatusAlert.tsx
View file

@ -1,23 +1,19 @@
import { Alert, AlertTitle } from "@material-ui/lab/";
import { Box, makeStyles } from "@material-ui/core";
import { Alert, AlertTitle } from "@material-ui/lab/";
import { GetSwapInfoResponse } from "models/tauriModel";
import {
BobStateName,
GetSwapInfoResponseExt,
TimelockCancel,
TimelockNone,
} from "models/tauriModelExt";
import { ReactNode } from "react";
import { exhaustiveGuard } from "utils/typescriptUtils";
import HumanizedBitcoinBlockDuration from "../other/HumanizedBitcoinBlockDuration";
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({
@ -42,7 +38,6 @@ const MessageList = ({ messages }: { messages: ReactNode[] }) => {
return (
<ul className={classes.list}>
{messages.map((msg, i) => (
// eslint-disable-next-line react/no-array-index-key
<li key={i}>{msg}</li>
))}
</ul>
@ -81,21 +76,21 @@ const BitcoinLockedNoTimelockExpiredStateAlert = ({
timelock,
punishTimelockOffset,
}: {
timelock: SwapTimelockInfoNone;
timelock: TimelockNone;
punishTimelockOffset: number;
}) => (
<MessageList
messages={[
<>
Your Bitcoin is locked. If the swap is not completed in approximately{" "}
<HumanizedBitcoinBlockDuration blocks={timelock.None.blocks_left} />,
<HumanizedBitcoinBlockDuration blocks={timelock.content.blocks_left} />,
you need to refund
</>,
<>
You will lose your funds if you do not refund or complete the swap
You might lose your funds if you do not refund or complete the swap
within{" "}
<HumanizedBitcoinBlockDuration
blocks={timelock.None.blocks_left + punishTimelockOffset}
blocks={timelock.content.blocks_left + punishTimelockOffset}
/>
</>,
]}
@ -113,8 +108,8 @@ const BitcoinPossiblyCancelledAlert = ({
swap,
timelock,
}: {
swap: GetSwapInfoResponse;
timelock: SwapTimelockInfoCancelled;
swap: GetSwapInfoResponseExt;
timelock: TimelockCancel;
}) => {
const classes = useStyles();
return (
@ -124,9 +119,9 @@ const BitcoinPossiblyCancelledAlert = ({
"The swap was cancelled because it did not complete in time",
"You must resume the swap immediately to refund your Bitcoin. If that fails, you can manually refund it",
<>
You will lose your funds if you do not refund within{" "}
You might lose your funds if you do not refund within{" "}
<HumanizedBitcoinBlockDuration
blocks={timelock.Cancel.blocks_left}
blocks={timelock.content.blocks_left}
/>
</>,
]}
@ -149,55 +144,52 @@ const ImmediateActionAlert = () => (
* @param swap - The swap information.
* @returns JSX.Element | null
*/
function SwapAlertStatusText({
swap,
}: {
swap: GetSwapInfoResponseRunningSwap;
}) {
function SwapAlertStatusText({ swap }: { swap: GetSwapInfoResponseExt }) {
switch (swap.state_name) {
// 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:
case BobStateName.BtcRedeemed:
return <BitcoinRedeemedStateAlert swap={swap} />;
// These are states that are at risk of punishment because the Bitcoin have been locked
// but has not been redeemed yet by the other party
case SwapStateName.BtcLocked:
case SwapStateName.XmrLockProofReceived:
case SwapStateName.XmrLocked:
case SwapStateName.EncSigSent:
case SwapStateName.CancelTimelockExpired:
case SwapStateName.BtcCancelled:
if (swap.timelock !== null) {
if (isSwapTimelockInfoNone(swap.timelock)) {
return (
<BitcoinLockedNoTimelockExpiredStateAlert
punishTimelockOffset={swap.punish_timelock}
timelock={swap.timelock}
/>
);
}
case BobStateName.BtcLocked:
case BobStateName.XmrLockProofReceived:
case BobStateName.XmrLocked:
case BobStateName.EncSigSent:
case BobStateName.CancelTimelockExpired:
case BobStateName.BtcCancelled:
if (swap.timelock != null) {
switch (swap.timelock.type) {
case "None":
return (
<BitcoinLockedNoTimelockExpiredStateAlert
punishTimelockOffset={swap.punish_timelock}
timelock={swap.timelock}
/>
);
if (isSwapTimelockInfoCancelled(swap.timelock)) {
return (
<BitcoinPossiblyCancelledAlert
timelock={swap.timelock}
swap={swap}
/>
);
}
case "Cancel":
return (
<BitcoinPossiblyCancelledAlert
timelock={swap.timelock}
swap={swap}
/>
);
case "Punish":
return <ImmediateActionAlert />;
if (isSwapTimelockInfoPunished(swap.timelock)) {
return <ImmediateActionAlert />;
default:
// We have covered all possible timelock states above
// If we reach this point, it means we have missed a case
exhaustiveGuard(swap.timelock);
}
// We have covered all possible timelock states above
// If we reach this point, it means we have missed a case
return exhaustiveGuard(swap.timelock);
}
return <ImmediateActionAlert />;
default:
return exhaustiveGuard(swap.state_name);
// TODO: fix the exhaustive guard
// return exhaustiveGuard(swap.state_name);
return <></>;
}
}
@ -209,11 +201,12 @@ function SwapAlertStatusText({
export default function SwapStatusAlert({
swap,
}: {
swap: GetSwapInfoResponse;
swap: GetSwapInfoResponseExt;
}): JSX.Element | null {
// If the swap is not running, there is no need to display the alert
// This is either because the swap is finished or has not started yet (e.g. in the setup phase, no Bitcoin locked)
if (!isGetSwapInfoResponseRunningSwap(swap)) {
// If the swap is completed, there is no need to display the alert
// TODO: Here we should also check if the swap is in a state where any funds can be lost
// TODO: If the no Bitcoin have been locked yet, we can safely ignore the swap
if (swap.completed) {
return null;
}

1
src-gui/src/renderer/components/icons/BitcoinIcon.tsx
View file

@ -3,7 +3,6 @@ import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
export default function BitcoinIcon(props: SvgIconProps) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"

2
src-gui/src/renderer/components/icons/DiscordIcon.tsx
View file

@ -1,5 +1,5 @@
import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
import { SvgIcon } from "@material-ui/core";
import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
export default function DiscordIcon(props: SvgIconProps) {
return (

2
src-gui/src/renderer/components/icons/LinkIconButton.tsx
View file

@ -1,5 +1,5 @@
import { ReactNode } from "react";
import { IconButton } from "@material-ui/core";
import { ReactNode } from "react";
export default function LinkIconButton({
url,

1
src-gui/src/renderer/components/icons/MoneroIcon.tsx
View file

@ -3,7 +3,6 @@ import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
export default function MoneroIcon(props: SvgIconProps) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"

1
src-gui/src/renderer/components/icons/TorIcon.tsx
View file

@ -3,7 +3,6 @@ import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
export default function TorIcon(props: SvgIconProps) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<SvgIcon {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"

4
src-gui/src/renderer/components/inputs/BitcoinAddressTextField.tsx
View file

@ -1,8 +1,8 @@
import { useEffect } from "react";
import { TextField } from "@material-ui/core";
import { TextFieldProps } from "@material-ui/core/TextField/TextField";
import { isBtcAddressValid } from "utils/conversionUtils";
import { useEffect } from "react";
import { isTestnet } from "store/config";
import { isBtcAddressValid } from "utils/conversionUtils";
export default function BitcoinAddressTextField({
address,

4
src-gui/src/renderer/components/inputs/MoneroAddressTextField.tsx
View file

@ -1,8 +1,8 @@
import { useEffect } from "react";
import { TextField } from "@material-ui/core";
import { TextFieldProps } from "@material-ui/core/TextField/TextField";
import { isXmrAddressValid } from "utils/conversionUtils";
import { useEffect } from "react";
import { isTestnet } from "store/config";
import { isXmrAddressValid } from "utils/conversionUtils";
export default function MoneroAddressTextField({
address,

11
src-gui/src/renderer/components/modal/SwapSuspendAlert.tsx
View file

@ -6,7 +6,8 @@ import {
DialogContentText,
DialogTitle,
} from "@material-ui/core";
import IpcInvokeButton from "../IpcInvokeButton";
import { suspendCurrentSwap } from "renderer/rpc";
import PromiseInvokeButton from "../PromiseInvokeButton";
type SwapCancelAlertProps = {
open: boolean;
@ -29,15 +30,13 @@ export default function SwapSuspendAlert({
<Button onClick={onClose} color="primary">
No
</Button>
<IpcInvokeButton
ipcChannel="suspend-current-swap"
ipcArgs={[]}
<PromiseInvokeButton
color="primary"
onSuccess={onClose}
requiresRpc
onClick={suspendCurrentSwap}
>
Force stop
</IpcInvokeButton>
</PromiseInvokeButton>
</DialogActions>
</Dialog>
);

10
src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx
View file

@ -10,15 +10,15 @@ import {
Select,
TextField,
} from "@material-ui/core";
import { useState } from "react";
import { CliLog } from "models/cliModel";
import { useSnackbar } from "notistack";
import { useState } from "react";
import { store } from "renderer/store/storeRenderer";
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";
import { PiconeroAmount } from "../../other/Units";
async function submitFeedback(body: string, swapId: string | number) {
let attachedBody = "";
@ -67,7 +67,7 @@ function SwapSelectDropDown({
>
<MenuItem value={0}>Do not attach logs</MenuItem>
{swaps.map((swap) => (
<MenuItem value={swap.swap_id}>
<MenuItem value={swap.swap_id} key={swap.swap_id}>
Swap {swap.swap_id.substring(0, 5)}... from{" "}
{new Date(parseDateString(swap.start_date)).toDateString()} (
<PiconeroAmount amount={swap.xmr_amount} />)

28
src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
View file

@ -1,20 +1,20 @@
import { ChangeEvent, useState } from "react";
import {
DialogTitle,
Box,
Button,
Chip,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
Box,
Chip,
DialogTitle,
makeStyles,
TextField,
Theme,
} from "@material-ui/core";
import { Multiaddr } from "multiaddr";
import { useSnackbar } from "notistack";
import IpcInvokeButton from "../../IpcInvokeButton";
import { ChangeEvent, useState } from "react";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
const PRESET_RENDEZVOUS_POINTS = [
"/dns4/discover.unstoppableswap.net/tcp/8888/p2p/12D3KooWA6cnqJpVnreBVnoro8midDL9Lpzmg8oJPoAGi7YYaamE",
@ -53,7 +53,7 @@ export default function ListSellersDialog({
return "The multi address must contain the peer id (/p2p/)";
}
return null;
} catch (e) {
} catch {
return "Not a valid multi address";
}
}
@ -119,17 +119,17 @@ export default function ListSellersDialog({
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<IpcInvokeButton
<PromiseInvokeButton
variant="contained"
disabled={!(rendezvousAddress && !getMultiAddressError())}
color="primary"
onSuccess={handleSuccess}
ipcChannel="spawn-list-sellers"
ipcArgs={[rendezvousAddress]}
requiresRpc
onClick={() => {
throw new Error("Not implemented");
}}
>
Connect
</IpcInvokeButton>
</PromiseInvokeButton>
</DialogActions>
</Dialog>
);

4
src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
View file

@ -1,11 +1,11 @@
import { makeStyles, Box, Typography, Chip, Tooltip } from "@material-ui/core";
import { Box, Chip, makeStyles, Tooltip, Typography } 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";
import { satsToBtc, secondsToDays } from "utils/conversionUtils";
const useStyles = makeStyles((theme) => ({
content: {

20
src-gui/src/renderer/components/modal/provider/ProviderListDialog.tsx
View file

@ -1,31 +1,31 @@
import {
Avatar,
Button,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
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 { RpcMethod } from "models/rpcModel";
import { useState } from "react";
import { setSelectedProvider } from "store/features/providersSlice";
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";
import ProviderSubmitDialog from "./ProviderSubmitDialog";
const useStyles = makeStyles({
dialogContent: {

4
src-gui/src/renderer/components/modal/provider/ProviderSelect.tsx
View file

@ -1,9 +1,9 @@
import {
makeStyles,
Box,
Card,
CardContent,
Box,
IconButton,
makeStyles,
} from "@material-ui/core";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import { useState } from "react";

8
src-gui/src/renderer/components/modal/provider/ProviderSubmitDialog.tsx
View file

@ -1,14 +1,14 @@
import { ChangeEvent, useState } from "react";
import {
DialogTitle,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
DialogActions,
Button,
} from "@material-ui/core";
import { Multiaddr } from "multiaddr";
import { ChangeEvent, useState } from "react";
type ProviderSubmitDialogProps = {
open: boolean;

2
src-gui/src/renderer/components/modal/swap/BitcoinQrCode.tsx
View file

@ -1,5 +1,5 @@
import QRCode from "react-qr-code";
import { Box } from "@material-ui/core";
import QRCode from "react-qr-code";
export default function BitcoinQrCode({ address }: { address: string }) {
return (

4
src-gui/src/renderer/components/modal/swap/BitcoinTransactionInfoBox.tsx
View file

@ -1,7 +1,7 @@
import { ReactNode } from "react";
import BitcoinIcon from "renderer/components/icons/BitcoinIcon";
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 = {

6
src-gui/src/renderer/components/modal/swap/DepositAddressInfoBox.tsx
View file

@ -1,9 +1,9 @@
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 { ReactNode } from "react";
import BitcoinQrCode from "./BitcoinQrCode";
import ClipboardIconButton from "./ClipbiardIconButton";
import InfoBox from "./InfoBox";
type Props = {
title: string;

4
src-gui/src/renderer/components/modal/swap/MoneroTransactionInfoBox.tsx
View file

@ -1,7 +1,7 @@
import { ReactNode } from "react";
import MoneroIcon from "renderer/components/icons/MoneroIcon";
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 = {

19
src-gui/src/renderer/components/modal/swap/SwapDialog.tsx
View file

@ -1,4 +1,3 @@
import { useState } from "react";
import {
Button,
Dialog,
@ -6,13 +5,14 @@ import {
DialogContent,
makeStyles,
} from "@material-ui/core";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { useState } from "react";
import { swapReset } from "store/features/swapSlice";
import SwapStatePage from "./pages/SwapStatePage";
import SwapStateStepper from "./SwapStateStepper";
import { useAppDispatch, useAppSelector, useIsSwapRunning } from "store/hooks";
import SwapSuspendAlert from "../SwapSuspendAlert";
import SwapDialogTitle from "./SwapDialogTitle";
import DebugPage from "./pages/DebugPage";
import SwapStatePage from "./pages/SwapStatePage";
import SwapDialogTitle from "./SwapDialogTitle";
import SwapStateStepper from "./SwapStateStepper";
const useStyles = makeStyles({
content: {
@ -32,16 +32,17 @@ export default function SwapDialog({
}) {
const classes = useStyles();
const swap = useAppSelector((state) => state.swap);
const isSwapRunning = useIsSwapRunning();
const [debug, setDebug] = useState(false);
const [openSuspendAlert, setOpenSuspendAlert] = useState(false);
const dispatch = useAppDispatch();
function onCancel() {
if (swap.processRunning) {
if (isSwapRunning) {
setOpenSuspendAlert(true);
} else {
onClose();
setTimeout(() => dispatch(swapReset()), 0);
dispatch(swapReset());
}
}
@ -61,7 +62,7 @@ export default function SwapDialog({
<DebugPage />
) : (
<>
<SwapStatePage swapState={swap.state} />
<SwapStatePage state={swap.state} />
<SwapStateStepper />
</>
)}
@ -75,7 +76,7 @@ export default function SwapDialog({
color="primary"
variant="contained"
onClick={onCancel}
disabled={!(swap.state !== null && !swap.processRunning)}
disabled={isSwapRunning}
>
Done
</Button>

4
src-gui/src/renderer/components/modal/swap/SwapDialogTitle.tsx
View file

@ -1,7 +1,7 @@
import { Box, DialogTitle, makeStyles, Typography } from "@material-ui/core";
import TorStatusBadge from "./pages/TorStatusBadge";
import FeedbackSubmitBadge from "./pages/FeedbackSubmitBadge";
import DebugPageSwitchBadge from "./pages/DebugPageSwitchBadge";
import FeedbackSubmitBadge from "./pages/FeedbackSubmitBadge";
import TorStatusBadge from "./pages/TorStatusBadge";
const useStyles = makeStyles((theme) => ({
root: {

43
src-gui/src/renderer/components/modal/swap/SwapStateStepper.tsx
View file

@ -1,7 +1,11 @@
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 { BobStateName } from "models/tauriModelExt";
import {
useActiveSwapInfo,
useAppSelector,
useIsSwapRunning,
} from "store/hooks";
import { exhaustiveGuard } from "utils/typescriptUtils";
export enum PathType {
@ -9,8 +13,10 @@ export enum PathType {
UNHAPPY_PATH = "unhappy path",
}
// TODO: Consider using a TauriProgressEvent here instead of BobStateName
// TauriProgressEvent is always up to date, BobStateName is not (needs to be periodically fetched)
function getActiveStep(
stateName: SwapStateName | null,
stateName: BobStateName | null,
processExited: boolean,
): [PathType, number, boolean] {
switch (stateName) {
@ -18,56 +24,56 @@ function getActiveStep(
// Step: 0 (Waiting for Bitcoin lock tx to be published)
case null:
return [PathType.HAPPY_PATH, 0, false];
case SwapStateName.Started:
case SwapStateName.SwapSetupCompleted:
case BobStateName.Started:
case BobStateName.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:
case BobStateName.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:
case BobStateName.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:
case BobStateName.XmrLocked:
case BobStateName.EncSigSent:
return [PathType.HAPPY_PATH, 2, processExited];
// Step: 4 (Waiting for XMR Redemption)
case SwapStateName.BtcRedeemed:
case BobStateName.BtcRedeemed:
return [PathType.HAPPY_PATH, 3, processExited];
// Step: 4 (Completed) (Swap completed, XMR redeemed)
case SwapStateName.XmrRedeemed:
case BobStateName.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:
case BobStateName.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:
case BobStateName.CancelTimelockExpired:
return [PathType.UNHAPPY_PATH, 0, processExited];
// Step: 2 (Attempt to publish the Bitcoin refund transaction)
case SwapStateName.BtcCancelled:
case BobStateName.BtcCancelled:
return [PathType.UNHAPPY_PATH, 1, processExited];
// Step: 2 (Completed) (Bitcoin refunded)
case SwapStateName.BtcRefunded:
case BobStateName.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:
case BobStateName.BtcPunished:
return [PathType.UNHAPPY_PATH, 1, true];
default:
return exhaustiveGuard(stateName);
@ -149,11 +155,14 @@ function UnhappyPathStepper({
}
export default function SwapStateStepper() {
// TODO: There's no equivalent of this with Tauri yet.
const currentSwapSpawnType = useAppSelector((s) => s.swap.spawnType);
const stateName = useActiveSwapInfo()?.state_name ?? null;
const processExited = useAppSelector((s) => !s.swap.processRunning);
const processExited = !useIsSwapRunning();
const [pathType, activeStep, error] = getActiveStep(stateName, processExited);
// TODO: Fix this to work with Tauri
// 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 <UnhappyPathStepper activeStep={0} error={error} />;

2
src-gui/src/renderer/components/modal/swap/pages/DebugPage.tsx
View file

@ -1,7 +1,7 @@
import { Box, DialogContentText } from "@material-ui/core";
import { useActiveSwapInfo, useAppSelector } from "store/hooks";
import CliLogsBox from "../../../other/RenderedCliLog";
import JsonTreeView from "../../../other/JSONViewTree";
import CliLogsBox from "../../../other/RenderedCliLog";
export default function DebugPage() {
const torStdOut = useAppSelector((s) => s.tor.stdOut);

2
src-gui/src/renderer/components/modal/swap/pages/FeedbackSubmitBadge.tsx
View file

@ -1,7 +1,7 @@
import { IconButton } from "@material-ui/core";
import FeedbackIcon from "@material-ui/icons/Feedback";
import FeedbackDialog from "../../feedback/FeedbackDialog";
import { useState } from "react";
import FeedbackDialog from "../../feedback/FeedbackDialog";
export default function FeedbackSubmitBadge() {
const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);

156
src-gui/src/renderer/components/modal/swap/pages/SwapStatePage.tsx
View file

@ -1,43 +1,28 @@
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 { SwapSlice } from "models/storeModel";
import CircularProgressWithSubtitle from "../CircularProgressWithSubtitle";
import BitcoinPunishedPage from "./done/BitcoinPunishedPage";
import { SyncingMoneroWalletPage } from "./in_progress/SyncingMoneroWalletPage";
import BitcoinRefundedPage from "./done/BitcoinRefundedPage";
import XmrRedeemInMempoolPage from "./done/XmrRedeemInMempoolPage";
import ProcessExitedPage from "./exited/ProcessExitedPage";
import BitcoinCancelledPage from "./in_progress/BitcoinCancelledPage";
import BitcoinLockTxInMempoolPage from "./in_progress/BitcoinLockTxInMempoolPage";
import BitcoinRedeemedPage from "./in_progress/BitcoinRedeemedPage";
import ReceivedQuotePage from "./in_progress/ReceivedQuotePage";
import StartedPage from "./in_progress/StartedPage";
import XmrLockedPage from "./in_progress/XmrLockedPage";
import XmrLockTxInMempoolPage from "./in_progress/XmrLockInMempoolPage";
import InitiatedPage from "./init/InitiatedPage";
import InitPage from "./init/InitPage";
import WaitingForBitcoinDepositPage from "./init/WaitingForBitcoinDepositPage";
export default function SwapStatePage({
swapState,
state,
}: {
swapState: SwapState | null;
state: SwapSlice["state"];
}) {
// TODO: Reimplement this using tauri events
/*
const isSyncingMoneroWallet = useAppSelector(
(state) => state.rpc.state.moneroWallet.isSyncing,
);
@ -45,62 +30,57 @@ export default function SwapStatePage({
if (isSyncingMoneroWallet) {
return <SyncingMoneroWalletPage />;
}
*/
if (swapState === null) {
if (state === null) {
return <InitPage />;
}
if (isSwapStateInitiated(swapState)) {
return <InitiatedPage />;
switch (state.curr.type) {
case "Initiated":
return <InitiatedPage />;
case "ReceivedQuote":
return <ReceivedQuotePage />;
case "WaitingForBtcDeposit":
return <WaitingForBitcoinDepositPage {...state.curr.content} />;
case "Started":
return <StartedPage {...state.curr.content} />;
case "BtcLockTxInMempool":
return <BitcoinLockTxInMempoolPage {...state.curr.content} />;
case "XmrLockTxInMempool":
return <XmrLockTxInMempoolPage {...state.curr.content} />;
case "XmrLocked":
return <XmrLockedPage />;
case "BtcRedeemed":
return <BitcoinRedeemedPage />;
case "XmrRedeemInMempool":
return <XmrRedeemInMempoolPage {...state.curr.content} />;
case "BtcCancelled":
return <BitcoinCancelledPage />;
case "BtcRefunded":
return <BitcoinRefundedPage {...state.curr.content} />;
case "BtcPunished":
return <BitcoinPunishedPage />;
case "AttemptingCooperativeRedeem":
return (
<CircularProgressWithSubtitle description="Attempting to redeem the Monero with the help of the other party" />
);
case "CooperativeRedeemAccepted":
return (
<CircularProgressWithSubtitle description="The other party is cooperating with us to redeem the Monero..." />
);
case "CooperativeRedeemRejected":
return <BitcoinPunishedPage />;
case "Released":
return <ProcessExitedPage prevState={state.prev} swapId={state.swapId} />;
default:
// TODO: Use this when we have all states implemented, ensures we don't forget to implement a state
// return exhaustiveGuard(state.curr.type);
return (
<Box>
No information to display
<br />
State: {JSON.stringify(state, null, 4)}
</Box>
);
}
if (isSwapStateReceivedQuote(swapState)) {
return <ReceivedQuotePage />;
}
if (isSwapStateWaitingForBtcDeposit(swapState)) {
return <WaitingForBitcoinDepositPage state={swapState} />;
}
if (isSwapStateStarted(swapState)) {
return <StartedPage state={swapState} />;
}
if (isSwapStateBtcLockInMempool(swapState)) {
return <BitcoinLockTxInMempoolPage state={swapState} />;
}
if (isSwapStateXmrLockInMempool(swapState)) {
return <XmrLockTxInMempoolPage state={swapState} />;
}
if (isSwapStateXmrLocked(swapState)) {
return <XmrLockedPage />;
}
if (isSwapStateBtcRedemeed(swapState)) {
return <BitcoinRedeemedPage />;
}
if (isSwapStateXmrRedeemInMempool(swapState)) {
return <XmrRedeemInMempoolPage state={swapState} />;
}
if (isSwapStateBtcCancelled(swapState)) {
return <BitcoinCancelledPage />;
}
if (isSwapStateBtcRefunded(swapState)) {
return <BitcoinRefundedPage state={swapState} />;
}
if (isSwapStateBtcPunished(swapState)) {
return <BitcoinPunishedPage />;
}
if (isSwapStateProcessExited(swapState)) {
return <ProcessExitedPage state={swapState} />;
}
console.error(
`No swap state page found for swap state State: ${JSON.stringify(
swapState,
null,
4,
)}`,
);
return (
<Box>
No information to display
<br />
State: ${JSON.stringify(swapState, null, 4)}
</Box>
);
}

28
src-gui/src/renderer/components/modal/swap/pages/done/BitcoinRefundedPage.tsx
View file

@ -1,14 +1,13 @@
import { Box, DialogContentText } from "@material-ui/core";
import { SwapStateBtcRefunded } from "models/storeModel";
import { TauriSwapProgressEventContent } from "models/tauriModelExt";
import { useActiveSwapInfo } from "store/hooks";
import BitcoinTransactionInfoBox from "../../BitcoinTransactionInfoBox";
import FeedbackInfoBox from "../../../../pages/help/FeedbackInfoBox";
import BitcoinTransactionInfoBox from "../../BitcoinTransactionInfoBox";
export default function BitcoinRefundedPage({
state,
}: {
state: SwapStateBtcRefunded | null;
}) {
btc_refund_txid,
}: TauriSwapProgressEventContent<"BtcRefunded">) {
// TODO: Reimplement this using Tauri
const swap = useActiveSwapInfo();
const additionalContent = swap
? `Refund address: ${swap.btc_refund_address}`
@ -28,14 +27,15 @@ export default function BitcoinRefundedPage({
gap: "0.5rem",
}}
>
{state && (
<BitcoinTransactionInfoBox
title="Bitcoin Refund Transaction"
txId={state.bobBtcRefundTxId}
loading={false}
additionalContent={additionalContent}
/>
)}
{
// TODO: We should display the confirmation count here
}
<BitcoinTransactionInfoBox
title="Bitcoin Refund Transaction"
txId={btc_refund_txid}
loading={false}
additionalContent={additionalContent}
/>
<FeedbackInfoBox />
</Box>
</Box>

43
src-gui/src/renderer/components/modal/swap/pages/done/XmrRedeemInMempoolPage.tsx
View file

@ -1,23 +1,18 @@
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 { TauriSwapProgressEventContent } from "models/tauriModelExt";
import FeedbackInfoBox from "../../../../pages/help/FeedbackInfoBox";
type XmrRedeemInMempoolPageProps = {
state: SwapStateXmrRedeemInMempool | null;
};
import MoneroTransactionInfoBox from "../../MoneroTransactionInfoBox";
export default function XmrRedeemInMempoolPage({
state,
}: XmrRedeemInMempoolPageProps) {
const swap = useActiveSwapInfo();
const additionalContent = swap
? `This transaction transfers ${getSwapXmrAmount(swap).toFixed(6)} XMR to ${
state?.bobXmrRedeemAddress
}`
: null;
xmr_redeem_address,
xmr_redeem_txid,
}: TauriSwapProgressEventContent<"XmrRedeemInMempool">) {
// TODO: Reimplement this using Tauri
//const additionalContent = swap
// ? `This transaction transfers ${getSwapXmrAmount(swap).toFixed(6)} XMR to ${
// state?.bobXmrRedeemAddress
// }`
// : null;
return (
<Box>
@ -32,16 +27,12 @@ export default function XmrRedeemInMempoolPage({
gap: "0.5rem",
}}
>
{state && (
<>
<MoneroTransactionInfoBox
title="Monero Redeem Transaction"
txId={state.bobXmrRedeemTxId}
additionalContent={additionalContent}
loading={false}
/>
</>
)}
<MoneroTransactionInfoBox
title="Monero Redeem Transaction"
txId={xmr_redeem_txid}
additionalContent={`The funds have been sent to the address ${xmr_redeem_address}`}
loading={false}
/>
<FeedbackInfoBox />
</Box>
</Box>

8
src-gui/src/renderer/components/modal/swap/pages/exited/ProcessExitedAndNotDonePage.tsx
View file

@ -1,8 +1,8 @@
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";
import { SwapStateProcessExited } from "models/storeModel";
import { useActiveSwapInfo, useAppSelector } from "store/hooks";
import CliLogsBox from "../../../../other/RenderedCliLog";
export default function ProcessExitedAndNotDonePage({
state,
@ -18,7 +18,7 @@ export default function ProcessExitedAndNotDonePage({
const hasRpcError = state.rpcError != null;
const hasSwap = swap != null;
let messages = [];
const messages = [];
messages.push(
isCancelRefund

70
src-gui/src/renderer/components/modal/swap/pages/exited/ProcessExitedPage.tsx
View file

@ -1,47 +1,41 @@
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 { TauriSwapProgressEvent } from "models/tauriModel";
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
export default function ProcessExitedPage({
prevState,
swapId,
}: {
prevState: TauriSwapProgressEvent | null;
swapId: string;
}) {
// If we have a previous state, we can show the user the last state of the swap
// We only show the last state if its a final state (XmrRedeemInMempool, BtcRefunded, BtcPunished)
if (
isSwapStateXmrRedeemInMempool(state.prevState) ||
isSwapStateBtcRefunded(state.prevState) ||
isSwapStateBtcPunished(state.prevState)
prevState != null &&
(prevState.type === "XmrRedeemInMempool" ||
prevState.type === "BtcRefunded" ||
prevState.type === "BtcPunished")
) {
return <SwapStatePage swapState={state.prevState} />;
return (
<SwapStatePage
state={{
curr: prevState,
prev: null,
swapId,
}}
/>
);
}
// If we don't have a swap state for a "done" state, we should fall back to using the database to display as much information as we can
if (swap) {
if (swap.state_name === SwapStateName.XmrRedeemed) {
return <XmrRedeemInMempoolPage state={null} />;
}
if (swap.state_name === SwapStateName.BtcRefunded) {
return <BitcoinRefundedPage state={null} />;
}
if (swap.state_name === SwapStateName.BtcPunished) {
return <BitcoinPunishedPage />;
}
}
// TODO: Display something useful here
return (
<>
If the swap is not a "done" state (or we don't have a db state because the
swap did complete the SwapSetup yet) we should tell the user and show logs
Not implemented yet
</>
);
// If the swap is not a "done" state (or we don't have a db state because the swap did complete the SwapSetup yet) we should tell the user and show logs
return <ProcessExitedAndNotDonePage state={state} />;
// return <ProcessExitedAndNotDonePage state={state} />;
}

19
src-gui/src/renderer/components/modal/swap/pages/in_progress/BitcoinLockTxInMempoolPage.tsx
View file

@ -1,19 +1,16 @@
import { Box, DialogContentText } from "@material-ui/core";
import { SwapStateBtcLockInMempool } from "models/storeModel";
import BitcoinTransactionInfoBox from "../../BitcoinTransactionInfoBox";
import { TauriSwapProgressEventContent } from "models/tauriModelExt";
import SwapMightBeCancelledAlert from "../../../../alert/SwapMightBeCancelledAlert";
type BitcoinLockTxInMempoolPageProps = {
state: SwapStateBtcLockInMempool;
};
import BitcoinTransactionInfoBox from "../../BitcoinTransactionInfoBox";
export default function BitcoinLockTxInMempoolPage({
state,
}: BitcoinLockTxInMempoolPageProps) {
btc_lock_confirmations,
btc_lock_txid,
}: TauriSwapProgressEventContent<"BtcLockTxInMempool">) {
return (
<Box>
<SwapMightBeCancelledAlert
bobBtcLockTxConfirmations={state.bobBtcLockTxConfirmations}
bobBtcLockTxConfirmations={btc_lock_confirmations}
/>
<DialogContentText>
The Bitcoin lock transaction has been published. The swap will proceed
@ -22,14 +19,14 @@ export default function BitcoinLockTxInMempoolPage({
</DialogContentText>
<BitcoinTransactionInfoBox
title="Bitcoin Lock Transaction"
txId={state.bobBtcLockTxId}
txId={btc_lock_txid}
loading
additionalContent={
<>
Most swap providers require one confirmation before locking their
Monero
<br />
Confirmations: {state.bobBtcLockTxConfirmations}
Confirmations: {btc_lock_confirmations}
</>
}
/>

27
src-gui/src/renderer/components/modal/swap/pages/in_progress/StartedPage.tsx
View file

@ -1,16 +1,19 @@
import { SwapStateStarted } from "models/storeModel";
import { BitcoinAmount } from "renderer/components/other/Units";
import { TauriSwapProgressEventContent } from "models/tauriModelExt";
import { SatsAmount } from "renderer/components/other/Units";
import CircularProgressWithSubtitle from "../../CircularProgressWithSubtitle";
export default function StartedPage({ state }: { state: SwapStateStarted }) {
const description = state.txLockDetails ? (
<>
Locking <BitcoinAmount amount={state.txLockDetails.amount} /> with a
network fee of <BitcoinAmount amount={state.txLockDetails.fees} />
</>
) : (
"Locking Bitcoin"
export default function StartedPage({
btc_lock_amount,
btc_tx_lock_fee,
}: TauriSwapProgressEventContent<"Started">) {
return (
<CircularProgressWithSubtitle
description={
<>
Locking <SatsAmount amount={btc_lock_amount} /> with a network fee of{" "}
<SatsAmount amount={btc_tx_lock_fee} />
</>
}
/>
);
return <CircularProgressWithSubtitle description={description} />;
}

15
src-gui/src/renderer/components/modal/swap/pages/in_progress/XmrLockInMempoolPage.tsx
View file

@ -1,15 +1,12 @@
import { Box, DialogContentText } from "@material-ui/core";
import { SwapStateXmrLockInMempool } from "models/storeModel";
import { TauriSwapProgressEventContent } from "models/tauriModelExt";
import MoneroTransactionInfoBox from "../../MoneroTransactionInfoBox";
type XmrLockTxInMempoolPageProps = {
state: SwapStateXmrLockInMempool;
};
export default function XmrLockTxInMempoolPage({
state,
}: XmrLockTxInMempoolPageProps) {
const additionalContent = `Confirmations: ${state.aliceXmrLockTxConfirmations}/10`;
xmr_lock_tx_confirmations,
xmr_lock_txid,
}: TauriSwapProgressEventContent<"XmrLockTxInMempool">) {
const additionalContent = `Confirmations: ${xmr_lock_tx_confirmations}/10`;
return (
<Box>
@ -20,7 +17,7 @@ export default function XmrLockTxInMempoolPage({
<MoneroTransactionInfoBox
title="Monero Lock Transaction"
txId={state.aliceXmrLockTxId}
txId={xmr_lock_txid}
additionalContent={additionalContent}
loading
/>

42
src-gui/src/renderer/components/modal/swap/pages/init/DepositAmountHelper.tsx
View file

@ -1,8 +1,8 @@
import { useState } from "react";
import { Box, makeStyles, TextField, Typography } from "@material-ui/core";
import { SwapStateWaitingForBtcDeposit } from "models/storeModel";
import { BidQuote } from "models/tauriModel";
import { useState } from "react";
import { useAppSelector } from "store/hooks";
import { satsToBtc } from "utils/conversionUtils";
import { btcToSats, satsToBtc } from "utils/conversionUtils";
import { MoneroAmount } from "../../../../other/Units";
const MONERO_FEE = 0.000016;
@ -29,42 +29,42 @@ function calcBtcAmountWithoutFees(amount: number, fees: number) {
}
export default function DepositAmountHelper({
state,
min_deposit_until_swap_will_start,
max_deposit_until_maximum_amount_is_reached,
min_bitcoin_lock_tx_fee,
quote,
}: {
state: SwapStateWaitingForBtcDeposit;
min_deposit_until_swap_will_start: number;
max_deposit_until_maximum_amount_is_reached: number;
min_bitcoin_lock_tx_fee: number;
quote: BidQuote;
}) {
const classes = useStyles();
const [amount, setAmount] = useState(state.minDeposit);
const [amount, setAmount] = useState(min_deposit_until_swap_will_start);
const bitcoinBalance = useAppSelector((s) => s.rpc.state.balance) || 0;
function getTotalAmountAfterDeposit() {
return amount + satsToBtc(bitcoinBalance);
return amount + bitcoinBalance;
}
function hasError() {
return (
amount < state.minDeposit ||
getTotalAmountAfterDeposit() > state.maximumAmount
amount < min_deposit_until_swap_will_start ||
getTotalAmountAfterDeposit() > max_deposit_until_maximum_amount_is_reached
);
}
function calcXMRAmount(): number | null {
if (Number.isNaN(amount)) return null;
if (hasError()) return null;
if (state.price == null) return null;
console.log(
`Calculating calcBtcAmountWithoutFees(${getTotalAmountAfterDeposit()}, ${
state.minBitcoinLockTxFee
}) / ${state.price} - ${MONERO_FEE}`,
);
if (quote.price == null) return null;
return (
calcBtcAmountWithoutFees(
getTotalAmountAfterDeposit(),
state.minBitcoinLockTxFee,
min_bitcoin_lock_tx_fee,
) /
state.price -
quote.price -
MONERO_FEE
);
}
@ -75,9 +75,9 @@ export default function DepositAmountHelper({
Depositing {bitcoinBalance > 0 && <>another</>}
</Typography>
<TextField
error={hasError()}
value={amount}
onChange={(e) => setAmount(parseFloat(e.target.value))}
error={!!hasError()}
value={satsToBtc(amount)}
onChange={(e) => setAmount(btcToSats(parseFloat(e.target.value)))}
size="small"
type="number"
className={classes.textField}

2
src-gui/src/renderer/components/modal/swap/pages/init/DownloadingMoneroWalletRpcPage.tsx
View file

@ -1,5 +1,5 @@
import CircularProgressWithSubtitle from "../../CircularProgressWithSubtitle";
import { MoneroWalletRpcUpdateState } from "../../../../../../models/storeModel";
import CircularProgressWithSubtitle from "../../CircularProgressWithSubtitle";
export default function DownloadingMoneroWalletRpcPage({
updateState,

18
src-gui/src/renderer/components/modal/swap/pages/init/InitPage.tsx
View file

@ -1,12 +1,12 @@
import { Box, DialogContentText, makeStyles } from "@material-ui/core";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import { useState } from "react";
import BitcoinAddressTextField from "renderer/components/inputs/BitcoinAddressTextField";
import MoneroAddressTextField from "renderer/components/inputs/MoneroAddressTextField";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { buyXmr } from "renderer/rpc";
import { useAppSelector } from "store/hooks";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import { isTestnet } from "store/config";
import RemainingFundsWillBeUsedAlert from "../../../../alert/RemainingFundsWillBeUsedAlert";
import IpcInvokeButton from "../../../../IpcInvokeButton";
const useStyles = makeStyles((theme) => ({
initButton: {
@ -29,6 +29,10 @@ export default function InitPage() {
(state) => state.providers.selectedProvider,
);
async function init() {
await buyXmr(selectedProvider, refundAddress, redeemAddress);
}
return (
<Box>
<RemainingFundsWillBeUsedAlert />
@ -58,7 +62,7 @@ export default function InitPage() {
/>
</Box>
<IpcInvokeButton
<PromiseInvokeButton
disabled={
!refundAddressValid || !redeemAddressValid || !selectedProvider
}
@ -67,12 +71,10 @@ export default function InitPage() {
size="large"
className={classes.initButton}
endIcon={<PlayArrowIcon />}
ipcChannel="spawn-buy-xmr"
ipcArgs={[selectedProvider, redeemAddress, refundAddress]}
displayErrorSnackbar={false}
onClick={init}
>
Start swap
</IpcInvokeButton>
</PromiseInvokeButton>
</Box>
);
}

2
src-gui/src/renderer/components/modal/swap/pages/init/InitiatedPage.tsx
View file

@ -1,5 +1,5 @@
import { useAppSelector } from "store/hooks";
import { SwapSpawnType } from "models/cliModel";
import { useAppSelector } from "store/hooks";
import CircularProgressWithSubtitle from "../../CircularProgressWithSubtitle";
export default function InitiatedPage() {

47
src-gui/src/renderer/components/modal/swap/pages/init/WaitingForBitcoinDepositPage.tsx
View file

@ -1,14 +1,10 @@
import { Box, makeStyles, Typography } from "@material-ui/core";
import { SwapStateWaitingForBtcDeposit } from "models/storeModel";
import { TauriSwapProgressEventContent } from "models/tauriModelExt";
import { useAppSelector } from "store/hooks";
import DepositAddressInfoBox from "../../DepositAddressInfoBox";
import BitcoinIcon from "../../../../icons/BitcoinIcon";
import { MoneroSatsExchangeRate, SatsAmount } from "../../../../other/Units";
import DepositAddressInfoBox from "../../DepositAddressInfoBox";
import DepositAmountHelper from "./DepositAmountHelper";
import {
BitcoinAmount,
MoneroBitcoinExchangeRate,
SatsAmount,
} from "../../../../other/Units";
const useStyles = makeStyles((theme) => ({
amountHelper: {
@ -23,13 +19,13 @@ const useStyles = makeStyles((theme) => ({
},
}));
type WaitingForBtcDepositPageProps = {
state: SwapStateWaitingForBtcDeposit;
};
export default function WaitingForBtcDepositPage({
state,
}: WaitingForBtcDepositPageProps) {
deposit_address,
min_deposit_until_swap_will_start,
max_deposit_until_maximum_amount_is_reached,
min_bitcoin_lock_tx_fee,
quote,
}: TauriSwapProgressEventContent<"WaitingForBtcDeposit">) {
const classes = useStyles();
const bitcoinBalance = useAppSelector((s) => s.rpc.state.balance) || 0;
@ -38,7 +34,7 @@ export default function WaitingForBtcDepositPage({
<Box>
<DepositAddressInfoBox
title="Bitcoin Deposit Address"
address={state.depositAddress}
address={deposit_address}
additionalContent={
<Box className={classes.additionalContent}>
<Typography variant="subtitle2">
@ -51,9 +47,11 @@ export default function WaitingForBtcDepositPage({
) : null}
<li>
Send any amount between{" "}
<BitcoinAmount amount={state.minDeposit} /> and{" "}
<BitcoinAmount amount={state.maxDeposit} /> to the address
above
<SatsAmount amount={min_deposit_until_swap_will_start} /> and{" "}
<SatsAmount
amount={max_deposit_until_maximum_amount_is_reached}
/>{" "}
to the address above
{bitcoinBalance > 0 && (
<> (on top of the already deposited funds)</>
)}
@ -61,11 +59,11 @@ export default function WaitingForBtcDepositPage({
<li>
All Bitcoin sent to this this address will converted into
Monero at an exchance rate of{" "}
<MoneroBitcoinExchangeRate rate={state.price} />
<MoneroSatsExchangeRate rate={quote.price} />
</li>
<li>
The network fee of{" "}
<BitcoinAmount amount={state.minBitcoinLockTxFee} /> will
<SatsAmount amount={min_bitcoin_lock_tx_fee} /> will
automatically be deducted from the deposited coins
</li>
<li>
@ -74,7 +72,16 @@ export default function WaitingForBtcDepositPage({
</li>
</ul>
</Typography>
<DepositAmountHelper state={state} />
<DepositAmountHelper
min_deposit_until_swap_will_start={
min_deposit_until_swap_will_start
}
max_deposit_until_maximum_amount_is_reached={
max_deposit_until_maximum_amount_is_reached
}
min_bitcoin_lock_tx_fee={min_bitcoin_lock_tx_fee}
quote={quote}
/>
</Box>
}
icon={<BitcoinIcon />}

15
src-gui/src/renderer/components/modal/wallet/WithdrawDialog.tsx
View file

@ -1,14 +1,10 @@
import { Button, Dialog, DialogActions } from "@material-ui/core";
import { useAppDispatch, useIsRpcEndpointBusy } from "store/hooks";
import { RpcMethod } from "models/rpcModel";
import { rpcResetWithdrawTxId } from "store/features/rpcSlice";
import WithdrawStatePage from "./WithdrawStatePage";
import DialogHeader from "../DialogHeader";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { useState } from "react";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { withdrawBtc } from "renderer/rpc";
import BtcTxInMempoolPageContent from "./pages/BitcoinWithdrawTxInMempoolPage";
import DialogHeader from "../DialogHeader";
import AddressInputPage from "./pages/AddressInputPage";
import BtcTxInMempoolPageContent from "./pages/BitcoinWithdrawTxInMempoolPage";
import WithdrawDialogContent from "./WithdrawDialogContent";
export default function WithdrawDialog({
@ -42,10 +38,7 @@ export default function WithdrawDialog({
setWithdrawAddressValid={setWithdrawAddressValid}
/>
) : (
<BtcTxInMempoolPageContent
withdrawTxId={withdrawTxId}
onCancel={onCancel}
/>
<BtcTxInMempoolPageContent withdrawTxId={withdrawTxId} />
)}
</WithdrawDialogContent>
<DialogActions>

2
src-gui/src/renderer/components/modal/wallet/WithdrawDialogContent.tsx
View file

@ -1,5 +1,5 @@
import { ReactNode } from "react";
import { Box, DialogContent, makeStyles } from "@material-ui/core";
import { ReactNode } from "react";
import WithdrawStepper from "./WithdrawStepper";
const useStyles = makeStyles({

1
src-gui/src/renderer/components/modal/wallet/WithdrawStepper.tsx
View file

@ -1,5 +1,4 @@
import { Step, StepLabel, Stepper } from "@material-ui/core";
import { useAppSelector, useIsRpcEndpointBusy } from "store/hooks";
function getActiveStep(isPending: boolean, withdrawTxId: string | null) {
if (isPending) {

5
src-gui/src/renderer/components/modal/wallet/pages/AddressInputPage.tsx
View file

@ -1,8 +1,5 @@
import { useState } from "react";
import { Button, DialogActions, DialogContentText } from "@material-ui/core";
import { DialogContentText } from "@material-ui/core";
import BitcoinAddressTextField from "../../../inputs/BitcoinAddressTextField";
import WithdrawDialogContent from "../WithdrawDialogContent";
import IpcInvokeButton from "../../../IpcInvokeButton";
export default function AddressInputPage({
withdrawAddress,

5
src-gui/src/renderer/components/modal/wallet/pages/BitcoinWithdrawTxInMempoolPage.tsx
View file

@ -1,13 +1,10 @@
import { Button, DialogActions, DialogContentText } from "@material-ui/core";
import { 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 (
<>

7
src-gui/src/renderer/components/navigation/NavigationFooter.tsx
View file

@ -3,7 +3,6 @@ import GitHubIcon from "@material-ui/icons/GitHub";
import RedditIcon from "@material-ui/icons/Reddit";
import FundsLeftInWalletAlert from "../alert/FundsLeftInWalletAlert";
import MoneroWalletRpcUpdatingAlert from "../alert/MoneroWalletRpcUpdatingAlert";
import RpcStatusAlert from "../alert/RpcStatusAlert";
import UnfinishedSwapsAlert from "../alert/UnfinishedSwapsAlert";
import DiscordIcon from "../icons/DiscordIcon";
import LinkIconButton from "../icons/LinkIconButton";
@ -29,7 +28,11 @@ export default function NavigationFooter() {
<Box className={classes.outer}>
<FundsLeftInWalletAlert />
<UnfinishedSwapsAlert />
<RpcStatusAlert />
{
// TODO: Uncomment when we have implemented a way for the UI to be displayed before the context has been initialized
// <RpcStatusAlert />
}
<MoneroWalletRpcUpdatingAlert />
<Box className={classes.linksOuter}>
<LinkIconButton url="https://reddit.com/r/unstoppableswap">

4
src-gui/src/renderer/components/other/ScrollablePaperTextBox.tsx
View file

@ -1,9 +1,9 @@
import { Box, Divider, IconButton, Paper, Typography } from "@material-ui/core";
import { ReactNode, useRef } from "react";
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import { ReactNode, useRef } from "react";
import { VList, VListHandle } from "virtua";
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import { ExpandableSearchBox } from "./ExpandableSearchBox";
const MIN_HEIGHT = "10rem";

21
src-gui/src/renderer/components/other/Units.tsx
View file

@ -1,6 +1,6 @@
import { piconerosToXmr, satsToBtc } from "utils/conversionUtils";
import { Tooltip } from "@material-ui/core";
import { useAppSelector } from "store/hooks";
import { piconerosToXmr, satsToBtc } from "utils/conversionUtils";
type Amount = number | null | undefined;
@ -64,10 +64,27 @@ export function MoneroAmount({ amount }: { amount: Amount }) {
);
}
export function MoneroBitcoinExchangeRate({ rate }: { rate: Amount }) {
export function MoneroBitcoinExchangeRate(
state: { rate: Amount } | { satsAmount: number; piconeroAmount: number },
) {
if ("rate" in state) {
return (
<AmountWithUnit amount={state.rate} unit="BTC/XMR" fixedPrecision={8} />
);
}
const rate =
satsToBtc(state.satsAmount) / piconerosToXmr(state.piconeroAmount);
return <AmountWithUnit amount={rate} unit="BTC/XMR" fixedPrecision={8} />;
}
export function MoneroSatsExchangeRate({ rate }: { rate: Amount }) {
const btc = satsToBtc(rate);
return <AmountWithUnit amount={btc} unit="BTC/XMR" fixedPrecision={6} />;
}
export function SatsAmount({ amount }: { amount: Amount }) {
const btcAmount = amount == null ? null : satsToBtc(amount);
return <BitcoinAmount amount={btcAmount} />;

30
src-gui/src/renderer/components/pages/help/RpcControlBox.tsx
View file

@ -3,7 +3,7 @@ import FolderOpenIcon from "@material-ui/icons/FolderOpen";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import StopIcon from "@material-ui/icons/Stop";
import { RpcProcessStateType } from "models/rpcModel";
import IpcInvokeButton from "renderer/components/IpcInvokeButton";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { useAppSelector } from "store/hooks";
import InfoBox from "../../modal/swap/InfoBox";
import CliLogsBox from "../../other/RenderedCliLog";
@ -36,34 +36,34 @@ export default function RpcControlBox() {
}
additionalContent={
<Box className={classes.actionsOuter}>
<IpcInvokeButton
<PromiseInvokeButton
variant="contained"
ipcChannel="spawn-start-rpc"
ipcArgs={[]}
endIcon={<PlayArrowIcon />}
disabled={isRunning}
requiresRpc={false}
onClick={() => {
throw new Error("Not implemented");
}}
>
Start Daemon
</IpcInvokeButton>
<IpcInvokeButton
</PromiseInvokeButton>
<PromiseInvokeButton
variant="contained"
ipcChannel="stop-cli"
ipcArgs={[]}
endIcon={<StopIcon />}
disabled={!isRunning}
requiresRpc={false}
onClick={() => {
throw new Error("Not implemented");
}}
>
Stop Daemon
</IpcInvokeButton>
<IpcInvokeButton
ipcChannel="open-data-dir-in-file-explorer"
ipcArgs={[]}
</PromiseInvokeButton>
<PromiseInvokeButton
endIcon={<FolderOpenIcon />}
requiresRpc={false}
isIconButton
size="small"
tooltipTitle="Open the data directory of the Swap Daemon in your file explorer"
onClick={() => {
throw new Error("Not implemented");
}}
/>
</Box>
}

22
src-gui/src/renderer/components/pages/help/TorInfoBox.tsx
View file

@ -1,7 +1,7 @@
import { Box, makeStyles, Typography } from "@material-ui/core";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import StopIcon from "@material-ui/icons/Stop";
import IpcInvokeButton from "renderer/components/IpcInvokeButton";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { useAppSelector } from "store/hooks";
import InfoBox from "../../modal/swap/InfoBox";
import CliLogsBox from "../../other/RenderedCliLog";
@ -42,26 +42,26 @@ export default function TorInfoBox() {
}
additionalContent={
<Box className={classes.actionsOuter}>
<IpcInvokeButton
<PromiseInvokeButton
variant="contained"
disabled={isTorRunning}
ipcChannel="spawn-tor"
ipcArgs={[]}
endIcon={<PlayArrowIcon />}
requiresRpc={false}
onClick={() => {
throw new Error("Not implemented");
}}
>
Start Tor
</IpcInvokeButton>
<IpcInvokeButton
</PromiseInvokeButton>
<PromiseInvokeButton
variant="contained"
disabled={!isTorRunning}
ipcChannel="stop-tor"
ipcArgs={[]}
endIcon={<StopIcon />}
requiresRpc={false}
onClick={() => {
throw new Error("Not implemented");
}}
>
Stop Tor
</IpcInvokeButton>
</PromiseInvokeButton>
</Box>
}
icon={null}

4
src-gui/src/renderer/components/pages/history/HistoryPage.tsx
View file

@ -1,11 +1,11 @@
import { Typography } from "@material-ui/core";
import { useIsSwapRunning } from "store/hooks";
import { useAppSelector } from "store/hooks";
import SwapTxLockAlertsBox from "../../alert/SwapTxLockAlertsBox";
import SwapDialog from "../../modal/swap/SwapDialog";
import HistoryTable from "./table/HistoryTable";
export default function HistoryPage() {
const showDialog = useIsSwapRunning();
const showDialog = useAppSelector((state) => state.swap.state !== null);
return (
<>

35
src-gui/src/renderer/components/pages/history/table/HistoryRow.tsx
View file

@ -6,23 +6,14 @@ import {
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 { GetSwapInfoResponse } from "models/tauriModel";
import { useState } from "react";
import { PiconeroAmount, SatsAmount } from "../../../other/Units";
import HistoryRowActions from "./HistoryRowActions";
import HistoryRowExpanded from "./HistoryRowExpanded";
import { BitcoinAmount, MoneroAmount } from "../../../other/Units";
type HistoryRowProps = {
swap: GetSwapInfoResponse;
};
const useStyles = makeStyles((theme) => ({
amountTransferContainer: {
@ -43,17 +34,14 @@ function AmountTransfer({
return (
<Box className={classes.amountTransferContainer}>
<BitcoinAmount amount={btcAmount} />
<SatsAmount amount={btcAmount} />
<ArrowForwardIcon />
<MoneroAmount amount={xmrAmount} />
<PiconeroAmount amount={xmrAmount} />
</Box>
);
}
export default function HistoryRow({ swap }: HistoryRowProps) {
const btcAmount = getSwapBtcAmount(swap);
const xmrAmount = getSwapXmrAmount(swap);
export default function HistoryRow(swap: GetSwapInfoResponse) {
const [expanded, setExpanded] = useState(false);
return (
@ -64,13 +52,16 @@ export default function HistoryRow({ swap }: HistoryRowProps) {
{expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell>{swap.swap_id.substring(0, 5)}...</TableCell>
<TableCell>{swap.swap_id}</TableCell>
<TableCell>
<AmountTransfer xmrAmount={xmrAmount} btcAmount={btcAmount} />
<AmountTransfer
xmrAmount={swap.xmr_amount}
btcAmount={swap.btc_amount}
/>
</TableCell>
<TableCell>{getHumanReadableDbStateType(swap.state_name)}</TableCell>
<TableCell>{swap.state_name.toString()}</TableCell>
<TableCell>
<HistoryRowActions swap={swap} />
<HistoryRowActions {...swap} />
</TableCell>
</TableRow>

59
src-gui/src/renderer/components/pages/history/table/HistoryRowActions.tsx
View file

@ -1,68 +1,65 @@
import { Tooltip } from "@material-ui/core";
import Button, { ButtonProps } from "@material-ui/core/Button/Button";
import { ButtonProps } from "@material-ui/core/Button/Button";
import { green, red } from "@material-ui/core/colors";
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 } from "models/tauriModel";
import {
GetSwapInfoResponse,
SwapStateName,
isSwapStateNamePossiblyCancellableSwap,
isSwapStateNamePossiblyRefundableSwap,
} from "../../../../../models/rpcModel";
BobStateName,
GetSwapInfoResponseExt,
isBobStateNamePossiblyCancellableSwap,
isBobStateNamePossiblyRefundableSwap,
} from "models/tauriModelExt";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { resumeSwap } from "renderer/rpc";
export function SwapResumeButton({
swap,
...props
}: { swap: GetSwapInfoResponse } & ButtonProps) {
}: ButtonProps & { swap: GetSwapInfoResponse }) {
return (
<IpcInvokeButton
<PromiseInvokeButton
variant="contained"
color="primary"
disabled={swap.completed}
ipcChannel="spawn-resume-swap"
ipcArgs={[swap.swap_id]}
endIcon={<PlayArrowIcon />}
requiresRpc
onClick={() => resumeSwap(swap.swap_id)}
{...props}
>
Resume
</IpcInvokeButton>
</PromiseInvokeButton>
);
}
export function SwapCancelRefundButton({
swap,
...props
}: { swap: GetSwapInfoResponse } & ButtonProps) {
}: { swap: GetSwapInfoResponseExt } & ButtonProps) {
const cancelOrRefundable =
isSwapStateNamePossiblyCancellableSwap(swap.state_name) ||
isSwapStateNamePossiblyRefundableSwap(swap.state_name);
isBobStateNamePossiblyCancellableSwap(swap.state_name) ||
isBobStateNamePossiblyRefundableSwap(swap.state_name);
if (!cancelOrRefundable) {
return <></>;
}
return (
<IpcInvokeButton
ipcChannel="spawn-cancel-refund"
ipcArgs={[swap.swap_id]}
requiresRpc
<PromiseInvokeButton
displayErrorSnackbar={false}
{...props}
onClick={async () => {
// TODO: Implement this using the Tauri RPC
throw new Error("Not implemented");
}}
>
Attempt manual Cancel & Refund
</IpcInvokeButton>
</PromiseInvokeButton>
);
}
export default function HistoryRowActions({
swap,
}: {
swap: GetSwapInfoResponse;
}) {
if (swap.state_name === SwapStateName.XmrRedeemed) {
export default function HistoryRowActions(swap: GetSwapInfoResponse) {
if (swap.state_name === BobStateName.XmrRedeemed) {
return (
<Tooltip title="The swap is completed because you have redeemed the XMR">
<DoneIcon style={{ color: green[500] }} />
@ -70,7 +67,7 @@ export default function HistoryRowActions({
);
}
if (swap.state_name === SwapStateName.BtcRefunded) {
if (swap.state_name === BobStateName.BtcRefunded) {
return (
<Tooltip title="The swap is completed because your BTC have been refunded">
<DoneIcon style={{ color: green[500] }} />
@ -78,7 +75,9 @@ export default function HistoryRowActions({
);
}
if (swap.state_name === SwapStateName.BtcPunished) {
// TODO: Display a button here to attempt a cooperative redeem
// See this PR: https://github.com/UnstoppableSwap/unstoppableswap-gui/pull/212
if (swap.state_name === BobStateName.BtcPunished) {
return (
<Tooltip title="The swap is completed because you have been punished">
<ErrorIcon style={{ color: red[500] }} />

62
src-gui/src/renderer/components/pages/history/table/HistoryRowExpanded.tsx
View file

@ -8,24 +8,15 @@ import {
TableContainer,
TableRow,
} from "@material-ui/core";
import { getBitcoinTxExplorerUrl } from "utils/conversionUtils";
import { isTestnet } from "store/config";
import { GetSwapInfoResponse } from "models/tauriModel";
import {
getHumanReadableDbStateType,
getSwapBtcAmount,
getSwapExchangeRate,
getSwapTxFees,
getSwapXmrAmount,
GetSwapInfoResponse,
} from "../../../../../models/rpcModel";
import SwapLogFileOpenButton from "./SwapLogFileOpenButton";
import { SwapCancelRefundButton } from "./HistoryRowActions";
import { SwapMoneroRecoveryButton } from "./SwapMoneroRecoveryButton";
import {
BitcoinAmount,
MoneroAmount,
MoneroBitcoinExchangeRate,
PiconeroAmount,
SatsAmount,
} from "renderer/components/other/Units";
import { isTestnet } from "store/config";
import { getBitcoinTxExplorerUrl } from "utils/conversionUtils";
import SwapLogFileOpenButton from "./SwapLogFileOpenButton";
const useStyles = makeStyles((theme) => ({
outer: {
@ -47,12 +38,6 @@ export default function HistoryRowExpanded({
}) {
const classes = useStyles();
const { seller, start_date: startDate } = swap;
const btcAmount = getSwapBtcAmount(swap);
const xmrAmount = getSwapXmrAmount(swap);
const txFees = getSwapTxFees(swap);
const exchangeRate = getSwapExchangeRate(swap);
return (
<Box className={classes.outer}>
<TableContainer>
@ -60,7 +45,7 @@ export default function HistoryRowExpanded({
<TableBody>
<TableRow>
<TableCell>Started on</TableCell>
<TableCell>{startDate}</TableCell>
<TableCell>{swap.start_date}</TableCell>
</TableRow>
<TableRow>
<TableCell>Swap ID</TableCell>
@ -68,38 +53,39 @@ export default function HistoryRowExpanded({
</TableRow>
<TableRow>
<TableCell>State Name</TableCell>
<TableCell>
{getHumanReadableDbStateType(swap.state_name)}
</TableCell>
<TableCell>{swap.state_name}</TableCell>
</TableRow>
<TableRow>
<TableCell>Monero Amount</TableCell>
<TableCell>
<MoneroAmount amount={xmrAmount} />
<PiconeroAmount amount={swap.xmr_amount} />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Bitcoin Amount</TableCell>
<TableCell>
<BitcoinAmount amount={btcAmount} />
<SatsAmount amount={swap.btc_amount} />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Exchange Rate</TableCell>
<TableCell>
<MoneroBitcoinExchangeRate rate={exchangeRate} />
<MoneroBitcoinExchangeRate
satsAmount={swap.btc_amount}
piconeroAmount={swap.xmr_amount}
/>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Bitcoin Network Fees</TableCell>
<TableCell>
<BitcoinAmount amount={txFees} />
<SatsAmount amount={swap.tx_lock_fee} />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Provider Address</TableCell>
<TableCell>
<Box>{seller.addresses.join(", ")}</Box>
<Box>{swap.seller.addresses.join(", ")}</Box>
</TableCell>
</TableRow>
<TableRow>
@ -122,12 +108,16 @@ export default function HistoryRowExpanded({
variant="outlined"
size="small"
/>
<SwapCancelRefundButton swap={swap} variant="contained" size="small" />
<SwapMoneroRecoveryButton
swap={swap}
variant="contained"
size="small"
/>
{/*
// TOOD: reimplement these buttons using Tauri
<SwapCancelRefundButton swap={swap} variant="contained" size="small" />
<SwapMoneroRecoveryButton
swap={swap}
variant="contained"
size="small"
/>
*/}
</Box>
</Box>
);

9
src-gui/src/renderer/components/pages/history/table/HistoryTable.tsx
View file

@ -9,12 +9,7 @@ import {
TableHead,
TableRow,
} from "@material-ui/core";
import { sortBy } from "lodash";
import { parseDateString } from "utils/parseUtils";
import {
useAppSelector,
useSwapInfosSortedByDate,
} from "../../../../../store/hooks";
import { useSwapInfosSortedByDate } from "../../../../../store/hooks";
import HistoryRow from "./HistoryRow";
const useStyles = makeStyles((theme) => ({
@ -43,7 +38,7 @@ export default function HistoryTable() {
</TableHead>
<TableBody>
{swapSortedByDate.map((swap) => (
<HistoryRow swap={swap} key={swap.swap_id} />
<HistoryRow {...swap} key={swap.swap_id} />
))}
</TableBody>
</Table>

17
src-gui/src/renderer/components/pages/history/table/SwapLogFileOpenButton.tsx
View file

@ -1,4 +1,3 @@
import { ButtonProps } from "@material-ui/core/Button/Button";
import {
Button,
Dialog,
@ -6,9 +5,10 @@ import {
DialogContent,
DialogTitle,
} from "@material-ui/core";
import { useState } from "react";
import { ButtonProps } from "@material-ui/core/Button/Button";
import { CliLog } from "models/cliModel";
import IpcInvokeButton from "../../../IpcInvokeButton";
import { useState } from "react";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import CliLogsBox from "../../../other/RenderedCliLog";
export default function SwapLogFileOpenButton({
@ -19,16 +19,17 @@ export default function SwapLogFileOpenButton({
return (
<>
<IpcInvokeButton
ipcArgs={[swapId]}
ipcChannel="get-swap-logs"
<PromiseInvokeButton
onSuccess={(data) => {
setLogs(data as CliLog[]);
}}
onClick={async () => {
throw new Error("Not implemented");
}}
{...props}
>
view log
</IpcInvokeButton>
View log
</PromiseInvokeButton>
{logs && (
<Dialog open onClose={() => setLogs(null)} fullWidth maxWidth="lg">
<DialogTitle>Logs of swap {swapId}</DialogTitle>

31
src-gui/src/renderer/components/pages/history/table/SwapMoneroRecoveryButton.tsx
View file

@ -1,4 +1,3 @@
import { ButtonProps } from "@material-ui/core/Button/Button";
import {
Box,
Button,
@ -8,17 +7,17 @@ import {
DialogContentText,
Link,
} from "@material-ui/core";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { ButtonProps } from "@material-ui/core/Button/Button";
import { GetSwapInfoArgs } from "models/tauriModel";
import { rpcResetMoneroRecoveryKeys } from "store/features/rpcSlice";
import {
GetSwapInfoResponse,
isSwapMoneroRecoverable,
} from "../../../../../models/rpcModel";
import IpcInvokeButton from "../../../IpcInvokeButton";
import { useAppDispatch, useAppSelector } from "store/hooks";
import DialogHeader from "../../../modal/DialogHeader";
import ScrollablePaperTextBox from "../../../other/ScrollablePaperTextBox";
function MoneroRecoveryKeysDialog({ swap }: { swap: GetSwapInfoResponse }) {
function MoneroRecoveryKeysDialog() {
// TODO: Reimplement this using the new Tauri API
return null;
const dispatch = useAppDispatch();
const keys = useAppSelector((s) => s.rpc.state.moneroRecovery);
@ -96,24 +95,28 @@ function MoneroRecoveryKeysDialog({ swap }: { swap: GetSwapInfoResponse }) {
export function SwapMoneroRecoveryButton({
swap,
...props
}: { swap: GetSwapInfoResponse } & ButtonProps) {
}: { swap: GetSwapInfoArgs } & ButtonProps) {
return <> </>;
/* TODO: Reimplement this using the new Tauri API
const isRecoverable = isSwapMoneroRecoverable(swap.state_name);
if (!isRecoverable) {
return <></>;
}
return (
<>
<IpcInvokeButton
ipcChannel="spawn-monero-recovery"
ipcArgs={[swap.swap_id]}
requiresRpc
<PromiseInvokeButton
onClick={async () => {
throw new Error("Not implemented");
}}
{...props}
>
Display Monero Recovery Keys
</IpcInvokeButton>
</PromiseInvokeButton>
<MoneroRecoveryKeysDialog swap={swap} />
</>
);
*/
}

29
src-gui/src/renderer/components/pages/swap/SwapWidget.tsx
View file

@ -1,27 +1,26 @@
import { ChangeEvent, useEffect, useState } from "react";
import {
makeStyles,
Box,
Paper,
Typography,
TextField,
LinearProgress,
Fab,
LinearProgress,
makeStyles,
Paper,
TextField,
Typography,
} 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 { ChangeEvent, useEffect, useState } from "react";
import { useAppSelector } from "store/hooks";
import { satsToBtc } from "utils/conversionUtils";
import {
ListSellersDialogOpenButton,
ProviderSubmitDialogOpenButton,
} from "../../modal/provider/ProviderListDialog";
import ProviderSelect from "../../modal/provider/ProviderSelect";
import SwapDialog from "../../modal/swap/SwapDialog";
// After RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN failed reconnection attempts we can assume the public registry is down
const RECONNECTION_ATTEMPTS_UNTIL_ASSUME_DOWN = 1;
@ -84,9 +83,7 @@ function HasProviderSwapWidget({
}) {
const classes = useStyles();
const forceShowDialog = useAppSelector((state) =>
isSwapState(state.swap.state),
);
const forceShowDialog = useAppSelector((state) => state.swap.state !== null);
const [showDialog, setShowDialog] = useState(false);
const [btcFieldValue, setBtcFieldValue] = useState<number | string>(
satsToBtc(selectedProvider.minSwapAmount),
@ -177,9 +174,7 @@ function HasProviderSwapWidget({
}
function HasNoProvidersSwapWidget() {
const forceShowDialog = useAppSelector((state) =>
isSwapState(state.swap.state),
);
const forceShowDialog = useAppSelector((state) => state.swap.state !== null);
const isPublicRegistryDown = useAppSelector((state) =>
isRegistryDown(
state.providers.registry.failedReconnectAttemptsSinceLastSuccess,

4
src-gui/src/renderer/components/pages/wallet/WalletRefreshButton.tsx
View file

@ -1,8 +1,6 @@
import { Button, CircularProgress, IconButton } from "@material-ui/core";
import RefreshIcon from "@material-ui/icons/Refresh";
import IpcInvokeButton from "../../IpcInvokeButton";
import { checkBitcoinBalance } from "renderer/rpc";
import PromiseInvokeButton from "renderer/components/PromiseInvokeButton";
import { checkBitcoinBalance } from "renderer/rpc";
export default function WalletRefreshButton() {
return (

11
src-gui/src/renderer/index.tsx
View file

@ -1,4 +1,4 @@
import { render } from "react-dom";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { setAlerts } from "store/features/alertsSlice";
import { setRegistryProviders } from "store/features/providersSlice";
@ -14,16 +14,17 @@ import App from "./components/App";
import { checkBitcoinBalance, getRawSwapInfos } from "./rpc";
import { store } from "./store/storeRenderer";
setTimeout(() => {
setInterval(() => {
checkBitcoinBalance();
getRawSwapInfos();
}, 10000);
}, 5000);
render(
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root"),
);
async function fetchInitialData() {

84
src-gui/src/renderer/rpc.ts
View file

@ -1,31 +1,89 @@
import { invoke } from "@tauri-apps/api/core";
import { store } from "./store/storeRenderer";
import { invoke as invokeUnsafe } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import {
BalanceArgs,
BalanceResponse,
BuyXmrArgs,
BuyXmrResponse,
GetSwapInfoResponse,
ResumeSwapArgs,
ResumeSwapResponse,
SuspendCurrentSwapResponse,
TauriSwapProgressEventWrapper,
WithdrawBtcArgs,
WithdrawBtcResponse,
} from "models/tauriModel";
import { rpcSetBalance, rpcSetSwapInfo } from "store/features/rpcSlice";
import { swapTauriEventReceived } from "store/features/swapSlice";
import { store } from "./store/storeRenderer";
import { Provider } from "models/apiModel";
import { providerToConcatenatedMultiAddr } from "utils/multiAddrUtils";
listen<TauriSwapProgressEventWrapper>("swap-progress-update", (event) => {
console.log("Received swap progress event", event.payload);
store.dispatch(swapTauriEventReceived(event.payload));
});
async function invoke<ARGS, RESPONSE>(
command: string,
args: ARGS,
): Promise<RESPONSE> {
return invokeUnsafe(command, {
args: args as Record<string, unknown>,
}) as Promise<RESPONSE>;
}
async function invokeNoArgs<RESPONSE>(command: string): Promise<RESPONSE> {
return invokeUnsafe(command, {}) as Promise<RESPONSE>;
}
export async function checkBitcoinBalance() {
const response = (await invoke("get_balance")) as {
balance: number;
};
const response = await invoke<BalanceArgs, BalanceResponse>("get_balance", {
force_refresh: true,
});
store.dispatch(rpcSetBalance(response.balance));
}
export async function getRawSwapInfos() {
const response = await invoke("get_swap_infos_all");
const response =
await invokeNoArgs<GetSwapInfoResponse[]>("get_swap_infos_all");
(response as any[]).forEach((info) => store.dispatch(rpcSetSwapInfo(info)));
response.forEach((swapInfo) => {
store.dispatch(rpcSetSwapInfo(swapInfo));
});
}
export async function withdrawBtc(address: string): Promise<string> {
const response = (await invoke("withdraw_btc", {
args: {
const response = await invoke<WithdrawBtcArgs, WithdrawBtcResponse>(
"withdraw_btc",
{
address,
amount: null,
},
})) as {
txid: string;
amount: number;
};
);
return response.txid;
}
export async function buyXmr(
seller: Provider,
bitcoin_change_address: string,
monero_receive_address: string,
) {
await invoke<BuyXmrArgs, BuyXmrResponse>("buy_xmr", {
seller: providerToConcatenatedMultiAddr(seller),
bitcoin_change_address,
monero_receive_address,
});
}
export async function resumeSwap(swapId: string) {
await invoke<ResumeSwapArgs, ResumeSwapResponse>("resume_swap", {
swap_id: swapId,
});
}
export async function suspendCurrentSwap() {
await invokeNoArgs<SuspendCurrentSwapResponse>("suspend_current_swap");
}