From fd6801795ecce792a3b2314cd87c62d3d44e1b3e Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Tue, 18 Jun 2024 13:28:53 -0400
Subject: [PATCH 01/12] wip

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   8 +-
 src/components/Details.tsx                    |   4 +-
 src/components/DropdownIcon.tsx               |  36 +++
 src/components/FormMaxInputToggleButton.tsx   |   4 +-
 src/components/Popover.tsx                    |   3 +
 src/components/Table.tsx                      |  31 ++-
 src/components/ValidatorDropdown.tsx          | 257 ++++++++++++++++++
 src/components/ValidatorName.tsx              |  93 -------
 src/constants/validators.ts                   |   9 +
 src/hooks/useStakingValidator.ts              |   3 +
 src/lib/testFlags.ts                          |   3 +-
 src/pages/token/rewards/UnbondingPanels.tsx   |   2 +-
 src/views/MarketsDropdown.tsx                 |   2 +-
 src/views/StakeRewardButtonAndReceipt.tsx     |   2 +
 src/views/dialogs/StakeDialog.tsx             |   1 +
 src/views/dialogs/UnstakeDialog.tsx           |  14 +-
 .../forms/StakeForm/StakeButtonAndReceipt.tsx |  32 ++-
 src/views/forms/StakeForm/index.tsx           |  19 +-
 src/views/forms/UnstakeForm/index.tsx         |  11 +-
 20 files changed, 394 insertions(+), 142 deletions(-)
 create mode 100644 src/components/DropdownIcon.tsx
 create mode 100644 src/components/ValidatorDropdown.tsx
 delete mode 100644 src/components/ValidatorName.tsx
 create mode 100644 src/constants/validators.ts

diff --git a/package.json b/package.json
index 0b43b5fe8..5ab9134a1 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "1.7.83",
     "@dydxprotocol/v4-client-js": "^1.1.20",
-    "@dydxprotocol/v4-localization": "^1.1.127",
+    "@dydxprotocol/v4-localization": "^1.1.128",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@privy-io/react-auth": "^1.69.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 852e0c37a..fe98d3f3d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,8 @@ dependencies:
     specifier: ^1.1.20
     version: 1.1.22
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.127
-    version: 1.1.127
+    specifier: ^1.1.128
+    version: 1.1.128
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1423,8 +1423,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.127:
-    resolution: {integrity: sha512-6aN+pRLrOqbhZFHGcmfhBxC/S8mui/0zl2jt61Z8lP4BF8P9jLr7W0EF9UTCVydHJVUbjxJui8c1ApWtOBDZtQ==}
+  /@dydxprotocol/v4-localization@1.1.128:
+    resolution: {integrity: sha512-jVGDTQUXWkx325Pd0Kca2z7vLZy61Q0gG7oQuNdJ6TB15zMRU74XMQvDZgJvCeM2WmiIqdyR5HnRJwL/gdnzQA==}
     dev: false
 
   /@dydxprotocol/v4-proto@5.0.0-dev.0:
