move position value to user profile

l2beat · Oct 29, 2024 · 646e63f · 646e63f
1 parent 530f4d1
commit 646e63f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 28 deletions.
diff --git a/packages/backend/src/api/controllers/UserController.ts b/packages/backend/src/api/controllers/UserController.ts
@@ -277,7 +277,6 @@ export class UserController {
         )
       }
     }
-    console.log(positionValues)
 
     const assetEntries = userAssets.map((a) =>
       toUserAssetEntry(
@@ -291,7 +290,7 @@ export class UserController {
         assetDetailsMap
       )
     )
-    console.log(assetEntries)
+
     const balanceChangesEntries = history.map((h) =>
       toUserBalanceChangeEntries(h, assetDetailsMap)
     )
@@ -470,9 +469,6 @@ export class UserController {
       starkKey,
       ethereumAddress: registeredUser?.ethAddress,
       assets: hideAllAssets ? [] : assets, // When frozen and escaped, don't show assets
-      positionValue: postionValues?.positionValue
-        ? postionValues.positionValue / 10000n
-        : undefined,
       ...pagination,
       total: hideAllAssets ? 0 : userStatistics.assetCount,
     })

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

diff --git a/packages/frontend/src/view/pages/user/UserAssetsPage.tsx b/packages/frontend/src/view/pages/user/UserAssetsPage.tsx
@@ -2,7 +2,6 @@ import { PageContext } from '@explorer/shared'
 import { EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
-import { formatWithDecimals } from '../../../utils/formatting/formatAmount'
 import { InfoBanner } from '../../components/InfoBanner'
 import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
@@ -16,7 +15,6 @@ interface UserAssetsPageProps {
   context: PageContext
   starkKey: StarkKey
   ethereumAddress: EthereumAddress | undefined
-  positionValue: bigint | undefined
   assets: UserAssetEntry[]
   limit: number
   offset: number
@@ -48,12 +46,6 @@ function UserAssetsPage(props: UserAssetsPageProps) {
           total={props.total}
         >
           <InfoBanner className="mb-3 leading-tight">
-            {props.positionValue !== undefined
-              ? `Estimated value of the position: ${formatWithDecimals(
-                  props.positionValue,
-                  2
-                )} USDC. `
-              : ''}
             State of assets (proven on Ethereum) is updated every few hours.
           </InfoBanner>
           <UserAssetsTable

diff --git a/packages/frontend/src/view/pages/user/UserPage.tsx b/packages/frontend/src/view/pages/user/UserPage.tsx
@@ -2,7 +2,6 @@ import { PageContext } from '@explorer/shared'
 import { EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
-import { formatWithDecimals } from '../../../utils/formatting/formatAmount'
 import { CountBadge } from '../../components/CountBadge'
 import { InfoBanner } from '../../components/InfoBanner'
 import { ContentWrapper } from '../../components/page/ContentWrapper'
@@ -111,6 +110,7 @@ function UserPage(props: UserPageProps) {
               starkKey={props.starkKey}
               chainId={props.context.chainId}
               ethereumAddress={props.ethereumAddress}
+              positionValue={props.positionValue}
             />
             <PerformUserActionsPanel
               performUserActions={props.performUserActions}
@@ -137,17 +137,6 @@ function UserPage(props: UserPageProps) {
               content: (
                 <>
                   <InfoBanner className="mb-3 leading-tight">
-                    {props.positionValue !== undefined ? (
-                      <span>
-                        Estimated value of the position:{' '}
-                        <strong className="text-lg">
-                          {formatWithDecimals(props.positionValue, 2)} USDC
-                        </strong>
-                        .{' '}
-                      </span>
-                    ) : (
-                      ''
-                    )}
                     State of assets (proven on Ethereum) is updated every few
                     hours.
                   </InfoBanner>

diff --git a/packages/frontend/src/view/pages/user/components/UserProfile.tsx b/packages/frontend/src/view/pages/user/components/UserProfile.tsx
@@ -1,18 +1,24 @@
 import { UserDetails } from '@explorer/shared'
-import { EthereumAddress, StarkKey } from '@explorer/types'
+import { AssetId, EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
+import { assetToInfo } from '../../../../utils/assets'
+import { formatWithDecimals } from '../../../../utils/formatting/formatAmount'
+import { InfoIcon } from '../../../assets/icons/InfoIcon'
+import { AssetWithLogo } from '../../../components/AssetWithLogo'
 import { Button } from '../../../components/Button'
 import { Card } from '../../../components/Card'
 import { EtherscanLink } from '../../../components/EtherscanLink'
 import { InfoBanner } from '../../../components/InfoBanner'
 import { InlineEllipsis } from '../../../components/InlineEllipsis'
 import { LongHash } from '../../../components/LongHash'
+import { TooltipWrapper } from '../../../components/Tooltip'
 
 interface UserProfileProps {
   user: Partial<UserDetails> | undefined
   starkKey: StarkKey
   chainId: number
+  positionValue: bigint | undefined
   ethereumAddress?: EthereumAddress
 }
 
@@ -21,12 +27,13 @@ export function UserProfile({
   starkKey,
   chainId,
   ethereumAddress,
+  positionValue,
 }: UserProfileProps) {
   const isMine = user?.starkKey === starkKey
   return (
     <Card>
       <p className="mb-1.5 text-sm font-semibold text-zinc-500">Stark key</p>
-      <LongHash className="mt-3 font-semibold text-white" withCopy>
+      <LongHash className="font-semibold text-white" withCopy>
         {starkKey.toString()}
       </LongHash>
       <p className="mb-1.5 mt-6 text-sm font-semibold text-zinc-500 ">
@@ -79,6 +86,23 @@ export function UserProfile({
           )}
         </>
       )}
+      {positionValue ? (
+        <>
+          <p className="mb-1.5 mt-6 flex items-center gap-0.5 text-sm font-semibold text-zinc-500">
+            Estimated position value{' '}
+            <TooltipWrapper content="Exact value of the withdrawal will be calculated by the StarkEx smart contracts">
+              <InfoIcon className="scale-75" />
+            </TooltipWrapper>
+          </p>
+          <div className="flex items-center gap-2 font-semibold text-white">
+            {formatWithDecimals(positionValue, 2)}{' '}
+            <AssetWithLogo
+              assetInfo={assetToInfo({ hashOrId: AssetId('USDC-6') })}
+              type="small"
+            />
+          </div>
+        </>
+      ) : null}
     </Card>
   )
 }