@multiversx/sdk-dapp-liquidity 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/reactjs/components/AmountInput/AmountInput.js +31 -20
  3. package/reactjs/components/AmountInput/AmountInput.mjs +31 -20
  4. package/reactjs/components/BridgeForm/BridgeForm.js +18 -5
  5. package/reactjs/components/BridgeForm/BridgeForm.mjs +18 -5
  6. package/reactjs/hooks/useBridgeFormik.js +4 -4
  7. package/reactjs/hooks/useBridgeFormik.mjs +4 -4
package/package.json CHANGED
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "homepage": "https://github.com/multiversx/mx-sdk-dapp-liquidity#readme",
30
30
  "license": "MIT",
31
- "version": "1.0.7",
31
+ "version": "1.0.8",
32
32
  "main": "index.js",
33
33
  "module": "index.mjs",
34
34
  "types": "index.d.ts",
package/reactjs/components/AmountInput/AmountInput.js CHANGED
@@ -30,31 +30,42 @@ const AmountInput = ({
30
30
  }
31
31
  };
32
32
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liq-flex liq-w-full liq-flex-col liq-justify-between", children: [
33
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-text-base liq-max-w-none liq-w-full liq-bg-transparent liq-relative", children: /* @__PURE__ */ jsxRuntime.jsx(
34
- reactNumberFormat.NumericFormat,
33
+ /* @__PURE__ */ jsxRuntime.jsx(
34
+ "div",
35
35
  {
36
- name: inputName,
37
- value: inputValue,
38
- placeholder: "0",
39
- allowLeadingZeros: true,
40
- thousandSeparator: ",",
41
- allowNegative: false,
42
- disabled,
43
36
  className: reactjs_utils_mxClsx.mxClsx(
44
- "liq-text-3xl liq-leading-9 liq-min-h-12 liq-py-0 liq-w-full liq-h-full liq-border-none liq-font-medium liq-px-0 liq-outline-0 liq-bg-transparent",
37
+ "liq-flex liq-text-base liq-max-w-none liq-w-full liq-bg-transparent liq-relative",
45
38
  {
46
- "liq-disabled liq-animate-pulse": disabled && !omitDisableClass
47
- },
48
- className
39
+ "liq-disabled liq-animate-loader": disabled
40
+ }
49
41
  ),
50
- onChange: handleAmountChange,
51
- onValueChange: async ({ value }) => {
52
- onInputDebounceChange == null ? void 0 : onInputDebounceChange(value);
53
- },
54
- onBlur,
55
- onKeyDown: (e) => checkKeyDown(e)
42
+ children: /* @__PURE__ */ jsxRuntime.jsx(
43
+ reactNumberFormat.NumericFormat,
44
+ {
45
+ name: inputName,
46
+ value: inputValue,
47
+ placeholder: "0",
48
+ allowLeadingZeros: true,
49
+ thousandSeparator: ",",
50
+ allowNegative: false,
51
+ disabled,
52
+ className: reactjs_utils_mxClsx.mxClsx(
53
+ "liq-text-3xl liq-leading-9 liq-min-h-12 liq-py-0 liq-w-full liq-h-full liq-border-none liq-font-medium liq-px-0 liq-outline-0 liq-bg-transparent",
54
+ {
55
+ "liq-disabled liq-animate-pulse": disabled && !omitDisableClass
56
+ },
57
+ className
58
+ ),
59
+ onChange: handleAmountChange,
60
+ onValueChange: async ({ value }) => {
61
+ onInputDebounceChange == null ? void 0 : onInputDebounceChange(value);
62
+ },
63
+ onBlur,
64
+ onKeyDown: (e) => checkKeyDown(e)
65
+ }
66
+ )
56
67
  }
57
- ) }),
68
+ ),
58
69
  amountError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-flex liq-min-h-[2rem] liq-items-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-text-danger liq-text-xs", children: amountError }) })
59
70
  ] });
60
71
  };
package/reactjs/components/AmountInput/AmountInput.mjs CHANGED
@@ -27,31 +27,42 @@ const AmountInput = ({
27
27
  }
28
28
  };
