Skip to content

Commit

Permalink
feat(issue #2): add usd entry option
Browse files Browse the repository at this point in the history
  • Loading branch information
@danwag06
danwag06 committed Oct 10, 2023
1 parent ddb8980 commit 4701278
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 20 deletions.
5 changes: 5 additions & 0 deletions src/assets/switch-asset.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 108 additions & 20 deletions src/pages/BsvWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { useNavigate } from "react-router-dom";
import { ThirdPartyAppRequestData } from "../App";
import { useBsv } from "../hooks/useBsv";
import { useOrds } from "../hooks/useOrds";
import switchAsset from "../assets/switch-asset.svg";

const MiddleContainer = styled.div<ColorThemeProps>`
display: flex;
Expand Down Expand Up @@ -78,7 +79,15 @@ const Icon = styled.img<{ size?: string }>`
margin: 0 0.5rem 0 0;
`;

const InputAmountWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
`;

type PageState = "main" | "receive" | "send";
type AmountType = "bsv" | "usd";

export type BsvWalletProps = {
thirdPartyAppRequestData: ThirdPartyAppRequestData | undefined;
Expand All @@ -91,9 +100,11 @@ export const BsvWallet = (props: BsvWalletProps) => {
const { theme } = useTheme();
const { setSelected } = useBottomMenu();
const [pageState, setPageState] = useState<PageState>("main");
const [satSendAmount, setSatSendAmount] = useState(0);
const [satSendAmount, setSatSendAmount] = useState<number | null>(null);
const [usdSendAmount, setUsdSendAmount] = useState<number | null>(null);
const [receiveAddress, setReceiveAddress] = useState("");
const [passwordConfirm, setPasswordConfirm] = useState("");
const [amountType, setAmountType] = useState<AmountType>("bsv");
const [successTxId, setSuccessTxId] = useState("");
const { addSnackbar, message } = useSnackbar();
const { ordPubKey } = useOrds();
Expand Down Expand Up @@ -143,7 +154,9 @@ export const BsvWallet = (props: BsvWalletProps) => {
}, [successTxId, message, getBsvBalance, bsvAddress]);

const resetSendState = () => {
setSatSendAmount(0);
setSatSendAmount(null);
setUsdSendAmount(null);
setAmountType("bsv");
setReceiveAddress("");
setPasswordConfirm("");
setSuccessTxId("");
Expand All @@ -156,6 +169,16 @@ export const BsvWallet = (props: BsvWalletProps) => {
});
};

const toggleAmountType = () => {
if (amountType === "bsv") {
setAmountType("usd");
} else {
setAmountType("bsv");
}
setUsdSendAmount(null);
setSatSendAmount(null);
};

const handleSendBsv = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsProcessing(true);
Expand All @@ -169,7 +192,7 @@ export const BsvWallet = (props: BsvWalletProps) => {
return;
}

if (!satSendAmount) {
if (!satSendAmount && !usdSendAmount) {
addSnackbar("You must enter an amount.", "info");
setIsProcessing(false);
return;
Expand All @@ -181,8 +204,15 @@ export const BsvWallet = (props: BsvWalletProps) => {
return;
}

let satAmount = satSendAmount ?? 0;
if (amountType === "usd" && usdSendAmount) {
satAmount = Math.ceil(
(usdSendAmount / exchangeRate) * BSV_DECIMAL_CONVERSION
);
}

const sendRes = await sendBsv(
[{ address: receiveAddress, satAmount: satSendAmount }],
[{ address: receiveAddress, satAmount }],
passwordConfirm
);
if (!sendRes.txid || sendRes.error) {
Expand All @@ -194,6 +224,7 @@ export const BsvWallet = (props: BsvWalletProps) => {
: "An unknown error has occurred! Try again.";

addSnackbar(message, "error");
setPasswordConfirm("");
return;
}

Expand All @@ -205,6 +236,30 @@ export const BsvWallet = (props: BsvWalletProps) => {
setSatSendAmount(Math.round(bsvBalance * BSV_DECIMAL_CONVERSION));
};

useEffect(() => {
const calcValue = () => {
return amountType === "bsv"
? satSendAmount
? satSendAmount / BSV_DECIMAL_CONVERSION
: undefined
: amountType === "usd"
? usdSendAmount
? usdSendAmount
: undefined
: undefined;
};

calcValue();
}, [satSendAmount, usdSendAmount, amountType]);

const getLabel = () => {
return amountType === "bsv" && satSendAmount
? `Send ${(satSendAmount / BSV_DECIMAL_CONVERSION).toFixed(8)}`
: amountType === "usd" && usdSendAmount
? `Send ${formatUSD(usdSendAmount)}`
: "Enter Send Details";
};

const formatBalance = (number: number) => {
// Convert the number to string with fixed 8 decimal places
const numStr = number.toFixed(8);
Expand Down Expand Up @@ -307,24 +362,56 @@ export const BsvWallet = (props: BsvWalletProps) => {
onChange={(e) => setReceiveAddress(e.target.value)}
value={receiveAddress}
/>
<Input
theme={theme}
placeholder="Enter BSV Amount"
type="number"
step="0.00000001"
value={
satSendAmount ? satSendAmount / BSV_DECIMAL_CONVERSION : undefined
}
onChange={(e) =>
setSatSendAmount(
Math.round(Number(e.target.value) * BSV_DECIMAL_CONVERSION)
)
}
/>
<InputAmountWrapper>
<Input
theme={theme}
placeholder={
amountType === "bsv" ? "Enter BSV Amount" : "Enter USD Amount"
}
type="number"
step="0.00000001"
value={
satSendAmount !== null && satSendAmount !== undefined
? satSendAmount / BSV_DECIMAL_CONVERSION
: usdSendAmount !== null && usdSendAmount !== undefined
? usdSendAmount
: ""
}
onChange={(e) => {
const inputValue = e.target.value;

// Check if the input is empty and if so, set the state to null
if (inputValue === "") {
setSatSendAmount(null);
setUsdSendAmount(null);
} else {
// Existing logic for setting state
if (amountType === "bsv") {
setSatSendAmount(
Math.round(Number(inputValue) * BSV_DECIMAL_CONVERSION)
);
} else {
setUsdSendAmount(Number(inputValue));
}
}
}}
/>
<Icon
src={switchAsset}
size="1rem"
style={{
position: "absolute",
right: "2.25rem",
cursor: "pointer",
}}
onClick={toggleAmountType}
/>
</InputAmountWrapper>
<Input
theme={theme}
placeholder="Enter Wallet Password"
type="password"
value={passwordConfirm}
onChange={(e) => setPasswordConfirm(e.target.value)}
/>
<Text theme={theme} style={{ margin: "3rem 0 1rem" }}>
Expand All @@ -333,8 +420,9 @@ export const BsvWallet = (props: BsvWalletProps) => {
<Button
theme={theme}
type="primary"
label="Send BSV"
disabled={isProcessing}
label={getLabel()}
disabled={isProcessing || (!usdSendAmount && !satSendAmount)}
isSubmit
/>
</FormContainer>
</ConfirmContent>
Expand Down

0 comments on commit 4701278

Please sign in to comment.