bump v4-client

* Add Satoshi fonts, remove Circular

* trader-fe -> v4-web

* Remove CircularMono

* Update README for font instructions

* update CONTRIBUTING.md

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Trader-Fe
+# Contributing to V4-web
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 
 - Reporting a bug
@@ -18,10 +18,10 @@ Pull requests are the best way to propose changes to the codebase (we use [Githu
 4. Issue that pull request!
 
 ## Any contributions you make will be under the same License
-When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/trader-fe/blob/master/LICENSE) that covers the project.
+When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/v4-web/blob/master/LICENSE) that covers the project.
 
-## Report bugs using Github's [issues](https://github.com/dydxprotocol/trader-fe/issues)
-Report a bug by [opening a new issue](https://github.com/dydxprotocol/trader-fe/issues/new).
+## Report bugs using Github's [issues](https://github.com/dydxprotocol/v4-web/issues)
+Report a bug by [opening a new issue](https://github.com/dydxprotocol/v4-web/issues/new).
 
 **Great Bug Reports** tend to have:
 

LICENSE

@@ -1,16 +1,19 @@
-Business Source License 1.1 
-License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
-Copyright (C) 2023 dYdX Trading Inc.
+Subject to your compliance with applicable law, you are granted the right to use the Licensed Work (defined below) under the terms of the below licenses; provided, however, that if you violate any such applicable law in your use of the Licensed Work, all of your rights and licenses to use (including any rights to reproduce, distribute, install or modify) the Licensed Work will automatically and immediately terminate.
 
 Use of this software before the Change Date specified in the LICENSE file is governed by the Business Source License included in the LICENSE file and at https://spdx.org/licenses/BUSL-1.1.html.
 
 On and after the Change Date specified in the LICENSE file, use of this software will be governed by the Change License (GNU Affero GPL v3) as specified in the LICENSE file.
 
+
+Business Source License 1.1 
+Business Source License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
+Copyright (C) 2023 dYdX Trading Inc.
+
 Parameters
 Licensor: dYdX Trading Inc.
 Licensed Work: dydxprotocol/cosmos-sdk, dydxprotocol/cometbft, dydxprotocol/v4-chain, dydxprotocol/v4-clients, dydxprotocol/v4-web, dydxprotocol/v4-abacus, dydxprotocol/v4-localization, dydxprotocol/v4-documentation, and any dYdX or dYdX Trading Inc. github repository reflecting a copy of this license, or link to this license. 
 Additional Use Grant: None
-Change Date: On the later to occur of (i) the release of the Licensed Work labeled “dYdX Version 1.0 GPL”, and which includes a document uploaded to the relevant github repository stating “The software in this repository is Version 1.0, subject to GPL license”, and (ii) September 30, 2023 (approximate projected release of “Version 1.0” of this software).
+Change Date: On the later to occur of (i) the release of the Licensed Work labeled “dYdX Version 1.0 Affero GPL”, and which includes a document uploaded to the relevant github repository stating “The software in this repository is Version 1.0, subject to Affero GPL license”, and (ii) September 30, 2023 (approximate projected release of “Version 1.0” of this software).
 Change License: GNU Affero GPL License v3
 
 License text copyright © 2023 MariaDB plc, All Rights Reserved. “Business Source License” is a trademark of MariaDB plc.
@@ -39,7 +42,7 @@ OPEN SOURCE LICENSE BELOW - TO BE APPLIED AFTER THE CHANGE DATE.
 
 Copyright (C) 2023 dYdX Trading Inc.
 
-Use of this software is governed by the The GNU Affero General Public License as set forth below. 
+Subject to your compliance with applicable law, you are granted the right to use the Licensed Work (defined below) under the terms of the GNU Affero General Public License as set forth below; provided, however, that if you violate any such applicable law in your use of the Licensed Work, all of your rights and licenses to use (including any rights to reproduce, distribute, install or modify) the Licensed Work will automatically and immediately terminate.
 
 
 The GNU Affero General Public License
@@ -835,4 +838,4 @@ copy of the Program in return for a fee.
 
 
 For more information about this software, see https://dydx.exchange. 
- Copyright (C) 2023 dYdX Trading Inc.
+ Copyright (C) 2023 dYdX Trading Inc.

README.md

@@ -22,8 +22,8 @@ Alternatively, follow the [IPFS Kubo installation guide](https://docs.ipfs.tech
 Clone the repository and navigate to its directory:
 
 ```bash
-git clone https://github.com/dydxprotocol/trader-fe.git
-cd trader-fe
+git clone https://github.com/dydxprotocol/v4-web.git
+cd v4-web
 ```
 
 ### Step 2: Install pnpm and dependencies
@@ -102,3 +102,47 @@ To access your content on IPFS:
 2. **Public IPFS gateway:** Access your content via a public IPFS gateway, such as [https://dweb.link](https://dweb.link/) or [https://w3s.link/](https://w3s.link/). Use the gateway URL with your CID appended, like `https://dweb.link/ipfs/your_cid`.
 
 Replace `your_cid` with the actual CID.
+
+
+## Part 5: Customization
+
+### Using CircularXX font
+
+1. **Procure a license for CircularXX:** Visit [Lineto](https://lineto.com/shop/select?family=circular&set=DOPhtVQR-8m) and add `Circular/Family Package` + `Circular Mono/Regular` to your cart. Check the applicable boxes in the `Configure` step to fill out licensing information. After the `Payment` step, download the `.woff2` files.
+
+2. **Add the fonts to `v4-web`:** Add `CircularXXWeb-Bold.woff2`, `CircularXXWeb-Book.woff2`, `CircularXXWeb-Medium.woff2`, and `CircularXXMonoWeb-Regular.woff2` to the `src/styles/fonts` directory.
+
+3. **Add font-family to stylesheets:** In `src/styles/fonts.css`, add the following code to import your newly purchased `Circular` font.
+```css
+  @font-face {
+    src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 450;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 500;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
+    font-family: "Circular";
+    font-weight: 700;
+  }
+
+  @font-face {
+    src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
+    font-family: "CircularMono";
+    font-weight: 400;
+  }
+```
+
+In `src/styles/text.css`, update lines `4` and `5` to
+```css
+  --fontFamily-base: "Circular", "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+```
+
+Enjoy the newly installed font.

package.json

@@ -38,7 +38,7 @@
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/abacus": "^0.4.7",
-    "@dydxprotocol/v4-client-js": "^0.32.0",
+    "@dydxprotocol/v4-client-js": "^0.33.1",
     "@dydxprotocol/v4-localization": "^0.0.25",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",

pnpm-lock.yaml

@@ -30,8 +30,8 @@ dependencies:
     specifier: ^0.4.7
     version: 0.4.7
   '@dydxprotocol/v4-client-js':
-    specifier: ^0.32.0
-    version: 0.32.0
+    specifier: ^0.33.1
+    version: 0.33.1
   '@dydxprotocol/v4-localization':
     specifier: ^0.0.25
     version: 0.0.25
@@ -1149,31 +1149,14 @@ packages:
     resolution: {integrity: sha512-3c7Dx5H+KeXZYDpAOJs6fqxSNerKqNSD4tuMNn5F7RXAPWUOU8ADQHAFPnrP1PgTxPjfZBZQzLIziKpyXww4NQ==}
     dev: false
 
-  /@dydxprotocol/dydxjs@0.3.0:
-    resolution: {integrity: sha512-ygNeBs0f3H7sJk1qLUjfNwaXgc5TmjD+qZf7BFDbi7+boHJI9xuOWrGpjfBo7OTUZxS6O5jZG323CgU5XqMSPw==}
-    dependencies:
-      '@babel/runtime': 7.22.10
-      '@bufbuild/buf': 1.19.0-1
-      '@cosmjs/amino': 0.30.1
-      '@cosmjs/proto-signing': 0.30.1
-      '@cosmjs/stargate': 0.30.1
-      '@cosmjs/tendermint-rpc': 0.30.1
-      osmojs: 15.5.0
-      protobufjs: 6.11.4
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - utf-8-validate
-    dev: false
-
-  /@dydxprotocol/v4-client-js@0.32.0:
-    resolution: {integrity: sha512-KvKActMgWLcsRQ7RQhpi/F8xeQ7MWUp3G5+4IPNZ4wyRwAxDSbcrfYbTetI/IesHyelRPSeYxam9eYq3wXwZ1A==}
+  /@dydxprotocol/v4-client-js@0.33.1:
+    resolution: {integrity: sha512-yFDyiG5aVo4avF5u98yz6BEmWW66SscV2RgmdDwV+LfyKfcubVqKfmv3FtuqE0WKZuzzwiCuFat7YMSK125zyQ==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/proto-signing': 0.30.1
       '@cosmjs/stargate': 0.30.1
       '@cosmjs/tendermint-rpc': 0.30.1
-      '@dydxprotocol/dydxjs': 0.3.0
+      '@dydxprotocol/v4-proto': 0.1.2
       '@osmonauts/lcd': 0.6.0
       '@scure/bip32': 1.3.1
       '@scure/bip39': 1.2.1
@@ -1193,6 +1176,23 @@ packages:
     resolution: {integrity: sha512-Rp6VHA8z+nwgvTjjB3fvL8gY7bd4DYDHV+NPoL0MFuRm39vhFxGlBVAGDkXPkQTh6YU5BlZV2yXLkDeSfFqEBQ==}
     dev: false
 
+  /@dydxprotocol/v4-proto@0.1.2:
+    resolution: {integrity: sha512-kcwdVdAexWB1nq/elFKCO4Su2ONQxBCJbN1TMeIAQiIAXxa7CnmYwdbLt4AIIxjgRhu4cHP8F6sGdwft6cjkCA==}
+    dependencies:
+      '@babel/runtime': 7.22.10
+      '@bufbuild/buf': 1.19.0-1
+      '@cosmjs/amino': 0.30.1
+      '@cosmjs/proto-signing': 0.30.1
+      '@cosmjs/stargate': 0.30.1
+      '@cosmjs/tendermint-rpc': 0.30.1
+      osmojs: 15.5.0
+      protobufjs: 6.11.4
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - utf-8-validate
+    dev: false
+
   /@emotion/is-prop-valid@1.2.1:
     resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
     dependencies:

src/constants/localization.ts

@@ -34,6 +34,8 @@ export const STRING_KEYS = {
   ...WARNINGS_STRING_KEYS,
 };
 
+export type StringKey = keyof typeof STRING_KEYS;
+
 export type LocaleData = typeof EN_LOCALE_DATA;
 
 export type StringGetterFunction = (a: {

src/constants/markets.ts

@@ -1,36 +1,6 @@
 import { Asset, PerpetualMarket } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 
-export interface Market {
-  market: string;
-  status: string;
-  baseAsset: string;
-  quoteAsset: string;
-  stepSize: string;
-  tickSize: string;
-  oraclePrice: string;
-  priceChange24H: string;
-  nextFundingRate: string;
-  nextFundingAt: string;
-  minOrderSize: string;
-  type: string;
-  initialMarginFraction: string;
-  maintenanceMarginFraction: string;
-  volume24H: string;
-  trades24H: string;
-  openInterest: string;
-  incrementalInitialMarginFraction: string;
-  incrementalPositionSize: string;
-  maxPositionSize: string;
-  baselinePositionSize: string;
-  assetResolution: string;
-  syntheticAssetId: string;
-}
-
-export type AllMarkets = {
-  [market: string]: Market;
-};
-
 export type MarketData = {
   asset: Asset;
   tickSizeDecimals: number;

src/hooks/useCurrentMarketId.ts

@@ -4,7 +4,7 @@ import { useMatch, useNavigate } from 'react-router-dom';
 
 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';
-import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
+import { AppRoute } from '@/constants/routes';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { closeDialogInTradeBox } from '@/state/dialogs';

src/hooks/useSubaccount.tsx

@@ -100,7 +100,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
         subaccountClient: SubaccountClient;
         assetId?: number;
         amount: Long;
-      }) => await compositeClient?.validatorClient.post.deposit(subaccountClient, assetId, amount),
+      }) => await compositeClient?.validatorClient.post.deposit(subaccountClient, assetId, amount, false),
 
       withdrawFromSubaccount: async ({
         subaccountClient,

src/styles/fonts.css

@@ -1,38 +1,42 @@
-/*
- * Legal Disclaimer for Web licence
+/**
+ * @license
  *
- * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
  *
- * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
- * 
- * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
- * 
- * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
- *
- * dydx.exchange (monthly pageviews: <50K)
- *
- */
+ * Font Styles:
+ * Satoshi Regular
+ * Satoshi Medium
+ * Satoshi Bold
+ * Satoshi Black
+*/
+
 
 @font-face {
-  src: url("fonts/CircularXXWeb-Book.woff2") format("woff2");
-  font-family: "Circular";
-  font-weight: 450;
+  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 400;
 }
 
+
 @font-face {
-  src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
+  font-family: "Satoshi";
   font-weight: 500;
 }
 
+
 @font-face {
-  src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2");
-  font-family: "Circular";
+  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
+  font-family: "Satoshi";
   font-weight: 700;
 }
 
 @font-face {
-  src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
-  font-family: "CircularMono";
-  font-weight: 400;
+  src: url("fonts/Satoshi-Black.woff2") format("woff2");
+  font-family: "Satoshi";
+  font-weight: 900;
 }
+

src/styles/text.css

@@ -1,22 +1,16 @@
 /* Constants */
 
 :root {
-  --fontFamily-base: "Circular", system-ui, -apple-system, Helvetica, Arial, sans-serif;
-  --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base);
+  --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --fontFamily-monospace: Courier, monospace, var(--fontFamily-base);
 
   --fontWeight-base-0: 450;
   --fontWeight-base-1: 500;
   --fontWeight-base-2: 700;
-  --fontWeight-monospace: 400;
 
   --letter-spacing-base: -0.02em;
 
   /* New Typography system */
-
-  /**
-   * @size 10px/11px
-   * @weight 400
-   */
   --fontSize-tiny: 0.625rem; /* 10px/11px */
   --fontSize-mini: 0.75rem; /* 12px/13px */
   --fontSize-small: 0.8438rem; /* 13.5px/14.5px */

src/views/MarketDetails.tsx

@@ -2,7 +2,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
+import { STRING_KEYS, type StringKey } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,10 +34,7 @@ export const MarketDetails: React.FC = () => {
     initialMarginFraction,
     maintenanceMarginFraction,
     minOrderSize,
-    maxPositionSize,
-    baselinePositionSize,
-    incrementalInitialMarginFraction,
-    incrementalPositionSize,
+    stepSizeDecimals,
     tickSizeDecimals,
   } = configs;
 
@@ -72,12 +69,28 @@ export const MarketDetails: React.FC = () => {
       key: 'step-size',
       label: stringGetter({ key: STRING_KEYS.STEP_SIZE }),
       tooltip: 'step-size',
-      value: <Output useGrouping value={stepSize} type={OutputType.Asset} tag={symbol} />,
+      value: (
+        <Output
+          useGrouping
+          value={stepSize}
+          type={OutputType.Asset}
+          tag={symbol}
+          fractionDigits={stepSizeDecimals}
+        />
+      ),
     },
     {
       key: 'min-order-size',
       label: stringGetter({ key: STRING_KEYS.MINIMUM_ORDER_SIZE }),
-      value: <Output useGrouping value={minOrderSize} type={OutputType.Asset} tag={symbol} />,
+      value: (
+        <Output
+          useGrouping
+          value={minOrderSize}
+          type={OutputType.Asset}
+          tag={symbol}
+          fractionDigits={stepSizeDecimals}
+        />
+      ),
     },
     {
       key: 'max-leverage',
@@ -105,36 +118,6 @@ export const MarketDetails: React.FC = () => {
       tooltip: 'initial-margin-fraction',
       value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
     },
-    {
-      key: 'incremental-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.INCREMENTAL_INITIAL_MARGIN_FRACTION }),
-      value: (
-        <Output
-          useGrouping
-          value={incrementalInitialMarginFraction}
-          type={OutputType.SmallPercent}
-        />
-      ),
-    },
-    {
-      key: 'incremental-position-size',
-      label: stringGetter({ key: STRING_KEYS.INCREMENTAL_POSITION_SIZE }),
-      value: (
-        <Output useGrouping value={incrementalPositionSize} type={OutputType.Asset} tag={symbol} />
-      ),
-    },
-    {
-      key: 'baseline-position-size',
-      label: stringGetter({ key: STRING_KEYS.BASELINE_POSITION_SIZE }),
-      value: (
-        <Output useGrouping value={baselinePositionSize} type={OutputType.Asset} tag={symbol} />
-      ),
-    },
-    {
-      key: 'max-position-size',
-      label: stringGetter({ key: STRING_KEYS.MAXIMUM_POSITION_SIZE }),
-      value: <Output useGrouping value={maxPositionSize} type={OutputType.Asset} tag={symbol} />,
-    },
   ];
 
   return (
@@ -150,10 +133,10 @@ export const MarketDetails: React.FC = () => {
 
         <Styled.MarketDescription>
           {primaryDescriptionKey && (
-            <p>{stringGetter({ key: STRING_KEYS[primaryDescriptionKey] })}</p>
+            <p>{stringGetter({ key: STRING_KEYS[primaryDescriptionKey as StringKey] })}</p>
           )}
           {secondaryDescriptionKey && (
-            <p>{stringGetter({ key: STRING_KEYS[secondaryDescriptionKey] })}</p>
+            <p>{stringGetter({ key: STRING_KEYS[secondaryDescriptionKey as StringKey] })}</p>
           )}
         </Styled.MarketDescription>