diff --git a/src/components/Details.tsx b/src/components/Details.tsx
index 52b3fcf71..0a65ff76d 100644
--- a/src/components/Details.tsx
+++ b/src/components/Details.tsx
@@ -153,8 +153,6 @@ const detailsLayoutVariants = {
 
 const itemLayoutVariants = {
   column: css`
-    isolation: isolate;
-
     ${layoutMixins.scrollArea}
 
     ${layoutMixins.stickyArea0}
@@ -264,7 +262,7 @@ const $Item = styled.div<{
 
   /* > label { */
   /* > dt { */
-  > :first-child {
+  > :first-child {x
     color: var(--color-text-0);
 
     // Tooltip Icon centering when display: inline
diff --git a/src/components/DropdownIcon.tsx b/src/components/DropdownIcon.tsx
new file mode 100644
index 000000000..12540c84a
--- /dev/null
+++ b/src/components/DropdownIcon.tsx
@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+import { Icon, IconName } from '@/components/Icon';
+
+type ElementProps = {
+  iconName: IconName;
+  isOpen?: boolean;
+};
+
+type StyleProps = {
+  className?: string;
+};
+
+export const DropdownIcon = ({
+  iconName = IconName.Triangle,
+  isOpen,
+  className,
+}: ElementProps & StyleProps) => {
+  return (
+    <$DropdownIcon aria-hidden="true" isOpen={isOpen} className={className}>
+      <Icon iconName={iconName} aria-hidden="true" />
+    </$DropdownIcon>
+  );
+};
+
+const $DropdownIcon = styled.span<{ isOpen?: boolean }>`
+  display: inline-flex;
+  transition: transform 0.3s var(--ease-out-expo);
+  font-size: 0.375em;
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      transform: scaleY(-1);
+    `}
+`;
diff --git a/src/components/FormMaxInputToggleButton.tsx b/src/components/FormMaxInputToggleButton.tsx
index fd421b27c..a89b34eb9 100644
--- a/src/components/FormMaxInputToggleButton.tsx
+++ b/src/components/FormMaxInputToggleButton.tsx
@@ -18,7 +18,7 @@ type ElementProps = {
 };
 
 export const FormMaxInputToggleButton = ({
-  size = ButtonSize.XSmall,
+  size = ButtonSize.Small,
   isInputEmpty,
   isLoading,
   onPressedChange,
@@ -42,4 +42,6 @@ const $FormMaxInputToggleButton = styled(ToggleButton)`
   ${formMixins.inputInnerToggleButton}
 
   --button-padding: 0 0.5rem;
+  --button-backgroundColor: var(--color-accent);
+  --button-textColor: var(--color-text-2);
 `;
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index eeea7c428..d7f0f4cc7 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -25,6 +25,7 @@ type StyleProps = {
   className?: string;
   fullWidth?: boolean;
   noBlur?: boolean;
+  align?: 'start' | 'center' | 'end';
   sideOffset?: number;
   triggerType?: TriggerType;
   withPortal?: boolean;
@@ -38,6 +39,7 @@ export const Popover = ({
   onOpenChange,
   slotTrigger,
   slotAnchor,
+  align = 'center',
   sideOffset,
   fullWidth,
   noBlur,
@@ -59,6 +61,7 @@ export const Popover = ({
       $noBlur={noBlur}
       className={className}
       sideOffset={sideOffset}
+      align={align}
     >
       {children}
     </$Content>
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index ca99b39da..59c7cbc96 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -565,9 +565,7 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
           <$SortArrow
             aria-hidden="true"
             sortDirection={
-              state.sortDescriptor?.column === column.key
-                ? state.sortDescriptor?.direction
-                : undefined
+              state.sortDescriptor?.column === column.key ? state.sortDescriptor?.direction : 'none'
             }
           >
             <Icon iconName={IconName.Triangle} aria-hidden="true" />
@@ -857,7 +855,7 @@ const $Td = styled.td`
   }
 `;
 
-const $SortArrow = styled.span<{ sortDirection?: 'ascending' | 'descending' }>`
+const $SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' | 'none' }>`
   float: right;
   margin-left: auto;
 
@@ -868,13 +866,24 @@ const $SortArrow = styled.span<{ sortDirection?: 'ascending' | 'descending' }>`
 
   font-size: 0.375em;
 
-  ${$Th}[aria-sort="none"] & {
-    visibility: hidden;
-  }
-
-  ${$Th}[aria-sort="ascending"] & {
-    transform: scaleY(-1);
-  }
+  ${({ sortDirection }) =>
+    ({
+      ascending: css`
+        transform: scaleY(-1);
+      `,
+      descending: css`
+        transform: scaleY(1);
+      `,
+      none: css`
+        visibility: hidden;
+      `,
+    })[sortDirection]}// ${$Th}[aria-sort="none"] & {
+  //   visibility: hidden;
+  // }
+
+  // ${$Th}[aria-sort="ascending"] & {
+  //   transform: scaleY(-1);
+  // }
 `;
 
 const $Thead = styled.thead<TableStyleProps>`
diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
new file mode 100644
index 000000000..ecc922992
--- /dev/null
+++ b/src/components/ValidatorDropdown.tsx
@@ -0,0 +1,257 @@
+import { memo, useMemo, useState } from 'react';
+
+import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
+import styled from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { ValidatorData } from '@/constants/validators';
+
+import { useStakingValidator } from '@/hooks/useStakingValidator';
+import { useStringGetter } from '@/hooks/useStringGetter';
+import { useTokenConfigs } from '@/hooks/useTokenConfigs';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+import { popoverMixins } from '@/styles/popoverMixins';
+
+import { ColumnDef, Table } from '@/components/Table';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+import { DropdownIcon } from './DropdownIcon';
+import { Icon, IconName } from './Icon';
+import { Link } from './Link';
+import { Output, OutputType } from './Output';
+import { Popover, TriggerType } from './Popover';
+import { TableCell } from './Table/TableCell';
+import { Tag } from './Tag';
+
+export const ValidatorFaviconIcon = ({
+  className,
+  url,
+  fallbackText,
+}: {
+  className?: string;
+  url?: string;
+  fallbackText?: string;
+}) => {
+  const [iconFail, setIconFail] = useState<boolean>(false);
+
+  if (url && !iconFail) {
+    const parsedUrl = new URL(url);
+    const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`;
+    return (
+      <$Img
+        className={className}
+        src={`${baseUrl}/favicon.ico`}
+        alt="validator favicon"
+        onError={() => setIconFail(true)}
+      />
+    );
+  }
+  if (fallbackText) {
+    return <$IconContainer className={className}>{fallbackText.charAt(0)}</$IconContainer>;
+  }
+
+  return null;
+};
+
+export const ValidatorName = ({ validator }: { validator: Validator }) => {
+  const output = (
+    <$Output
+      type={OutputType.Text}
+      value={validator?.description?.moniker}
+      slotLeft={
+        <ValidatorFaviconIcon
+          url={validator?.description?.website}
+          fallbackText={validator?.description?.moniker}
+        />
+      }
+    />
+  );
+
+  return validator?.description?.website ? (
+    <Link href={validator?.description?.website} withIcon>
+      {output}
+    </Link>
+  ) : (
+    output
+  );
+};
+
+const ValidatorsDropdownContent = ({
+  availableValidators,
+}: {
+  availableValidators: Validator[];
+}) => {
+  const stringGetter = useStringGetter();
+  const { chainTokenLabel } = useTokenConfigs();
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          columnKey: 'commission',
+          getCellValue: (row) => row.commissionRate.toNumber(),
+          label: stringGetter({ key: STRING_KEYS.VALIDATOR }),
+          allowsSorting: true,
+          renderCell: ({ website, name, commissionRate }) => (
+            <TableCell
+              stacked
+              stackedWithSecondaryStyling
+              slotLeft={<ValidatorFaviconIcon url={website} fallbackText={name} />}
+            >
+              <span>{name}</span>
+              <span>
+                {stringGetter({
+                  key: STRING_KEYS.COMMISSION_PERCENTAGE,
+                  params: {
+                    PERCENTAGE: (
+                      <$CommissionOutput type={OutputType.Percent} value={commissionRate} />
+                    ),
+                  },
+                })}
+              </span>
+            </TableCell>
+          ),
+        },
+        {
+          columnKey: 'votingPower',
+          getCellValue: (row) => row.votingPower.toNumber(),
+          allowsSorting: true,
+          label: stringGetter({ key: STRING_KEYS.VOTING_POWER }),
+          tag: <Tag> {chainTokenLabel} </Tag>,
+          renderCell: ({ votingPower }) => <Output type={OutputType.Number} value={votingPower} />,
+        },
+      ] satisfies ColumnDef<ValidatorData>[],
+    [stringGetter, chainTokenLabel]
+  );
+
+  const filteredValidators = availableValidators.reduce((validators: ValidatorData[], val) => {
+    if (val.description) {
+      validators.push({
+        name: val.description.moniker,
+        operatorAddress: val.operatorAddress,
+        votingPower: MustBigNumber(val.delegatorShares).div(10 ** 36),
+        commissionRate: MustBigNumber(val.commission?.commissionRates?.rate).div(10 ** 16),
+        website: val.description?.website,
+      });
+    }
+    return validators;
+  }, []);
+
+  return (
+    <$ScrollArea>
+      <$Table
+        key="validators"
+        label="Validators"
+        data={filteredValidators}
+        getRowKey={(row: ValidatorData) => row.operatorAddress}
+        columns={columns}
+        defaultSortDescriptor={{
+          column: 'commission',
+          direction: 'ascending',
+        }}
+        paginationBehavior="showAll"
+        slotEmpty={
+          <>
+            <Icon iconName={IconName.OrderPending} />
+            <h4>
+              {
+                'There are no validators currently available.' // TODO: localize
+              }
+            </h4>
+          </>
+        }
+      />
+    </$ScrollArea>
+  );
+};
+
+export const ValidatorDropdown = memo(() => {
+  const { selectedValidator, availableValidators } = useStakingValidator() ?? {};
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const output = (
+    <$Output
+      type={OutputType.Text}
+      value={selectedValidator?.description?.moniker}
+      slotLeft={
+        <ValidatorFaviconIcon
+          url={selectedValidator?.description?.website}
+          fallbackText={selectedValidator?.description?.moniker}
+        />
+      }
+      slotRight={<$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />}
+    />
+  );
+
+  const slotTrigger = selectedValidator?.description?.website ? (
+    <Link href={selectedValidator?.description?.website} withIcon>
+      {output}
+    </Link>
+  ) : (
+    output
+  );
+
+  return (
+    <$Popover
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      slotTrigger={slotTrigger}
+      triggerType={TriggerType.MarketDropdown}
+      align="end"
+      sideOffset={8}
+      withPortal
+    >
+      <ValidatorsDropdownContent availableValidators={availableValidators ?? []} />
+    </$Popover>
+  );
+});
+
+const $IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  background-color: var(--color-layer-6);
+  border-radius: 50%;
+  font-weight: bold;
+  color: var(--color-text-1);
+  margin-right: 0.25em;
+`;
+
+const $Img = styled.img`
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 0.25em;
+`;
+
+const $ScrollArea = styled.div`
+  ${layoutMixins.scrollArea}
+
+  max-height: 20rem;
+`;
+
+const $DropdownIcon = styled(DropdownIcon)`
+  margin-left: 0.5rem;
+`;
+
+const $Popover = styled(Popover)`
+  ${popoverMixins.popover}
+`;
+
+const $Table = styled(Table)`
+  --tableRow-backgroundColor: var(--color-layer-4);
+  --tableCell-padding: 0.5rem 1rem;
+`;
+const $Output = styled(Output)`
+  color: var(--color-text-1);
+`;
+
+const $CommissionOutput = styled(Output)`
+  display: inline;
+`;
diff --git a/src/components/ValidatorName.tsx b/src/components/ValidatorName.tsx
deleted file mode 100644
index a3bbdcb5e..000000000
--- a/src/components/ValidatorName.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useState } from 'react';
-
-import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
-import styled from 'styled-components';
-
-import { Link } from './Link';
-import { Output, OutputType } from './Output';
-
-export type ValidatorNameProps = {
-  validator?: Validator;
-};
-
-export const ValidatorFaviconIcon = ({
-  className,
-  url,
-  fallbackText,
-}: {
-  className?: string;
-  url?: string;
-  fallbackText?: string;
-}) => {
-  const [iconFail, setIconFail] = useState<boolean>(false);
-
-  if (url && !iconFail) {
-    const parsedUrl = new URL(url);
-    const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`;
-    return (
-      <$Img
-        className={className}
-        src={`${baseUrl}/favicon.ico`}
-        alt="validator favicon"
-        onError={() => setIconFail(true)}
-      />
-    );
-  }
-  if (fallbackText) {
-    return <$IconContainer className={className}>{fallbackText.charAt(0)}</$IconContainer>;
-  }
-
-  return null;
-};
-
-export const ValidatorName = ({ validator }: ValidatorNameProps) => {
-  if (!validator) {
-    return null;
-  }
-  const output = (
-    <$Output
-      type={OutputType.Text}
-      value={validator?.description?.moniker}
-      slotLeft={
-        <ValidatorFaviconIcon
-          url={validator?.description?.website}
-          fallbackText={validator?.description?.moniker}
-        />
-      }
-    />
-  );
-
-  if (validator?.description?.website) {
-    return (
-      <Link href={validator?.description?.website} withIcon>
-        {output}
-      </Link>
-    );
-  }
-  return output;
-};
-
-const $IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5em;
-  height: 1.5em;
-  background-color: var(--color-layer-6);
-  border-radius: 50%;
-  font-weight: bold;
-  color: var(--color-text-1);
-  margin-right: 0.25em;
-`;
-
-const $Img = styled.img`
-  width: 1.5em;
-  height: 1.5em;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-right: 0.25em;
-`;
-
-const $Output = styled(Output)`
-  color: var(--color-text-1);
-`;
diff --git a/src/constants/validators.ts b/src/constants/validators.ts
new file mode 100644
index 000000000..7b06ebad3
--- /dev/null
+++ b/src/constants/validators.ts
@@ -0,0 +1,9 @@
+import BigNumber from 'bignumber.js';
+
+export type ValidatorData = {
+  name: string;
+  operatorAddress: string;
+  votingPower: BigNumber;
+  commissionRate: BigNumber;
+  website?: string;
+};
diff --git a/src/hooks/useStakingValidator.ts b/src/hooks/useStakingValidator.ts
index 66e4f0bf9..7069240cb 100644
--- a/src/hooks/useStakingValidator.ts
+++ b/src/hooks/useStakingValidator.ts
@@ -50,6 +50,8 @@ export const useStakingValidator = () => {
         currentDelegations?.some((d) => d.validator === validator.operatorAddress.toLowerCase())
       ) ?? [];
 
+    console.log('Xcxc staking', stakingValidators);
+
     const unbondingValidators =
       response?.validators.filter((validator) =>
         unbondingDelegations?.some((d) => d.validator === validator.operatorAddress.toLowerCase())
@@ -66,6 +68,7 @@ export const useStakingValidator = () => {
 
     return {
       selectedValidator: validatorWithFewestTokens,
+      availableValidators: filteredValidators,
       stakingValidators: groupBy(stakingValidators, ({ operatorAddress }) => operatorAddress),
       unbondingValidators: groupBy(unbondingValidators, ({ operatorAddress }) => operatorAddress),
       currentDelegations,
diff --git a/src/lib/testFlags.ts b/src/lib/testFlags.ts
index 1ab641a78..2d302eee1 100644
--- a/src/lib/testFlags.ts
+++ b/src/lib/testFlags.ts
@@ -41,7 +41,8 @@ class TestFlags {
   }
 
   get enableStaking() {
-    return !!this.queryParams.staking;
+    return true;
+    // return !!this.queryParams.staking;
   }
 
   get referrer() {
diff --git a/src/pages/token/rewards/UnbondingPanels.tsx b/src/pages/token/rewards/UnbondingPanels.tsx
index 66487203a..e90ba83e9 100644
--- a/src/pages/token/rewards/UnbondingPanels.tsx
+++ b/src/pages/token/rewards/UnbondingPanels.tsx
@@ -14,7 +14,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { AssetIcon } from '@/components/AssetIcon';
 import { Output, OutputType } from '@/components/Output';
 import { Panel } from '@/components/Panel';
-import { ValidatorFaviconIcon } from '@/components/ValidatorName';
+import { ValidatorFaviconIcon } from '@/components/ValidatorDropdown';
 
 import { getUnbondingDelegations } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx
index ca2620ed8..024928f2e 100644
--- a/src/views/MarketsDropdown.tsx
+++ b/src/views/MarketsDropdown.tsx
@@ -79,7 +79,7 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: Key) =
                   value={priceChange24HPercent}
                   isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
                 />
-              )}
+              )} 
             </$InlineRow>
           ),
         },
diff --git a/src/views/StakeRewardButtonAndReceipt.tsx b/src/views/StakeRewardButtonAndReceipt.tsx
index dbdbbc801..3bc546da4 100644
--- a/src/views/StakeRewardButtonAndReceipt.tsx
+++ b/src/views/StakeRewardButtonAndReceipt.tsx
@@ -167,6 +167,8 @@ const $AlertMessage = styled(AlertMessage)`
 
 const $WithDetailsReceipt = styled(WithDetailsReceipt)<{ isForm: boolean }>`
   --withReceipt-backgroundColor: var(--color-layer-2);
+
+  color: var(--color-text-form);
   width: 100%;
 
   ${({ isForm }) =>
diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx
index 42b528622..03616c935 100644
--- a/src/views/dialogs/StakeDialog.tsx
+++ b/src/views/dialogs/StakeDialog.tsx
@@ -42,6 +42,7 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => {
 };
 const $Dialog = styled(Dialog)`
   --dialog-content-paddingTop: var(--default-border-width);
+  --dialog-width: 30rem;
 `;
 
 const $Title = styled.span`
diff --git a/src/views/dialogs/UnstakeDialog.tsx b/src/views/dialogs/UnstakeDialog.tsx
index bb36d1e67..b7f9325e8 100644
--- a/src/views/dialogs/UnstakeDialog.tsx
+++ b/src/views/dialogs/UnstakeDialog.tsx
@@ -1,13 +1,14 @@
+import { UnstakeForm } from '@/forms/UnstakeForm';
 import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useStringGetter } from '@/hooks/useStringGetter';
+import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 
+import { AssetIcon } from '@/components/AssetIcon';
 import { Dialog } from '@/components/Dialog';
 
-import { UnstakeForm } from '../forms/UnstakeForm';
-
 type ElementProps = {
   setIsOpen?: (open: boolean) => void;
 };
@@ -15,8 +16,15 @@ type ElementProps = {
 export const UnstakeDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
 
+  const { chainTokenLabel } = useTokenConfigs();
+
   return (
-    <$Dialog isOpen setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.UNSTAKE })}>
+    <$Dialog
+      isOpen
+      setIsOpen={setIsOpen}
+      slotIcon={<AssetIcon symbol={chainTokenLabel} />}
+      title={stringGetter({ key: STRING_KEYS.UNSTAKE })}
+    >
       <UnstakeForm onDone={() => setIsOpen?.(false)} />
     </$Dialog>
   );
