feedback

Author: qardpeet

src/pages/spot/Spot.tsx

@@ -129,6 +129,8 @@ const DUMMY_TOKENS: SpotMarketToken[] = [
   },
 ];
 
+// TODO: spot localization
+
 const SpotPage = () => {
   const { symbol } = useParams<{ symbol: string }>();
 

src/pages/spot/SpotFormInput.tsx

@@ -77,6 +77,8 @@ export type SpotFormInputProps = {
   };
 } & InputProps;
 
+// TODO: spot localization
+
 export const SpotFormInput = forwardRef<HTMLInputElement, SpotFormInputProps>(
   (
     {

src/pages/spot/SpotHoldingsTable.tsx

@@ -38,6 +38,8 @@ export enum SpotHoldingsTableColumnKey {
   Actions = 'Actions',
 }
 
+// TODO: spot localization
+
 const getColumnDef = ({
   key,
   width,

src/pages/spot/SpotHorizontalPanel.tsx

@@ -18,6 +18,8 @@ type SpotHorizontalPanelProps = {
   onSellAction?: SpotHoldingsTableProps['onSellAction'];
 };
 
+// TODO: spot localization
+
 export const SpotHorizontalPanel = ({
   data,
   isOpen = true,

src/pages/spot/SpotMarketStatsRow.tsx

@@ -11,6 +11,8 @@ type SpotMarketStatsRowProps = {
   stats: SpotMarketToken;
 };
 
+// TODO: spot localization
+
 export const SpotMarketStatsRow = ({ stats }: SpotMarketStatsRowProps) => {
   const items: DetailsItem[] = [
     {

src/pages/spot/SpotMarketsDropdown.tsx

@@ -31,6 +31,8 @@ type SpotMarketsDropdownProps = {
   className?: string;
 };
 
+// TODO: spot localization
+
 export const SpotMarketsDropdown = ({
   current,
   searchResults,

src/pages/spot/SpotTabs.tsx

@@ -79,10 +79,10 @@ const $Root = styled(Root)`
 const $List = styled(List)`
   display: flex;
   flex-direction: row;
-  padding: 2px;
+  padding: 0.125rem;
   background-color: var(--color-layer-1);
   border-radius: var(--tab-border-radius);
-  gap: 2px;
+  gap: 0.125rem;
 `;
 
 const spotTabVariants: Record<SpotTabVariant, ReturnType<typeof css>> = {
@@ -125,8 +125,8 @@ const $Trigger = styled(Trigger)<{
   font-size: var(--fontSize-base);
   font-weight: 500;
   flex: 1;
-  height: 37px;
-  border-radius: calc(var(--tab-border-radius) - 2px);
+  height: 2.25rem;
+  border-radius: calc(var(--tab-border-radius) - 0.125rem);
   padding: 0 1rem;
   text-align: center;
 `;

src/pages/spot/SpotTokenInfo.tsx

@@ -31,6 +31,8 @@ type SpotTokenInfoProps = {
   className?: string;
 };
 
+// TODO: spot localization
+
 export const SpotTokenInfo = ({
   links,
   items,

src/pages/spot/SpotTradeForm.tsx

@@ -3,8 +3,10 @@ import { useMemo, useRef, useState } from 'react';
 import { SpotBuyInputType, SpotSellInputType, SpotSide } from '@/bonsai/forms/spot';
 
 import { ButtonAction, ButtonState } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
 
 import { useSpotForm } from '@/hooks/useSpotForm';
+import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Button } from '@/components/Button';
 
@@ -13,13 +15,10 @@ import { SpotFormInput } from './SpotFormInput';
 import { SpotTabs, SpotTabVariant } from './SpotTabs';
 
 export const SpotTradeForm = () => {
-  // Use the spot form hook for Redux-managed state
+  const stringGetter = useStringGetter();
   const form = useSpotForm();
 
-  // Local UI state (not in Redux)
   const [isSubmitting, setIsSubmitting] = useState(false);
-
-  // Quick options state
   const [quickOptionsState, setQuickOptionsState] = useState({
     [SpotSide.SELL]: {
       [SpotSellInputType.PERCENT]: ['10', '25', '50', '100'],
@@ -153,18 +152,20 @@ export const SpotTradeForm = () => {
             }}
             state={isSubmitting ? ButtonState.Loading : ButtonState.Default}
           >
-            {form.state.side === SpotSide.BUY ? 'Buy' : 'Sell'}
+            {form.state.side === SpotSide.BUY
+              ? stringGetter({ key: STRING_KEYS.BUY })
+              : stringGetter({ key: STRING_KEYS.SELL })}
           </Button>
         </div>
       }
       items={[
         {
-          label: 'Buy',
+          label: stringGetter({ key: STRING_KEYS.BUY }),
           value: SpotSide.BUY,
           variant: SpotTabVariant.Buy,
         },
         {
-          label: 'Sell',
+          label: stringGetter({ key: STRING_KEYS.SELL }),
           value: SpotSide.SELL,
           variant: SpotTabVariant.Sell,
         },