+
+
(undefined);
const [altpaymentSocket, setAltpaymentSocket] = useState(undefined);
- const [useAltpayment, setUseAltpayment] = useState(false);
+ const [useAltpayment, setUseAltpayment] = useState(() => parseAltpayment(altpayment).autoStart);
const [coins, setCoins] = useState([]);
const [loadingPair, setLoadingPair] = useState(false);
const [coinPair, setCoinPair] = useState();
@@ -124,8 +125,19 @@ export const PayButton = ({
getCurrencyTypeFromAddress(to),
);
+ const altpaymentSocketRef = useRef(undefined);
+ useEffect(() => {
+ altpaymentSocketRef.current = altpaymentSocket;
+ }, [altpaymentSocket]);
+ const disconnectAltpaymentSocket = useCallback(() => {
+ if (altpaymentSocketRef.current !== undefined) {
+ altpaymentSocketRef.current.disconnect();
+ altpaymentSocketRef.current = undefined;
+ }
+ setAltpaymentSocket(undefined);
+ }, []);
useEffect(() => {
priceRef.current = price;
}, [price]);
@@ -251,11 +263,28 @@ export const PayButton = ({
}, []);
+ const resetAltpaymentState = useCallback(() => {
+ setUseAltpayment(parseAltpayment(altpayment).autoStart);
+ setCoins([]);
+ setCoinPair(undefined);
+ setLoadingPair(false);
+ setLoadingShift(false);
+ setAltpaymentShift(undefined);
+ setAltpaymentError(undefined);
+ disconnectAltpaymentSocket();
+ }, [altpayment, disconnectAltpaymentSocket]);
+
const handleCloseDialog = (success?: boolean, paymentId?: string): void => {
if (onClose !== undefined) onClose(success, paymentId);
setDialogOpen(false);
};
+ useEffect(() => {
+ if (!dialogOpen) {
+ resetAltpaymentState();
+ }
+ }, [dialogOpen, resetAltpaymentState]);
+
useEffect(() => {
setAmount(initialAmount);
}, [initialAmount]);
@@ -288,56 +317,66 @@ export const PayButton = ({
}, [to]);
useEffect(() => {
- if (dialogOpen === false) {
- return
+ if (!dialogOpen) {
+ return;
}
+
+ let cancelled = false;
+
(async () => {
- if (txsSocket === undefined) {
- const expectedAmount = currencyObj ? currencyObj?.float : undefined
- await setupChronikWebSocket({
- address: to,
- txsSocket,
- apiBaseUrl,
- wsBaseUrl,
- setTxsSocket,
- setNewTxs,
- setDialogOpen,
- checkSuccessInfo: {
- currency,
- price,
- randomSatoshis: randomSatoshis ?? false,
- disablePaymentId,
- expectedAmount,
- expectedOpReturn: opReturn,
- expectedPaymentId: paymentId,
- currencyObj,
- donationRate
+ if (txsSocket === undefined) {
+ const expectedAmount = currencyObj ? currencyObj?.float : undefined
+ await setupChronikWebSocket({
+ address: to,
+ txsSocket,
+ apiBaseUrl,
+ wsBaseUrl,
+ setTxsSocket,
+ setNewTxs,
+ setDialogOpen,
+ checkSuccessInfo: {
+ currency,
+ price,
+ randomSatoshis: randomSatoshis ?? false,
+ disablePaymentId,
+ expectedAmount,
+ expectedOpReturn: opReturn,
+ expectedPaymentId: paymentId,
+ currencyObj,
+ donationRate
+ }
+ })
+ }
+ if (cancelled || !useAltpayment) {
+ return
+ }
+ if (altpaymentSocketRef.current === undefined) {
+ await setupAltpaymentSocket({
+ addressType,
+ altpaymentSocket: altpaymentSocketRef.current,
+ wsBaseUrl,
+ setAltpaymentSocket: (socket: Socket | undefined) => {
+ altpaymentSocketRef.current = socket
+ setAltpaymentSocket(socket)
+ },
+ setCoins,
+ setCoinPair,
+ setLoadingPair,
+ setAltpaymentShift,
+ setLoadingShift,
+ setAltpaymentError,
+ })
+ if (cancelled) {
+ disconnectAltpaymentSocket()
}
- })
- }
- if (altpaymentSocket === undefined && useAltpayment) {
- await setupAltpaymentSocket({
- addressType,
- altpaymentSocket,
- wsBaseUrl,
- setAltpaymentSocket,
- setCoins,
- setCoinPair,
- setLoadingPair,
- setAltpaymentShift,
- setLoadingShift,
- setAltpaymentError,
- })
- }
+ }
})()
return () => {
- if (altpaymentSocket !== undefined) {
- altpaymentSocket.disconnect();
- setAltpaymentSocket(undefined);
- }
+ cancelled = true
+ disconnectAltpaymentSocket()
}
- }, [dialogOpen, useAltpayment]);
+ }, [dialogOpen, useAltpayment, disconnectAltpaymentSocket]);
useEffect(() => {
if (initialAmount != null && currency) {
@@ -435,7 +474,7 @@ export const PayButton = ({
wsBaseUrl={wsBaseUrl}
apiBaseUrl={apiBaseUrl}
hoverText={hoverText}
- disableAltpayment={disableAltpayment}
+ altpayment={altpayment}
contributionOffset={contributionOffset}
hideSendButton={hideSendButton}
autoClose={autoClose}
diff --git a/react/lib/components/PaymentDialog/PaymentDialog.tsx b/react/lib/components/PaymentDialog/PaymentDialog.tsx
index f4d868b5..1301722a 100644
--- a/react/lib/components/PaymentDialog/PaymentDialog.tsx
+++ b/react/lib/components/PaymentDialog/PaymentDialog.tsx
@@ -36,7 +36,7 @@ export interface PaymentDialogProps extends ButtonProps {
onTransaction?: (transaction: Transaction) => void;
wsBaseUrl?: string;
apiBaseUrl?: string;
- disableAltpayment?: boolean;
+ altpayment?: string | boolean;
contributionOffset?: number;
hideSendButton?: boolean;
useAltpayment: boolean
@@ -98,7 +98,7 @@ export const PaymentDialog = ({
wsBaseUrl,
apiBaseUrl,
hoverText,
- disableAltpayment,
+ altpayment,
contributionOffset,
hideSendButton,
autoClose = true,
@@ -231,7 +231,7 @@ export const PaymentDialog = ({
wsBaseUrl={wsBaseUrl}
apiBaseUrl={apiBaseUrl}
hoverText={hoverText}
- disableAltpayment={disableAltpayment}
+ altpayment={altpayment}
contributionOffset={contributionOffset}
hideSendButton={hideSendButton}
useAltpayment={useAltpayment}
diff --git a/react/lib/components/Widget/AltpaymentWidget.tsx b/react/lib/components/Widget/AltpaymentWidget.tsx
index 3dcd3f8a..e28719a8 100644
--- a/react/lib/components/Widget/AltpaymentWidget.tsx
+++ b/react/lib/components/Widget/AltpaymentWidget.tsx
@@ -1,5 +1,5 @@
-import React, { Fragment, useEffect, useState } from 'react'
-import { TextField, Select, MenuItem, InputLabel, FormControl } from '@mui/material'
+import React, { Fragment, useEffect, useRef, useState } from 'react'
+import { TextField, Select, MenuItem, InputLabel, FormControl, Box, CircularProgress } from '@mui/material'
import { styled } from '@mui/material/styles'
import { resolveNumber, CryptoCurrency, DECIMALS } from '../../util'
@@ -25,6 +25,7 @@ interface AltpaymentProps {
coinPair?: AltpaymentPair;
setCoinPair: Function;
altpaymentEditable: boolean;
+ preselectedCoin?: string;
animation?: animation;
addressType: CryptoCurrency;
to: string;
@@ -49,6 +50,7 @@ export const AltpaymentWidget: React.FunctionComponent = props
coinPair,
setCoinPair,
altpaymentEditable,
+ preselectedCoin,
animation,
addressType,
thisAmount,
@@ -65,6 +67,65 @@ export const AltpaymentWidget: React.FunctionComponent = props
const [selectedCoinNetwork, setSelectedCoinNetwork] = useState(undefined);
const [pairAmountFixedDecimals, setPairAmountFixedDecimals] = useState(undefined);
const [pairAmount, setPairAmount] = useState(undefined);
+ const autoRateRequestedRef = useRef(false);
+ const autoQuoteRequestedRef = useRef(false);
+ const prevAltpaymentSocketRef = useRef(undefined);
+
+ const getDepositDecimals = (
+ coin: AltpaymentCoin,
+ network: string,
+ pair: AltpaymentPair,
+ ): number => {
+ const networkTokenDetails = coin.tokenDetails?.[network]
+ if (networkTokenDetails?.decimals !== undefined) {
+ return networkTokenDetails.decimals
+ }
+ const minFraction = pair.min.split('.')[1]
+ if (minFraction !== undefined) {
+ return minFraction.length
+ }
+ return DECIMALS[coin.coin] ?? 8
+ }
+
+ const computeDepositAmountFromSettle = (): string | undefined => {
+ if (!coinPair || !selectedCoin || !selectedCoinNetwork || thisAmount == null || thisAmount === '') {
+ return undefined
+ }
+ const settleAmount = +thisAmount
+ if (Number.isNaN(settleAmount) || settleAmount <= 0) {
+ return undefined
+ }
+ const decimals = getDepositDecimals(selectedCoin, selectedCoinNetwork, coinPair)
+ return resolveNumber(settleAmount / +coinPair.rate).toFixed(decimals)
+ }
+
+ useEffect(() => {
+ if (altpaymentSocket === undefined) {
+ autoRateRequestedRef.current = false
+ autoQuoteRequestedRef.current = false
+ prevAltpaymentSocketRef.current = undefined
+ return
+ }
+ if (altpaymentSocket !== prevAltpaymentSocketRef.current) {
+ autoRateRequestedRef.current = false
+ autoQuoteRequestedRef.current = false
+ setSelectedCoin(undefined)
+ setSelectedCoinNetwork(undefined)
+ setPairAmount(undefined)
+ setPairAmountFixedDecimals(undefined)
+ prevAltpaymentSocketRef.current = altpaymentSocket
+ }
+ }, [altpaymentSocket])
+
+ useEffect(() => {
+ if (preselectedCoin && coins.length > 0 && selectedCoin === undefined) {
+ const coin = coins.find(c => c.coin === preselectedCoin)
+ if (coin) {
+ setSelectedCoin(coin)
+ setSelectedCoinNetwork(coin.networks[0])
+ }
+ }
+ }, [coins, preselectedCoin, selectedCoin])
useEffect(() => {
if (pairAmount && coinPair) {
@@ -83,30 +144,26 @@ export const AltpaymentWidget: React.FunctionComponent = props
}, [selectedCoin])
useEffect(() => {
- if (coinPair && thisAmount && selectedCoin && selectedCoinNetwork) {
- const bigNumber = resolveNumber(+thisAmount / +coinPair.rate)
- const tokenDetails = selectedCoin.tokenDetails
- let decimals: number
- if (tokenDetails !== undefined) {
- decimals = tokenDetails[selectedCoinNetwork].decimals
- } else {
- decimals = coinPair.min.split('.')[1].length
+ if (coinPair && thisAmount != null && thisAmount !== '' && selectedCoin && selectedCoinNetwork) {
+ const depositAmount = computeDepositAmountFromSettle()
+ if (depositAmount === undefined) {
+ return
+ }
+ const decimals = getDepositDecimals(selectedCoin, selectedCoinNetwork, coinPair)
+ setPairAmountFixedDecimals(depositAmount)
+ if (!altpaymentEditable) {
+ setPairAmount(depositAmount)
}
- const amountString = bigNumber.toFixed(decimals)
- setPairAmountFixedDecimals(amountString)
-
- // Besides decimals, account for the non-decimal part of the bigNumber
- // plus the '.' character.
- const floorAmount = pairAmount ? Math.floor(+pairAmount) : 1
+ const floorAmount = Math.floor(+depositAmount) || 1
const nonDecimalCharCount = 1 + Math.ceil(Math.log10(floorAmount + 1))
setPairAmountMaxLength(nonDecimalCharCount + decimals)
}
- }, [coinPair, selectedCoin, thisAmount, pairAmount, selectedCoinNetwork])
+ }, [coinPair, selectedCoin, thisAmount, selectedCoinNetwork, altpaymentEditable])
const requestPairRate = (): void => {
- if (selectedCoin !== undefined) {
- const from = `${selectedCoin.coin}-${selectedCoin?.networks[0]}`
+ if (selectedCoin !== undefined && selectedCoinNetwork !== undefined) {
+ const from = `${selectedCoin.coin}-${selectedCoinNetwork}`
const to = addressType === 'XEC' ? `ecash-mainnet` : `bitcoincash-mainnet`
if (altpaymentSocket !== undefined) {
altpaymentSocket.emit('get-altpayment-rate', {from, to})
@@ -114,6 +171,35 @@ export const AltpaymentWidget: React.FunctionComponent = props
}
}
+ useEffect(() => {
+ if (
+ preselectedCoin &&
+ !altpaymentEditable &&
+ selectedCoin !== undefined &&
+ selectedCoinNetwork !== undefined &&
+ coinPair === undefined &&
+ !loadingPair &&
+ !autoRateRequestedRef.current &&
+ altpaymentSocket !== undefined
+ ) {
+ autoRateRequestedRef.current = true
+ setLoadingPair(true)
+ const from = `${selectedCoin.coin}-${selectedCoinNetwork}`
+ const to = addressType === 'XEC' ? `ecash-mainnet` : `bitcoincash-mainnet`
+ altpaymentSocket.emit('get-altpayment-rate', {from, to})
+ }
+ }, [
+ preselectedCoin,
+ altpaymentEditable,
+ selectedCoin,
+ selectedCoinNetwork,
+ coinPair,
+ loadingPair,
+ altpaymentSocket,
+ addressType,
+ setLoadingPair,
+ ])
+
const handleCoinChange = async (e: React.ChangeEvent<{ name?: string; value: unknown }>) => {
const coinName = e.target.value as string
const selectedCoin = coins.find(c => c.coin === coinName)
@@ -147,24 +233,81 @@ export const AltpaymentWidget: React.FunctionComponent = props
}
};
- const handleCreateQuoteButtonClick = () => {
- if (altpaymentSocket !== undefined && selectedCoin !== undefined) {
- setLoadingShift(true)
- altpaymentSocket.emit('create-altpayment-quote', {
- depositAmount: pairAmountFixedDecimals,
- settleCoin: addressType,
- depositCoin: selectedCoin?.coin,
- depositNetwork: selectedCoinNetwork,
- settleAddress: to
- });
+ const createQuote = (): boolean => {
+ if (altpaymentSocket === undefined || selectedCoin === undefined || selectedCoinNetwork === undefined) {
+ return false
+ }
+
+ const depositAmount = altpaymentEditable
+ ? pairAmountFixedDecimals
+ : (pairAmountFixedDecimals ?? computeDepositAmountFromSettle())
+
+ const quotePayload: Record = {
+ settleCoin: addressType,
+ depositCoin: selectedCoin.coin,
+ depositNetwork: selectedCoinNetwork,
+ settleAddress: to,
+ }
+
+ if (depositAmount) {
+ quotePayload.depositAmount = depositAmount
+ } else if (thisAmount != null && thisAmount !== '' && !altpaymentEditable) {
+ const settleDecimals = DECIMALS[addressType] ?? 2
+ quotePayload.settleAmount = resolveNumber(+thisAmount).toFixed(settleDecimals)
+ } else {
+ return false
+ }
+
+ setLoadingShift(true)
+ altpaymentSocket.emit('create-altpayment-quote', quotePayload)
+ return true
+ }
+
+ useEffect(() => {
+ if (
+ !preselectedCoin ||
+ altpaymentEditable ||
+ altpaymentSocket === undefined ||
+ selectedCoin === undefined ||
+ selectedCoinNetwork === undefined ||
+ coinPair === undefined ||
+ altpaymentShift !== undefined ||
+ loadingShift ||
+ autoQuoteRequestedRef.current ||
+ altpaymentError
+ ) {
+ return
}
+
+ autoQuoteRequestedRef.current = createQuote()
+ }, [
+ preselectedCoin,
+ altpaymentEditable,
+ altpaymentSocket,
+ selectedCoin,
+ selectedCoinNetwork,
+ coinPair,
+ altpaymentShift,
+ loadingShift,
+ altpaymentError,
+ thisAmount,
+ pairAmountFixedDecimals,
+ ])
+
+ const handleCreateQuoteButtonClick = () => {
+ createQuote()
}
const resetTrade = () => {
+ autoRateRequestedRef.current = false
+ autoQuoteRequestedRef.current = false
+ setSelectedCoin(undefined)
+ setSelectedCoinNetwork(undefined)
setCoinPair(undefined)
setAltpaymentError(undefined)
setAltpaymentShift(undefined)
setPairAmount(undefined)
+ setPairAmountFixedDecimals(undefined)
setShiftCompleted(false)
}
@@ -200,9 +343,34 @@ export const AltpaymentWidget: React.FunctionComponent = props
};
const SideshiftCtn = styled('div')({
- alignItems: 'center', display: 'flex', flexDirection: 'column',
- height: 'calc(100% - 45px)', width: '100%', position: 'absolute',
- zIndex: 9, top: '0', left: '0', background: '#f5f5f7', paddingTop: '20px'
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ display: 'flex',
+ flexDirection: 'column',
+ boxSizing: 'border-box',
+ position: 'absolute',
+ zIndex: 9,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ background: '#f5f5f7',
+ overflowY: 'auto',
+ padding: '24px',
+ })
+
+ const LoadingCenter = styled('div')({
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: '16px',
+ textAlign: 'center',
+ width: 'max-content',
+ maxWidth: '100%',
})
const Header = styled('div')({
@@ -295,6 +463,26 @@ export const AltpaymentWidget: React.FunctionComponent = props
return coinString;
}
+ const isAutoStart = Boolean(preselectedCoin)
+ const isAutoStartLoading = isAutoStart && !altpaymentShift && !altpaymentError
+
+ const renderLoading = (message: string) => (
+
+
+ {message}
+
+
+ )
+
return (
{altpaymentError ? (
@@ -302,6 +490,8 @@ export const AltpaymentWidget: React.FunctionComponent = props
Error: {altpaymentError.errorMessage}
Back
+ ) : isAutoStartLoading ? (
+ renderLoading('Loading SideShift...')
) : (
{
@@ -352,13 +542,13 @@ export const AltpaymentWidget: React.FunctionComponent = props
)
) : loadingShift ? (
-
Amount is below minimum.
)}
- {!isBelowMaximumAltpaymentAmount && (
+ {pairAmount && !isBelowMaximumAltpaymentAmount && (
Amount is above maximum.
)}
) : (
- {coins.length === 0 &&
@@ -414,6 +605,7 @@ export const AltpaymentWidget: React.FunctionComponent = props
+ {!preselectedCoin ? (
Select a coin
= props
))}
+ ) : null}
= props
)
// END: Altpayment region
}
- {coinPair && !loadingShift && (
- Back
- )}
)}
diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx
index b005f61d..407989a8 100644
--- a/react/lib/components/Widget/Widget.tsx
+++ b/react/lib/components/Widget/Widget.tsx
@@ -38,6 +38,7 @@ import {
isPropsTrue,
setupChronikWebSocket,
setupAltpaymentSocket,
+ parseAltpayment,
CryptoCurrency,
DEFAULT_DONATION_RATE,
DEFAULT_MINIMUM_DONATION_AMOUNT,
@@ -86,7 +87,7 @@ export interface WidgetProps {
apiBaseUrl?: string
loading?: boolean
hoverText?: string
- disableAltpayment?: boolean
+ altpayment?: string | boolean
contributionOffset?: number
setAltpaymentShift?: Function
altpaymentShift?: AltpaymentShift | undefined
@@ -178,7 +179,7 @@ export const Widget: React.FunctionComponent = props => {
altpaymentShift,
shiftCompleted,
setShiftCompleted,
- disableAltpayment,
+ altpayment,
contributionOffset,
useAltpayment,
setUseAltpayment,
@@ -251,7 +252,9 @@ export const Widget: React.FunctionComponent = props => {
(setAltpaymentShift as ((s: AltpaymentShift | undefined) => void) | undefined) ??
setInternalAltpaymentShift
- const [internalUseAltpayment, setInternalUseAltpayment] = useState(false)
+ const [internalUseAltpayment, setInternalUseAltpayment] = useState(
+ () => parseAltpayment(altpayment).autoStart
+ )
const thisUseAltpayment = useAltpayment ?? internalUseAltpayment
const setThisUseAltpayment =
(setUseAltpayment as ((b: boolean) => void) | undefined) ?? setInternalUseAltpayment
@@ -306,6 +309,8 @@ export const Widget: React.FunctionComponent = props => {
const [goalPercent, setGoalPercent] = useState(0)
const [altpaymentEditable, setAltpaymentEditable] = useState(false)
+ const altpaymentConfig = useMemo(() => parseAltpayment(altpayment), [altpayment])
+
const price = props.price ?? 0
const [hasPrice, setHasPrice] = useState(props.price !== undefined && props.price > 0)
@@ -1138,12 +1143,20 @@ export const Widget: React.FunctionComponent = props => {
return (
+ {!thisUseAltpayment ? (
= props => {
})()}
+ ) : null}
{thisUseAltpayment ? (
= props => {
coinPair={thisCoinPair}
setCoinPair={setThisCoinPair}
altpaymentEditable={altpaymentEditable}
+ preselectedCoin={altpaymentConfig.preselectedCoin}
animation={animation}
addressType={thisAddressType}
to={to}
/>
) : null}
+ {!thisUseAltpayment ? (
{loading && shouldDisplayGoal ? (
= props => {
)}
- {!isPropsTrue(disableAltpayment) ? (
+ {altpaymentConfig.showAltpaymentLink && !thisUseAltpayment ? (
= props => {
) : null}
+ ) : null}
{foot ? (
{foot as any}
) : null}
+
-
-
+
+
Powered by PayButton.org
{(() => {
+ if (thisUseAltpayment) {
+ return false
+ }
// For fiat conversions, check the converted crypto amount
// For crypto-only, check the currency object amount
const amountToCheck = hasPrice && convertedCryptoAmount !== undefined
@@ -1497,7 +1519,6 @@ export const Widget: React.FunctionComponent = props => {
) : null}
-
diff --git a/react/lib/components/Widget/WidgetContainer.tsx b/react/lib/components/Widget/WidgetContainer.tsx
index 54045b96..7883d879 100644
--- a/react/lib/components/Widget/WidgetContainer.tsx
+++ b/react/lib/components/Widget/WidgetContainer.tsx
@@ -49,7 +49,7 @@ export interface WidgetContainerProps
wsBaseUrl?: string;
apiBaseUrl?: string;
successText?: string;
- disableAltpayment?: boolean
+ altpayment?: string | boolean
contributionOffset?: number
setNewTxs?: Function
disableSound?: boolean
@@ -128,7 +128,7 @@ export const WidgetContainer: React.FunctionComponent =
apiBaseUrl = config.apiBaseUrl,
successText,
hoverText,
- disableAltpayment,
+ altpayment,
contributionOffset,
altpaymentShift,
setAltpaymentShift,
@@ -424,7 +424,7 @@ export const WidgetContainer: React.FunctionComponent =
setAltpaymentShift={setAltpaymentShift}
shiftCompleted={shiftCompleted}
setShiftCompleted={setShiftCompleted}
- disableAltpayment={disableAltpayment}
+ altpayment={altpayment}
contributionOffset={contributionOffset}
transactionText={transactionText}
donationAddress={donationAddress}
diff --git a/react/lib/tests/util/altpayment.test.ts b/react/lib/tests/util/altpayment.test.ts
new file mode 100644
index 00000000..92a56e17
--- /dev/null
+++ b/react/lib/tests/util/altpayment.test.ts
@@ -0,0 +1,48 @@
+import { parseAltpayment } from '../../util/altpayment'
+
+describe('parseAltpayment', () => {
+ const defaultConfig = { showAltpaymentLink: true, autoStart: false }
+ const disabledConfig = { showAltpaymentLink: false, autoStart: false }
+
+ it('returns default for undefined, null, and empty', () => {
+ expect(parseAltpayment(undefined)).toEqual(defaultConfig)
+ expect(parseAltpayment(null)).toEqual(defaultConfig)
+ expect(parseAltpayment('')).toEqual(defaultConfig)
+ })
+
+ it('disables altpayment for false', () => {
+ expect(parseAltpayment(false)).toEqual(disabledConfig)
+ expect(parseAltpayment('false')).toEqual(disabledConfig)
+ })
+
+ it('returns default for true', () => {
+ expect(parseAltpayment(true)).toEqual(defaultConfig)
+ expect(parseAltpayment('true')).toEqual(defaultConfig)
+ })
+
+ it('disables altpayment link for XEC and BCH', () => {
+ expect(parseAltpayment('XEC')).toEqual(disabledConfig)
+ expect(parseAltpayment('xec')).toEqual(disabledConfig)
+ expect(parseAltpayment('BCH')).toEqual(disabledConfig)
+ expect(parseAltpayment('bch')).toEqual(disabledConfig)
+ })
+
+ it('auto-starts with BTC preselected for BTC ticker', () => {
+ expect(parseAltpayment('BTC')).toEqual({
+ showAltpaymentLink: false,
+ autoStart: true,
+ preselectedCoin: 'BTC',
+ })
+ expect(parseAltpayment('btc')).toEqual({
+ showAltpaymentLink: false,
+ autoStart: true,
+ preselectedCoin: 'BTC',
+ })
+ })
+
+ it('returns default for unrecognized tickers', () => {
+ expect(parseAltpayment('ETH')).toEqual(defaultConfig)
+ expect(parseAltpayment('DOGE')).toEqual(defaultConfig)
+ expect(parseAltpayment('blahInvalidTicker')).toEqual(defaultConfig)
+ })
+})
diff --git a/react/lib/util/altpayment.ts b/react/lib/util/altpayment.ts
new file mode 100644
index 00000000..57101ad0
--- /dev/null
+++ b/react/lib/util/altpayment.ts
@@ -0,0 +1,41 @@
+export type ParsedAltpayment = {
+ showAltpaymentLink: boolean
+ autoStart: boolean
+ preselectedCoin?: string
+}
+
+const DEFAULT_CONFIG: ParsedAltpayment = {
+ showAltpaymentLink: true,
+ autoStart: false,
+}
+
+const DISABLED_CONFIG: ParsedAltpayment = {
+ showAltpaymentLink: false,
+ autoStart: false,
+}
+
+export function parseAltpayment (value?: string | boolean | null): ParsedAltpayment {
+ if (value === undefined || value === null || value === '') {
+ return DEFAULT_CONFIG
+ }
+
+ if (value === false || value === 'false') {
+ return DISABLED_CONFIG
+ }
+
+ if (value === true || value === 'true') {
+ return DEFAULT_CONFIG
+ }
+
+ const ticker = String(value).toUpperCase()
+
+ if (ticker === 'XEC' || ticker === 'BCH') {
+ return DISABLED_CONFIG
+ }
+
+ if (ticker === 'BTC') {
+ return { showAltpaymentLink: false, autoStart: true, preselectedCoin: 'BTC' }
+ }
+
+ return DEFAULT_CONFIG
+}
diff --git a/react/lib/util/index.ts b/react/lib/util/index.ts
index 06f0b895..99855c38 100644
--- a/react/lib/util/index.ts
+++ b/react/lib/util/index.ts
@@ -13,4 +13,5 @@ export * from './number';
export * from './currency';
export * from './validate';
export * from './autoClose';
+export * from './altpayment';
Loading Shift...
- ) : coinPair ? ( + renderLoading('Loading Shift...') + ) : coinPair && selectedCoin ? ({' '} - 1 {selectedCoin?.name} ~={' '} - {resolveNumber(coinPair.rate).toFixed(DECIMALS[coinPair.settleCoin])} {coinPair.settleCoin}{' '} + 1 {selectedCoin.name} ~={' '} + {resolveNumber(coinPair.rate).toFixed(DECIMALS[coinPair.settleCoin] ?? 8)} {coinPair.settleCoin}{' '}
{altpaymentEditable ? (
@@ -383,29 +573,30 @@ export const AltpaymentWidget: React.FunctionComponent = props
!isAboveMinimumAltpaymentAmount ||
!isBelowMaximumAltpaymentAmount ? {opacity: '0.5', cursor: 'not-allowed'} : {}}>
- {!isAboveMinimumAltpaymentAmount && (
+ {pairAmount && !isAboveMinimumAltpaymentAmount && (
Loading...
}
+ {coins.length === 0 && renderLoading('Loading SideShift...')}
{coins.length > 0 && (