diff --git a/package.json b/package.json
index 645f988..36cd5ca 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/abacus": "^0.3.10",
-    "@dydxprotocol/v4-client": "^0.29.0",
+    "@dydxprotocol/v4-client-js": "^0.30.3",
     "@dydxprotocol/v4-localization": "^0.0.12",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a96aa4..981c8cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,9 @@ dependencies:
   '@dydxprotocol/abacus':
     specifier: ^0.3.10
     version: 0.3.10
-  '@dydxprotocol/v4-client':
-    specifier: ^0.29.0
-    version: 0.29.0
+  '@dydxprotocol/v4-client-js':
+    specifier: ^0.30.3
+    version: 0.30.3
   '@dydxprotocol/v4-localization':
     specifier: ^0.0.12
     version: 0.0.12
@@ -1167,8 +1167,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-client@0.29.0:
-    resolution: {integrity: sha512-BMgm6e91LFGKB0l3lC2/0aIgayejgBa7qCwCUxr05265tggZsI3l3Cui8LNDHeb8IAQ4KPcfAJ29c96lx+rLlw==}
+  /@dydxprotocol/v4-client-js@0.30.3:
+    resolution: {integrity: sha512-h9nB2cU+6sWwfOTQz6sMKZZxVa/Iwp1JciUqKi5HDUyWl/4wfbczDlUqbMUUeXgBgfbb9CImxn+PjF0v7lcD5A==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/proto-signing': 0.30.1
diff --git a/src/components/OrderSideTag.stories.tsx b/src/components/OrderSideTag.stories.tsx
index 7901238..088d456 100644
--- a/src/components/OrderSideTag.stories.tsx
+++ b/src/components/OrderSideTag.stories.tsx
@@ -1,5 +1,5 @@
 import type { Story } from '@ladle/react';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { OrderSideTag } from '@/components/OrderSideTag';
 
diff --git a/src/components/OrderSideTag.tsx b/src/components/OrderSideTag.tsx
index 47b3630..430426b 100644
--- a/src/components/OrderSideTag.tsx
+++ b/src/components/OrderSideTag.tsx
@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks';
diff --git a/src/constants/abacus.ts b/src/constants/abacus.ts
index 35e05d8..308d598 100644
--- a/src/constants/abacus.ts
+++ b/src/constants/abacus.ts
@@ -1,5 +1,5 @@
 import Abacus, { kollections } from '@dydxprotocol/abacus';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { PositionSide, TradeTypes } from './trade';
 import { STRING_KEYS } from './localization';
 
diff --git a/src/constants/trade.ts b/src/constants/trade.ts
index 7444c49..e85b7a8 100644
--- a/src/constants/trade.ts
+++ b/src/constants/trade.ts
@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
diff --git a/src/constants/wallets.ts b/src/constants/wallets.ts
index 8e5299b..db13542 100644
--- a/src/constants/wallets.ts
+++ b/src/constants/wallets.ts
@@ -302,7 +302,7 @@ export type WalletConnection = {
 
 // dYdX Chain wallets
 
-import { USDC_DENOM, type Onboarding, DYDX_DENOM } from '@dydxprotocol/v4-client';
+import { USDC_DENOM, type Onboarding, DYDX_DENOM } from '@dydxprotocol/v4-client-js';
 import type { suggestChain } from 'graz';
 
 export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";
diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
index 45d2875..425d068 100644
--- a/src/hooks/tradingView/useTradingView.ts
+++ b/src/hooks/tradingView/useTradingView.ts
@@ -50,7 +50,7 @@ export const useTradingView = ({
     if (hasMarkets) {
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides(appTheme);
-
+      console.log(marketId);
       const options = {
         // debug: true,
         ...widgetOptions,
diff --git a/src/hooks/useAccounts.tsx b/src/hooks/useAccounts.tsx
index feae33a..9ce8688 100644
--- a/src/hooks/useAccounts.tsx
+++ b/src/hooks/useAccounts.tsx
@@ -2,7 +2,7 @@ import { useCallback, useContext, createContext, useEffect, useState, useMemo }
 
 import { useDispatch } from 'react-redux';
 import { AES, enc } from 'crypto-js';
-import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-client';
+import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-client-js';
 
 import { SubAccountHistoricalPNLs } from '@/constants/abacus';
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
diff --git a/src/hooks/useDydxClient.tsx b/src/hooks/useDydxClient.tsx
index 2013d67..b0126f9 100644
--- a/src/hooks/useDydxClient.tsx
+++ b/src/hooks/useDydxClient.tsx
@@ -9,7 +9,7 @@ import {
   onboarding,
   Network,
   ValidatorConfig,
-} from '@dydxprotocol/v4-client';
+} from '@dydxprotocol/v4-client-js';
 
 import type { ResolutionString } from 'public/tradingview/charting_library';
 
diff --git a/src/hooks/usePollNativeTokenBalance.ts b/src/hooks/usePollNativeTokenBalance.ts
index 53f892a..9c91c91 100644
--- a/src/hooks/usePollNativeTokenBalance.ts
+++ b/src/hooks/usePollNativeTokenBalance.ts
@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import { useAccounts } from '@/hooks';
 
 import { DydxAddress } from '@/constants/wallets';
-import { DYDX_DENOM } from '@dydxprotocol/v4-client';
+import { DYDX_DENOM } from '@dydxprotocol/v4-client-js';
 
 const ACCOUNT_BALANCE_POLLING_INTERVAL = 60_000;
 
diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx
index 2ce92c5..87dd316 100644
--- a/src/hooks/useSubaccount.tsx
+++ b/src/hooks/useSubaccount.tsx
@@ -17,7 +17,7 @@ import {
   DYDX_DENOM,
   USDC_DENOM,
   GAS_PRICE_DYDX_DENOM,
-} from '@dydxprotocol/v4-client';
+} from '@dydxprotocol/v4-client-js';
 
 import type {
   HumanReadableCancelOrderPayload,
diff --git a/src/lib/abacus/conversions.ts b/src/lib/abacus/conversions.ts
index c9690e5..ee68222 100644
--- a/src/lib/abacus/conversions.ts
+++ b/src/lib/abacus/conversions.ts
@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import {
   AbacusOrderSide,
diff --git a/src/lib/abacus/dydxChainQueries.ts b/src/lib/abacus/dydxChainQueries.ts
index 54f476d..a7e359c 100644
--- a/src/lib/abacus/dydxChainQueries.ts
+++ b/src/lib/abacus/dydxChainQueries.ts
@@ -8,7 +8,7 @@ import {
   Network,
   NetworkOptimizer,
   ValidatorConfig,
-} from '@dydxprotocol/v4-client';
+} from '@dydxprotocol/v4-client-js';
 
 import {
   type AbacusDydxChainQueriesProtocol,
diff --git a/src/lib/tradeData.ts b/src/lib/tradeData.ts
index 416cc8c..f8ba970 100644
--- a/src/lib/tradeData.ts
+++ b/src/lib/tradeData.ts
@@ -1,5 +1,5 @@
 import { type Location, matchPath } from 'react-router-dom';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { StringGetterFunction } from '@/constants/localization';
 
diff --git a/src/state/accountSelectors.ts b/src/state/accountSelectors.ts
index 29aa72e..4adb879 100644
--- a/src/state/accountSelectors.ts
+++ b/src/state/accountSelectors.ts
@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';
 
 import {
diff --git a/src/views/charts/DepthChart.tsx b/src/views/charts/DepthChart.tsx
index e2aa6e7..cd49893 100644
--- a/src/views/charts/DepthChart.tsx
+++ b/src/views/charts/DepthChart.tsx
@@ -33,7 +33,7 @@ import { Details } from '@/components/Details';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { Output, OutputType } from '@/components/Output';
 
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 // @ts-ignore
 const theme = buildChartTheme({
diff --git a/src/views/forms/TradeForm/LeverageSlider.stories.tsx b/src/views/forms/TradeForm/LeverageSlider.stories.tsx
index b41d81d..8290697 100644
--- a/src/views/forms/TradeForm/LeverageSlider.stories.tsx
+++ b/src/views/forms/TradeForm/LeverageSlider.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Story } from '@ladle/react';
 import styled, { AnyStyledComponent } from 'styled-components';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { PositionSide } from '@/constants/trade';
 import { breakpoints } from '@/styles';
diff --git a/src/views/forms/TradeForm/LeverageSlider.tsx b/src/views/forms/TradeForm/LeverageSlider.tsx
index 4f04311..b18a1c0 100644
--- a/src/views/forms/TradeForm/LeverageSlider.tsx
+++ b/src/views/forms/TradeForm/LeverageSlider.tsx
@@ -2,7 +2,7 @@ import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react'
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { Root, Thumb, Track } from '@radix-ui/react-slider';
 import _ from 'lodash';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { type Nullable, TradeInputField } from '@/constants/abacus';
 import { PositionSide } from '@/constants/trade';
@@ -43,9 +43,7 @@ export const LeverageSlider = ({
       },
       [PositionSide.Long]: {
         min:
-          orderSide === OrderSide.BUY
-            ? leverageBN.toNumber()
-            : maxLeverageBN.negated().toNumber(),
+          orderSide === OrderSide.BUY ? leverageBN.toNumber() : maxLeverageBN.negated().toNumber(),
         max: orderSide === OrderSide.BUY ? maxLeverageBN.toNumber() : leverageBN.toNumber(),
         midpoint:
           orderSide === OrderSide.SELL
@@ -56,9 +54,7 @@ export const LeverageSlider = ({
       },
       [PositionSide.Short]: {
         min:
-          orderSide === OrderSide.BUY
-            ? leverageBN.toNumber()
-            : maxLeverageBN.negated().toNumber(),
+          orderSide === OrderSide.BUY ? leverageBN.toNumber() : maxLeverageBN.negated().toNumber(),
         max: orderSide === OrderSide.BUY ? maxLeverageBN.toNumber() : leverageBN.toNumber(),
         midpoint:
           orderSide === OrderSide.BUY
diff --git a/src/views/forms/TradeForm/MarketLeverageInput.tsx b/src/views/forms/TradeForm/MarketLeverageInput.tsx
index c92b118..04fa56a 100644
--- a/src/views/forms/TradeForm/MarketLeverageInput.tsx
+++ b/src/views/forms/TradeForm/MarketLeverageInput.tsx
@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { TradeInputField, Nullable } from '@/constants/abacus';
 import { ButtonShape } from '@/constants/buttons';
diff --git a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
index 5231bf0..f7468aa 100644
--- a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
+++ b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
@@ -1,5 +1,5 @@
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import type { TradeInputSummary } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
diff --git a/src/views/forms/TradeForm/TradeSideToggle.tsx b/src/views/forms/TradeForm/TradeSideToggle.tsx
index be9eb78..cc5df49 100644
--- a/src/views/forms/TradeForm/TradeSideToggle.tsx
+++ b/src/views/forms/TradeForm/TradeSideToggle.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import styled, { css } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { AbacusOrderSide } from '@/constants/abacus';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
@@ -31,9 +31,7 @@ export const TradeSideToggle = memo(() => {
       onValueChange={(side: OrderSide) => {
         abacusStateManager.setTradeValue({
           value:
-            side === OrderSide.BUY
-              ? AbacusOrderSide.buy.rawValue
-              : AbacusOrderSide.sell.rawValue,
+            side === OrderSide.BUY ? AbacusOrderSide.buy.rawValue : AbacusOrderSide.sell.rawValue,
           field: TradeInputField.side,
         });
       }}
diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx
index fa1f99c..c9dda54 100644
--- a/src/views/forms/TransferForm.tsx
+++ b/src/views/forms/TransferForm.tsx
@@ -5,7 +5,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import type { SyntheticInputEvent } from 'react-number-format/types/types';
 import { debounce } from 'lodash';
 import { StdFee } from '@cosmjs/stargate';
-import { validation } from '@dydxprotocol/v4-client';
+import { validation } from '@dydxprotocol/v4-client-js';
 
 import { TransferInputField, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx
index 07683dc..6010499 100644
--- a/src/views/tables/FillsTable.tsx
+++ b/src/views/tables/FillsTable.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 import type { ColumnSize } from '@react-types/table';
 
 import { type Asset, type SubaccountFill } from '@/constants/abacus';
diff --git a/src/views/tables/LiveTrades.tsx b/src/views/tables/LiveTrades.tsx
index e295733..d061a4d 100644
--- a/src/views/tables/LiveTrades.tsx
+++ b/src/views/tables/LiveTrades.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { MarketTrade } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
diff --git a/src/views/tables/Orderbook.tsx b/src/views/tables/Orderbook.tsx
index 0cdc8c0..a8140a4 100644
--- a/src/views/tables/Orderbook.tsx
+++ b/src/views/tables/Orderbook.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { type OrderbookLine, TradeInputField } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 
diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx
index 755f8ec..1269844 100644
--- a/src/views/tables/OrdersTable.tsx
+++ b/src/views/tables/OrdersTable.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { DateTime } from 'luxon';
-import { OrderSide } from '@dydxprotocol/v4-client';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { ColumnSize } from '@react-types/table';
 import type { Dispatch } from '@reduxjs/toolkit';