diff --git a/static/app-strings.json b/static/app-strings.json index 0c737917f..246f67980 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1731,8 +1731,8 @@ "You will have to switch to the %desktop_app% or %odysee% in the near future. Your existing login details will work on %odysee% and all of your %credits% and other settings will be there.": "You will have to switch to the %desktop_app% or %odysee% in the near future. Your existing login details will work on %odysee% and all of your %credits% and other settings will be there.", "Swap": "Swap", "Swap Crypto": "Swap Crypto", - "Bitcoin": "Bitcoin", - "Credits": "Credits", + "Enter desired %lbc%": "Enter desired %lbc%", + "Estimated BTC price": "Estimated BTC price", "Start Swap": "Start Swap", "To": "To", "Receiving": "Receiving", @@ -1757,8 +1757,8 @@ "Failed to query swap status.": "Failed to query swap status.", "The system is currently down. Come back later.": "The system is currently down. Come back later.", "Unable to obtain exchange rate. Try again later.": "Unable to obtain exchange rate. Try again later.", - "The BTC amount needs to be higher": "The BTC amount needs to be higher", - "The BTC amount is too high": "The BTC amount is too high", + "The amount needs to be higher": "The amount needs to be higher", + "The amount is too high": "The amount is too high", "Confirm Swap Removal": "Confirm Swap Removal", "Remove Swap": "Remove Swap", "Remove %address%?": "Remove %address%?", diff --git a/ui/component/walletSwap/view.jsx b/ui/component/walletSwap/view.jsx index 8de0b914f..16cbcab8a 100644 --- a/ui/component/walletSwap/view.jsx +++ b/ui/component/walletSwap/view.jsx @@ -78,9 +78,9 @@ function WalletSwap(props: Props) { queryCoinSwapStatus, } = props; - const [btc, setBtc] = usePersistedState('swap-btc-amount', 0.001); - const [btcError, setBtcError] = React.useState(); - const [lbc, setLbc] = React.useState(0); + const [btc, setBtc] = React.useState(0); + const [lbcError, setLbcError] = React.useState(); + const [lbc, setLbc] = usePersistedState('swap-desired-lbc', LBC_MIN); const [action, setAction] = React.useState(ACTION_MAIN); const [nag, setNag] = React.useState(null); const [showQr, setShowQr] = React.useState(false); @@ -93,8 +93,8 @@ function WalletSwap(props: Props) { const [lastStatusQuery, setLastStatusQuery] = React.useState(); const { goBack } = useHistory(); - function formatLbcString(lbc) { - return lbc === 0 ? '---' : lbc.toLocaleString(undefined, { minimumFractionDigits: 8 }); + function formatCoinAmountString(amount) { + return amount === 0 ? '---' : amount.toLocaleString(undefined, { minimumFractionDigits: 8 }); } function returnToMainAction() { @@ -118,10 +118,10 @@ function WalletSwap(props: Props) { } }, [receiveAddress, getNewAddress, checkAddressIsMine]); - // Get 'btc/rate' + // Get 'btc/rate' and calculate required BTC. React.useEffect(() => { - if (isNaN(btc) || btc === 0) { - setLbc(0); + if (isNaN(lbc) || lbc === 0) { + setBtc(0); return; } @@ -131,17 +131,17 @@ function WalletSwap(props: Props) { Lbryio.call('btc', 'rate', { satoshi: BTC_SATOSHIS }) .then((rate) => { setIsFetchingRate(false); - setLbc((btc * BTC_SATOSHIS) / Math.round(BTC_SATOSHIS * rate)); + setBtc((lbc * Math.round(BTC_SATOSHIS * rate)) / BTC_SATOSHIS); }) .catch(() => { setIsFetchingRate(false); - setLbc(0); + setBtc(0); setNag({ msg: NAG_RATE_CALL_FAILED, type: 'error' }); }); }, DEBOUNCE_BTC_CHANGE_MS); return () => clearTimeout(timer); - }, [btc]); + }, [lbc]); // Resolve 'swap' with the latest info from 'coinSwaps' React.useEffect(() => { @@ -209,16 +209,16 @@ function WalletSwap(props: Props) { } }, [swap, coinSwaps]); - // Validate entered BTC + // Validate entered LBC React.useEffect(() => { let msg; - if (btc < BTC_MIN) { - msg = __('The BTC amount needs to be higher'); - } else if (btc > BTC_MAX) { - msg = __('The BTC amount is too high'); + if (lbc < LBC_MIN) { + msg = __('The amount needs to be higher'); + } else if (lbc > LBC_MAX) { + msg = __('The amount is too high'); } - setBtcError(msg); - }, [btc]); + setLbcError(msg); + }, [lbc]); // 'Refresh' button feedback React.useEffect(() => { @@ -282,7 +282,7 @@ function WalletSwap(props: Props) { function getLbcAmountStrForSwap(swap) { if (swap && swap.lbcAmount) { - return formatLbcString(swap.lbcAmount); + return formatCoinAmountString(swap.lbcAmount); } return '---'; } @@ -293,17 +293,20 @@ function WalletSwap(props: Props) { setNag(null); Lbryio.call('btc', 'swap', { - lbc_satoshi_requested: parseInt(lbc * BTC_SATOSHIS), - btc_satoshi_provided: parseInt(btc * BTC_SATOSHIS), + lbc_satoshi_requested: parseInt(lbc * BTC_SATOSHIS + 0.5), + btc_satoshi_provided: parseInt(btc * BTC_SATOSHIS + 0.5), pay_to_wallet_address: receiveAddress, }) .then((response) => { + const btcAmount = response.Charge.data.pricing['bitcoin'].amount; + const rate = response.Exchange.rate; + const swap = { chargeCode: response.Exchange.charge_code, coins: Object.keys(response.Charge.data.addresses), sendAddresses: response.Charge.data.addresses, sendAmounts: response.Charge.data.pricing, - lbcAmount: lbc, + lbcAmount: (btcAmount * BTC_SATOSHIS) / rate, }; setSwap({ ...swap }); @@ -315,11 +318,6 @@ function WalletSwap(props: Props) { }); } - function handleBtcChange(event: SyntheticInputEvent<*>) { - const btc = parseFloat(event.target.value); - setBtc(btc); - } - function handleViewPastSwaps() { setAction(ACTION_PAST_SWAPS); setNag(null); @@ -480,24 +478,32 @@ function WalletSwap(props: Props) {