ui(swush): ui makeover with swush branding (#11)

* feat: swush ui

* refactor: improve layout and spacing in Swap components

This commit refines the layout and spacing of the SwapContainer, SwapAction, and SwapHeader components to enhance the overall user interface. The adjustments include reducing padding and margin values, which streamlines the visual hierarchy and improves the alignment of elements. Specifically, the padding in the SwapContainer has been decreased from `pt-8` to `pt-4`, and the spacing in the SwapField has been adjusted to maintain consistency across the UI.

These changes not only contribute to a cleaner and more cohesive design but also ensure that the components remain responsive and visually appealing across different screen sizes. By focusing on modularity and maintainability, this refactor aligns with our commitment to producing high-quality, production-ready code while preserving existing functionality.

* ui(swush): enhance visual design of SwapConfirmSheet component

* ui(swush): enhance SwapField component with balance display and button size adjustment

* ui: add icons

* ui: override favicon

* ui: update layout spacing and icon disappear in responsive mode

* ui: add top margins for desktop and laptop screens

* ui: fix top margins for desktop and laptop screens

* ui: cleanup

* ui: revert top margins for desktop and laptop screens

* refactor: update input handling and balance display in Swap components

* fix: reset route when input is cleared or set to zero in SwapContainer

* fix: enhance input handling in SwapContainer and useSwapRoute

This commit improves the input handling logic in the SwapContainer component by canceling any pending debounced calls when the input is cleared or set to zero. Additionally, it updates the useSwapRoute hook to include safety checks that prevent API calls with invalid amounts, ensuring that only valid inputs trigger route fetching. These changes enhance the robustness of the swap functionality and prevent unnecessary API calls, ultimately improving user experience and performance.

* feat: add restart script

* ui: adjust layout spacing in SwapContainer for improved responsiveness

Author: muddlebee

apps/web/public/favicon.ico

@@ -9,7 +9,7 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: "Swush",
-  description: "DEX Aggregator on Polkadot Asset Hub",
+  description: "DEX Aggregator on Polkadot Asset Hub"
 };
 
 export default function RootLayout({

apps/web/public/swush-logo.png

@@ -2,13 +2,36 @@ import { Suspense } from 'react'
 import { SwapContainer } from '@/components/swap/SwapContainer'
 import { LoadState } from '@/components/swap/ui/LoadState'
 import { ErrorBoundary } from '@/components/ErrorBoundary'
+import Image from 'next/image'
 
 export default function SwapPage() {
   return (
     <ErrorBoundary>
-      <Suspense fallback={<LoadState />}>
-        <SwapContainer />
-      </Suspense>
+      <div className="min-h-screen relative overflow-hidden">
+        {/* Simplified Swush-inspired background with better contrast */}
+        <div className="absolute inset-0 bg-gradient-to-br from-forest-900 via-forest-900 to-slate-900">
+        </div>
+        
+        {/* Swush Logo - Top Left Corner - Hidden on mobile */}
+        <div className="absolute top-6 left-6 z-20 hidden md:block">
+          <div className="relative">
+            <Image
+              src="/swush-logo.png"
+              alt="Swush"
+              width={100}
+              height={100}
+              className="drop-shadow-lg opacity-90 hover:opacity-100 transition-opacity duration-300"
+              priority
+            />
+            {/* Subtle glow effect and increase the effect time to 300ms*/}
+            <div className="absolute inset-0 bg-gradient-to-br from-flame-400/15 to-flame-500/10 rounded-full filter blur-lg -z-10"></div>
+          </div>
+        </div>
+
+        <Suspense fallback={<LoadState />}>
+          <SwapContainer />
+        </Suspense>
+      </div>
     </ErrorBoundary>
   )
 }

apps/web/src/app/favicon.ico

@@ -28,7 +28,7 @@ import { calculateMinimumReceived } from '@/components/swap'
 
 export function SwapContainer() {
   // UI state
-  const [inputAmount, setInputAmount] = useState('0')
+  const [inputAmount, setInputAmount] = useState('')
   const [slippageTolerance, setSlippageTolerance] = useState(10)
   const [transactionDeadline, setTransactionDeadline] = useState(20)
   const [insufficientBalance, setInsufficientBalance] = useState(false)
@@ -58,6 +58,7 @@ export function SwapContainer() {
     inputBalance,
     outputBalance,
     isBalanceLoading,
+    balancesLoaded,
     resetBalances,
     refreshBalances
   } = useTokenBalances({
@@ -135,7 +136,7 @@ export function SwapContainer() {
     routeState,
     onSuccess: () => {
       // Reset all swap-related states
-      setInputAmount('0');
+      setInputAmount('');
       resetRoute(); // This will reset the output amount and route state
 
       // Slight delay before closing the progress modal to show success state
@@ -148,7 +149,7 @@ export function SwapContainer() {
     },
     onError: (error) => {
       // Reset all swap-related states
-      setInputAmount('0');
+      setInputAmount('');
       resetRoute();
       setIsSwapping(false);
       resetConfirmationState();
@@ -181,7 +182,7 @@ export function SwapContainer() {
     // Reset route state
     resetRoute();
     // Reset input amount
-    setInputAmount('0');
+    setInputAmount('');
   }, [handleDisconnect, showConfirmation, resetConfirmationState, resetBalances, resetRoute]);
 
   // Effect to reset states when tokens change
@@ -190,7 +191,7 @@ export function SwapContainer() {
     setInsufficientBalance(false);
 
     // If we have both tokens and an input amount, fetch new route
-    if (inputToken && outputToken && parseFloat(inputAmount) > 0) {
+    if (inputToken && outputToken && inputAmount && parseFloat(inputAmount) > 0) {
       debouncedFetchRoute(inputAmount);
     }
   }, [inputToken, outputToken, inputAmount, debouncedFetchRoute]);
@@ -202,11 +203,15 @@ export function SwapContainer() {
 
       if (value && parseFloat(value) > 0) {
         debouncedFetchRoute(value);
+      } else {
+        // Cancel any pending debounced calls and reset route when input is cleared or zero
+        debouncedFetchRoute.cancel();
+        resetRoute();
       }
 
       setInsufficientBalance(value !== '' && parseFloat(value) > parseFloat(inputBalance));
     }
-  }, [debouncedFetchRoute, inputBalance]);
+  }, [debouncedFetchRoute, inputBalance, resetRoute]);
 
   const percentageOptions = useMemo(() => [
     { label: '25%', value: 0.25 },
@@ -240,15 +245,15 @@ export function SwapContainer() {
       />
 
       {/* Main Content */}
-      <div className="min-h-screen w-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-cyan-900 to-slate-900 flex flex-col items-center justify-start pt-8">
-        <div className="w-full max-w-md space-y-8">
+      <div className="min-h-screen w-full flex flex-col items-center justify-start px-6 py-8 md:px-4 md:py-4 relative z-10">
+        <div className="w-full max-w-md space-y-6 md:space-y-4">
           <SwapHeader
             slippageTolerance={slippageTolerance}
             setSlippageTolerance={setSlippageTolerance}
           />
 
           <div className="space-y-8">
-            <div className="space-y-6">
+            <div className="">
               <SwapField
                 type="input"
                 token={inputToken}
@@ -265,6 +270,8 @@ export function SwapContainer() {
                 percentageOptions={percentageOptions}
                 onPercentageSelect={(value) => handleInputChange((parseFloat(inputBalance) * value).toString())}
                 isLoading={isConnected && isBalanceLoading}
+                balancesLoaded={balancesLoaded}
+                isConnected={isConnected}
               />
 
               <ArrowSymbolDown />
@@ -282,6 +289,8 @@ export function SwapContainer() {
                 setOpenDialog={setOpenOutputDialog}
                 availableTokens={tokens}
                 isLoading={routeState.isLoading || (isConnected && isBalanceLoading)}
+                balancesLoaded={balancesLoaded}
+                isConnected={isConnected}
                 error={routeState.error}
               />
             </div>
@@ -293,6 +302,7 @@ export function SwapContainer() {
               maxTransactionFee={estimatedFees || simulationResult?.estimatedFee || '0'}
               feeBreakdown={feeBreakdown || simulationResult?.feeBreakdown}
               route={routeDex || ''}
+              isLoading={routeState.isLoading}
             />
 
             <SubmitButtonAction
@@ -302,7 +312,7 @@ export function SwapContainer() {
               setWalletAddress={setWalletAddress}
               onSwap={() => handleSwapExecution(isConnected)}
               insufficientBalance={insufficientBalance}
-              disabled={!inputAmount || parseFloat(inputAmount) <= 0 || insufficientBalance}
+              disabled={!inputAmount || inputAmount === '' || parseFloat(inputAmount) <= 0 || insufficientBalance}
             />
           </div>
         </div>
@@ -320,11 +330,13 @@ export function SwapContainer() {
       <Toaster
         position="top-right"
         toastOptions={{
-          className: "!bg-slate-900 !border !border-slate-800 !text-white",
+          className: "!bg-forest-900/90 !border !border-forest-600/50 !text-forest-100",
           style: {
-            background: 'rgb(15 23 42 / 0.9)',
-            border: '1px solid rgb(51 65 85 / 0.5)',
-            backdropFilter: 'blur(8px)',
+            background: 'rgba(15, 41, 34, 0.9)',
+            border: '1px solid rgba(44, 95, 93, 0.5)',
+            backdropFilter: 'blur(12px)',
+            borderRadius: '12px',
+            boxShadow: '0 10px 40px rgba(255, 107, 53, 0.1)',
           },
         }}
       />

apps/web/src/app/layout.tsx

@@ -20,7 +20,7 @@ export interface RouteState {
 }
 
 export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
-  const [outputAmount, setOutputAmount] = useState('0');
+  const [outputAmount, setOutputAmount] = useState('');
   const [routeDex, setRouteDex] = useState<string | null>(null);
   const [routeState, setRouteState] = useState<RouteState>({
     isLoading: false,
@@ -37,7 +37,7 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
 
   // Reset states when tokens change
   useEffect(() => {
-    setOutputAmount('0');
+    setOutputAmount('');
     setRouteDex(null);
     setRouteState({
       isLoading: false,
@@ -50,7 +50,7 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
 
   const fetchRouteAndUpdateOutput = useCallback(async (currentInputAmount: string) => {
     if (!inputToken || !outputToken || !currentInputAmount || parseFloat(currentInputAmount) <= 0) {
-      setOutputAmount('0');
+      setOutputAmount('');
       setRouteDex(null);
       setRouteState(prev => ({ ...prev, isLoading: false, error: null }));
       setEstimatedFees('0');
@@ -62,7 +62,7 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
     latestInputAmountRef.current = currentInputAmount;
 
     setRouteState(prev => ({ ...prev, isLoading: true, error: null }));
-    setOutputAmount('0');
+    setOutputAmount('');
     setRouteDex('');
 
     try {
@@ -72,8 +72,8 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
         amountIn: currentInputAmount
       });
 
-      // Only update if this is still the latest input amount
-      if (latestInputAmountRef.current === currentInputAmount) {
+      // Only update if this is still the latest input amount and ref hasn't been cleared
+      if (latestInputAmountRef.current === currentInputAmount && latestInputAmountRef.current !== '') {
         setRouteDex(getNetworkDisplayName(route.dex));
         setRouteState({
           isLoading: false,
@@ -97,15 +97,15 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
         errorMessage = `No route available from ${inputToken.symbol} to ${outputToken.symbol}`;
       }
 
-      // Only update if this is still the latest input amount
-      if (latestInputAmountRef.current === currentInputAmount) {
+      // Only update if this is still the latest input amount and ref hasn't been cleared
+      if (latestInputAmountRef.current === currentInputAmount && latestInputAmountRef.current !== '') {
         setRouteState({
           isLoading: false,
           error: errorMessage,
           data: null
         });
         setRouteDex('');
-        setOutputAmount('0');
+        setOutputAmount('');
         setEstimatedFees('0');
         setFeeBreakdown(undefined);
       }
@@ -115,10 +115,11 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
   const debouncedFetchRoute = useMemo(
     () =>
       debounce((amount: string) => {
-        if (parseFloat(amount) > 0) {
+        // Additional safety check to prevent API calls with invalid amounts
+        if (amount && parseFloat(amount) > 0 && !isNaN(parseFloat(amount))) {
           fetchRouteAndUpdateOutput(amount);
         } else {
-          setOutputAmount('0');
+          setOutputAmount('');
           setRouteDex('');
           setRouteState(prev => ({ ...prev, isLoading: false, error: null }));
           setEstimatedFees('0');
@@ -130,7 +131,10 @@ export function useSwapRoute({ inputToken, outputToken }: UseSwapRouteProps) {
 
   // Add resetRoute function
   const resetRoute = useCallback(() => {
-    setOutputAmount('0');
+    // Clear the latest input amount ref to prevent stale API responses
+    latestInputAmountRef.current = '';
+    
+    setOutputAmount('');
     setRouteDex('');
     setRouteState({
       isLoading: false,

apps/web/src/app/page.tsx

@@ -16,17 +16,19 @@ export function useTokenBalances({
   inputToken,
   outputToken
 }: UseTokenBalancesProps) {
-  const [inputBalance, setInputBalance] = useState('0');
-  const [outputBalance, setOutputBalance] = useState('0');
+  const [inputBalance, setInputBalance] = useState('');
+  const [outputBalance, setOutputBalance] = useState('');
   const [isBalanceLoading, setIsBalanceLoading] = useState(false);
+  const [balancesLoaded, setBalancesLoaded] = useState(false);
 
   // Function to fetch balances directly from the API
   const fetchBalances = useCallback(async () => {
     // Early return and reset if not connected or no wallet address
     if (!isConnected || !walletAddress) {
-      setInputBalance('0');
-      setOutputBalance('0');
+      setInputBalance('');
+      setOutputBalance('');
       setIsBalanceLoading(false);
+      setBalancesLoaded(false);
       return;
     }
 
@@ -46,6 +48,10 @@ export function useTokenBalances({
 
       // Only update balances if still connected
       if (isConnected && walletAddress) {
+        // Initialize balances to '0' for tokens that are being fetched
+        if (inputToken) setInputBalance('0');
+        if (outputToken) setOutputBalance('0');
+        
         // Process results and update states
         response.forEach(result => {
           if (result.status === 'success' && result.data) {
@@ -61,6 +67,9 @@ export function useTokenBalances({
             }
           }
         });
+        
+        // Mark balances as loaded
+        setBalancesLoaded(true);
       }
     } catch (error) {
       console.error('Failed to fetch token balances:', error);
@@ -91,9 +100,10 @@ export function useTokenBalances({
       // Only refresh after swap if still connected
       refreshBalances(true, txHash);
     } else {
-      // Just reset the balances to 0 without refreshing
-      setInputBalance('0');
-      setOutputBalance('0');
+      // Just reset the balances to empty without refreshing
+      setInputBalance('');
+      setOutputBalance('');
+      setBalancesLoaded(false);
     }
   }, [refreshBalances, isConnected]);
 
@@ -112,9 +122,10 @@ export function useTokenBalances({
     if (isConnected && walletAddress) {
       fetchIfMounted();
     } else {
-      // Reset balances to 0 when disconnected
-      setInputBalance('0');
-      setOutputBalance('0');
+      // Reset balances to empty when disconnected
+      setInputBalance('');
+      setOutputBalance('');
+      setBalancesLoaded(false);
     }
 
     // Set up regular refresh interval if connected
@@ -135,6 +146,7 @@ export function useTokenBalances({
     inputBalance,
     outputBalance,
     isBalanceLoading,
+    balancesLoaded,
     resetBalances,
     refreshBalances
   };

apps/web/src/app/swush-logo.png

@@ -72,6 +72,8 @@ export interface SwapFieldProps {
   percentageOptions?: Array<{ label: string; value: number }>;
   onPercentageSelect?: (value: number) => void;
   isLoading?: boolean;
+  balancesLoaded?: boolean;
+  isConnected?: boolean;
   error?: string | null;
 }