address comments

package.json

@@ -39,7 +39,7 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.2.5",
+    "@dydxprotocol/v4-abacus": "^1.2.3",
     "@dydxprotocol/v4-client-js": "^1.0.11",
     "@dydxprotocol/v4-localization": "^1.1.11",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -23,8 +27,8 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.2.5
-    version: 1.2.5
+    specifier: ^1.2.3
+    version: 1.2.3
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.11
     version: 1.0.11
@@ -987,8 +991,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.2.5:
-    resolution: {integrity: sha512-pB3Fv1bzJRUDp29kAN61daZ34gTSGrSTNh+/AP3TUB63/Q/gaXQVBf91xVcso4Hw23xM3FwIcrRK0cvOSWgXKg==}
+  /@dydxprotocol/v4-abacus@1.2.3:
+    resolution: {integrity: sha512-OHGhN4uQo/ikRjeGzf+wGblFvb0uRA916QvQXG4LixsJy7H7HAt7AeZr9LqTM/GqYJicMmZCUS3WIMqgZ20hKA==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.11:
@@ -14809,7 +14813,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

src/components/ContentSection.tsx

@@ -11,5 +11,6 @@ export const DetachedScrollableSection = styled.section`
 
 export const AttachedExpandingSection = styled.section`
   ${layoutMixins.contentSectionAttached}
+  ${layoutMixins.expandingColumnWithHeader}
   gap: var(--border-width);
 `;

src/components/Table.tsx

@@ -33,20 +33,17 @@ import {
 
 import { useAsyncList } from 'react-stately';
 
-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints } from '@/hooks';
 import { MediaQueryKeys } from '@/hooks/useBreakpoints';
 
+import { Checkbox } from '@/components/Checkbox';
+
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
-import { CaretIcon } from '@/icons';
-
-import { STRING_KEYS } from '@/constants/localization';
-
-import { MustBigNumber } from '@/lib/numbers';
 
 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
-import { Button } from './Button';
+import { MustBigNumber } from '@/lib/numbers';
 
 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -68,7 +65,7 @@ export type TableItem<TableRowData> = {
   onSelect?: (key: TableRowData) => void;
 };
 
-type ColumnDef<TableRowData extends object> = {
+export type ColumnDef<TableRowData extends object> = {
   columnKey: string;
   label: React.ReactNode;
   tag?: React.ReactNode;
@@ -83,7 +80,7 @@ type ColumnDef<TableRowData extends object> = {
   width?: ColumnSize;
 };
 
-export type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
+type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
   label?: string;
   columns: ColumnDef<TableRowData>[];
   data: TableRowData[];
@@ -95,7 +92,6 @@ export type ElementProps<TableRowData extends object | CustomRowConfig, TableRow
   selectionBehavior?: 'replace' | 'toggle';
   onRowAction?: (key: TableRowKey, row: TableRowData) => void;
   slotEmpty?: React.ReactNode;
-  initialNumRowsToShow?: number;
   // collection: TableCollection<string>;
   // children: React.ReactNode;
 };
@@ -125,7 +121,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   selectionMode = 'single',
   selectionBehavior = 'toggle',
   slotEmpty,
-  initialNumRowsToShow = data.length,
   // shouldRowRender,
 
   // collection,
@@ -141,7 +136,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
   const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
 
   const currentBreakpoints = useBreakpoints();
   const shownColumns = columns.filter(
@@ -215,12 +209,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
             onRowAction &&
             ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
           }
-          numColumns={shownColumns.length}
-          onViewMoreClick={
-            numRowsToShow !== undefined && numRowsToShow < data.length
-              ? () => setNumRowsToShow(data.length)
-              : undefined
-          }
           // shouldRowRender={shouldRowRender}
           hideHeader={hideHeader}
           withGradientCardRows={withGradientCardRows}
@@ -245,7 +233,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
             )}
           </TableHeader>
 
-          <TableBody items={list.items.slice(0, numRowsToShow)}>
+          <TableBody items={list.items}>
             {(item) => (
               <Row key={getRowKey(item)}>
                 {(columnKey) => (
@@ -279,8 +267,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
   onRowAction?: (key: TableRowKey) => void;
   // shouldRowRender?: (prevRowData: object, currentRowData: object) => boolean;
   children: CollectionChildren<TableRowData>;
-  numColumns: number;
-  onViewMoreClick?: () => void;
 
   hideHeader?: boolean;
   withGradientCardRows?: boolean;
@@ -290,7 +276,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
   withScrollSnapColumns?: boolean;
   withScrollSnapRows?: boolean;
 }) => {
-  const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props;
+  const { selectionMode, selectionBehavior } = props;
 
   const state = useTableState<TableRowData>({
     ...props,
@@ -351,7 +337,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
       <TableBodyRowGroup
         withGradientCardRows={props.withGradientCardRows}
         withInnerBorders={props.withInnerBorders}
-        withOuterBorder={props.withOuterBorder}
       >
         {/* {Array.from(collection.getChildren!(collection.body.key), (row) => */}
         {[...collection.body.childNodes].map((row) =>
@@ -397,9 +382,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
             </TableRow>
           )
         )}
-        {onViewMoreClick ? (
-          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
-        ) : undefined}
       </TableBodyRowGroup>
     </Styled.Table>
   );
@@ -433,7 +415,6 @@ const TableBodyRowGroup = ({
   children,
   withGradientCardRows,
   withInnerBorders,
-  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
   const { rowGroupProps } = useTableRowGroup();
 
@@ -442,7 +423,6 @@ const TableBodyRowGroup = ({
       {...rowGroupProps}
       withGradientCardRows={withGradientCardRows}
       withInnerBorders={withInnerBorders}
-      withOuterBorder={withOuterBorder}
     >
       {children}
     </Styled.Tbody>
@@ -509,23 +489,6 @@ const TableColumnHeader = <TableRowData extends object>({
   );
 };
 
-export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
-  const stringGetter = useStringGetter();
-  return (
-    <Styled.Tr key="viewmore">
-      <Styled.Td
-        colSpan={colSpan}
-        onMouseDown={(e: MouseEvent) => e.preventDefault()}
-        onPointerDown={(e: MouseEvent) => e.preventDefault()}
-      >
-        <Styled.ViewMoreButton slotRight={<CaretIcon />} onClick={onClick}>
-          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
-        </Styled.ViewMoreButton>
-      </Styled.Td>
-    </Styled.Tr>
-  );
-};
-
 export const TableRow = <TableRowData extends object>({
   item,
   children,
@@ -697,7 +660,7 @@ Styled.Empty = styled.div<{ withOuterBorder: boolean }>`
 
   justify-items: center;
   align-content: center;
-  padding: 4rem;
+  padding: 2rem;
   gap: 0.75em;
 
   color: var(--color-text-0);
@@ -905,18 +868,6 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingLeft: var(--border-width);
       --stickyArea2-paddingRight: var(--border-width);
 
-      tr:first-of-type {
-        box-shadow: 0 calc(var(--border-width)) 0 0 var(--border-color);
-      }
-    `}
-
-  ${({ withOuterBorder }) =>
-    withOuterBorder &&
-    css`
-      tr:last-of-type:not(:only-of-type) {
-        box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
-      }
-
       tr:first-of-type {
         box-shadow: none;
       }
@@ -971,15 +922,3 @@ Styled.Row = styled.div`
   ${layoutMixins.inlineRow}
   padding: var(--tableCell-padding);
 `;
-
-Styled.ViewMoreButton = styled(Button)`
-  --button-backgroundColor: var(--color-layer-2);
-  --button-textColor: var(--color-text-1);
-
-  width: 100%;
-
-  svg {
-    width: 0.675rem;
-    margin-left: 0.5ch;
-  }
-`;

src/constants/analytics.ts

@@ -96,7 +96,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         elapsedTime?: number;
         blockHeight?: number;
         indexerBlockHeight?: number;
-        trailingBlocks?: number;
       }
     : // Navigation
     T extends AnalyticsEvent.NavigatePage

