implemented

2024-01-26 16:52:46 -05:00 · 2024-01-26 16:52:46 -05:00 · d9780c5ad9
commit d9780c5ad9
parent cc8c724f09
6 changed files with 75 additions and 38 deletions
--- a/package.json
+++ b/package.json
@ -39,9 +39,9 @@
    "@cosmjs/proto-signing": "^0.32.1",
    "@cosmjs/stargate": "^0.32.1",
    "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.2.5",
+    "@dydxprotocol/v4-abacus": "^1.2.8",
    "@dydxprotocol/v4-client-js": "^1.0.17",
-    "@dydxprotocol/v4-localization": "^1.1.11",
+    "@dydxprotocol/v4-localization": "^1.1.15",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -27,14 +27,14 @@ dependencies:
    specifier: ^0.32.1
    version: 0.32.2
  '@dydxprotocol/v4-abacus':
-    specifier: ^1.2.5
-    version: 1.2.5
+    specifier: ^1.2.8
+    version: 1.2.8
  '@dydxprotocol/v4-client-js':
    specifier: ^1.0.17
    version: 1.0.17
  '@dydxprotocol/v4-localization':
-    specifier: ^1.1.11
-    version: 1.1.11
+    specifier: ^1.1.15
+    version: 1.1.15
  '@ethersproject/providers':
    specifier: ^5.7.2
    version: 5.7.2
@ -1086,8 +1086,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.8:
+    resolution: {integrity: sha512-rW+9r3cymCFn054Spbw91CXprMpnP6f5C/lSNQ1ptoer5r6FlTUa1tu1+j3YaNSkazqigifK+Eu0IwDmvAS28w==}
    dev: false

  /@dydxprotocol/v4-client-js@1.0.17:
@ -1119,8 +1119,8 @@ packages:
      - utf-8-validate
    dev: false

-  /@dydxprotocol/v4-localization@1.1.11:
-    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
+  /@dydxprotocol/v4-localization@1.1.15:
+    resolution: {integrity: sha512-tniPEkz0QY+4C3t3zJvf/Smczx6ikllpIH4rtjOGnUuXrJjkWX7UO/+CHzUsi2jt/6sqDBoabTAcFGm4mov72w==}
    dev: false

  /@dydxprotocol/v4-proto@3.0.0-dev.0:
--- a/src/components/Checkbox.stories.tsx
+++ b/src/components/Checkbox.stories.tsx
@ -5,7 +5,7 @@ import { Checkbox, CheckboxProps } from '@/components/Checkbox';

 import { StoryWrapper } from '.ladle/components';

-export const Checkboxes: Story<CheckboxProps> = (args) => {
+export const CheckboxStory: Story<CheckboxProps> = (args) => {
  const [isChecked, setIsChecked] = useState(false);

  return (
@ -21,4 +21,12 @@ export const Checkboxes: Story<CheckboxProps> = (args) => {
  );
 };

-Checkboxes.args = {};
+CheckboxStory.args = {};
+
+CheckboxStory.argTypes = {
+  disabled: {
+    options: [true, false],
+    control: { type: 'select' },
+    defaultValue: false,
+  }
+}
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@ -1,4 +1,4 @@
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';

@ -9,6 +9,7 @@ type ElementProps = {
  onCheckedChange: (checked: boolean) => void;
  id?: string;
  label?: React.ReactNode;
+  disabled?: boolean;
 };

 type StyleProps = {
@ -23,14 +24,15 @@ export const Checkbox: React.FC<CheckboxProps> = ({
  onCheckedChange,
  id,
  label,
+  disabled
 }) => (
  <Styled.Container>
-    <Styled.Root className={className} checked={checked} onCheckedChange={onCheckedChange} id={id}>
+    <Styled.Root className={className} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} id={id}>
      <Styled.Indicator>
        <CheckIcon />
      </Styled.Indicator>
    </Styled.Root>
-    {label && <label htmlFor={id}>{label}</label>}
+    {label && <Styled.label disabled={disabled} htmlFor={id}>{label}</Styled.label>}
  </Styled.Container>
 );

@ -48,17 +50,23 @@ Styled.Container = styled.div`

 Styled.Root = styled(Root)`
  --checkbox-backgroundColor: var(--color-layer-0);
+  --checkbox-borderColor: var(--color-border);

  min-width: 1.25rem;
  height: 1.25rem;

  border-radius: 0.375rem;
-  border: var(--border-width) solid var(--color-border);
+  border: var(--border-width) solid var(--checkbox-borderColor);
  background-color: var(--checkbox-backgroundColor);

  &[data-state='checked'] {
    --checkbox-backgroundColor: var(--color-accent);
  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    --checkbox-backgroundColor: var(--color-layer-1);
+  }
 `;

 Styled.Indicator = styled(Indicator)`
@ -68,3 +76,11 @@ Styled.Indicator = styled(Indicator)`

  color: var(--color-text-2);
 `;
+
+Styled.label = styled.div<{ disabled: boolean; }>`
+  color: var(--color-text-2);
+
+  ${({disabled}) => disabled && css`
+    color: var(--color-text-0);
+  `}
+`;
--- a/src/constants/tooltips/trade.ts
+++ b/src/constants/tooltips/trade.ts
@ -138,6 +138,10 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_BODY }),
  }),
