Swap the order of LBC vs BTC as the entry point

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",
+  "Enter desired %lbc%": "Enter desired %lbc%",
-  "Credits": "Credits",
+  "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 amount needs to be higher": "The amount needs to be higher",
-  "The BTC amount is too high": "The BTC amount is too high",
+  "The amount is too high": "The amount is too high",
   "Confirm Swap Removal": "Confirm Swap Removal",
   "Remove Swap": "Remove Swap",
   "Remove %address%?": "Remove %address%?",

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 [btc, setBtc] = React.useState(0);
-  const [btcError, setBtcError] = React.useState();
+  const [lbcError, setLbcError] = React.useState();
-  const [lbc, setLbc] = React.useState(0);
+  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) {
+  function formatCoinAmountString(amount) {
-    return lbc === 0 ? '---' : lbc.toLocaleString(undefined, { minimumFractionDigits: 8 });
+    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) {
+    if (isNaN(lbc) || lbc === 0) {
-      setLbc(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) {
+    if (lbc < LBC_MIN) {
-      msg = __('The BTC amount needs to be higher');
+      msg = __('The amount needs to be higher');
-    } else if (btc > BTC_MAX) {
+    } else if (lbc > LBC_MAX) {
-      msg = __('The BTC amount is too high');
+      msg = __('The amount is too high');
     }
-    setBtcError(msg);
+    setLbcError(msg);
-  }, [btc]);
+  }, [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),
+      lbc_satoshi_requested: parseInt(lbc * BTC_SATOSHIS + 0.5),
-      btc_satoshi_provided: parseInt(btc * BTC_SATOSHIS),
+      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) {
         <div className="section">
           <FormField
             autoFocus
-            label={__('Bitcoin')}
+            label={
+              <I18nMessage
+                tokens={{
+                  lbc: <LbcSymbol size={22} />,
+                }}
+              >
+                Enter desired %lbc%
+              </I18nMessage>
+            }
             type="number"
-            name="btc"
+            name="lbc"
             className="form-field--price-amount--auto"
             affixClass="form-field--fix-no-height"
-            max={BTC_MAX}
+            max={LBC_MAX}
-            min={BTC_MIN}
+            min={LBC_MIN}
             step={1 / BTC_SATOSHIS}
             placeholder="12.34"
-            value={btc}
+            value={lbc}
-            error={btcError}
+            error={lbcError}
             disabled={isSwapping}
-            onChange={(event) => handleBtcChange(event)}
+            onChange={(event) => setLbc(parseFloat(event.target.value))}
           />
           {getGap()}
-          <div className="confirm__label">{__('Credits')}</div>
+          <div className="confirm__label">{__('Estimated BTC price')}</div>
           <div className="confirm__value">
-            <LbcSymbol postfix={formatLbcString(lbc)} size={22} />
+            {formatCoinAmountString(btc)} {btc === 0 ? '' : 'BTC'}
             {isFetchingRate && <Spinner type="small" />}
           </div>
         </div>
@@ -507,7 +513,7 @@ function WalletSwap(props: Props) {
           autoFocus
           onClick={handleStartSwap}
           button="primary"
-          disabled={isSwapping || isNaN(btc) || btc === 0 || lbc === 0 || btcError}
+          disabled={isSwapping || isNaN(btc) || btc === 0 || lbc === 0 || lbcError}
           label={isSwapping ? __('Processing...') : __('Start Swap')}
         />
         {!isSwapping && coinSwaps.length !== 0 && (