refactor: Remove unused TonConnectUI import and commented code

- Removed the unused import of `useTonConnectUI` from `lib/components/Header/Wallet.tsx` and `lib/components/Swap/Swap.tsx`.
- Also removed the commented code related to `useTonConnectUI` in `lib/components/Header/Wallet.tsx` and `lib/components/Swap/Swap.tsx`.

fix: Fix error handling and reporting in multiple files

- Updated error handling and reporting in `lib/components/Header/Wallet.tsx`, `lib/components/Swap/Swap.tsx`, `lib/components/SwapButton/ConfirmationModal.tsx`.
- Removed the unused import of `useTonConnectUI` from `lib/components/SwapButton/ConfirmationModal.tsx`.

refactor: Update Swap component rendering optimization

- Optimized the rendering of the Swap component in `lib/components/Swap/Swap.tsx` by removing unnecessary imports and code.

update: Update readme file

- Updated the readme file.

feat: Add createSwap function to index.tsx

- Added a new function `createSwap` to `lib/components/index.tsx` that allows creating a
chore: Update options store to include TonConnectUI instance

- Updated the options store in `lib/store/options.store.ts` to include a TonConnectUI instance.
- Added a new action `setTonConnectInstance` to set the TonConnectUI instance in the options store.

Author: Ho3einWave

lib/components/Header/Wallet.tsx

@@ -8,7 +8,7 @@ import shortAddress from "../../utils/shortAddress";
 import { FaCheck, FaCopy } from "react-icons/fa6";
 import { useState } from "react";
 import { MdArrowOutward } from "react-icons/md";
