Merge pull request #7 from MyTonSwap/develop

Added loading when user select tokens while it fetching the token and updated to v2.0.12

lib/components/Swap/Swap.scss

@@ -45,6 +45,10 @@
         color: var(--primary-color);
     }
 
+    .animate-loading {
+        animation: spin 1s linear infinite;
+    }
+
     @keyframes spin {
         0% {
             transform: rotate(0deg);

lib/components/SwapButton/SwapButton.scss

@@ -1,4 +1,10 @@
 .mytonswap-app {
+    .loading-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+    }
     .modal-container {
         width: 100%;
         height: 100%;

lib/components/SwapButton/SwapButton.tsx

@@ -19,6 +19,7 @@ import { useOptionsStore } from "../../store/options.store";
 import { useTranslation } from "react-i18next";
 import { cn } from "../../utils/cn";
 import { useRef } from "react";
+import { CgSpinnerTwo } from "react-icons/cg";
 
 const SwapButton = () => {
     const { t } = useTranslation();
@@ -36,9 +37,16 @@ const SwapButton = () => {
         swapModal,
         receive_token,
         setModalState,
+        isSelectingToken,
     } = useSwapStore();
 
     const getSwapText = () => {
+        if (isSelectingToken)
+            return (
+                <span className="loading-button">
+                    <CgSpinnerTwo className="animate-loading" /> Loading ...
+                </span>
+            );
         if (!tonConnectInstance?.wallet) return t("button_text.connect_wallet");
         if (!receive_token || !pay_token)
             return t("button_text.choose_a_token");

lib/components/SwapCard/CardButton.tsx

@@ -4,6 +4,7 @@ import { MdKeyboardArrowDown } from "react-icons/md";
 import "./CardButton.scss";
 import { useOptionsStore } from "../../store/options.store";
 import { useTranslation } from "react-i18next";
+import { useSwapStore } from "../../store/swap.store";
 type CardButtonProps = {
     isLoading: boolean;
     onClick: () => void;
@@ -18,7 +19,9 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
 }) => {
     const { t } = useTranslation();
     const { options } = useOptionsStore();
+    const { isSelectingToken } = useSwapStore();
     const isDisabled = (() => {
+        if (isSelectingToken) return true;
         if (type === "pay" && options.lock_pay_token) return true;
         if (type === "receive" && options.lock_receive_token) return true;
         return false;

lib/store/swap.store.ts

@@ -27,6 +27,7 @@ type SwapStates = {
     pay_amount: bigint;
     assets: Asset[] | null;
     isLoading: boolean;
+    isSelectingToken: boolean;
     isFindingBestRoute: boolean;
     bestRoute: BestRoute | null;
     onePayRoute: BestRoute | null;
@@ -76,6 +77,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
     receive_token: null,
     receive_rate: null,
     isLoading: true,
+    isSelectingToken: false,
     isFindingBestRoute: false,
     bestRoute: null,
     onePayRoute: null,
@@ -182,6 +184,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
         set(() => ({ isLoading }));
     },
     setPayToken: async (token) => {
+        set(() => ({ isSelectingToken: true }));
         useEventsStore.getState().onTokenSelect({ type: "pay", asset: token });
         const { client } = get();
         if (!token) return;
@@ -205,6 +208,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
             receive_rate: null,
             receive_token: null,
             bestRoute: null,
+            isSelectingToken: false,
         }));
     },
     async setPayAmount(amount) {
@@ -234,6 +238,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
         set(() => ({ bestRoute, isFindingBestRoute: false }));
     },
     setReceiveToken: async (token) => {
+        set(() => ({ isSelectingToken: true }));
         useEventsStore
             .getState()
             .onTokenSelect({ type: "receive", asset: token });
@@ -256,6 +261,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
             receive_token: token,
             receive_rate: tokenRate ?? null,
             isFindingBestRoute: true,
+            isSelectingToken: false,
         }));
         const onePayRouteResult = await catchError(() =>
             client.router.findBestRoute(

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mytonswap/widget",
     "description": "MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain",
-    "version": "2.0.11",
+    "version": "2.0.12",
     "type": "module",
     "author": {
         "name": "MyTonSwap",