Update dydx banner and add info on forced action pages (#529)

* Update dydx banner * Add info panel on forced withdrawal pages * UPdate panel background
l2beat · Oct 28, 2024 · e9d06f7 · e9d06f7
1 parent ed1c59e
commit e9d06f7
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 44 deletions.
diff --git a/packages/frontend/src/view/components/page/FreezeBanner.tsx b/packages/frontend/src/view/components/page/FreezeBanner.tsx
@@ -69,7 +69,8 @@ function DydxSunsetFreezeBanner({
       ) : (
         <>
           <span>
-            dYdX v3 is scheduled to shut down on October 28th at 12:05 P.M. UTC.
+            dYdX v3 has stopped trading. Funds will be withdrawable after
+            October 30, ~14:30 UTC.
           </span>{' '}
           <a
             href="https://dydx.exchange/blog/v3-product-sunset"

diff --git a/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx b/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx
@@ -6,6 +6,7 @@ import { OrderedList } from '../../components/OrderedList'
 import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
+import { DydxStoppedInfoPanel } from '../user/components/DyDxStoppedInfoPanel'
 import { getForcedActionInstructionsParams } from './components/common'
 import { FormId } from './components/form/ids'
 import { NewPerpetualForcedTradeFormContent } from './components/NewPerpetualForcedTradeFormContent'
@@ -39,50 +40,53 @@ function NewPerpetualForcedActionPage(
       description="Perform forced actions on your assets"
       context={context}
     >
-      <ContentWrapper className="grid auto-rows-min grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-12">
-        <div className="flex flex-col lg:mt-6">
-          <span className="hidden text-xl font-semibold lg:inline">
-            {instructionParams.header}
-          </span>
-          <span className="text-sm font-semibold text-zinc-500 lg:mt-3">
-            <strong>
-              The cost of this process is very high, and so should only be used
-              in an emergency.
-            </strong>{' '}
-            For regular usage, you should perform the equivalent standard
-            operation through the exchange.
-          </span>
-          <span className="mt-6 text-sm font-semibold text-zinc-500">
-            {instructionParams.description}
-          </span>
-          <OrderedList items={instructionParams.items} className="mt-3" />
+      <ContentWrapper className="flex flex-col lg:gap-12">
+        <DydxStoppedInfoPanel context={context} />
+        <div className="grid auto-rows-min grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-12">
+          <div className="flex flex-col lg:mt-6">
+            <span className="hidden text-xl font-semibold lg:inline">
+              {instructionParams.header}
+            </span>
+            <span className="text-sm font-semibold text-zinc-500 lg:mt-3">
+              <strong>
+                The cost of this process is very high, and so should only be
+                used in an emergency.
+              </strong>{' '}
+              For regular usage, you should perform the equivalent standard
+              operation through the exchange.
+            </span>
+            <span className="mt-6 text-sm font-semibold text-zinc-500">
+              {instructionParams.description}
+            </span>
+            <OrderedList items={instructionParams.items} className="mt-3" />
+          </div>
+          <Card className="row-start-1 h-min lg:col-start-2">
+            <form
+              id={FormId.Form}
+              className="flex flex-col gap-6"
+              data-props={propsJson}
+              data-user={userJson}
+              data-collateral-asset={collateralAssetJson}
+            >
+              {isWithdrawal ? (
+                <NewPerpetualForcedWithdrawalFormContent
+                  positionOrVaultId={props.positionOrVaultId}
+                  asset={props.asset}
+                  starkKey={props.starkKey}
+                  instanceName={props.context.instanceName}
+                />
+              ) : (
+                <NewPerpetualForcedTradeFormContent
+                  positionOrVaultId={props.positionOrVaultId}
+                  asset={props.asset}
+                  starkKey={props.starkKey}
+                  collateralAsset={props.context.collateralAsset}
+                  instanceName={props.context.instanceName}
+                />
+              )}
+            </form>
+          </Card>
         </div>
-        <Card className="row-start-1 h-min lg:col-start-2">
-          <form
-            id={FormId.Form}
-            className="flex flex-col gap-6"
-            data-props={propsJson}
-            data-user={userJson}
-            data-collateral-asset={collateralAssetJson}
-          >
-            {isWithdrawal ? (
-              <NewPerpetualForcedWithdrawalFormContent
-                positionOrVaultId={props.positionOrVaultId}
-                asset={props.asset}
-                starkKey={props.starkKey}
-                instanceName={props.context.instanceName}
-              />
-            ) : (
-              <NewPerpetualForcedTradeFormContent
-                positionOrVaultId={props.positionOrVaultId}
-                asset={props.asset}
-                starkKey={props.starkKey}
-                collateralAsset={props.context.collateralAsset}
-                instanceName={props.context.instanceName}
-              />
-            )}
-          </form>
-        </Card>
       </ContentWrapper>
     </Page>
   )

diff --git a/packages/frontend/src/view/pages/user/components/DyDxStoppedInfoPanel.tsx b/packages/frontend/src/view/pages/user/components/DyDxStoppedInfoPanel.tsx
@@ -0,0 +1,31 @@
+import { PageContext } from '@explorer/shared'
+import React from 'react'
+
+import { InfoIcon } from '../../../assets/icons/InfoIcon'
+import { Card } from '../../../components/Card'
+
+interface DydxStoppedInfoPanelProps {
+  context: PageContext
+}
+
+export function DydxStoppedInfoPanel(props: DydxStoppedInfoPanelProps) {
+  if (props.context.instanceName !== 'dYdX') {
+    return null
+  }
+  return (
+    <section>
+      <Card className="flex flex-col gap-3 bg-yellow-300 bg-opacity-20">
+        <div className="flex">
+          <InfoIcon className="mr-1.5 mt-px shrink-0 fill-yellow-300" />
+          <p className="font-bold leading-tight text-yellow-300">
+            dYdX v3 has stopped trading.
+          </p>
+        </div>
+        <p className="mb-1.5 text-sm font-semibold leading-tight">
+          Forced withdrawals will not be executed. Withdrawals will be available
+          via Escape Hatch mechanism after October 30, ~14:30 UTC.
+        </p>
+      </Card>
+    </section>
+  )
+}