-import { useTonConnectUI } from "@tonconnect/ui-react";
+// import { useTonConnectUI } from "@tonconnect/ui-react";
 
 const Wallet = () => {
     // make function and state for copy to clipboard address button
@@ -28,9 +28,9 @@ const Wallet = () => {
     };
 
     const { wallet, balance, disconnect } = useWalletStore();
-    const [tc] = useTonConnectUI();
+    // const [tc] = useTonConnectUI();
     const handleDisconnect = async () => {
-        await tc.disconnect();
+        // await tc.disconnect();
         disconnect();
     };
     const { colors } = useThemeStore();

lib/components/Swap/Swap.tsx

@@ -4,29 +4,18 @@ import SwapCard from "../SwapCard/SwapCard";
 import SwapDetails from "../SwapDetails/SwapDetails";
 import clsx from "clsx";
 import { ColorTheme, useThemeStore } from "../../store/theme.store";
-import {
-    ITonConnect,
-    TonConnectUIProvider,
-    useTonWallet,
-} from "@tonconnect/ui-react";
+import { TonConnectUI, useTonWallet } from "@tonconnect/ui-react";
 import { useOptionsStore, SwapOptions } from "../../store/options.store";
 import { ModalState, useSwapStore } from "../../store/swap.store";
 import { useWalletStore } from "../../store/wallet.store";
 import SwapButton from "../SwapButton/SwapButton";
 import "./Swap.scss";
 import { ErrorBoundary } from "react-error-boundary";
 import { Toaster } from "react-hot-toast";
-type SwapProps = {
-    theme?: ColorTheme;
-    options?: SwapOptions;
-} & (
-    | { connector: ITonConnect; manifestUrl?: never }
-    | { connector?: never; manifestUrl: string }
-);
-
-type SwapComponentProps = {
+export type SwapProps = {
     theme?: ColorTheme;
     options?: SwapOptions;
+    tonConnectInstance: TonConnectUI;
 };
 
 // declare telegram in window
@@ -40,12 +29,19 @@ declare global {
     }
 }
 
-export const SwapComponent: FC<SwapComponentProps> = ({ theme, options }) => {
+export const SwapComponent: FC<SwapProps> = ({
+    theme,
+    options,
+    tonConnectInstance,
+}) => {
     const { colors, setTheme } = useThemeStore();
-    const { setOptions } = useOptionsStore();
+    const { setOptions, setTonConnectInstance } = useOptionsStore();
     if (theme) {
         setTheme(theme);
     }
+    if (tonConnectInstance) {
+        setTonConnectInstance(tonConnectInstance);
+    }
     if (options) {
         setOptions(options);
     }
@@ -114,7 +110,11 @@ export const SwapComponent: FC<SwapComponentProps> = ({ theme, options }) => {
                             style={{ color: colors.text_black }}
                         >
                             Service provided by{" "}
-                            <a href="https://mytonswap.com" target="_blank">
+                            <a
+                                href="https://mytonswap.com"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
                                 MyTonSwap
                             </a>
                         </div>
@@ -127,18 +127,6 @@ export const SwapComponent: FC<SwapComponentProps> = ({ theme, options }) => {
     );
 };
 
-export const Swap: FC<SwapProps> = ({
-    connector,
-    manifestUrl,
-    ...restProps
-}) => {
-    return (
-        <TonConnectUIProvider
-            {...(connector
-                ? { connector: connector }
-                : { manifestUrl: manifestUrl })}
-        >
-            <SwapComponent {...restProps} />
-        </TonConnectUIProvider>
-    );
+export const Swap: FC<SwapProps> = ({ ...restProps }) => {
+    return <SwapComponent {...restProps} />;
 };

lib/components/SwapButton/ConfirmationModal.tsx

@@ -6,9 +6,9 @@ import { FaArrowRightArrowLeft } from "react-icons/fa6";
 import SwapKeyValue from "../SwapDetails/SwapKeyValue";
 import formatNumber from "../../utils/formatNum";
 import swap from "../../utils/swap";
-import { useTonConnectUI } from "@tonconnect/ui-react";
 import { FC } from "react";
 import "./ConfirmationModal.scss";
+import { useOptionsStore } from "../../store/options.store";
 type ConfirmationModalProps = {
     setConfirmModal: (state: boolean) => void;
 };
@@ -17,10 +17,10 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
     const handleConfirmClose = () => {
         setConfirmModal(false);
     };
-    const [tonConnect, setOptions] = useTonConnectUI();
-    setOptions({
-        actionsConfiguration: { modals: [] },
-    });
+    const { tonConnectInstance } = useOptionsStore();
+    // tonConnectInstance?.uiOptions = {
+    //     actionsConfiguration: { modals: [] },
+    // }
 
     const { colors } = useThemeStore();
     const {
@@ -33,9 +33,11 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         setModalState,
     } = useSwapStore();
     const handleConfirmSwap = () => {
-        swap(tonConnect, bestRoute!);
-        setConfirmModal(false);
-        setModalState(ModalState.WAITING);
+        if (tonConnectInstance?.wallet) {
+            swap(tonConnectInstance, bestRoute!);
+            setConfirmModal(false);
+            setModalState(ModalState.WAITING);
+        }
     };
     return (
         <div className="confirm-modal-container">

lib/components/SwapButton/SwapButton.tsx

@@ -1,5 +1,4 @@
 import { useThemeStore } from "../../store/theme.store";
-import { useTonConnectModal, useTonWallet } from "@tonconnect/ui-react";
 import { useWalletStore } from "../../store/wallet.store";
 import { ModalState, useSwapStore } from "../../store/swap.store";
 import { AnimatePresence, motion } from "framer-motion";
@@ -18,19 +17,20 @@ import {
 } from "../../constants";
 import { useLongPress } from "@uidotdev/usehooks";
 import toast from "react-hot-toast";
+import { useOptionsStore } from "../../store/options.store";
 
 const SwapButton = () => {
-    const { open } = useTonConnectModal();
+    const { tonConnectInstance } = useOptionsStore();
     const { colors } = useThemeStore();
-    const wallet = useTonWallet();
+
     const isDesktop = useMediaQuery("(min-width: 768px)");
     const { balance } = useWalletStore();
     const { pay_amount, pay_token, bestRoute, swapModal, receive_token } =
         useSwapStore();
 
     const [confirmModal, setConfirmModal] = useState(false);
     const getSwapText = () => {
-        if (!wallet) return "Connect Wallet";
+        if (!tonConnectInstance?.wallet) return "Connect Wallet";
         if (!receive_token || !pay_token) return "Choose a token";
         if (pay_amount === 0n) return "Enter an amount";
         if (bestRoute && !bestRoute.pool_data.status)
@@ -42,7 +42,7 @@ const SwapButton = () => {
     };
 
     const isButtonDisabled = () => {
-        if (!wallet) return false;
+        if (!tonConnectInstance?.wallet) return false;
         if (!pay_amount || !pay_token) return true;
         if (bestRoute && !bestRoute.pool_data.status) return true;
         if (pay_amount > Number(balance.get(pay_token!.address)?.balance ?? 0))
@@ -55,8 +55,8 @@ const SwapButton = () => {
     const buttonDisabled = isButtonDisabled();
 
     const handleSwapClick = () => {
-        if (!wallet) {
-            open();
+        if (!tonConnectInstance?.wallet) {
+            tonConnectInstance?.openModal();
         } else {
             setConfirmModal(true);
         }

lib/components/index.ts

@@ -0,0 +1,7 @@
+import { Swap, SwapProps } from "./Swap/Swap";
+import { createRoot } from "react-dom/client";
+export const createSwap = (elementId: string, options: SwapProps) => {
+    const root = document.getElementById(elementId);
+    if (!root) throw new Error("Element does not exist");
+    createRoot(root).render(<Swap {...options} />);
+};

lib/components/index.tsx

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { defaultsDeep } from "lodash";
+import { TonConnectUI } from "@tonconnect/ui-react";
 
 export type SwapOptions = {
     default_pay_token?: string;
@@ -14,14 +15,17 @@ export type SwapOptions = {
 type SwapOptionsStates = {
     options: SwapOptions;
     userOptions: SwapOptions;
+    tonConnectInstance: TonConnectUI | null;
 };
 
 type SwapOptionsActions = {
     setOptions: (options: SwapOptions) => void;
+    setTonConnectInstance: (instance: TonConnectUI) => void;
 };
 
 export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
     (set, get) => ({
+        tonConnectInstance: null,
         options: {
             ui_preferences: {
                 disable_provided_text: false,
@@ -37,5 +41,8 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
             ) satisfies SwapOptions;
             set({ options: newSchema, userOptions: option });
         },
+        setTonConnectInstance: (instance) => {
+            set({ tonConnectInstance: instance });
+        },
     })
 );