diff --git a/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx b/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
index 16d155319..cd273a7e7 100644
--- a/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
+++ b/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
@@ -1,17 +1,19 @@
 import { SelectedGasDenom } from '@dydxprotocol/v4-client-js/src/clients/constants';
+import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign } from '@/constants/numbers';
 
 import { useAccountBalance } from '@/hooks/useAccountBalance';
-import { useStakingValidator } from '@/hooks/useStakingValidator';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useTokenConfigs } from '@/hooks/useTokenConfigs';
+import { useURLConfigs } from '@/hooks/useURLConfigs';
 
 import { DiffOutput } from '@/components/DiffOutput';
+import { Link } from '@/components/Link';
 import { Output, OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
-import { ValidatorName } from '@/components/ValidatorName';
+import { ValidatorDropdown } from '@/components/ValidatorDropdown';
 import { WithTooltip } from '@/components/WithTooltip';
 import { StakeButtonAlert, StakeRewardButtonAndReceipt } from '@/views/StakeRewardButtonAndReceipt';
 
@@ -27,8 +29,8 @@ type ElementProps = {
 export const StakeButtonAndReceipt = ({ error, fee, amount, isLoading }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
+  const { mintscanValidatorsLearnMore } = useURLConfigs();
   const { nativeStakingBalance } = useAccountBalance();
-  const { selectedValidator } = useStakingValidator() ?? {};
 
   const newStakedBalance = amount ? MustBigNumber(nativeStakingBalance).plus(amount) : undefined;
 
@@ -36,11 +38,24 @@ export const StakeButtonAndReceipt = ({ error, fee, amount, isLoading }: Element
     {
       key: 'validator',
       label: (
-        <WithTooltip tooltip="validator-selection">
-          {stringGetter({ key: STRING_KEYS.SELECTED_VALIDATOR })}
+        <WithTooltip
+          tooltipString={stringGetter({
+            key: STRING_KEYS.VALIDATORS_INFO_LINK,
+            params: {
+              MINTSCAN_LINK: (
+                <$Link href={mintscanValidatorsLearnMore}>
+                  {stringGetter({ key: STRING_KEYS.MINTSCAN })}
+                </$Link>
+              ),
+            },
+          })}
+        >
+          {stringGetter({
+            key: STRING_KEYS.VALIDATOR,
+          })}
         </WithTooltip>
       ),
-      value: <ValidatorName validator={selectedValidator} />,
+      value: <ValidatorDropdown />,
     },
     {
       key: 'fees',
@@ -86,3 +101,8 @@ export const StakeButtonAndReceipt = ({ error, fee, amount, isLoading }: Element
     />
   );
 };
+
+const $Link = styled(Link)`
+  display: inline;
+  text-decoration: underline;
+`;
diff --git a/src/views/forms/StakeForm/index.tsx b/src/views/forms/StakeForm/index.tsx
index ba22f912a..3b9a9fcc0 100644
--- a/src/views/forms/StakeForm/index.tsx
+++ b/src/views/forms/StakeForm/index.tsx
@@ -141,13 +141,6 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
     },
   ];
 
-  const openKeplrDialog = () =>
-    dispatch(
-      forceOpenDialog({
-        type: DialogTypes.ExternalNavKeplr,
-      })
-    );
-
   const openStrideDialog = () =>
     dispatch(
       forceOpenDialog({
@@ -198,13 +191,8 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
         />
         <$LegalDisclaimer>
           {stringGetter({
-            key: STRING_KEYS.STAKING_LEGAL_DISCLAIMER,
+            key: STRING_KEYS.STAKING_LEGAL_DISCLAIMER_WITH_DEFAULT,
             params: {
-              KEPLR_DASHBOARD_LINK: (
-                <$Link withIcon onClick={openKeplrDialog}>
-                  {stringGetter({ key: STRING_KEYS.KEPLR_DASHBOARD })}
-                </$Link>
-              ),
               STRIDE_LINK: (
                 <$Link withIcon onClick={openStrideDialog}>
                   Stride
@@ -220,6 +208,7 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
 
 const $Form = styled.form`
   ${formMixins.transfersForm}
+  --color-text-form: var(--color-text-0);
 `;
 
 const $Description = styled.div`
@@ -234,14 +223,16 @@ const $Footer = styled.footer`
   flex-direction: column;
   gap: 1rem;
 `;
+
 const $WithDetailsReceipt = styled(WithDetailsReceipt)`
   --withReceipt-backgroundColor: var(--color-layer-2);
+  color: var(--color-text-form);
 `;
 
 const $LegalDisclaimer = styled.div`
   text-align: center;
   color: var(--color-text-0);
-  font: var(--font-small-book);
+  font: var(--font-mini-book);
 `;
 
 const $Link = styled(Link)`
diff --git a/src/views/forms/UnstakeForm/index.tsx b/src/views/forms/UnstakeForm/index.tsx
index 6e8fde249..b0a5d262f 100644
--- a/src/views/forms/UnstakeForm/index.tsx
+++ b/src/views/forms/UnstakeForm/index.tsx
@@ -23,7 +23,7 @@ import { FormMaxInputToggleButton } from '@/components/FormMaxInputToggleButton'
 import { InputType } from '@/components/Input';
 import { OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
-import { ValidatorName } from '@/components/ValidatorName';
+import { ValidatorName } from '@/components/ValidatorDropdown';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { StakeButtonAlert } from '@/views/StakeRewardButtonAndReceipt';
 import { UnstakeButtonAndReceipt } from '@/views/forms/UnstakeForm/UnstakeButtonAndReceipt';
@@ -138,10 +138,10 @@ export const UnstakeForm = ({ onDone, className }: UnstakeFormProps) => {
     key: STRING_KEYS.CURRENTLY_STAKING,
     params: {
       AMOUNT: (
-        <>
+        <$StakedAmount>
           {nativeStakingBalance}
           <Tag>{chainTokenLabel}</Tag>
-        </>
+        </$StakedAmount>
       ),
     },
   });
@@ -313,3 +313,8 @@ const $Footer = styled.footer`
 const $WithDetailsReceipt = styled(WithDetailsReceipt)`
   --withReceipt-backgroundColor: var(--color-layer-2);
 `;
+
+const $StakedAmount = styled.span`
+  ${layoutMixins.inlineRow}
+  color: var(--color-text-1);
+`;

From 4724e2da91b1566b43cde12415278dbb5c6fb4e1 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 12:22:57 -0400
Subject: [PATCH 02/12] fix up imports

---
 src/views/dialogs/StakeDialog.tsx   | 1 -
 src/views/dialogs/UnstakeDialog.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/dialogs/StakeDialog.tsx b/src/views/dialogs/StakeDialog.tsx
index 03616c935..42b528622 100644
--- a/src/views/dialogs/StakeDialog.tsx
+++ b/src/views/dialogs/StakeDialog.tsx
@@ -42,7 +42,6 @@ export const StakeDialog = ({ setIsOpen }: ElementProps) => {
 };
 const $Dialog = styled(Dialog)`
   --dialog-content-paddingTop: var(--default-border-width);
-  --dialog-width: 30rem;
 `;
 
 const $Title = styled.span`
diff --git a/src/views/dialogs/UnstakeDialog.tsx b/src/views/dialogs/UnstakeDialog.tsx
index b7f9325e8..f91bad952 100644
--- a/src/views/dialogs/UnstakeDialog.tsx
+++ b/src/views/dialogs/UnstakeDialog.tsx
@@ -1,4 +1,3 @@
-import { UnstakeForm } from '@/forms/UnstakeForm';
 import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
@@ -8,6 +7,7 @@ import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Dialog } from '@/components/Dialog';
+import { UnstakeForm } from '@/views/forms/UnstakeForm';
 
 type ElementProps = {
   setIsOpen?: (open: boolean) => void;

From 85526cd8347c7773374a18633f350aee96eb1339 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 13:30:22 -0400
Subject: [PATCH 03/12] clean up component

---
 src/components/DropdownIcon.tsx               |  2 +-
 src/components/SearchSelectMenu.tsx           | 19 +---
 src/components/ValidatorDropdown.tsx          | 90 ++-----------------
 src/components/ValidatorName.tsx              | 85 ++++++++++++++++++
 src/pages/token/rewards/UnbondingPanels.tsx   |  2 +-
 src/pages/trade/UnopenedIsolatedPositions.tsx | 17 ++--
 src/views/MarketsDropdown.tsx                 | 15 +---
 src/views/forms/UnstakeForm/index.tsx         |  2 +-
 8 files changed, 107 insertions(+), 125 deletions(-)
 create mode 100644 src/components/ValidatorName.tsx

diff --git a/src/components/DropdownIcon.tsx b/src/components/DropdownIcon.tsx
index 12540c84a..4665e603d 100644
--- a/src/components/DropdownIcon.tsx
+++ b/src/components/DropdownIcon.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { Icon, IconName } from '@/components/Icon';
 
 type ElementProps = {
-  iconName: IconName;
+  iconName?: IconName;
   isOpen?: boolean;
 };
 
diff --git a/src/components/SearchSelectMenu.tsx b/src/components/SearchSelectMenu.tsx
index b803bd467..8833ffbcd 100644
--- a/src/components/SearchSelectMenu.tsx
+++ b/src/components/SearchSelectMenu.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState, type ReactNode } from 'react';
 
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { type MenuConfig } from '@/constants/menus';
 
@@ -12,13 +12,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { ComboboxMenu } from '@/components/ComboboxMenu';
 import { type DetailsItem } from '@/components/Details';
-import { Icon, IconName } from '@/components/Icon';
 import { Popover, TriggerType } from '@/components/Popover';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithLabel } from '@/components/WithLabel';
 
 import { getSimpleStyledOutputType } from '@/lib/genericFunctionalComponentUtils';
 
+import { DropdownIcon } from './DropdownIcon';
+
 type ElementProps = {
   asChild?: boolean;
   children: ReactNode;
@@ -58,7 +59,7 @@ export const SearchSelectMenu = ({
   ) : (
     <$MenuTrigger>
       {label ? <$WithLabel label={label}>{children}</$WithLabel> : children}
-      <$TriggerIcon iconName={IconName.Triangle} open={open} />
+      <DropdownIcon isOpen={open} />
     </$MenuTrigger>
   );
 
@@ -153,15 +154,3 @@ const $ComboboxMenu = styled(ComboboxMenu)<ComboboxMenuStyleProps>`
   max-height: 30vh;
   overflow: auto;
 ` as typeof ComboboxMenuStyleType;
-
-const $TriggerIcon = styled(Icon)<{ open?: boolean }>`
-  width: 0.625rem;
-  height: 0.375rem;
-  color: var(--color-text-0);
-
-  ${({ open }) =>
-    open &&
-    css`
-      transform: rotate(180deg);
-    `}
-`;
diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index ecc922992..9d5ff04dc 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -13,71 +13,18 @@ import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';
 
+import { DropdownIcon } from '@/components/DropdownIcon';
+import { Icon, IconName } from '@/components/Icon';
+import { Link } from '@/components/Link';
+import { Output, OutputType } from '@/components/Output';
+import { Popover, TriggerType } from '@/components/Popover';
 import { ColumnDef, Table } from '@/components/Table';
+import { TableCell } from '@/components/Table/TableCell';
+import { Tag } from '@/components/Tag';
+import { ValidatorFaviconIcon } from '@/components/ValidatorName';
 
 import { MustBigNumber } from '@/lib/numbers';
 
-import { DropdownIcon } from './DropdownIcon';
-import { Icon, IconName } from './Icon';
-import { Link } from './Link';
-import { Output, OutputType } from './Output';
-import { Popover, TriggerType } from './Popover';
-import { TableCell } from './Table/TableCell';
-import { Tag } from './Tag';
-
-export const ValidatorFaviconIcon = ({
-  className,
-  url,
-  fallbackText,
-}: {
-  className?: string;
-  url?: string;
-  fallbackText?: string;
-}) => {
-  const [iconFail, setIconFail] = useState<boolean>(false);
-
-  if (url && !iconFail) {
-    const parsedUrl = new URL(url);
-    const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`;
-    return (
-      <$Img
-        className={className}
-        src={`${baseUrl}/favicon.ico`}
-        alt="validator favicon"
-        onError={() => setIconFail(true)}
-      />
-    );
-  }
-  if (fallbackText) {
-    return <$IconContainer className={className}>{fallbackText.charAt(0)}</$IconContainer>;
-  }
-
-  return null;
-};
-
-export const ValidatorName = ({ validator }: { validator: Validator }) => {
-  const output = (
-    <$Output
-      type={OutputType.Text}
-      value={validator?.description?.moniker}
-      slotLeft={
-        <ValidatorFaviconIcon
-          url={validator?.description?.website}
-          fallbackText={validator?.description?.moniker}
-        />
-      }
-    />
-  );
-
-  return validator?.description?.website ? (
-    <Link href={validator?.description?.website} withIcon>
-      {output}
-    </Link>
-  ) : (
-    output
-  );
-};
-
 const ValidatorsDropdownContent = ({
   availableValidators,
 }: {
@@ -209,27 +156,6 @@ export const ValidatorDropdown = memo(() => {
   );
 });
 
-const $IconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5em;
-  height: 1.5em;
-  background-color: var(--color-layer-6);
-  border-radius: 50%;
-  font-weight: bold;
-  color: var(--color-text-1);
-  margin-right: 0.25em;
-`;
-
-const $Img = styled.img`
-  width: 1.5em;
-  height: 1.5em;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-right: 0.25em;
-`;
-
 const $ScrollArea = styled.div`
   ${layoutMixins.scrollArea}
 
diff --git a/src/components/ValidatorName.tsx b/src/components/ValidatorName.tsx
new file mode 100644
index 000000000..794e9e113
--- /dev/null
+++ b/src/components/ValidatorName.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+
+import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
+import styled from 'styled-components';
+
+import { Link } from './Link';
+import { Output, OutputType } from './Output';
+
+export const ValidatorFaviconIcon = ({
+  className,
+  url,
+  fallbackText,
+}: {
+  className?: string;
+  url?: string;
+  fallbackText?: string;
+}) => {
+  const [iconFail, setIconFail] = useState<boolean>(false);
+
+  if (url && !iconFail) {
+    const parsedUrl = new URL(url);
+    const baseUrl = `${parsedUrl.protocol}//${parsedUrl.hostname}`;
+    return (
+      <$Img
+        className={className}
+        src={`${baseUrl}/favicon.ico`}
+        alt="validator favicon"
+        onError={() => setIconFail(true)}
+      />
+    );
+  }
+  if (fallbackText) {
+    return <$IconContainer className={className}>{fallbackText.charAt(0)}</$IconContainer>;
+  }
+
+  return null;
+};
+
+export const ValidatorName = ({ validator }: { validator: Validator }) => {
+  const output = (
+    <$Output
+      type={OutputType.Text}
+      value={validator?.description?.moniker}
+      slotLeft={
+        <ValidatorFaviconIcon
+          url={validator?.description?.website}
+          fallbackText={validator?.description?.moniker}
+        />
+      }
+    />
+  );
+
+  return validator?.description?.website ? (
+    <Link href={validator?.description?.website} withIcon>
+      {output}
+    </Link>
+  ) : (
+    output
+  );
+};
+
+const $Img = styled.img`
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 0.25em;
+`;
+
+const $IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  background-color: var(--color-layer-6);
+  border-radius: 50%;
+  font-weight: bold;
+  color: var(--color-text-1);
+  margin-right: 0.25em;
+`;
+
+const $Output = styled(Output)`
+  color: var(--color-text-1);
+`;
diff --git a/src/pages/token/rewards/UnbondingPanels.tsx b/src/pages/token/rewards/UnbondingPanels.tsx
index e90ba83e9..66487203a 100644
--- a/src/pages/token/rewards/UnbondingPanels.tsx
+++ b/src/pages/token/rewards/UnbondingPanels.tsx
@@ -14,7 +14,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { AssetIcon } from '@/components/AssetIcon';
 import { Output, OutputType } from '@/components/Output';
 import { Panel } from '@/components/Panel';
-import { ValidatorFaviconIcon } from '@/components/ValidatorDropdown';
+import { ValidatorFaviconIcon } from '@/components/ValidatorName';
 
 import { getUnbondingDelegations } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
diff --git a/src/pages/trade/UnopenedIsolatedPositions.tsx b/src/pages/trade/UnopenedIsolatedPositions.tsx
index bbdbd8398..e2e200224 100644
--- a/src/pages/trade/UnopenedIsolatedPositions.tsx
+++ b/src/pages/trade/UnopenedIsolatedPositions.tsx
@@ -11,7 +11,8 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
-import { Icon, IconName } from '@/components/Icon';
+import { DropdownIcon } from '@/components/DropdownIcon';
+import { IconName } from '@/components/Icon';
 import { PotentialPositionCard } from '@/components/PotentialPositionCard';
 
 import { getNonZeroPendingPositions } from '@/state/accountSelectors';
@@ -35,9 +36,9 @@ export const MaybeUnopenedIsolatedPositionsDrawer = ({
 
   return (
     <$UnopenedIsolatedPositionsDrawerContainer className={className} isOpen={isOpen}>
-      <$Button isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+      <$Button onClick={() => setIsOpen(!isOpen)}>
         {stringGetter({ key: STRING_KEYS.UNOPENED_ISOLATED_POSITIONS })}
-        <Icon iconName={IconName.Caret} />
+        <DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />
       </$Button>
 
       {isOpen && (
@@ -105,7 +106,7 @@ const $UnopenedIsolatedPositionsDrawerContainer = styled.div<{ isOpen?: boolean
   border-top: var(--border);
   ${({ isOpen }) => isOpen && 'height: 100%;'}
 `;
-const $Button = styled(Button)<{ isOpen?: boolean }>`
+const $Button = styled(Button)`
   position: sticky;
   top: 0;
   gap: 1rem;
@@ -113,14 +114,6 @@ const $Button = styled(Button)<{ isOpen?: boolean }>`
   background-color: transparent;
   border: none;
   margin: 0 1rem;
-
-  ${({ isOpen }) =>
-    isOpen &&
-    `
-      svg {
-        transform: rotate(180deg);
-      }
-    `}
 `;
 const $Cards = styled.div`
   ${layoutMixins.flexWrap}
diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx
index ca2620ed8..32845f864 100644
--- a/src/views/MarketsDropdown.tsx
+++ b/src/views/MarketsDropdown.tsx
@@ -17,7 +17,7 @@ import { popoverMixins } from '@/styles/popoverMixins';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
-import { Icon, IconName } from '@/components/Icon';
+import { DropdownIcon } from '@/components/DropdownIcon';
 import { Output, OutputType } from '@/components/Output';
 import { Popover, TriggerType } from '@/components/Popover';
 import { ColumnDef, Table } from '@/components/Table';
@@ -198,9 +198,7 @@ export const MarketsDropdown = memo(
             )}
             <p>
               {stringGetter({ key: isOpen ? STRING_KEYS.TAP_TO_CLOSE : STRING_KEYS.ALL_MARKETS })}
-              <$DropdownIcon aria-hidden="true">
-                <Icon iconName={IconName.Triangle} aria-hidden="true" />
-              </$DropdownIcon>
+              <DropdownIcon isOpen={isOpen} />
             </p>
           </$TriggerContainer>
         }
@@ -277,15 +275,6 @@ const $TriggerContainer = styled.div<{ $isOpen: boolean }>`
   }
 `;
 
-const $DropdownIcon = styled.span`
-  margin-left: auto;
-
-  display: inline-flex;
-  transition: transform 0.3s var(--ease-out-expo);
-
-  font-size: 0.375rem;
-`;
-
 const $Popover = styled(Popover)`
   ${popoverMixins.popover}
   --popover-item-height: 3.375rem;
diff --git a/src/views/forms/UnstakeForm/index.tsx b/src/views/forms/UnstakeForm/index.tsx
index b0a5d262f..e7bfa61c7 100644
--- a/src/views/forms/UnstakeForm/index.tsx
+++ b/src/views/forms/UnstakeForm/index.tsx
@@ -23,7 +23,7 @@ import { FormMaxInputToggleButton } from '@/components/FormMaxInputToggleButton'
 import { InputType } from '@/components/Input';
 import { OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
-import { ValidatorName } from '@/components/ValidatorDropdown';
+import { ValidatorName } from '@/components/ValidatorName';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { StakeButtonAlert } from '@/views/StakeRewardButtonAndReceipt';
 import { UnstakeButtonAndReceipt } from '@/views/forms/UnstakeForm/UnstakeButtonAndReceipt';

From 1cc6700ed24b3c4ccde42a3fcaf1b43a46a87423 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 13:33:48 -0400
Subject: [PATCH 04/12] fix up some lint

---
 src/components/Table.tsx         | 2 +-
 src/components/ValidatorName.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 35e5529b5..293024a56 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -565,7 +565,7 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
           <$SortArrow
             aria-hidden="true"
             sortDirection={
-              state.sortDescriptor?.column === column.key ? state.sortDescriptor?.direction : 'none'
+              state.sortDescriptor?.column === column.key ? state.sortDescriptor?.direction ?? 'none'
             }
           >
             <Icon iconName={IconName.Triangle} aria-hidden="true" />
diff --git a/src/components/ValidatorName.tsx b/src/components/ValidatorName.tsx
index 794e9e113..2238be8d8 100644
--- a/src/components/ValidatorName.tsx
+++ b/src/components/ValidatorName.tsx
@@ -36,7 +36,7 @@ export const ValidatorFaviconIcon = ({
   return null;
 };
 
-export const ValidatorName = ({ validator }: { validator: Validator }) => {
+export const ValidatorName = ({ validator }: { validator?: Validator }) => {
   const output = (
     <$Output
       type={OutputType.Text}

From 9cd7ff748b2b9c814fd46cd459ceede289dab212 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 13:35:37 -0400
Subject: [PATCH 05/12] fxi again

---
 src/components/Table.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 293024a56..dbed2d579 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -565,7 +565,9 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
           <$SortArrow
             aria-hidden="true"
             sortDirection={
-              state.sortDescriptor?.column === column.key ? state.sortDescriptor?.direction ?? 'none'
+              state.sortDescriptor?.column === column.key
+                ? state.sortDescriptor?.direction ?? 'none'
+                : 'none'
             }
           >
             <Icon iconName={IconName.Triangle} aria-hidden="true" />

From cf6be37b6855584cc4a013552e78e6895e925b3e Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 13:55:44 -0400
Subject: [PATCH 06/12] fix typing

---
 src/components/ValidatorDropdown.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index 9d5ff04dc..84dfd99fc 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -93,6 +93,7 @@ const ValidatorsDropdownContent = ({
         label="Validators"
         data={filteredValidators}
         getRowKey={(row: ValidatorData) => row.operatorAddress}
+        // onRowAction // TODO: OTE-449
         columns={columns}
         defaultSortDescriptor={{
           column: 'commission',
@@ -173,7 +174,8 @@ const $Popover = styled(Popover)`
 const $Table = styled(Table)`
   --tableRow-backgroundColor: var(--color-layer-4);
   --tableCell-padding: 0.5rem 1rem;
-`;
+` as typeof Table;
+
 const $Output = styled(Output)`
   color: var(--color-text-1);
 `;

From 574732d4390365b71bec94881740a643868521e7 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 18:16:19 -0400
Subject: [PATCH 07/12] fix hardcoded values

---
 src/components/ValidatorDropdown.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index 84dfd99fc..1679a540d 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -2,6 +2,7 @@ import { memo, useMemo, useState } from 'react';
 
 import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
 import styled from 'styled-components';
+import { formatUnits } from 'viem';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { ValidatorData } from '@/constants/validators';
@@ -33,6 +34,9 @@ const ValidatorsDropdownContent = ({
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
 
+  const votingPowerDecimals = 36; // hardcoded solution; fix in OTE-390
+  const commissionRateDecimals = 18; // hardcoded solution; fix in OTE-390
+
   const columns = useMemo(
     () =>
       [
@@ -78,8 +82,10 @@ const ValidatorsDropdownContent = ({
       validators.push({
         name: val.description.moniker,
         operatorAddress: val.operatorAddress,
-        votingPower: MustBigNumber(val.delegatorShares).div(10 ** 36),
-        commissionRate: MustBigNumber(val.commission?.commissionRates?.rate).div(10 ** 16),
+        votingPower: MustBigNumber(formatUnits(val.delegatorShares, votingPowerDecimals)),
+        commissionRate: MustBigNumber(
+          formatUnits(val.commission?.commissionRates?.rate, commissionRateDecimals)
+        ),
         website: val.description?.website,
       });
     }

From 58110ae1dac78472b94a101ef0e572c6832b0b56 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Wed, 19 Jun 2024 18:28:29 -0400
Subject: [PATCH 08/12] fix typing

---
 src/components/ValidatorDropdown.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index 1679a540d..82e3c00ec 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -82,9 +82,9 @@ const ValidatorsDropdownContent = ({
       validators.push({
         name: val.description.moniker,
         operatorAddress: val.operatorAddress,
-        votingPower: MustBigNumber(formatUnits(val.delegatorShares, votingPowerDecimals)),
+        votingPower: MustBigNumber(formatUnits(BigInt(val.delegatorShares), votingPowerDecimals)),
         commissionRate: MustBigNumber(
-          formatUnits(val.commission?.commissionRates?.rate, commissionRateDecimals)
+          formatUnits(BigInt(val.commission?.commissionRates?.rate ?? 0), commissionRateDecimals)
         ),
         website: val.description?.website,
       });

From 7c05d1a273c096f55f5d13c5b02f07d8ffe967b2 Mon Sep 17 00:00:00 2001
From: moo-onthelawn <70078372+moo-onthelawn@users.noreply.github.com>
Date: Thu, 20 Jun 2024 09:59:02 -0400
Subject: [PATCH 09/12] feat(staking): hydrate validator dropdown with all
 options (#694)

---
 src/components/ValidatorDropdown.tsx     | 49 +++++++++++---
 src/hooks/useStakingValidator.ts         | 82 +++++++++++++++++++-----
 src/pages/token/rewards/StakingPanel.tsx |  4 +-
 3 files changed, 109 insertions(+), 26 deletions(-)

diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index 82e3c00ec..c00c008a0 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useState } from 'react';
+import { Dispatch, Key, SetStateAction, memo, useCallback, useMemo, useState } from 'react';
 
 import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
 import styled from 'styled-components';
@@ -28,8 +28,12 @@ import { MustBigNumber } from '@/lib/numbers';
 
 const ValidatorsDropdownContent = ({
   availableValidators,
+  setSelectedValidator,
+  setIsPopoverOpen,
 }: {
   availableValidators: Validator[];
+  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
+  setIsPopoverOpen: (isOpen: boolean) => void;
 }) => {
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
@@ -92,6 +96,17 @@ const ValidatorsDropdownContent = ({
     return validators;
   }, []);
 
+  const onRowAction = useCallback(
+    (key: Key) => {
+      const newValidator = availableValidators.find((v) => v.operatorAddress === key);
+      if (newValidator) {
+        setSelectedValidator(newValidator);
+      }
+      setIsPopoverOpen(false);
+    },
+    [setSelectedValidator, setIsPopoverOpen, availableValidators]
+  );
+
   return (
     <$ScrollArea>
       <$Table
@@ -99,7 +114,7 @@ const ValidatorsDropdownContent = ({
         label="Validators"
         data={filteredValidators}
         getRowKey={(row: ValidatorData) => row.operatorAddress}
-        // onRowAction // TODO: OTE-449
+        onRowAction={onRowAction}
         columns={columns}
         defaultSortDescriptor={{
           column: 'commission',
@@ -122,7 +137,8 @@ const ValidatorsDropdownContent = ({
 };
 
 export const ValidatorDropdown = memo(() => {
-  const { selectedValidator, availableValidators } = useStakingValidator() ?? {};
+  const { availableValidators, selectedValidator, setSelectedValidator } =
+    useStakingValidator() ?? {};
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -136,14 +152,13 @@ export const ValidatorDropdown = memo(() => {
           fallbackText={selectedValidator?.description?.moniker}
         />
       }
-      slotRight={<$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />}
     />
   );
 
   const slotTrigger = selectedValidator?.description?.website ? (
-    <Link href={selectedValidator?.description?.website} withIcon>
+    <$Link href={selectedValidator?.description?.website} withIcon>
       {output}
-    </Link>
+    </$Link>
   ) : (
     output
   );
@@ -152,13 +167,22 @@ export const ValidatorDropdown = memo(() => {
     <$Popover
       open={isOpen}
       onOpenChange={setIsOpen}
-      slotTrigger={slotTrigger}
+      slotTrigger={
+        <$Trigger>
+          {slotTrigger}
+          <$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />
+        </$Trigger>
+      }
       triggerType={TriggerType.MarketDropdown}
       align="end"
       sideOffset={8}
       withPortal
     >
-      <ValidatorsDropdownContent availableValidators={availableValidators ?? []} />
+      <ValidatorsDropdownContent
+        availableValidators={availableValidators ?? []}
+        setSelectedValidator={setSelectedValidator}
+        setIsPopoverOpen={setIsOpen}
+      />
     </$Popover>
   );
 });
@@ -182,10 +206,19 @@ const $Table = styled(Table)`
   --tableCell-padding: 0.5rem 1rem;
 ` as typeof Table;
 
+const $Trigger = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
 const $Output = styled(Output)`
   color: var(--color-text-1);
 `;
 
+const $Link = styled(Link)`
+  color: var(--color-text-1);
+`;
+
 const $CommissionOutput = styled(Output)`
   display: inline;
 `;
diff --git a/src/hooks/useStakingValidator.ts b/src/hooks/useStakingValidator.ts
index 21021006f..56d985f6f 100644
--- a/src/hooks/useStakingValidator.ts
+++ b/src/hooks/useStakingValidator.ts
@@ -1,3 +1,9 @@
+import { useState } from 'react';
+
+import {
+  BondStatus,
+  Validator,
+} from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
 import { useQuery } from '@tanstack/react-query';
 import { groupBy } from 'lodash';
 import { shallowEqual } from 'react-redux';
@@ -8,6 +14,7 @@ import { getStakingDelegations, getUnbondingDelegations } from '@/state/accountS
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppSelector } from '@/state/appTypes';
 
+import { MustBigNumber } from '../lib/numbers';
 import { useDydxClient } from './useDydxClient';
 
 export const useStakingValidator = () => {
@@ -22,6 +29,9 @@ export const useStakingValidator = () => {
       };
     }
   );
+
+  const [selectedValidator, setSelectedValidator] = useState<Validator>();
+
   const validatorWhitelist = ENVIRONMENT_CONFIG_MAP[selectedNetwork].stakingValidators?.map(
     (delegation) => {
       return delegation.toLowerCase();
@@ -42,9 +52,55 @@ export const useStakingValidator = () => {
 
     const response = await getValidators();
 
-    const filteredValidators = response?.validators.filter((validator) =>
+    // Filter out jailed and unbonded validators
+    const availableValidators =
+      response?.validators.filter(
+        (validator: Validator) =>
+          validator.status === BondStatus.BOND_STATUS_BONDED && validator.jailed === false
+      ) ?? [];
+
+    // Sort validators 1/ in ascending commission and 2/ by descending stake weight
+    const sortByCommission = (validatorA: Validator, validatorB: Validator): number => {
+      return MustBigNumber(validatorA.commission?.commissionRates?.rate ?? 0).gt(
+        MustBigNumber(validatorB.commission?.commissionRates?.rate ?? 0)
+      )
+        ? 1
+        : -1;
+    };
+
+    const sortByCommissionAndStakeWeight = (
+      validatorA: Validator,
+      validatorB: Validator
+    ): number => {
+      if (
+        (validatorA.commission?.commissionRates?.rate ?? 0) ===
+        (validatorB.commission?.commissionRates?.rate ?? 0)
+      ) {
+        return MustBigNumber(validatorA.delegatorShares).gt(
+          MustBigNumber(validatorB.delegatorShares)
+        )
+          ? -1
+          : 1;
+      }
+      return 0;
+    };
+
+    availableValidators.sort(sortByCommission);
+    availableValidators.sort(sortByCommissionAndStakeWeight);
+
+    // Set the default validator to be the validator with the fewest tokens, selected from validators configured in the whitelist
+    const whitelistedValidators = response?.validators.filter((validator) =>
       validatorOptions.includes(validator.operatorAddress.toLowerCase())
     );
+
+    const validatorWithFewestTokens = (whitelistedValidators ?? availableValidators ?? []).reduce(
+      (prev, curr) => {
+        return BigInt(curr.tokens) < BigInt(prev.tokens) ? curr : prev;
+      }
+    );
+
+    setSelectedValidator(validatorWithFewestTokens);
+
     const stakingValidators =
       response?.validators.filter((validator) =>
         currentDelegations?.some((d) => d.validator === validator.operatorAddress.toLowerCase())
@@ -55,31 +111,27 @@ export const useStakingValidator = () => {
         unbondingDelegations?.some((d) => d.validator === validator.operatorAddress.toLowerCase())
       ) ?? [];
 
-    if (!filteredValidators || filteredValidators.length === 0) {
-      return undefined;
-    }
-
-    // Find the validator with the fewest tokens
-    const validatorWithFewestTokens = filteredValidators.reduce((prev, curr) => {
-      return BigInt(curr.tokens) < BigInt(prev.tokens) ? curr : prev;
-    });
-
     return {
-      selectedValidator: validatorWithFewestTokens,
-      availableValidators: filteredValidators, // TODO: OTE-434
+      availableValidators,
       stakingValidators: groupBy(stakingValidators, ({ operatorAddress }) => operatorAddress),
       unbondingValidators: groupBy(unbondingValidators, ({ operatorAddress }) => operatorAddress),
-      currentDelegations,
     };
   };
 
   const { data } = useQuery({
     queryKey: ['stakingValidator', selectedNetwork, currentDelegations, unbondingDelegations],
     queryFn,
-    enabled: Boolean(isCompositeClientConnected && validatorWhitelist?.length > 0),
+    enabled: Boolean(isCompositeClientConnected),
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
   });
 
-  return data;
+  return {
+    selectedValidator,
+    setSelectedValidator,
+    availableValidators: data?.availableValidators,
+    stakingValidators: data?.stakingValidators,
+    unbondingValidators: data?.unbondingValidators,
+    currentDelegations,
+  };
 };
diff --git a/src/pages/token/rewards/StakingPanel.tsx b/src/pages/token/rewards/StakingPanel.tsx
index 79b912a8b..a90b74a53 100644
--- a/src/pages/token/rewards/StakingPanel.tsx
+++ b/src/pages/token/rewards/StakingPanel.tsx
@@ -8,7 +8,6 @@ import { STRING_KEYS } from '@/constants/localization';
 
 import { useAccountBalance } from '@/hooks/useAccountBalance';
 import { useComplianceState } from '@/hooks/useComplianceState';
-import { useStakingValidator } from '@/hooks/useStakingValidator';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useTokenConfigs } from '@/hooks/useTokenConfigs';
 
@@ -36,7 +35,6 @@ export const StakingPanel = ({ className }: { className?: string }) => {
   const { complianceState } = useComplianceState();
   const { nativeTokenBalance, nativeStakingBalance } = useAccountBalance();
   const { chainTokenLabel } = useTokenConfigs();
-  const { selectedValidator } = useStakingValidator() ?? {};
 
   const unstakedApr = 16.94; /* OTE-406: Hardcoded for now until I get the APY endpoint working */
   const stakedApr = 16.94; /* OTE-406: Hardcoded for now until I get the APY endpoint working */
@@ -82,7 +80,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
             </$label>
             <$BalanceOutput type={OutputType.Asset} value={nativeTokenBalance} />
           </div>
-          {canAccountTrade && selectedValidator && (
+          {canAccountTrade && (
             <div>
               <Button
                 action={ButtonAction.Primary}

From cbb0830a9ca816c6ba8b94f256c224ae08c1cdfe Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Thu, 20 Jun 2024 10:35:25 -0400
Subject: [PATCH 10/12] fix state management

---
 src/components/ValidatorDropdown.tsx          | 102 +++++++++---------
 src/hooks/useStakingValidator.ts              |   4 +-
 .../forms/StakeForm/StakeButtonAndReceipt.tsx |  21 +++-
 src/views/forms/StakeForm/index.tsx           |   9 +-
 4 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/src/components/ValidatorDropdown.tsx b/src/components/ValidatorDropdown.tsx
index c00c008a0..d0e763544 100644
--- a/src/components/ValidatorDropdown.tsx
+++ b/src/components/ValidatorDropdown.tsx
@@ -136,56 +136,62 @@ const ValidatorsDropdownContent = ({
   );
 };
 
-export const ValidatorDropdown = memo(() => {
-  const { availableValidators, selectedValidator, setSelectedValidator } =
-    useStakingValidator() ?? {};
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const output = (
-    <$Output
-      type={OutputType.Text}
-      value={selectedValidator?.description?.moniker}
-      slotLeft={
-        <ValidatorFaviconIcon
-          url={selectedValidator?.description?.website}
-          fallbackText={selectedValidator?.description?.moniker}
-        />
-      }
-    />
-  );
-
-  const slotTrigger = selectedValidator?.description?.website ? (
-    <$Link href={selectedValidator?.description?.website} withIcon>
-      {output}
-    </$Link>
-  ) : (
-    output
-  );
+type ElementProps = {
+  selectedValidator: Validator | undefined;
+  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
+};
 
-  return (
-    <$Popover
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      slotTrigger={
-        <$Trigger>
-          {slotTrigger}
-          <$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />
-        </$Trigger>
-      }
-      triggerType={TriggerType.MarketDropdown}
-      align="end"
-      sideOffset={8}
-      withPortal
-    >
-      <ValidatorsDropdownContent
-        availableValidators={availableValidators ?? []}
-        setSelectedValidator={setSelectedValidator}
-        setIsPopoverOpen={setIsOpen}
+export const ValidatorDropdown = memo(
+  ({ selectedValidator, setSelectedValidator }: ElementProps) => {
+    const { availableValidators } = useStakingValidator() ?? {};
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const output = (
+      <$Output
+        type={OutputType.Text}
+        value={selectedValidator?.description?.moniker}
+        slotLeft={
+          <ValidatorFaviconIcon
+            url={selectedValidator?.description?.website}
+            fallbackText={selectedValidator?.description?.moniker}
+          />
+        }
       />
-    </$Popover>
-  );
-});
+    );
+
+    const slotTrigger = selectedValidator?.description?.website ? (
+      <$Link href={selectedValidator?.description?.website} withIcon>
+        {output}
+      </$Link>
+    ) : (
+      output
+    );
+
+    return (
+      <$Popover
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        slotTrigger={
+          <$Trigger>
+            {slotTrigger}
+            <$DropdownIcon iconName={IconName.Caret} isOpen={isOpen} />
+          </$Trigger>
+        }
+        triggerType={TriggerType.MarketDropdown}
+        align="end"
+        sideOffset={8}
+        withPortal
+      >
+        <ValidatorsDropdownContent
+          availableValidators={availableValidators ?? []}
+          setSelectedValidator={setSelectedValidator}
+          setIsPopoverOpen={setIsOpen}
+        />
+      </$Popover>
+    );
+  }
+);
 
 const $ScrollArea = styled.div`
   ${layoutMixins.scrollArea}
diff --git a/src/hooks/useStakingValidator.ts b/src/hooks/useStakingValidator.ts
index 56d985f6f..395209312 100644
--- a/src/hooks/useStakingValidator.ts
+++ b/src/hooks/useStakingValidator.ts
@@ -99,8 +99,6 @@ export const useStakingValidator = () => {
       }
     );
 
-    setSelectedValidator(validatorWithFewestTokens);
-
     const stakingValidators =
       response?.validators.filter((validator) =>
         currentDelegations?.some((d) => d.validator === validator.operatorAddress.toLowerCase())
@@ -112,6 +110,7 @@ export const useStakingValidator = () => {
       ) ?? [];
 
     return {
+      validatorWithFewestTokens,
       availableValidators,
       stakingValidators: groupBy(stakingValidators, ({ operatorAddress }) => operatorAddress),
       unbondingValidators: groupBy(unbondingValidators, ({ operatorAddress }) => operatorAddress),
@@ -129,6 +128,7 @@ export const useStakingValidator = () => {
   return {
     selectedValidator,
     setSelectedValidator,
+    defaultValidator: data?.validatorWithFewestTokens,
     availableValidators: data?.availableValidators,
     stakingValidators: data?.stakingValidators,
     unbondingValidators: data?.unbondingValidators,
diff --git a/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx b/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
index cd273a7e7..df7b9d718 100644
--- a/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
+++ b/src/views/forms/StakeForm/StakeButtonAndReceipt.tsx
@@ -1,3 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+
+import { Validator } from '@dydxprotocol/v4-client-js/build/node_modules/@dydxprotocol/v4-proto/src/codegen/cosmos/staking/v1beta1/staking';
 import { SelectedGasDenom } from '@dydxprotocol/v4-client-js/src/clients/constants';
 import styled from 'styled-components';
 
@@ -24,9 +27,18 @@ type ElementProps = {
   fee?: BigNumberish;
   amount?: number;
   isLoading: boolean;
+  selectedValidator: Validator | undefined;
+  setSelectedValidator: Dispatch<SetStateAction<Validator | undefined>>;
 };
 
-export const StakeButtonAndReceipt = ({ error, fee, amount, isLoading }: ElementProps) => {
+export const StakeButtonAndReceipt = ({
+  error,
+  fee,
+  amount,
+  isLoading,
+  selectedValidator,
+  setSelectedValidator,
+}: ElementProps) => {
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
   const { mintscanValidatorsLearnMore } = useURLConfigs();
@@ -55,7 +67,12 @@ export const StakeButtonAndReceipt = ({ error, fee, amount, isLoading }: Element
           })}
         </WithTooltip>
       ),
-      value: <ValidatorDropdown />,
+      value: (
+        <ValidatorDropdown
+          selectedValidator={selectedValidator}
+          setSelectedValidator={setSelectedValidator}
+        />
+      ),
     },
     {
       key: 'fees',
diff --git a/src/views/forms/StakeForm/index.tsx b/src/views/forms/StakeForm/index.tsx
index 3b9a9fcc0..cc1ca9573 100644
--- a/src/views/forms/StakeForm/index.tsx
+++ b/src/views/forms/StakeForm/index.tsx
@@ -47,7 +47,7 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
 
   const { delegate, getDelegateFee } = useSubaccount();
   const { nativeTokenBalance: balance } = useAccountBalance();
-  const { selectedValidator } = useStakingValidator() ?? {};
+  const { selectedValidator, setSelectedValidator, defaultValidator } = useStakingValidator() ?? {};
   const { chainTokenLabel, chainTokenDecimals } = useTokenConfigs();
 
   // Form states
@@ -62,6 +62,11 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
 
   const isAmountValid = amountBN && amountBN.gt(0) && amountBN.lte(maxAmountBN);
 
+  useEffect(() => {
+    // Initalize to default validator once on mount
+    setSelectedValidator(defaultValidator);
+  }, []);
+
   useEffect(() => {
     if (amountBN && !isAmountValid) {
       setError({
@@ -188,6 +193,8 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
           fee={fee}
           isLoading={isLoading}
           amount={amountBN?.toNumber()}
+          selectedValidator={selectedValidator}
+          setSelectedValidator={setSelectedValidator}
         />
         <$LegalDisclaimer>
           {stringGetter({

From ac315b57fb35de411f7d0f75b301e4de61b04202 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Thu, 20 Jun 2024 10:59:31 -0400
Subject: [PATCH 11/12] fix input bug

---
 src/views/forms/StakeForm/index.tsx   | 4 ++--
 src/views/forms/UnstakeForm/index.tsx | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/views/forms/StakeForm/index.tsx b/src/views/forms/StakeForm/index.tsx
index cc1ca9573..dd539819c 100644
--- a/src/views/forms/StakeForm/index.tsx
+++ b/src/views/forms/StakeForm/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, type FormEvent } from 'react';
 
 import BigNumber from 'bignumber.js';
-import { type NumberFormatValues } from 'react-number-format';
+import { NumberFormatValues } from 'react-number-format';
 import styled from 'styled-components';
 import { formatUnits } from 'viem';
 
@@ -168,6 +168,7 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
       </$Description>
       <$WithDetailsReceipt side="bottom" detailItems={amountDetailItems}>
         <FormInput
+          id="stakeAmount"
           label={stringGetter({ key: STRING_KEYS.AMOUNT_TO_STAKE })}
           type={InputType.Number}
           onChange={({ floatValue }: NumberFormatValues) =>
@@ -183,7 +184,6 @@ export const StakeForm = ({ onDone, className }: StakeFormProps) => {
               }
             />
           }
-          disabled={isLoading}
         />
       </$WithDetailsReceipt>
 
diff --git a/src/views/forms/UnstakeForm/index.tsx b/src/views/forms/UnstakeForm/index.tsx
index e7bfa61c7..6d98e702c 100644
--- a/src/views/forms/UnstakeForm/index.tsx
+++ b/src/views/forms/UnstakeForm/index.tsx
@@ -203,6 +203,7 @@ export const UnstakeForm = ({ onDone, className }: UnstakeFormProps) => {
           ]}
         >
           <FormInput
+            id="unstakeAmount"
             label={stringGetter({ key: STRING_KEYS.AMOUNT_TO_UNSTAKE })}
             type={InputType.Number}
             onChange={({ floatValue }: NumberFormatValues) =>
@@ -223,7 +224,6 @@ export const UnstakeForm = ({ onDone, className }: UnstakeFormProps) => {
                 }
               />
             }
-            disabled={isLoading}
           />
         </$WithDetailsReceipt>
       )}
@@ -266,7 +266,6 @@ export const UnstakeForm = ({ onDone, className }: UnstakeFormProps) => {
                       }
                     />
                   }
-                  disabled={isLoading}
                 />
               </React.Fragment>
             );

From 56b7cfeabdfa9c8a639e0f2ae17c85eebf6140d7 Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Thu, 20 Jun 2024 11:00:59 -0400
Subject: [PATCH 12/12] fix import

---
 src/views/forms/StakeForm/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/forms/StakeForm/index.tsx b/src/views/forms/StakeForm/index.tsx
index dd539819c..439ac74d7 100644
--- a/src/views/forms/StakeForm/index.tsx
+++ b/src/views/forms/StakeForm/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, type FormEvent } from 'react';
 
 import BigNumber from 'bignumber.js';
-import { NumberFormatValues } from 'react-number-format';
+import { type NumberFormatValues } from 'react-number-format';
 import styled from 'styled-components';
 import { formatUnits } from 'viem';