src/hooks/useAnalytics.ts

@@ -97,7 +97,7 @@ export const useAnalytics = () => {
   }, []);
 
   // AnalyticsEvent.NetworkStatus
-  const { height, indexerHeight, status, trailingBlocks} = useApiState();
+  const { height, indexerHeight, status } = useApiState();
 
   useEffect(() => {
     if (status) {
@@ -114,7 +114,6 @@ export const useAnalytics = () => {
         elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
         blockHeight: height ?? undefined,
         indexerBlockHeight: indexerHeight ?? undefined,
-        trailingBlocks: trailingBlocks ?? undefined
       });
     }
   }, [status]);

src/hooks/useApiState.ts

@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
 export const useApiState = () => {
   const stringGetter = useStringGetter();
   const apiState = useSelector(getApiState, shallowEqual);
-  const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
+  const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
   const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
   const indexerHeight = getIndexerHeight(apiState);
 

src/lib/abacus/dydxChainTransactions.ts

@@ -56,10 +56,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.store = undefined;
   }
 
-  get isNobleClientConnected(): boolean {
-    return this.nobleClient?.isConnected ?? false;
-  }
-
   setStore(store: RootStore): void {
     this.store = store;
   }

src/lib/testFlags.ts

@@ -11,16 +11,16 @@ class TestFlags {
     const params = new URLSearchParams(queryParamsString);
 
     for (const [key, value] of params) {
-      this.queryParams[key.toLowerCase()] = value;
+      this.queryParams[key] = value;
     }
   }
 
   get displayInitializingMarkets() {
-    return !!this.queryParams.displayinitializingmarkets;
+    return !!this.queryParams.displayInitializingMarkets;
   }
 
