tact-lang · Kaladin13 · Jul 21, 2025 · Jul 8, 2025
diff --git a/src/components/NetworkSwitcher.css b/src/components/NetworkSwitcher.css
@@ -28,4 +28,4 @@
 .network-button.active {
   color: var(--color-text);
   background-color: var(--color-surface);
-} 
+}
diff --git a/src/components/Swap.css b/src/components/Swap.css
@@ -4,7 +4,7 @@
   padding: 1.5rem;
   background: #181a20;
   border-radius: 1.5rem;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
   color: #fff;
   display: flex;
   flex-direction: column;
@@ -69,8 +69,6 @@
   color: #555;
 }
 
-
-
 .amount-setter {
   display: flex;
   justify-content: flex-end;
@@ -113,8 +111,11 @@
   color: #00aaff;
   cursor: pointer;
   margin: 0.25rem 0;
-  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
-  box-shadow: 0 2px 8px rgba(0,170,255,0.04);
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.04);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -123,7 +124,7 @@
 .swap-direction:hover {
   background: #00aaff22;
   border-color: #00aaff;
-  box-shadow: 0 4px 16px rgba(0,170,255,0.15);
+  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.15);
 }
 
 .swap-direction:active {
@@ -194,15 +195,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  transition: background 0.2s, box-shadow 0.2s;
-  box-shadow: 0 2px 8px rgba(0,170,255,0.04);
+  transition:
+    background 0.2s,
+    box-shadow 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.04);
   height: 3rem;
   box-sizing: border-box;
 }
-.tact-dropdown-btn:focus, .tact-dropdown-btn:hover {
+.tact-dropdown-btn:focus,
+.tact-dropdown-btn:hover {
   background: #1a2233;
   color: #00aaff;
-  box-shadow: 0 4px 16px rgba(0,170,255,0.10);
+  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.1);
 }
 
 .tact-dropdown-menu {
@@ -212,7 +216,7 @@
   width: 100%;
   background: #23262f;
   border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0,170,255,0.10);
+  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.1);
   z-index: 10;
   overflow: hidden;
   border: 1px solid #00aaff33;
@@ -223,10 +227,13 @@
   cursor: pointer;
   color: #fff;
   font-size: 1.05rem;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
   background: none;
 }
-.tact-dropdown-item:hover, .tact-dropdown-item:focus {
+.tact-dropdown-item:hover,
+.tact-dropdown-item:focus {
   background: #00aaff22 !important;
   color: #00aaff !important;
 }
@@ -237,23 +244,25 @@
 }
 
 /* Custom input for jetton address */
-.swap-section input[type="text"] {
+.swap-section input[type='text'] {
   background: #181a20;
   border: 1px solid #00aaff33;
   color: #fff;
   border-radius: 12px;
   padding: 0.75rem;
   font-size: 1.1rem;
-  transition: border 0.2s, box-shadow 0.2s;
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
 }
-.swap-section input[type="text"]:focus {
+.swap-section input[type='text']:focus {
   border: 1.5px solid #00aaff;
   box-shadow: 0 0 0 2px #00aaff33;
   outline: none;
 }
 
 /* Make address input same size as dropdown */
-.tact-dropdown + input[type="text"] {
+.tact-dropdown + input[type='text'] {
   width: 180px;
   background: #23262f;
   border-radius: 12px;
@@ -262,11 +271,13 @@
   border: none;
   color: #fff;
   margin-top: 0.5rem;
-  transition: box-shadow 0.2s, border 0.2s;
-  box-shadow: 0 2px 8px rgba(0,170,255,0.04);
+  transition:
+    box-shadow 0.2s,
+    border 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.04);
 }
-.tact-dropdown + input[type="text"]:focus {
-  box-shadow: 0 4px 16px rgba(0,170,255,0.10);
+.tact-dropdown + input[type='text']:focus {
+  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.1);
   border: 1.5px solid #00aaff;
   background: #1a2233;
-}
+}
diff --git a/src/components/SwapProgress.css b/src/components/SwapProgress.css
@@ -131,7 +131,8 @@
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -187,4 +188,4 @@
   background: #2d3748;
   cursor: not-allowed;
   opacity: 0.6;
-}
+}
diff --git a/src/components/SwapProgress.tsx b/src/components/SwapProgress.tsx
@@ -35,57 +35,57 @@ const SwapProgress: React.FC<SwapProgressProps> = ({
         return '✗'
       case 'loading':
         return (
-          <div className="spinner">
-            <div className="spinner-ring"></div>
+          <div className='spinner'>
+            <div className='spinner-ring'></div>
           </div>
         )
       default:
-        return SWAP_STEPS.findIndex(step => step.id === stepId) + 1
+        return SWAP_STEPS.findIndex((step) => step.id === stepId) + 1
     }
   }
 
