@rabbitio/ui-kit 1.0.0-beta.80 → 1.0.0-beta.82

package/src/ui-kit/assets/styles/global.scss

@@ -3,7 +3,16 @@
 @use "placeholder" as *;
 @use "variables" as *;
 
-// Global classes
+// Global classes.
+//
+// Rule for adding new global classes:
+// When adding new classes, make sure that the class name is unique enough, so
+// that it can be easily searched through the code base. Class names in the
+// format of xxxx-xxxx-xxxx with 2+ words are unique enough, but if the class
+// name contains just one word (like "container", for example), you need to
+// add a prefix "gc_", so that we can easily find all its usages throughout the code.
+// For example, if you want to add a class called ".button", you must name it as
+// ".gc_button", so that it can be easily found.
 
 .container {
     max-width: 1260px;

package/src/ui-kit/components/atoms/QrCode/QrCode.jsx

@@ -10,11 +10,6 @@ import s from "./qr-code.module.scss";
  * QrCode component renders a QR code for a provided crypto address.
  *
  * @component
- * @example
- * const address = "0x123456789abcdef";
- * const fill = true;
- * return <QrCode address={address} fill={fill} />;
- *
  * @param {Object} props - The props for the component.
  * @param {string} props.address - The crypto address to generate the QR code for.
  * @param {boolean} [props.fill=false] - If true, applies additional CSS class to fill the container.
@@ -45,6 +40,5 @@ QrCode.propTypes = {
 };
 
 QrCode.defaultProps = {
-    address: "",
     fill: false,
 };

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -264,7 +264,7 @@ export const AmountInput = React.forwardRef(
                                                     {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
                                                 </span>
 
-                                                {!isLoading && cryptoAssetToFiatRate ? (
+                                                {!isLoading && cryptoAssetToFiatRate != null ? (
                                                     <input
                                                         type="text"
                                                         inputMode="decimal"

package/src/ui-kit/components/organisms/SwapForm/SwapForm.jsx

@@ -217,11 +217,10 @@ import { useIsHydrated } from "../../../hooks/useIsHydrated.js";
  * @param {boolean} [props.formHasFiat] - Indicates if the form supports fiat currency.
  * @param {string|null} [props.termsOfUseUrl] - Terms of use URL, shown only if both terms & privacy policy passed.
  * @param {string|null} [props.privacyPolicyUrl] - Privacy policy of use URL, shown only if both terms & privacy policy passed.
- * @param {string} props.recipientAddressExtraIdName - Extra ID name for the recipient address.
- * @param {string} props.refundAddressExtraIdName - Extra ID name for the refund address.
  * @param {object} [props.translations] - Object containing translations, default English texts will be used if omitted.
  * @param {string} props.swapSeparatorIconSrc - Source URL for the swap separator icon.
  * @param {boolean} props.swapButtonAlwaysActive - Setting that allows the form state to proceed to the next step regardless of validity.
+ * @param {getExtraIdNameByTicker} props.getExtraIdNameByTicker - Function returning extraId name for asset
  * @param {validateAddressByTicker} [props.validateAddressByTicker] - Function validating address
  * @param {onIsFixedChange} [props.onIsFixedChange] - callback for changed isFixed
  * @return {JSX.Element} Rendered SwapForm component.
@@ -298,8 +297,6 @@ export const SwapForm = ({
     swapSeparatorIconSrc,
     swapButtonAlwaysActive = false,
     onIsFixedChange = () => {},
-    // recipientAddressExtraIdName,
-    // refundAddressExtraIdName,
     translations = {
         swapAllButtonTitles: {
             enable: "Swap all",
@@ -346,6 +343,8 @@ export const SwapForm = ({
     const DETAIL_REFRESH_INTERVAL_MS = 1.5 * 60000;
     const IS_FIXED_BY_DEFAULT = false;
 
+    // Setting up an asyncronyous states, which can change during the function execution.
+    // This is done so that we can cancel the calculation update in case the selected asset changes.
     const [sendingAssetTickerReferred, setSendingAssetTickerReferred] = useReferredState(null);
     const [receivingAssetTickerReferred, setReceivingAssetTickerReferred] = useReferredState(null);
 
@@ -557,6 +556,8 @@ export const SwapForm = ({
                 setIsPairSupported(true);
                 setIsSwapCalculated(false);
 
+                // Saving the selected coins at the moment, so we can cancel
+                // the processing if they get changed during the loading.
                 const currentSendingAssetTicker = sendingAssetTicker;
                 const currentReceivingAssetTicker = receivingAssetTicker;
 
@@ -573,6 +574,8 @@ export const SwapForm = ({
                     currentSendingAssetTicker !== sendingAssetTickerReferred.current ||
                     currentReceivingAssetTicker !== receivingAssetTickerReferred.current
                 ) {
+                    // Cancelling the further processing in case the
+                    // selected coins were changed during the loading.
                     return;
                 }
 
@@ -591,9 +594,9 @@ export const SwapForm = ({
                     return;
                 }
 
-                const swapCreationInfo = response?.swapCreationInfo;
-
                 if (response.result) {
+                    const swapCreationInfo = response?.swapCreationInfo;
+
                     if (isSwapAll.current) {
                         setIsAmountZero(BigNumber("0").eq(swapCreationInfo.fromAmountCoins));
                     }
@@ -845,6 +848,7 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [readyToSwap]);
 
+    // TODO: [refactoring, critical] this code looks like a hack related to task_id=6e328d39063142b7b9fa01d497e616da
     useEffect(() => {
         if (triggerDataUpdateResetting) {
             clearTimeout(dataUpdateTimeoutId.current);
@@ -856,6 +860,7 @@ export const SwapForm = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [triggerDataUpdateResetting]);
 
+    // Resets the passed "set value to" param to null, so it can be used multiple times with any value
     useEffect(() => {
         if (!!updateSendInputTo) setUpdateSendInputTo(null);
         if (!!updateReceiveInputTo) setUpdateReceiveInputTo(null);
@@ -893,13 +898,13 @@ export const SwapForm = ({
     };
 
     useEffect(() => {
-        if (!isLastEditedReceiving.current) return;
-        handleAmountChange(receiveAssetAmount.current === "" ? "0" : receiveAssetAmount.current);
+        if (isLastEditedReceiving.current)
+            handleAmountChange(receiveAssetAmount.current === "" ? "0" : receiveAssetAmount.current);
     }, [receiveAssetAmount.current]);
 
     useEffect(() => {
-        if (isLastEditedReceiving.current) return;
-        handleAmountChange(sendAssetAmount.current === "" ? "0" : sendAssetAmount.current);
+        if (!isLastEditedReceiving.current)
+            handleAmountChange(sendAssetAmount.current === "" ? "0" : sendAssetAmount.current);
     }, [sendAssetAmount.current]);
 
     const recipientAddressExtraIdName = getExtraIdNameByTicker(receivingAssetTicker);
@@ -1015,6 +1020,7 @@ export const SwapForm = ({
                     />
                 </div>
                 <div className={s["swap-form-information-field"]}>
+                    {/* TODO: [refactoring, moderate] Add flags calculation for each message to avoid this ugly cumbersome implicit unclear logic of message displaying. task_id=8bc31dbcd94d46a598346e8bfb505971 */}
                     <p>
                         {!isPairSupported ? (
                             translations.informationBlock.pairNotAvailable
@@ -1272,12 +1278,12 @@ SwapForm.propTypes = {
     formHasFiat: PropTypes.bool,
     termsOfUseUrl: PropTypes.oneOfType([PropTypes.string, null]),
     privacyPolicyUrl: PropTypes.oneOfType([PropTypes.string, null]),
-    recipientAddressExtraIdName: PropTypes.string,
-    refundAddressExtraIdName: PropTypes.string,
+    getExtraIdNameByTicker: PropTypes.func,
     translations: PropTypes.object,
     validateAddressByTicker: PropTypes.func,
     swapSeparatorIconSrc: PropTypes.string.isRequired,
     swapButtonAlwaysActive: PropTypes.bool,
+    onIsFixedChange: PropTypes.func,
 };
 
 SwapForm.defaultProps = {
@@ -1325,6 +1331,8 @@ SwapForm.defaultProps = {
     formHasFiat: true,
     termsOfUseUrl: null,
     privacyPolicyUrl: null,
+    getExtraIdNameByTicker: ticker => null,
     validateAddressByTicker: ticker => false,
     swapButtonAlwaysActive: false,
+    onIsFixedChange: () => {},
 };

package/stories/font.scss

@@ -0,0 +1,40 @@
+@use "~@rabbitio/ui-kit/index.scss" as *;
+
+@font-face {
+    src: url("../src/ui-kit/assets/styles/fonts/NunitoSans-ExtraBold.ttf");
+    font-family: "NunitoSans";
+    font-weight: $extra-bold;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("../src/ui-kit/assets/styles/fonts/NunitoSans-Bold.ttf");
+    font-family: "NunitoSans";
+    font-weight: $bold;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("../src/ui-kit/assets/styles/fonts/NunitoSans-SemiBold.ttf");
+    font-family: "NunitoSans";
+    font-weight: 600;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("../src/ui-kit/assets/styles/fonts/NunitoSans-Regular.ttf");
+    font-family: "NunitoSans";
+    font-weight: 400;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("../src/ui-kit/assets/styles/fonts/NunitoSans-Light.ttf");
+    font-family: "NunitoSans";
+    font-weight: 300;
+    font-display: swap;
+}
+
+* {
+    font-family: NunitoSans;
+}