-  get showMobileSignInOption() {
-    return !!this.queryParams.mobilesignin;
+  get withCCTP() {
+    return !!this.queryParams.withCCTP;
   }
 }
 

src/views/MarketDetails.tsx

@@ -29,6 +29,7 @@ export const MarketDetails: React.FC = () => {
   if (!configs) return null;
 
   const {
+    basePositionNotional,
     tickSize,
     stepSize,
     initialMarginFraction,

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -235,10 +235,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           throw new Error('Missing request payload');
         }
 
-        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
-          throw new Error('Noble RPC endpoint unaccessible');
-        }
-
         setIsLoading(true);
 
         await validateTokenApproval();

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -148,10 +148,6 @@ export const WithdrawForm = () => {
           throw new Error('Invalid request payload');
         }
 
-        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
-          throw new Error('Noble RPC endpoint unaccessible');
-        }
-
         setIsLoading(true);
         setError(undefined);
 

src/views/menus/AccountMenu.tsx

@@ -10,9 +10,6 @@ import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/consta
 import { isMainnet } from '@/constants/networks';
 import { DydxChainAsset, wallets } from '@/constants/wallets';
 
-import { layoutMixins } from '@/styles/layoutMixins';
-import { headerMixins } from '@/styles/headerMixins';
-
 import {
   useAccounts,
   useBreakpoints,
@@ -38,8 +35,10 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+import { headerMixins } from '@/styles/headerMixins';
 import { MustBigNumber } from '@/lib/numbers';
-import { testFlags } from '@/lib/testFlags';
 
 export const AccountMenu = () => {
   const stringGetter = useStringGetter();
@@ -179,7 +178,7 @@ export const AccountMenu = () => {
         },
         ...(onboardingState === OnboardingState.AccountConnected && hdKey
           ? [
-              (!isMainnet || testFlags.showMobileSignInOption) && {
+              !isMainnet && {
                 value: 'MobileQrSignIn',
                 icon: <Icon iconName={IconName.Qr} />,
                 label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),

src/views/tables/FillsTable.tsx

@@ -36,6 +36,8 @@ import { openDialog } from '@/state/dialogs';
 
 import { MustBigNumber } from '@/lib/numbers';
 import { getHydratedTradingData } from '@/lib/orders';
+import { tableMixins } from '@/styles/tableMixins';
+import { breakpoints } from '@/styles';
 
 const MOBILE_FILLS_PER_PAGE = 50;