-  const isCompleted = SWAP_STEPS.every(step => stepStatuses[step.id] === 'success')
-  const hasError = SWAP_STEPS.some(step => stepStatuses[step.id] === 'error')
+  const isCompleted = SWAP_STEPS.every((step) => stepStatuses[step.id] === 'success')
+  const hasError = SWAP_STEPS.some((step) => stepStatuses[step.id] === 'error')
 
   return (
-    <div className="swap-progress-overlay">
-      <div className="swap-progress-modal">
-        <div className="swap-progress-header">
-          <h3 className="swap-progress-title">
+    <div className='swap-progress-overlay'>
+      <div className='swap-progress-modal'>
+        <div className='swap-progress-header'>
+          <h3 className='swap-progress-title'>
             {isCompleted ? 'Swap Completed!' : hasError ? 'Swap Failed' : 'Processing Swap'}
           </h3>
           {fromTokenSymbol && toTokenSymbol && (fromAmount || toAmount) && (
-            <p className="swap-progress-subtitle">
+            <p className='swap-progress-subtitle'>
               {fromAmount && toAmount ? (
-                <>Swap {fromAmount} {fromTokenSymbol} to {toAmount} {toTokenSymbol}</>
+                <>
+                  Swap {fromAmount} {fromTokenSymbol} to {toAmount} {toTokenSymbol}
+                </>
               ) : (
-                <>Swap {amount} {fromTokenSymbol} to {toTokenSymbol}</>
+                <>
+                  Swap {amount} {fromTokenSymbol} to {toTokenSymbol}
+                </>
               )}
             </p>
           )}
         </div>
 
-        <div className="swap-progress-steps">
+        <div className='swap-progress-steps'>
           {SWAP_STEPS.map((step) => {
             const status = stepStatuses[step.id]
             return (
               <div
                 key={step.id}
                 className={`swap-progress-step ${status}`}
               >
-                <div className="swap-progress-step-icon">
-                  {getStepIcon(step.id, status)}
-                </div>
-                <div className="swap-progress-step-label">
-                  {step.label}
-                </div>
+                <div className='swap-progress-step-icon'>{getStepIcon(step.id, status)}</div>
+                <div className='swap-progress-step-label'>{step.label}</div>
               </div>
             )
           })}
         </div>
 
         <button
-          className="swap-progress-close"
+          className='swap-progress-close'
           onClick={onClose}
           disabled={!isCompleted && !hasError}
         >
@@ -96,4 +96,4 @@ const SwapProgress: React.FC<SwapProgressProps> = ({
   )
 }
 
-export default SwapProgress
+export default SwapProgress
diff --git a/src/components/TokenSelector.tsx b/src/components/TokenSelector.tsx
@@ -80,13 +80,13 @@ export default function TokenSelector({
     setMode(value)
     setOpen(false)
     if (value === 'ton') {
-      setCustomAddress('');
-      setHasTyped(false);
+      setCustomAddress('')
+      setHasTyped(false)
       const ton = tokens.find((t) => t.type === 'ton')
       if (ton) onSelect(ton)
     } else {
-      setCustomAddress('');
-      setHasTyped(false);
+      setCustomAddress('')
+      setHasTyped(false)
       onSelect({
         type: 'jetton',
         symbol: 'JETTON',
@@ -100,12 +100,19 @@ export default function TokenSelector({
   }
 
   const showPreview =
-    mode === 'ton' || (mode === 'jetton' && selected && selected.type === 'jetton' && selected.address && selected.symbol && selected.logo && hasTyped);
+    mode === 'ton' ||
+    (mode === 'jetton' &&
+      selected &&
+      selected.type === 'jetton' &&
+      selected.address &&
+      selected.symbol &&
+      selected.logo &&
+      hasTyped)
 
   const handleCustomAddressChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const addr = e.target.value;
-    setCustomAddress(addr);
-    setHasTyped(true);
+    const addr = e.target.value
+    setCustomAddress(addr)
+    setHasTyped(true)
     onSelect({
       type: 'jetton',
       symbol: 'JETTON',
@@ -114,9 +121,9 @@ export default function TokenSelector({
       balance: 0n,
       address: addr,
       vaultAddress: '',
-    });
+    })
     if (setJettonAddressStatus) {
-      setJettonAddressStatus(undefined);
+      setJettonAddressStatus(undefined)
     }
     try {
       await onJettonAddressInput({
@@ -125,14 +132,14 @@ export default function TokenSelector({
         network,
         setVaultAddress: setVaultAddress,
         onSelect,
-      });
-      if (setJettonAddressStatus) setJettonAddressStatus('success');
+      })
+      if (setJettonAddressStatus) setJettonAddressStatus('success')
     } catch (err) {
-      if (setJettonAddressStatus) setJettonAddressStatus('error');
+      if (setJettonAddressStatus) setJettonAddressStatus('error')
 
-      toast.error(typeof err === 'string' ? err : (err instanceof Error ? err.message : String(err)))
+      toast.error(typeof err === 'string' ? err : err instanceof Error ? err.message : String(err))
     }
-  };
+  }
 
   const getLogoSrc = (token: Token) => {
     if (token.logo) return token.logo
@@ -142,7 +149,7 @@ export default function TokenSelector({
 
   // Helper to truncate addresses
   const truncateAddress = (addr: string) =>
-    addr.length > 12 ? `${addr.slice(0, 4)}...${addr.slice(-4)}` : addr;
+    addr.length > 12 ? `${addr.slice(0, 4)}...${addr.slice(-4)}` : addr
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
@@ -173,7 +180,11 @@ export default function TokenSelector({
         >
           {showPreview && selected ? (
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexGrow: 1 }}>
-              <img src={getLogoSrc(selected)} alt={`${selected.symbol} logo`} style={{ width: 24, height: 24, borderRadius: '50%' }} />
+              <img
+                src={getLogoSrc(selected)}
+                alt={`${selected.symbol} logo`}
+                style={{ width: 24, height: 24, borderRadius: '50%' }}
+              />
               <span style={{ fontWeight: 'bold' }}>{selected.name}</span>
             </div>
           ) : (
@@ -235,26 +246,24 @@ export default function TokenSelector({
             marginTop: 4,
             padding: '0.75rem',
             borderRadius: 12,
-            border:
-              !hasTyped
-                ? 'none'
-                : jettonAddressStatus === 'error'
+            border: !hasTyped
+              ? 'none'
+              : jettonAddressStatus === 'error'
                 ? '1.5px solid #f85149'
                 : jettonAddressStatus === 'success'
-                ? '1.5px solid #3fb950'
-                : 'none',
+                  ? '1.5px solid #3fb950'
+                  : 'none',
             background: '#23262f',
             color: '#fff',
             fontSize: '1.1rem',
             outline: 'none',
-            boxShadow:
-              !hasTyped
-                ? undefined
-                : jettonAddressStatus === 'error'
+            boxShadow: !hasTyped
+              ? undefined
+              : jettonAddressStatus === 'error'
                 ? '0 0 0 2px #f8514933'
                 : jettonAddressStatus === 'success'
-                ? '0 0 0 2px #3fb95033'
-                : undefined,
+                  ? '0 0 0 2px #3fb95033'
+                  : undefined,
             transition: 'border 0.2s, box-shadow 0.2s',
           }}
         />