29
29
  return /* @__PURE__ */ jsxs("div", { className: "liq-flex liq-w-full liq-flex-col liq-justify-between", children: [
30
- /* @__PURE__ */ jsx("div", { className: "liq-flex liq-text-base liq-max-w-none liq-w-full liq-bg-transparent liq-relative", children: /* @__PURE__ */ jsx(
31
- NumericFormat,
30
+ /* @__PURE__ */ jsx(
31
+ "div",
32
32
  {
33
- name: inputName,
34
- value: inputValue,
35
- placeholder: "0",
36
- allowLeadingZeros: true,
37
- thousandSeparator: ",",
38
- allowNegative: false,
39
- disabled,
40
33
  className: mxClsx(
41
- "liq-text-3xl liq-leading-9 liq-min-h-12 liq-py-0 liq-w-full liq-h-full liq-border-none liq-font-medium liq-px-0 liq-outline-0 liq-bg-transparent",
34
+ "liq-flex liq-text-base liq-max-w-none liq-w-full liq-bg-transparent liq-relative",
42
35
  {
43
- "liq-disabled liq-animate-pulse": disabled && !omitDisableClass
44
- },
45
- className
36
+ "liq-disabled liq-animate-loader": disabled
37
+ }
46
38
  ),
47
- onChange: handleAmountChange,
48
- onValueChange: async ({ value }) => {
49
- onInputDebounceChange == null ? void 0 : onInputDebounceChange(value);
50
- },
51
- onBlur,
52
- onKeyDown: (e) => checkKeyDown(e)
39
+ children: /* @__PURE__ */ jsx(
40
+ NumericFormat,
41
+ {
42
+ name: inputName,
43
+ value: inputValue,
44
+ placeholder: "0",
45
+ allowLeadingZeros: true,
46
+ thousandSeparator: ",",
47
+ allowNegative: false,
48
+ disabled,
49
+ className: mxClsx(
50
+ "liq-text-3xl liq-leading-9 liq-min-h-12 liq-py-0 liq-w-full liq-h-full liq-border-none liq-font-medium liq-px-0 liq-outline-0 liq-bg-transparent",
51
+ {
52
+ "liq-disabled liq-animate-pulse": disabled && !omitDisableClass
53
+ },
54
+ className
55
+ ),
56
+ onChange: handleAmountChange,
57
+ onValueChange: async ({ value }) => {
58
+ onInputDebounceChange == null ? void 0 : onInputDebounceChange(value);
59
+ },
60
+ onBlur,
61
+ onKeyDown: (e) => checkKeyDown(e)
62
+ }
63
+ )
53
64
  }
54
- ) }),
65
+ ),
55
66
  amountError && /* @__PURE__ */ jsx("div", { className: "liq-flex liq-min-h-[2rem] liq-items-end", children: /* @__PURE__ */ jsx("div", { className: "liq-text-danger liq-text-xs", children: amountError }) })
56
67
  ] });
57
68
  };
package/reactjs/components/BridgeForm/BridgeForm.js CHANGED
@@ -205,6 +205,9 @@ const BridgeForm = ({
205
205
  )) ?? (chains == null ? void 0 : chains[0]),
206
206
  [activeChain == null ? void 0 : activeChain.id, chains]
207
207
  );
208
+ const defaultReceivingToken = toOptions.find(
209
+ (x) => x.name.toLowerCase().includes("usdc")
210
+ );
208
211
  const hasAmounts = firstAmount !== "" && secondAmount !== "";
