refactor: change the way to set default tokens

Author: Ho3einWave

README.md

@@ -72,7 +72,43 @@ function App() {
     );
 }
 ```
-
+## Default Tokens
+You can specify default tokens to be displayed in the swap interface by passing a `defaultTokens` prop to the `Swap` component. This prop should be an array of token objects, each containing the necessary details such as the token's address, symbol, and decimals.
+```tsx
+function App() {
+    return (
+        <>
+            <Swap
+                options={{
+                        default_pay_token:
+                            "EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
+                        default_receive_token:
+                            "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
+                }}
+            />
+        </>
+    );
+}
+```
+<!-- write about pinned token -->
+### Pinned tokens
+You can pin specific tokens to the top of the token selection list by using the `pin_tokens` prop. This ensures that these tokens are always easily accessible to users.
+```tsx
+function App() {
+    return (
+        <>
+            <Swap
+                options={{
+                    pin_tokens: [
+                        "EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c",
+                        "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
+                    ],
+                }}
+            />
+        </>
+    );
+}
+```
 
 ### Components
 1. TonConnectWrappedSwap:

lib/components/Swap/Swap.stories.tsx

@@ -93,11 +93,10 @@ export const WithDefaultTokens: Story = {
             skeleton_shine: "#585959",
         },
         options: {
-            defaultTokens: {
-                pay_token: "EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
-                receive_token:
-                    "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
-            },
+            default_pay_token:
+                "EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
+            default_receive_token:
+                "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
         },
     },
 };

lib/store/options.store.ts

@@ -2,10 +2,8 @@ import { create } from "zustand";
 import { defaultsDeep } from "lodash";
 
 export type SwapOptions = {
-    defaultTokens?: {
-        pay_token?: string;
-        receive_token?: string;
-    };
+    default_pay_token?: string;
+    default_receive_token?: string;
     pin_tokens?: string[];
 };
 

lib/store/swap.store.ts

@@ -232,7 +232,7 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
 
     async initializeApp() {
         const { client, slippage } = get();
-        const { defaultTokens, pin_tokens } =
+        const { default_pay_token, default_receive_token, pin_tokens } =
             useOptionsStore.getState().options;
 
         const getAsset = async (
@@ -259,11 +259,8 @@ export const useSwapStore = create<SwapActions & SwapStates>((set, get) => ({
         };
 
         const initializeTokens = async () => {
-            const payToken = await getAsset(defaultTokens?.pay_token, "TON");
-            const receiveToken = await getAsset(
-                defaultTokens?.receive_token,
-                ""
-            );
+            const payToken = await getAsset(default_pay_token, "TON");
+            const receiveToken = await getAsset(default_receive_token, "");
 
             if (!payToken) return;