feat(uirefresh): component refresh - collapsible receipt (#1190)

dydxprotocol · Oct 22, 2024 · 723a33f · 723a33f
1 parent 1ba3177
commit 723a33f
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 106 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.4",
     "@dydxprotocol/v4-client-js": "1.12.1",
-    "@dydxprotocol/v4-localization": "^1.1.227",
+    "@dydxprotocol/v4-localization": "^1.1.228",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/DropdownSelectMenu.tsx b/src/components/DropdownSelectMenu.tsx
@@ -21,6 +21,8 @@ import { popoverMixins } from '@/styles/popoverMixins';
 import { Icon, IconName } from '@/components/Icon';
 import { Tag } from '@/components/Tag';
 
+import { testFlags } from '@/lib/testFlags';
+
 type ElementProps<MenuItemValue extends string> = {
   disabled?: boolean;
   items: MenuItem<MenuItemValue>[];
@@ -59,12 +61,18 @@ export const DropdownSelectMenu = <MenuItemValue extends string>({
 
   disabled,
 }: ElementProps<MenuItemValue> & StyleProps) => {
+  const { uiRefresh } = testFlags;
+
   const triggerContent = (
     <>
       {children}
       {!hideIcon && (
         <$DropdownIcon aria-hidden="true">
-          <Icon iconName={IconName.Triangle} aria-hidden="true" />
+          <Icon
+            iconName={uiRefresh ? IconName.Caret : IconName.Triangle}
+            size={uiRefresh ? '1.5em' : '1em'}
+            aria-hidden="true"
+          />
         </$DropdownIcon>
       )}
     </>

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -301,6 +301,7 @@ type ElementProps = {
 
 type StyleProps = {
   className?: string;
+  size?: string;
 };
 
 export const Icon = styled(
@@ -311,7 +312,7 @@ export const Icon = styled(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     size,
     ...props
-  }: ElementProps & StyleProps & { size?: string }) =>
+  }: ElementProps & StyleProps) =>
     Component ? <Component className={className} {...props} /> : null
 )`
   --icon-size: ${({ size }) => size ?? ''};

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -368,7 +368,6 @@ const $DropdownTabTrigger = styled(Trigger)<{
   $withUnderline?: boolean;
 }>`
   ${tabMixins.tabTriggerStyle}
-  gap: 1ch;
   height: 100%;
   width: 100%;
 

diff --git a/src/components/WithReceipt.tsx b/src/components/WithReceipt.tsx
@@ -27,30 +27,33 @@ export const WithReceipt = ({
   const receipt = <$SlotReceipt>{slotReceipt}</$SlotReceipt>;
 
   return (
-    <$WithReceipt className={className} hideReceipt={hideReceipt}>
+    <$WithReceipt className={className} showReceipt={!hideReceipt}>
       {side === 'top' && receipt}
       {children}
       {side === 'bottom' && receipt}
     </$WithReceipt>
   );
 };
-const $WithReceipt = styled.div<{ hideReceipt?: boolean }>`
+
+const $SlotReceipt = styled.div``;
+
+const $WithReceipt = styled.div<{ showReceipt?: boolean }>`
   --withReceipt-backgroundColor: var(--color-layer-1);
-  display: grid;
 
-  background-color: var(--withReceipt-backgroundColor);
+  background-color: transparent;
   border-radius: 0.5em;
 
-  ${({ hideReceipt }) =>
-    hideReceipt &&
-    css`
-      background-color: transparent;
+  display: grid;
+  grid-template-rows: 0fr;
 
-      ${$SlotReceipt} {
-        height: 0;
-        opacity: 0;
-      }
+  ${$SlotReceipt} {
+    overflow: hidden;
+  }
+
+  ${({ showReceipt }) =>
+    showReceipt &&
+    css`
+      grid-template-rows: 1fr;
+      background-color: var(--withReceipt-backgroundColor);
     `}
 `;
-
-const $SlotReceipt = styled.div``;
diff --git a/src/views/forms/ClosePositionForm.tsx b/src/views/forms/ClosePositionForm.tsx
@@ -12,7 +12,7 @@ import {
   type Nullable,
 } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
-import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
+import { ButtonAction, ButtonShape, ButtonSize } from '@/constants/buttons';
 import { ErrorParams } from '@/constants/errors';
 import { STRING_KEYS } from '@/constants/localization';
 import { NotificationType } from '@/constants/notifications';
@@ -354,34 +354,20 @@ export const ClosePositionForm = ({
         </$MobileLayout>
       )}
 
-      <$Footer>
-        {amountInput != null && (
-          <div tw="row justify-self-end px-0 py-0.5">
-            <Button
-              type={ButtonType.Reset}
-              action={ButtonAction.Reset}
-              shape={ButtonShape.Pill}
-              size={ButtonSize.XSmall}
-              onClick={onClearInputs}
-            >
-              {stringGetter({ key: STRING_KEYS.CLEAR })}
-            </Button>
-          </div>
-        )}
-
-        <PlaceOrderButtonAndReceipt
-          hasValidationErrors={hasInputErrors}
-          actionStringKey={inputAlert?.actionStringKey}
-          validationErrorString={alertContent}
-          summary={summary ?? undefined}
-          currentStep={currentStep}
-          confirmButtonConfig={{
-            stringKey: STRING_KEYS.CLOSE_ORDER,
-            buttonTextStringKey: STRING_KEYS.CLOSE_POSITION,
-            buttonAction: ButtonAction.Destroy,
-          }}
-        />
-      </$Footer>
+      <PlaceOrderButtonAndReceipt
+        hasValidationErrors={hasInputErrors}
+        hasInput={amountInput != null}
+        onClearInputs={onClearInputs}
+        actionStringKey={inputAlert?.actionStringKey}
+        validationErrorString={alertContent}
+        summary={summary ?? undefined}
+        currentStep={currentStep}
+        confirmButtonConfig={{
+          stringKey: STRING_KEYS.CLOSE_ORDER,
+          buttonTextStringKey: STRING_KEYS.CLOSE_POSITION,
+          buttonAction: ButtonAction.Destroy,
+        }}
+      />
     </$ClosePositionForm>
   );
 };
@@ -455,13 +441,6 @@ const $ToggleGroup = styled(ToggleGroup)`
   }
 `;
 
-const $Footer = styled.footer`
-  ${formMixins.footer}
-  padding-bottom: var(--dialog-content-paddingBottom);
-  --stickyFooterBackdrop-outsetY: var(--dialog-content-paddingBottom);
-
-  ${layoutMixins.column}
-`;
 const $InputsColumn = styled.div`
   ${formMixins.inputsColumn}
 `;

diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx
@@ -15,7 +15,7 @@ import {
   type Nullable,
 } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
-import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
+import { ButtonAction, ButtonShape, ButtonSize } from '@/constants/buttons';
 import { ErrorParams } from '@/constants/errors';
 import { STRING_KEYS } from '@/constants/localization';
 import { NotificationType } from '@/constants/notifications';
@@ -33,7 +33,6 @@ import { formMixins } from '@/styles/formMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AlertMessage } from '@/components/AlertMessage';
-import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Link } from '@/components/Link';
@@ -307,34 +306,21 @@ export const TradeForm = ({
   );
 
   const tradeFooter = (
-    <$Footer>
-      {isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder) && (
-        <div tw="row justify-self-end px-0 py-0.5">
-          <Button
-            type={ButtonType.Reset}
-            action={ButtonAction.Reset}
-            shape={ButtonShape.Pill}
-            size={ButtonSize.XSmall}
-            onClick={() => abacusStateManager.clearTradeInputValues({ shouldResetSize: true })}
-          >
-            {stringGetter({ key: STRING_KEYS.CLEAR })}
-          </Button>
-        </div>
-      )}
-      <PlaceOrderButtonAndReceipt
-        hasValidationErrors={hasInputErrors}
-        actionStringKey={inputAlert?.actionStringKey}
-        validationErrorString={shortAlertContent}
-        summary={summary ?? undefined}
-        currentStep={currentStep}
-        showDeposit={inputAlert?.errorAction === TradeInputErrorAction.DEPOSIT}
-        confirmButtonConfig={{
-          stringKey: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
-          buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
-          buttonAction: orderSideAction,
-        }}
-      />
-    </$Footer>
+    <PlaceOrderButtonAndReceipt
+      hasValidationErrors={hasInputErrors}
+      hasInput={isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder)}
+      onClearInputs={() => abacusStateManager.clearTradeInputValues({ shouldResetSize: true })}
+      actionStringKey={inputAlert?.actionStringKey}
+      validationErrorString={shortAlertContent}
+      summary={summary ?? undefined}
+      currentStep={currentStep}
+      showDeposit={inputAlert?.errorAction === TradeInputErrorAction.DEPOSIT}
+      confirmButtonConfig={{
+        stringKey: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
+        buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
+        buttonAction: orderSideAction as ButtonAction,
+      }}
+    />
   );
 
   return (
@@ -489,9 +475,3 @@ const $IconButton = styled(IconButton)`
 const $InputsColumn = styled.div`
   ${formMixins.inputsColumn}
 `;
-const $Footer = styled.footer`
-  ${formMixins.footer}
-  --stickyFooterBackdrop-outsetY: var(--tradeBox-content-paddingBottom);
-
-  ${layoutMixins.column}
-`;