Improve UX for forced actions (#447)

* Improve UX for forced actions * add implementation
l2beat · Jul 28, 2023 · 7d860b4 · 7d860b4
1 parent b770a19
commit 7d860b4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 14 deletions.
diff --git a/packages/backend/src/api/controllers/UserController.ts b/packages/backend/src/api/controllers/UserController.ts
@@ -77,6 +77,18 @@ export class UserController {
       return { type: 'redirect', url: '/users/recover' }
     }
 
+    const registeredUser =
+      await this.userRegistrationEventRepository.findByStarkKey(
+        context.user.starkKey
+      )
+
+    if (registeredUser) {
+      return {
+        type: 'redirect',
+        url: `/users/${context.user.starkKey.toString()}`,
+      }
+    }
+
     const content = renderUserRegisterPage({
       context,
       exchangeAddress: this.exchangeAddress,
@@ -286,7 +298,8 @@ export class UserController {
   ): Promise<ControllerResult> {
     const context = await this.pageContextService.getPageContext(givenUser)
     const collateralAsset = this.pageContextService.getCollateralAsset(context)
-    const [userAssets, userStatistics] = await Promise.all([
+    const [registeredUser, userAssets, userStatistics] = await Promise.all([
+      this.userRegistrationEventRepository.findByStarkKey(starkKey),
       this.preprocessedAssetHistoryRepository.getCurrentByStarkKeyPaginated(
         starkKey,
         pagination,
@@ -301,7 +314,6 @@ export class UserController {
         message: `User with starkKey ${starkKey.toString()} not found`,
       }
     }
-
     const assetDetailsMap = await this.assetDetailsService.getAssetDetailsMap({
       userAssets: userAssets,
     })
@@ -318,6 +330,7 @@ export class UserController {
     const content = renderUserAssetsPage({
       context,
       starkKey,
+      ethereumAddress: registeredUser?.ethAddress,
       assets,
       ...pagination,
       total: userStatistics.assetCount,

diff --git a/packages/frontend/src/preview/routes.ts b/packages/frontend/src/preview/routes.ts
@@ -582,6 +582,7 @@ const routes: Route[] = [
       ctx.body = renderUserAssetsPage({
         context,
         starkKey: StarkKey.fake(),
+        ethereumAddress: undefined,
         assets: repeat(visible, randomUserAssetEntry),
         limit,
         offset,

diff --git a/packages/frontend/src/scripts/keys/starkKeyRegistration.ts b/packages/frontend/src/scripts/keys/starkKeyRegistration.ts
@@ -36,6 +36,6 @@ export function initStarkKeyRegistration() {
       EthereumAddress(exchangeAddress)
     )
 
-    window.location.reload()
+    window.location.href = `/users/${starkKey.toString()}`
   })
 }
diff --git a/packages/frontend/src/view/pages/user/UserAssetsPage.tsx b/packages/frontend/src/view/pages/user/UserAssetsPage.tsx
@@ -1,5 +1,5 @@
 import { PageContext } from '@explorer/shared'
-import { StarkKey } from '@explorer/types'
+import { EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
 import { ContentWrapper } from '../../components/page/ContentWrapper'
@@ -13,6 +13,7 @@ import { UserPageTitle } from './components/UserPageTitle'
 interface UserAssetsPageProps {
   context: PageContext
   starkKey: StarkKey
+  ethereumAddress: EthereumAddress | undefined
   assets: UserAssetEntry[]
   limit: number
   offset: number
@@ -25,6 +26,7 @@ export function renderUserAssetsPage(props: UserAssetsPageProps) {
 
 function UserAssetsPage(props: UserAssetsPageProps) {
   const common = getAssetsTableProps(props.starkKey)
+  const isMine = props.context.user?.starkKey === props.starkKey
   return (
     <Page
       path={common.path}
@@ -43,9 +45,12 @@ function UserAssetsPage(props: UserAssetsPageProps) {
           total={props.total}
         >
           <UserAssetsTable
-            starkKey={props.starkKey}
             tradingMode={props.context.tradingMode}
+            starkKey={props.starkKey}
+            ethereumAddress={props.ethereumAddress}
             assets={props.assets}
+            isMine={isMine}
+            isFrozen={props.context.freezeStatus === 'frozen'}
           />
         </TableWithPagination>
       </ContentWrapper>

diff --git a/packages/frontend/src/view/pages/user/UserPage.tsx b/packages/frontend/src/view/pages/user/UserPage.tsx
@@ -96,6 +96,7 @@ function UserPage(props: UserPageProps) {
           <UserAssetsTable
             tradingMode={props.context.tradingMode}
             starkKey={props.starkKey}
+            ethereumAddress={props.ethereumAddress}
             assets={props.assets}
             isMine={isMine}
             isFrozen={props.context.freezeStatus === 'frozen'}

diff --git a/packages/frontend/src/view/pages/user/components/UserAssetTable.tsx b/packages/frontend/src/view/pages/user/components/UserAssetTable.tsx
@@ -1,5 +1,5 @@
 import { TradingMode } from '@explorer/shared'
-import { StarkKey } from '@explorer/types'
+import { EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
 import { Asset, assetToInfo } from '../../../../utils/assets'
@@ -14,6 +14,7 @@ import { Table } from '../../../components/table/Table'
 interface UserAssetsTableProps {
   assets: UserAssetEntry[]
   starkKey: StarkKey
+  ethereumAddress: EthereumAddress | undefined
   tradingMode: TradingMode
   isMine?: boolean
   isFrozen?: boolean
@@ -28,16 +29,13 @@ export interface UserAssetEntry {
 }
 
 export function UserAssetsTable(props: UserAssetsTableProps) {
-  const forcedActionLink = (entry: UserAssetEntry) =>
-    props.tradingMode === 'perpetual'
-      ? `/forced/new/${
-          entry.vaultOrPositionId
-        }/${entry.asset.hashOrId.toString()}`
-      : `/forced/new/${entry.vaultOrPositionId}`
+  const isUserRegistered = !!props.ethereumAddress
 
   const escapeHatchElem = (entry: UserAssetEntry) =>
     entry.action === 'WITHDRAW' ? (
-      <LinkButton href={`/escape/${entry.vaultOrPositionId}`}>
+      <LinkButton
+        href={getEscapeHatchLink(entry.vaultOrPositionId, isUserRegistered)}
+      >
         ESCAPE
       </LinkButton>
     ) : (
@@ -79,7 +77,11 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
               (!props.isFrozen ? (
                 <LinkButton
                   className="w-32"
-                  href={forcedActionLink(entry)}
+                  href={getForcedActionLink(
+                    props.tradingMode,
+                    entry,
+                    isUserRegistered
+                  )}
                   disabled={isDisabled}
                 >
                   {entry.action}
@@ -93,3 +95,29 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
     />
   )
 }
+
+function getEscapeHatchLink(
+  vaultOrPositionId: string,
+  isUserRegistered: boolean
+) {
+  if (!isUserRegistered) {
+    return '/users/register'
+  }
+  return `/escape/${vaultOrPositionId}`
+}
+
+function getForcedActionLink(
+  tradingMode: TradingMode,
+  entry: UserAssetEntry,
+  isUserRegistered: boolean
+) {
+  if (!isUserRegistered) {
+    return '/users/register'
+  }
+
+  return tradingMode === 'perpetual'
+    ? `/forced/new/${
+        entry.vaultOrPositionId
+      }/${entry.asset.hashOrId.toString()}`
+    : `/forced/new/${entry.vaultOrPositionId}`
+}