+  'post-only-timeinforce-gtt': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_BODY }),
+  }),
  'price-impact': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_BODY }),
@ -151,6 +155,14 @@ export const tradeTooltips: TooltipStrings = {
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
    learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
  }),
+  'reduce-only-execution-ioc-fok': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_BODY }),
+  }),
+  'reduce-only-timeinforce-ioc-fok': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_BODY }),
+  }),
  spread: () => ({
    title: 'Spread',
    body: 'The difference in price between the highest bid (the price a buyer is willing to buy for) and lowest ask (the price a seller is willing to sell for) an asset.',
--- a/src/views/forms/TradeForm/AdvancedTradeOptions.tsx
+++ b/src/views/forms/TradeForm/AdvancedTradeOptions.tsx
@ -31,7 +31,7 @@ export const AdvancedTradeOptions = () => {

  const { execution, goodTil, postOnly, reduceOnly, timeInForce, type } = inputTradeData || {};

-  const { executionOptions, needsGoodUntil, needsPostOnly, needsReduceOnly, timeInForceOptions } =
+  const { executionOptions, needsGoodUntil, needsPostOnly, needsReduceOnly, postOnlyTooltip, reduceOnlyTooltip, timeInForceOptions } =
    currentTradeFormConfig || {};

  const { duration, unit } = goodTil || {};
@ -129,26 +129,9 @@ export const AdvancedTradeOptions = () => {
                ))}
              </Styled.SelectMenu>
            )}
-            {needsPostOnly && (
-              <Checkbox
-                checked={postOnly || false}
-                onCheckedChange={(checked) =>
-                  abacusStateManager.setTradeValue({
-                    value: checked,
-                    field: TradeInputField.postOnly,
-                  })
-                }
-                id="post-only"
-                label={
-                  <WithTooltip tooltip="post-only" side="right">
-                    {stringGetter({ key: STRING_KEYS.POST_ONLY })}
-                  </WithTooltip>
-                }
-              />
-            )}
-            {needsReduceOnly && (
-              <Checkbox
-                checked={reduceOnly || false}
+            {(needsReduceOnly || reduceOnlyTooltip) && <Checkbox
+                checked={(reduceOnly && !reduceOnlyTooltip) || false}
+                disabled={!!reduceOnlyTooltip}
                onCheckedChange={(checked) =>
                  abacusStateManager.setTradeValue({
                    value: checked,
@ -157,11 +140,29 @@ export const AdvancedTradeOptions = () => {
                }
                id="reduce-only"
                label={
-                  <WithTooltip tooltip="reduce-only" side="right">
+                  <WithTooltip tooltip={needsReduceOnly ? "reduce-only" : reduceOnlyTooltip?.titleStringKey.includes("REDUCE_ONLY_EXECUTION_IOC_FOK") ? "reduce-only-execution-ioc-fok" : "reduce-only-timeinforce-ioc-fok"} side="right">
                    {stringGetter({ key: STRING_KEYS.REDUCE_ONLY })}
                  </WithTooltip>
                }
              />
+            }
+            {(needsPostOnly || postOnlyTooltip) && (
+              <Checkbox
+                checked={(postOnly && !postOnlyTooltip) || false}
+                disabled={!!postOnlyTooltip}
+                onCheckedChange={(checked) =>
+                  abacusStateManager.setTradeValue({
+                    value: checked,
+                    field: TradeInputField.postOnly,
+                  })
+                }
+                id="post-only"
+                label={
+                  <WithTooltip tooltip={needsPostOnly ? "post-only" : "post-only-timeinforce-gtt"} side="right">
+                    {stringGetter({ key: STRING_KEYS.POST_ONLY })}
+                  </WithTooltip>
+                }
+              />
            )}
          </>
        )}