bump localization

* audited

* fix double header

.env.example

@@ -8,7 +8,6 @@ VITE_V3_TOKEN_ADDRESS=
 VITE_TOKEN_MIGRATION_URI=
 
 AMPLITUDE_API_KEY=
-AMPLITUDE_SERVER_URL=
 BUGSNAG_API_KEY=
 IOS_APP_ID=
 INTERCOM_APP_ID=

README.md

@@ -78,7 +78,6 @@ Set environment variables via `.env`.
 - `VITE_V3_TOKEN_ADDRESS` (optional): Address of the V3 $DYDX token.
 - `VITE_TOKEN_MIGRATION_URI` (optional): The URL of the token migration website.
 - `AMPLITUDE_API_KEY` (optional): Amplitude API key for enabling Amplitude; used with `pnpm run build:inject-amplitude`.
-- `AMPLITUDE_SERVER_URL` (optional): Custom Amplitude server URL
 - `BUGSNAG_API_KEY` (optional): API key for enabling Bugsnag; used with `pnpm run build:inject-bugsnag`.
 - `IOS_APP_ID` (optional): iOS app ID used for enabling deep linking to the iOS app; used with `pnpm run build:inject-app-deeplinks`.
 - `INTERCOM_APP_ID` (optional): Used for enabling Intercom; utilized with `pnpm run build:inject-intercom`.

package.json

@@ -41,7 +41,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.22",
+    "@dydxprotocol/v4-localization": "^1.1.24",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -32,8 +32,8 @@ dependencies:
     specifier: ^1.0.20
     version: 1.0.20
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.22
-    version: 1.1.22
+    specifier: ^1.1.24
+    version: 1.1.24
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1121,8 +1121,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.22:
-    resolution: {integrity: sha512-DURyvBx0qjXmtebSRMW4ZdTsX5xI8Mb6c7LQ8WUPU0O3Jr7n7iUT/phzZszTpwNOMFFMukMFtn7fHCgijw1TOg==}
+  /@dydxprotocol/v4-localization@1.1.24:
+    resolution: {integrity: sha512-75XpxxYTpy8eIFcJINyLlvw5J93t0TrS5LacE6J5Raz9LOUWRK4VyRbdLCU2QX8AG7xiTZk1ma8ytylVZOVx3A==}
     dev: false
 
   /@dydxprotocol/v4-proto@4.0.0-dev.0:

scripts/inject-amplitude.js

@@ -3,13 +3,12 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 const AMPLITUDE_API_KEY = process.env.AMPLITUDE_API_KEY;
-const AMPLITUDE_SERVER_URL = process.env.AMPLITUDE_SERVER_URL;
 
 const currentPath = fileURLToPath(import.meta.url);
 const projectRoot = path.dirname(currentPath);
 const htmlFilePath = path.resolve(projectRoot, '../dist/index.html');
 
