Improve UX for forced actions

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,

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,

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()}`
   })
 }

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>

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'}

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
@@ -29,15 +30,23 @@ 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}`
+    props.ethereumAddress
+      ? props.tradingMode === 'perpetual'
+        ? `/forced/new/${
+            entry.vaultOrPositionId
+          }/${entry.asset.hashOrId.toString()}`
+        : `/forced/new/${entry.vaultOrPositionId}`
+      : '/users/register'
 
   const escapeHatchElem = (entry: UserAssetEntry) =>
     entry.action === 'WITHDRAW' ? (
-      <LinkButton href={`/escape/${entry.vaultOrPositionId}`}>
+      <LinkButton
+        href={
+          props.ethereumAddress
+            ? `/escape/${entry.vaultOrPositionId}`
+            : '/users/register'
+        }
+      >
         ESCAPE
       </LinkButton>
     ) : (
@@ -93,3 +102,8 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
     />
   )
 }
+
+export function getEscapeHatchLink(
+  vaultOrPositionId: string,
+  ethereumAddress: EthereumAddress
+) {}