Merge pull request #147 from LedgityLabs/xswap

Xswap

next.config.mjs

@@ -28,6 +28,12 @@ const nextConfig = {
         hostname: "pbs.twimg.com",
         port: "",
       },
+      // Added for Chainlink badges
+      {
+        protocol: "https",
+        hostname: "chain.link",
+        port: "",
+      },
     ],
   },
   async redirects() {
@@ -40,4 +46,5 @@ const nextConfig = {
     ];
   },
 };
+
 export default nextConfig;

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "engines": {
     "node": ">=16.0.0",
-  "yarn": "^1.22.0"
+    "yarn": "^1.22.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -76,7 +76,7 @@
     "@tanstack/react-query": "^5.20.2",
     "@tanstack/react-table": "^8.11.2",
     "@wagmi/core": "^2",
-    "@xswap-link/sdk": "^0.3.3",
+    "@xswap-link/sdk": "^0.6.4",
     "chart.js": "^4.4.1",
     "chartjs-adapter-luxon": "^1.3.1",
     "class-variance-authority": "^0.7.0",

src/app/app/[tab]/AppTabs.tsx

@@ -11,7 +11,7 @@ import { twMerge } from "tailwind-merge";
 import { AppPreMining } from "@/components/app/pre-mining/AppPreMining";
 import { SessionProvider } from "next-auth/react";
 import { AppStaking } from "@/components/app/staking/AppStaking";
-import { XPayButton } from "@/components/app/xswap/XswapModal";
+import { XSwapWidget } from "@/components/app/xswap/XswapWidget";
 import Link from "next/link";
 import { AppAffiliate } from "@/components/app/affiliate/AppAffiliate";
 import { AppSwap } from "@/components/app/swap/AppSwap";
@@ -66,7 +66,7 @@ const _AppTabs: FC = () => {
         <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
         <TabsTrigger value="affiliate">Affiliate Program</TabsTrigger>
         <TabsTrigger value="swap">Swap</TabsTrigger>
-        <XPayButton />
+        <TabsTrigger value="bridge">Bridge</TabsTrigger>
       </TabsList>
       <div className="[&_>_*]:animate-fadeAndMoveIn [&_>_*]:[animation-duration:300ms] sm:px-5 max-w-[100vw]">
         <SessionProvider>
@@ -91,6 +91,9 @@ const _AppTabs: FC = () => {
           <TabsContent value="swap">
             <AppSwap />
           </TabsContent>
+          <TabsContent value="bridge">
+            <XSwapWidget />
+          </TabsContent>
         </SessionProvider>
       </div>
     </Tabs>

src/components/app/invest/EthVault/AppInvestEthVault.tsx

@@ -53,6 +53,15 @@ const AppInvestEthVault: React.FC = () => {
   }, [hasClaimableRewards, handleClaimRewards, notify]);
 
   const onDeposit = useCallback(async (amount: string) => {
+    if (!amount || isNaN(parseFloat(amount))) {
+      notify.error('Invalid Input', 'Please enter a valid amount to deposit.');
+      return;
+    }
+    const depositAmount = parseFloat(amount);
+    if (depositAmount < 0.05) {
+      notify.error('Deposit Failed', 'Minimum deposit amount is 0.05 ETH.');
+      return;
+    }
     try {
       const loadingToast = notify.loading('Processing Deposit', 'Please wait while we process your deposit...');
       await handleDeposit(amount);
@@ -66,6 +75,16 @@ const AppInvestEthVault: React.FC = () => {
   }, [handleDeposit, notify]);
 
   const onWithdraw = useCallback(async (amount: string) => {
+    if (!amount || isNaN(parseFloat(amount))) {
+      notify.error('Invalid Input', 'Please enter a valid amount to withdraw.');
+      return;
+    }
+    const withdrawAmount = parseFloat(amount);
+    const availableBalance = parseFloat(invested);
+    if (withdrawAmount > availableBalance) {
+      notify.error('Withdrawal Failed', `You can't withdraw more than your available balance of ${availableBalance} ETH.`);
+      return;
+    }
     try {
       const loadingToast = notify.loading('Processing Withdrawal', 'Please wait while we process your withdrawal...');
       await handleWithdraw(amount);
@@ -76,7 +95,7 @@ const AppInvestEthVault: React.FC = () => {
       console.error('Error during withdrawal:', error);
       notify.error('Withdrawal Failed', 'An error occurred during the withdrawal. Please check your wallet and try again.');
     }
-  }, [handleWithdraw, notify]);
+  }, [handleWithdraw, notify, invested]);
 
   useEffect(() => {
     refetchSubgraphData();
@@ -96,13 +115,19 @@ const AppInvestEthVault: React.FC = () => {
     );
   }
 
-  const formatNumber = (value: string | number) => {
+  const formatNumberTo2 = (value: string | number) => {
     return parseFloat(value.toString()).toFixed(2);
   };
 
+  const formatNumberTo3 = (value: string | number) => {
+    return parseFloat(value.toString()).toFixed(3);
+  };
+
+
+
   return (
     <ErrorBoundary>
-      <Card
+           <Card
         defaultGradient={true}
         circleIntensity={0.07}
         className="w-full flex flex-col gap-10 relative overflow-hidden"
@@ -124,11 +149,11 @@ const AppInvestEthVault: React.FC = () => {
           <div className="flex sm:gap-6 gap-4 flex-wrap">
             <div className="flex flex-col items-start gap-1">
               <h3 className="font-bold text-sm text-fg/50 whitespace-nowrap">Claimable</h3>
-              <span className="text-lg text-fg/90 font-heading font-bold">{formatNumber(calculatedRewards)}</span>
+              <span className="text-lg text-fg/90 font-heading font-bold">{formatNumberTo3(calculatedRewards)}</span>
             </div>
             <div className="flex flex-col items-start gap-1">
               <h3 className="font-bold text-sm text-fg/50 whitespace-nowrap">Claimed</h3>
-              <span className="text-lg text-fg/90 font-heading font-bold">{formatNumber(totalRewardsClaimed)}</span>
+              <span className="text-lg text-fg/90 font-heading font-bold">{formatNumberTo3(totalRewardsClaimed)}</span>
             </div>
           </div>
         </div>
@@ -155,15 +180,15 @@ const AppInvestEthVault: React.FC = () => {
                 <div className="font-semibold text-fg/70">Invested</div>
               </div>
               <div className="font-semibold text-fg/70 flex-grow text-center">Actions</div>
-              <div className="flex-grow"></div> {/* This empty div helps to position 'Actions' in the middle */}
+              <div className="flex-grow"></div>
             </div>
           </div>
           <div className="p-6 rounded-lg shadow-md mb-6" style={{ backgroundColor: '#d7defb' }}>
             <div className="flex flex-col md:flex-row items-center mb-6">
               <div className="flex flex-col md:flex-row md:space-x-16 flex-grow mb-4 md:mb-0">
                 <div>{epochs[0]?.apr || "0%"}</div>
-                <div>{formatNumber(formatEther(currentEpoch.totalValueLocked))}</div>
-                <div>{formatNumber(invested)}</div>
+                <div>{formatNumberTo2(formatEther(currentEpoch.totalValueLocked))}</div>
+                <div>{formatNumberTo2(invested)}</div>
               </div>
               <div className="flex space-x-2">
                 <Button

src/components/app/invest/EthVault/DepositModal.tsx

@@ -16,7 +16,6 @@ const DepositModal: React.FC<DepositModalProps> = ({ isOpen, onClose, onDeposit
         setIsLoading(true);
         try {
             await onDeposit(amount);
-            onClose();
         } catch (error) {
             console.error('Deposit failed:', error);
         } finally {
@@ -50,35 +49,36 @@ const DepositModal: React.FC<DepositModalProps> = ({ isOpen, onClose, onDeposit
                             leaveFrom="opacity-100 scale-100"
                             leaveTo="opacity-0 scale-95"
                         >
-                            <Dialog.Panel className="w-full max-w-sm transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                            <Dialog.Panel className="w-full max-w-sm transform overflow-hidden rounded-2xl bg-gradient-to-r from-white to-blue-50 p-6 text-left align-middle shadow-xl transition-all">
                                 <Dialog.Title
                                     as="h3"
                                     className="text-lg font-medium leading-6 text-gray-900 mb-4"
                                 >
                                     Deposit ETH
                                 </Dialog.Title>
                                 <div className="mt-2">
+                                    <p className="mb-2 text-sm text-blue-500">minimum stake of 0.05 ETH</p>
                                     <input
                                         type="text"
                                         value={amount}
                                         onChange={(e) => setAmount(e.target.value)}
                                         placeholder="Enter amount in ETH"
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                        className="w-full px-3 py-2 border border-blue-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white"
                                     />
                                 </div>
 
                                 <div className="mt-4 flex justify-between">
                                     <button
                                         type="button"
-                                        className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                        className="inline-flex justify-center rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                                         onClick={handleDeposit}
                                         disabled={isLoading}
                                     >
                                         {isLoading ? 'Depositing...' : 'Deposit'}
                                     </button>
                                     <button
                                         type="button"
-                                        className="inline-flex justify-center rounded-md border border-transparent bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2"
+                                        className="inline-flex justify-center rounded-md border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                                         onClick={onClose}
                                     >
                                         Cancel

src/components/app/invest/EthVault/WithdrawModal.tsx

@@ -1,58 +1,94 @@
 import React, { useState } from 'react';
-import { parseEther } from 'viem';
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
 
 interface WithdrawModalProps {
     isOpen: boolean;
     onClose: () => void;
-    onWithdraw: (amount: string) => void;
+    onWithdraw: (amount: string) => Promise<void>;
     maxAmount: string;
 }
 
 const WithdrawModal: React.FC<WithdrawModalProps> = ({ isOpen, onClose, onWithdraw, maxAmount }) => {
     const [amount, setAmount] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
 
-    const handleWithdraw = () => {
-        if (!amount) {
-            alert('Please enter an amount to withdraw');
-            return;
+    const handleWithdraw = async () => {
+        setIsLoading(true);
+        try {
+            await onWithdraw(amount);
+        } catch (error) {
+            console.error('Withdrawal failed:', error);
+        } finally {
+            setIsLoading(false);
         }
-        if (parseFloat(amount) > parseFloat(maxAmount)) {
-            alert('Cannot withdraw more than your invested amount');
-            return;
-        }
-        onWithdraw(amount);
     };
 
-    if (!isOpen) return null;
-
     return (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-            <div className="bg-white p-6 rounded-lg">
-                <h2 className="text-xl font-bold mb-4">Withdraw ETH</h2>
-                <p className="mb-2">Available to withdraw: {maxAmount} ETH</p>
-                <input
-                    type="number"
-                    value={amount}
-                    onChange={(e) => setAmount(e.target.value)}
-                    placeholder="Amount to withdraw"
-                    className="w-full p-2 border rounded mb-4"
-                />
-                <div className="flex justify-end space-x-2">
-                    <button
-                        onClick={onClose}
-                        className="px-4 py-2 bg-gray-200 rounded"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        onClick={handleWithdraw}
-                        className="px-4 py-2 bg-blue-500 text-white rounded"
-                    >
-                        Withdraw
-                    </button>
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-50" onClose={onClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black bg-opacity-25" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-sm transform overflow-hidden rounded-2xl bg-gradient-to-r from-white to-blue-50 p-6 text-left align-middle shadow-xl transition-all">
+                                <Dialog.Title
+                                    as="h3"
+                                    className="text-lg font-medium leading-6 text-gray-900 mb-4"
+                                >
+                                    Withdraw ETH
+                                </Dialog.Title>
+                                <div className="mt-2">
+                                    <p className="mb-2 text-sm text-blue-500">Available to withdraw: {maxAmount} ETH</p>
+                                    <input
+                                        type="number"
+                                        value={amount}
+                                        onChange={(e) => setAmount(e.target.value)}
+                                        placeholder="Amount to withdraw"
+                                        className="w-full p-2 border border-blue-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white"
+                                    />
+                                </div>
+                                <div className="mt-4 flex justify-between">
+                                    <button
+                                        onClick={handleWithdraw}
+                                        disabled={isLoading}
+                                        className="px-4 py-2 bg-blue-500 rounded text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                    >
+                                        {isLoading ? 'Withdrawing...' : 'Withdraw'}
+                                    </button>
+                                    <button
+                                        onClick={onClose}
+                                        className="px-4 py-2 bg-white border border-blue-200 rounded text-sm font-medium text-blue-600 hover:bg-blue-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                    >
+                                        Cancel
+                                    </button>
+
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
                 </div>
-            </div>
-        </div>
+            </Dialog>
+        </Transition>
     );
 };