209
212
  const fetchRateDebounced = require$$0.useCallback(
210
213
  debounce(async (amount) => {
@@ -292,7 +295,7 @@ const BridgeForm = ({
292
295
  }
293
296
  setFirstToken(() => option);
294
297
  updateUrlParams({ firstTokenId: option == null ? void 0 : option.address });
295
- const secondOption = toOptions.find((x) => x.name === (option == null ? void 0 : option.name));
298
+ const secondOption = toOptions.find((x) => x.name === (option == null ? void 0 : option.name)) ?? defaultReceivingToken;
296
299
  if (!secondOption) {
297
300
  return;
298
301
  }
@@ -333,7 +336,7 @@ const BridgeForm = ({
333
336
  );
334
337
  const secondOption = (toOptions == null ? void 0 : toOptions.find(
335
338
  ({ address }) => address === ((firstOption == null ? void 0 : firstOption.name) ?? (initialTokens == null ? void 0 : initialTokens.secondTokenId))
336
- )) ?? toOptions.find((x) => x.name === (firstOption == null ? void 0 : firstOption.name));
339
+ )) ?? toOptions.find((x) => x.name === (firstOption == null ? void 0 : firstOption.name)) ?? defaultReceivingToken;
337
340
  const hasOptionsSelected = Boolean(firstToken) && Boolean(secondToken) && ((_a2 = firstToken == null ? void 0 : firstToken.address) == null ? void 0 : _a2.toLowerCase()) === ((_b2 = firstOption == null ? void 0 : firstOption.address) == null ? void 0 : _b2.toLowerCase()) && ((_c2 = secondToken == null ? void 0 : secondToken.address) == null ? void 0 : _c2.toLowerCase()) === ((_d2 = secondOption == null ? void 0 : secondOption.address) == null ? void 0 : _d2.toLowerCase());
338
341
  if (hasOptionsSelected) {
339
342
  return;
@@ -456,8 +459,18 @@ const BridgeForm = ({
456
459
  fetchRateDebounced(firstAmount);
457
460
  }, [firstAmount, fetchRateDebounced]);
458
461
  require$$0.useEffect(() => {
459
- return setSecondAmount((rate == null ? void 0 : rate.amountOut) ?? "");
460
- }, [rate]);
462
+ if (!(rate == null ? void 0 : rate.amountOut)) {
463
+ return;
464
+ }
465
+ formik.setFieldValue(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount, rate.amountOut);
466
+ setSecondAmount(rate.amountOut);
467
+ }, [rate == null ? void 0 : rate.amountOut]);
468
+ require$$0.useEffect(() => {
469
+ if (rateValidationError) {
470
+ formik.setFieldValue(reactjs_hooks_useBridgeFormik.BridgeFormikValuesEnum.secondAmount, "0");
471
+ setSecondAmount("0");
472
+ }
473
+ }, [rateValidationError]);
461
474
  require$$0.useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
462
475
  require$$0.useEffect(() => {
463
476
  const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
@@ -588,7 +601,7 @@ const BridgeForm = ({
588
601
  inputName: "secondAmount",
589
602
  inputValue: formik.values.secondAmount ?? "",
590
603
  amountError: secondAmount !== "" ? fromChainError ?? secondAmountError : void 0,
591
- disabled: false,
604
+ disabled: isPendingRate,
592
605
  onInputDebounceChange: handleOnChangeSecondAmount,
593
606
  onInputChange: handleChange,
594
607
  onBlur: handleBlur
package/reactjs/components/BridgeForm/BridgeForm.mjs CHANGED
@@ -202,6 +202,9 @@ const BridgeForm = ({
202
202
  )) ?? (chains == null ? void 0 : chains[0]),
203
203
  [activeChain == null ? void 0 : activeChain.id, chains]
204
204
  );
205
+ const defaultReceivingToken = toOptions.find(
206
+ (x) => x.name.toLowerCase().includes("usdc")
207
+ );
205
208
  const hasAmounts = firstAmount !== "" && secondAmount !== "";
206
209
  const fetchRateDebounced = useCallback(
207
210
  debounce(async (amount) => {
@@ -289,7 +292,7 @@ const BridgeForm = ({
289
292
  }
290
293
  setFirstToken(() => option);
291
294
  updateUrlParams({ firstTokenId: option == null ? void 0 : option.address });
292
- const secondOption = toOptions.find((x) => x.name === (option == null ? void 0 : option.name));
295
+ const secondOption = toOptions.find((x) => x.name === (option == null ? void 0 : option.name)) ?? defaultReceivingToken;
293
296
  if (!secondOption) {
294
297
  return;
295
298
  }
@@ -330,7 +333,7 @@ const BridgeForm = ({
330
333
  );
331
334
  const secondOption = (toOptions == null ? void 0 : toOptions.find(
332
335
  ({ address }) => address === ((firstOption == null ? void 0 : firstOption.name) ?? (initialTokens == null ? void 0 : initialTokens.secondTokenId))
333
- )) ?? toOptions.find((x) => x.name === (firstOption == null ? void 0 : firstOption.name));
336
+ )) ?? toOptions.find((x) => x.name === (firstOption == null ? void 0 : firstOption.name)) ?? defaultReceivingToken;
334
337
  const hasOptionsSelected = Boolean(firstToken) && Boolean(secondToken) && ((_a2 = firstToken == null ? void 0 : firstToken.address) == null ? void 0 : _a2.toLowerCase()) === ((_b2 = firstOption == null ? void 0 : firstOption.address) == null ? void 0 : _b2.toLowerCase()) && ((_c2 = secondToken == null ? void 0 : secondToken.address) == null ? void 0 : _c2.toLowerCase()) === ((_d2 = secondOption == null ? void 0 : secondOption.address) == null ? void 0 : _d2.toLowerCase());
335
338
  if (hasOptionsSelected) {
336
339
  return;
@@ -453,8 +456,18 @@ const BridgeForm = ({
453
456
  fetchRateDebounced(firstAmount);
454
457
  }, [firstAmount, fetchRateDebounced]);
455
458
  useEffect(() => {
456
- return setSecondAmount((rate == null ? void 0 : rate.amountOut) ?? "");
457
- }, [rate]);
459
+ if (!(rate == null ? void 0 : rate.amountOut)) {
460
+ return;
461
+ }
462
+ formik.setFieldValue(BridgeFormikValuesEnum.secondAmount, rate.amountOut);
463
+ setSecondAmount(rate.amountOut);
464
+ }, [rate == null ? void 0 : rate.amountOut]);
465
+ useEffect(() => {
466
+ if (rateValidationError) {
467
+ formik.setFieldValue(BridgeFormikValuesEnum.secondAmount, "0");
468
+ setSecondAmount("0");
469
+ }
470
+ }, [rateValidationError]);
458
471
  useEffect(setInitialSelectedTokens, [isTokensLoading, chainId]);
459
472
  useEffect(() => {
460
473
  const selectedTokenOption = evmTokensWithBalances == null ? void 0 : evmTokensWithBalances.find(
@@ -585,7 +598,7 @@ const BridgeForm = ({
585
598
  inputName: "secondAmount",
586
599
  inputValue: formik.values.secondAmount ?? "",
587
600
  amountError: secondAmount !== "" ? fromChainError ?? secondAmountError : void 0,
588
- disabled: false,
601
+ disabled: isPendingRate,
589
602
  onInputDebounceChange: handleOnChangeSecondAmount,
590
603
  onInputChange: handleChange,
591
604
  onBlur: handleBlur
package/reactjs/hooks/useBridgeFormik.js CHANGED
@@ -133,8 +133,8 @@ const useBridgeFormik = ({
133
133
  setFieldValue("secondAmount", 0, true);
134
134
  return;
135
135
  }
136
- if (lastChangedField === "firstAmount" && values.firstAmount && values.firstAmount !== "") {
137
- const calculatedSecondAmount = parseFloat(values.firstAmount) - Number((rate == null ? void 0 : rate.fee) ?? "0");
136
+ if (lastChangedField === "firstAmount" && values.firstAmount && values.firstAmount !== "" && (rate == null ? void 0 : rate.fee) && rate.fee !== "0") {
137
+ const calculatedSecondAmount = parseFloat(values.firstAmount) - Number(rate.fee);
138
138
  setFieldValue(
139
139
  "secondAmount",
140
140
  calculatedSecondAmount > 0 ? calculatedSecondAmount : "0"
@@ -146,8 +146,8 @@ const useBridgeFormik = ({
146
146
  setFieldValue("firstAmount", 0, true);
147
147
  return;
148
148
  }
149
- if (lastChangedField === "secondAmount" && values.secondAmount && values.secondAmount !== "") {
150
- const calculatedFirstAmount = parseFloat(values.secondAmount) + Number((rate == null ? void 0 : rate.fee) ?? "0");
149
+ if (lastChangedField === "secondAmount" && values.secondAmount && values.secondAmount !== "" && (rate == null ? void 0 : rate.fee) && rate.fee !== "0") {
150
+ const calculatedFirstAmount = parseFloat(values.secondAmount) + Number(rate.fee);
151
151
  setFieldValue("firstAmount", calculatedFirstAmount);
152
152
  }
153
153
  }, [values.secondAmount, rate == null ? void 0 : rate.fee, lastChangedField, touched.secondAmount]);
package/reactjs/hooks/useBridgeFormik.mjs CHANGED
@@ -130,8 +130,8 @@ const useBridgeFormik = ({
130
130
  setFieldValue("secondAmount", 0, true);
131
131
  return;
132
132
  }
133
- if (lastChangedField === "firstAmount" && values.firstAmount && values.firstAmount !== "") {
134
- const calculatedSecondAmount = parseFloat(values.firstAmount) - Number((rate == null ? void 0 : rate.fee) ?? "0");
133
+ if (lastChangedField === "firstAmount" && values.firstAmount && values.firstAmount !== "" && (rate == null ? void 0 : rate.fee) && rate.fee !== "0") {
134
+ const calculatedSecondAmount = parseFloat(values.firstAmount) - Number(rate.fee);
135
135
  setFieldValue(
136
136
  "secondAmount",
137
137
  calculatedSecondAmount > 0 ? calculatedSecondAmount : "0"
@@ -143,8 +143,8 @@ const useBridgeFormik = ({
143
143
  setFieldValue("firstAmount", 0, true);
144
144
  return;
145
145
  }
146
- if (lastChangedField === "secondAmount" && values.secondAmount && values.secondAmount !== "") {
147
- const calculatedFirstAmount = parseFloat(values.secondAmount) + Number((rate == null ? void 0 : rate.fee) ?? "0");
146
+ if (lastChangedField === "secondAmount" && values.secondAmount && values.secondAmount !== "" && (rate == null ? void 0 : rate.fee) && rate.fee !== "0") {
147
+ const calculatedFirstAmount = parseFloat(values.secondAmount) + Number(rate.fee);
148
148
  setFieldValue("firstAmount", calculatedFirstAmount);
149
149
  }
150
150
  }, [values.secondAmount, rate == null ? void 0 : rate.fee, lastChangedField, touched.secondAmount]);