-if (AMPLITUDE_API_KEY) {
+if(AMPLITUDE_API_KEY){
   try {
     const html = await fs.readFile(htmlFilePath, 'utf-8');
 
@@ -19,34 +18,8 @@ if (AMPLITUDE_API_KEY) {
         `;
 
     const amplitudeListenerScript = `<script type="module">
-      !(function () {
-        var e = "${AMPLITUDE_API_KEY}";
-        e &&
-          (globalThis.amplitude.init(e${
-            AMPLITUDE_SERVER_URL
-              ? `, undefined, {
-                serverUrl: "${AMPLITUDE_SERVER_URL}"
-              }`
-              : ''
-          }),
-          globalThis.amplitude.setOptOut(!1),
-          globalThis.addEventListener("dydx:track", function (e) {
-            var t = e.detail.eventType,
-              d = e.detail.eventData;
-            globalThis.amplitude.track(t, d);
-          }),
-          globalThis.addEventListener("dydx:identify", function (e) {
-            var t = e.detail.property,
-              d = e.detail.propertyValue;
-            if ("walletAddress" === t) globalThis.amplitude.setUserId(d);
-            else {
-              var i = new globalThis.amplitude.Identify();
-              i.set(t, d), globalThis.amplitude.identify(i);
-            }
-          }),
-          console.log("Amplitude enabled."));
-      })();
-    </script>`;
+        !function(){var e="${AMPLITUDE_API_KEY}";e&&(globalThis.amplitude.init(e),globalThis.amplitude.setOptOut(!1),globalThis.addEventListener("dydx:track",function(e){var t=e.detail.eventType,d=e.detail.eventData;globalThis.amplitude.track(t,d)}),globalThis.addEventListener("dydx:identify",function(e){var t=e.detail.property,d=e.detail.propertyValue;if("walletAddress"===t)globalThis.amplitude.setUserId(d);else{var i=new globalThis.amplitude.Identify;i.set(t,d),globalThis.amplitude.identify(i)}}),console.log("Amplitude enabled."))}();
+        </script>`;
 
     const injectedHtml = html.replace(
       '<div id="root"></div>',

src/components/AlertMessage.tsx

@@ -40,9 +40,6 @@ const AlertContainer = styled.div<StyleProps>`
       case AlertType.Info: {
         return css`
           --alert-accent-color: var(--color-text-1);
-
-          --alert-default-background-opacity: 0.133; // Relative
-          // --alert-background: var(--color-layer-6); // Absolute
         `;
       }
       case AlertType.Success: {

src/components/Button.tsx

@@ -103,14 +103,14 @@ const buttonActionVariants = {
 
   [ButtonAction.Create]: css`
     --button-textColor: var(--color-text-button);
-    --button-backgroundColor: var(--color-success);
+    --button-backgroundColor: var(--color-green);
     --button-border: solid var(--border-width) var(--color-border-white);
     --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Destroy]: css`
     --button-textColor: var(--color-text-button);
-    --button-backgroundColor: var(--color-error);
+    --button-backgroundColor: var(--color-red);
     --button-border: solid var(--border-width) var(--color-border-white);
     --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
@@ -122,7 +122,7 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-red);
     --button-backgroundColor: var(--color-layer-3);
     --button-border: solid var(--border-width) var(--color-border-red);
     --button-hover-filter: brightness(var(--hover-filter-variant));

src/components/DropdownMenu.tsx

@@ -91,10 +91,10 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>
         --item-highlighted-textColor: var(--color-accent);
       `,
       ['create']: `
-        --item-highlighted-textColor: var(--color-success);
+        --item-highlighted-textColor: var(--color-green);
       `,
       ['destroy']: `
-        --item-highlighted-textColor: var(--color-error);
+        --item-highlighted-textColor: var(--color-red);
       `,
     }[$highlightColor])}
 

src/components/Switch.tsx

@@ -47,7 +47,7 @@ Styled.Root = styled(Root)`
   --switch-thumb-backgroundColor: var(--color-layer-6);
 
   --switch-active-backgroundColor: var(--color-accent);
-  --switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground};
+  --switch-active-thumb-backgroundColor: var(--color-white);
 
   position: relative;
   width: var(--switch-width);

src/components/WithConfirmationPopover.tsx

@@ -117,7 +117,7 @@ Styled.ConfirmButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(203, 25%, 19%, 1);
 
   svg {
-    color: var(--color-success);
+    color: var(--color-green);
   }
 `;
 
@@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(296, 16%, 18%, 1);
 
   svg {
-    color: var(--color-error);
+    color: var(--color-red);
     width: 0.8em;
     height: 0.8em;
 

src/constants/styles/colors.ts

@@ -5,7 +5,8 @@ export type Theme = {
   [AppColorMode.RedUp]: ThemeColorBase;
 };
 
-export type ThemeColorBase = LayerColors &
+export type ThemeColorBase = BaseColors &
+  LayerColors &
   BorderColors &
   TextColors &
   GradientColors &
@@ -17,6 +18,12 @@ export type ThemeColorBase = LayerColors &
   ComponentColors &
   Filters;
 
+type BaseColors = {
+  white: string;
+  green: string;
+  red: string;
+};
+
 type LayerColors = {
   layer0: string;
   layer1: string;
@@ -86,7 +93,6 @@ type IconColors = {
 type ComponentColors = {
   inputBackground: string;
   popoverBackground: string;
-  switchThumbActiveBackground: string;
   toggleBackground: string;
   tooltipBackground: string;
 };

src/pages/Profile.tsx

@@ -335,7 +335,7 @@ Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
   ${({ iconName }) =>
     iconName === IconName.Close
       ? css`
-          --button-textColor: var(--color-error);
+          --button-textColor: var(--color-red);
           --button-icon-size: 0.75em;
         `
       : iconName === IconName.Transfer &&

src/styles/globalStyle.ts

@@ -2,6 +2,10 @@ import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
   :root {
+    --color-white: ${({ theme }) => theme.white};
+    --color-green: ${({ theme }) => theme.green};
+    --color-red: ${({ theme }) => theme.red};
+
     --color-layer-0: ${({ theme }) => theme.layer0};
     --color-layer-1: ${({ theme }) => theme.layer1};
     --color-layer-2: ${({ theme }) => theme.layer2};

src/styles/themes.ts

@@ -4,6 +4,10 @@ import { BrightnessFilterToken, ColorToken, OpacityToken } from '@/constants/sty
 import { generateFadedColorVariant } from '@/lib/styles';
 
 const ClassicThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green1,
+  red: ColorToken.Red2,
+
   layer0: ColorToken.GrayBlue7,
   layer1: ColorToken.GrayBlue6,
   layer2: ColorToken.GrayBlue5,
@@ -51,7 +55,6 @@ const ClassicThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.GrayBlue3,
   popoverBackground: generateFadedColorVariant(ColorToken.GrayBlue4, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.GrayBlue3,
   tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
 
@@ -61,6 +64,10 @@ const ClassicThemeBase: ThemeColorBase = {
 };
 
 const DarkThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green0,
+  red: ColorToken.Red0,
+
   layer0: ColorToken.Black,
   layer1: ColorToken.DarkGray11,
   layer2: ColorToken.DarkGray13,
@@ -108,7 +115,6 @@ const DarkThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.DarkGray6,
   popoverBackground: generateFadedColorVariant(ColorToken.DarkGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.DarkGray6,
   tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
 
@@ -118,6 +124,10 @@ const DarkThemeBase: ThemeColorBase = {
 };
 
 const LightThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green2,
+  red: ColorToken.Red1,
+
   layer0: ColorToken.White,
   layer1: ColorToken.LightGray6,
   layer2: ColorToken.White,
@@ -165,7 +175,6 @@ const LightThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.White,
   popoverBackground: generateFadedColorVariant(ColorToken.LightGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.LightGray4,
   tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),
 

src/views/AccountInfo/AccountInfoConnectedState.tsx

@@ -173,7 +173,7 @@ export const AccountInfoConnectedState = () => {
                 <WithTooltip tooltip={tooltip} stringParams={stringParams}>
                   <Styled.WithUsage>
                     {label}
-                    {hasError ? <Styled.Icon iconName={IconName.CautionCircle} /> : slotRight}
+                    {hasError ? <Styled.CautionIcon iconName={IconName.CautionCircle} /> : slotRight}
                   </Styled.WithUsage>
                 </WithTooltip>
               ),
@@ -230,7 +230,7 @@ Styled.CircleContainer = styled.div`
   border-radius: 50%;
 `;
 
-Styled.Icon = styled(Icon)`
+Styled.CautionIcon = styled(Icon)`
   color: var(--color-error);
 `;
 

src/views/PositionInfo.tsx

@@ -557,11 +557,11 @@ Styled.PositionTile = styled(PositionTile)``;
 
 Styled.ClosePositionButton = styled(Button)`
   --button-border: solid var(--border-width) var(--color-border-red);
-  --button-textColor: var(--color-error);
+  --button-textColor: var(--color-red);
 `;
 
 Styled.ClosePositionToggleButton = styled(ToggleButton)`
   --button-border: solid var(--border-width) var(--color-border-red);
-  --button-toggle-off-textColor: var(--color-error);
-  --button-toggle-on-textColor: var(--color-error);
+  --button-toggle-off-textColor: var(--color-red);
+  --button-toggle-on-textColor: var(--color-red);
 `;

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -39,7 +39,6 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
   const sectionHeader = (heading: string) => {
     return (
       <Styled.Header>
-        {heading}
         {heading}
         <HorizontalSeparatorFiller />
       </Styled.Header>
@@ -287,10 +286,10 @@ Styled.ArrowIcon = styled(Icon)<{ direction: 'up' | 'down'; color: 'green' | 're
   ${({ color }) =>
     ({
       ['green']: css`
-        color: var(--color-success);
+        color: var(--color-green);
       `,
       ['red']: css`
-        color: var(--color-error);
+        color: var(--color-red);
       `,
     }[color])}
 `;

src/views/dialogs/MnemonicExportDialog.tsx

@@ -155,8 +155,7 @@ Styled.CautionIconContainer = styled.div`
     content: '';
     width: 2.5rem;
     height: 2.5rem;
-    background-color: var(--color-error);
-    opacity: 0.1;
+    background-color: var(--color-gradient-error);
   }
 `;
 

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -323,7 +323,7 @@ Styled.ReceiptArea = styled.div`
 `;
 
 Styled.Green = styled.span`
-  color: var(--color-success);
+  color: var(--color-green);
 `;
 
 Styled.GreenCheckCircle = styled(GreenCheckCircle)`

src/views/forms/TransferForm.tsx

@@ -306,7 +306,7 @@ export const TransferForm = ({
           label={
             <Styled.DestinationInputLabel>
               {stringGetter({ key: STRING_KEYS.DESTINATION })}
-              {isAddressValid && <Icon iconName={IconName.Check} />}
+              {isAddressValid && <Styled.CheckIcon iconName={IconName.Check} />}
             </Styled.DestinationInputLabel>
           }
           type={InputType.Text}
@@ -439,10 +439,10 @@ Styled.InlineRow = styled.span`
 
 Styled.DestinationInputLabel = styled.span`
   ${layoutMixins.inlineRow}
+`;
 
-  svg {
-    color: var(--color-success);
-  }
+Styled.CheckIcon = styled(Icon)`
+  color: var(--color-success);
 `;
 
 Styled.AddressValidationAlertMessage = styled(AlertMessage)`

src/views/tables/OrdersTable/OrderActionsCell.tsx

@@ -82,6 +82,6 @@ Styled.ActionButton = styled(IconButton)`
 
 Styled.CancelButton = styled(Styled.ActionButton)`
   &:not(:disabled) {
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-red);
   }
 `;