diff --git a/packages/backend/src/api/controllers/MerkleProofController.ts b/packages/backend/src/api/controllers/MerkleProofController.ts index 2e50ee5d7..22695e00e 100644 --- a/packages/backend/src/api/controllers/MerkleProofController.ts +++ b/packages/backend/src/api/controllers/MerkleProofController.ts @@ -19,6 +19,7 @@ export class MerkleProofController { const merkleProof = await this.stateUpdater.generateMerkleProof( positionOrVaultId ) + const content = renderMerkleProofPage({ context, positionOrVaultId, diff --git a/packages/frontend/gulpfile.js b/packages/frontend/gulpfile.js index 8765b5dec..ad692aa96 100644 --- a/packages/frontend/gulpfile.js +++ b/packages/frontend/gulpfile.js @@ -16,7 +16,7 @@ async function cleanStatic() { function buildScripts() { return exec( - `esbuild --bundle src/scripts/index.ts --outfile=build/static/scripts/main.js --minify` + 'esbuild --bundle src/scripts/index.ts --outfile=build/static/scripts/main.js --minify' ) } @@ -28,10 +28,19 @@ function watchScripts() { } function buildStyles() { + const isPreviewDebug = + process.env.DEPLOYMENT_ENV === 'preview' && process.env.DEBUG === 'true' return Promise.all([ exec( - `tailwindcss -i ./src/styles/style.css -o ./build/static/styles/main.css` + 'tailwindcss -i ./src/styles/style.css -o ./build/static/styles/main.css' ), + ...(isPreviewDebug + ? [ + exec( + 'tailwindcss -i ./src/styles/debug.css -o ./build/static/styles/debug.css' + ), + ] + : []), ]) } @@ -48,7 +57,7 @@ function watchStatic() { } function buildTypescript() { - return exec(`tsc -p tsconfig.build.json`) + return exec('tsc -p tsconfig.build.json') } async function hashStaticFiles() { @@ -61,7 +70,7 @@ async function hashStaticFiles() { function startPreview() { return exec( - `nodemon --watch src -e ts,tsx --exec "node -r esbuild-register" src/preview/index.ts` + 'nodemon --watch src -e ts,tsx --exec "node -r esbuild-register" src/preview/index.ts' ) } diff --git a/packages/frontend/package.json b/packages/frontend/package.json index a9499ab65..aa65c21a2 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -17,7 +17,8 @@ "build": "NODE_ENV=production gulp build", "clean": "rm -rf build", "test": "mocha", - "dev": "DEPLOYMENT_ENV=preview gulp watch" + "dev": "DEPLOYMENT_ENV=preview gulp watch", + "dev:debug": "DEPLOYMENT_ENV=preview DEBUG=true gulp watch" }, "dependencies": { "@ethersproject/abi": "^5.6.3", diff --git a/packages/frontend/src/scripts/copyButtons.ts b/packages/frontend/src/scripts/copyButtons.ts new file mode 100644 index 000000000..e9bdd1777 --- /dev/null +++ b/packages/frontend/src/scripts/copyButtons.ts @@ -0,0 +1,20 @@ +import { makeQuery } from './utils/query' + +export function initCopyButtons() { + const { $$ } = makeQuery(document.body) + + const copyButtons = $$('.CopyButton') + for (const copyButton of copyButtons) { + const copyContent = copyButton.dataset.content + if (!copyContent) { + return + } + //eslint-disable-next-line @typescript-eslint/no-misused-promises + copyButton.addEventListener('click', () => onClick(copyContent)) + //eslint-enable-next-line @typescript-eslint/no-misused-promises + } + + async function onClick(copyContent: string) { + await navigator.clipboard.writeText(copyContent) + } +} diff --git a/packages/frontend/src/scripts/index.ts b/packages/frontend/src/scripts/index.ts index 4a39567ca..ef1062642 100644 --- a/packages/frontend/src/scripts/index.ts +++ b/packages/frontend/src/scripts/index.ts @@ -1,3 +1,4 @@ +import { initCopyButtons } from './copyButtons' import { initExpandableContainers } from './expandableContainers' import { initForcedActionForms } from './forced-actions/forcedActionForm' import { initForcedTradeOfferForms } from './forced-actions/perpetual/offer' @@ -12,6 +13,7 @@ import { initTooltips } from './tooltips' // #region UI elements initTabs() +initCopyButtons() initTooltips() initPagination() initExpandableContainers() diff --git a/packages/frontend/src/scripts/tooltips.ts b/packages/frontend/src/scripts/tooltips.ts index 02ce1ac1b..338531ecb 100644 --- a/packages/frontend/src/scripts/tooltips.ts +++ b/packages/frontend/src/scripts/tooltips.ts @@ -64,7 +64,7 @@ export function initTooltips() { window.addEventListener('resize', hide) $$('.TableView').forEach((x) => x.addEventListener('scroll', hide)) - document.body.addEventListener('scroll', hide) + document.addEventListener('scroll', hide) document.body.addEventListener('click', (e) => { if (e.currentTarget !== tooltip) { hide() @@ -72,17 +72,19 @@ export function initTooltips() { }) for (const element of elements) { + const isOnHover = element.classList.contains('OnHover') const title = element.getAttribute('title') ?? '' element.removeAttribute('title') element.setAttribute('tabindex', '0') - let mouseEnteredAt = Date.now() - element.addEventListener('mouseenter', () => { - mouseEnteredAt = Date.now() - show(element, title) - }) - element.addEventListener('mouseleave', hide) + if (isOnHover) { + element.addEventListener('mouseenter', () => { + mouseEnteredAt = Date.now() + show(element, title) + }) + element.addEventListener('mouseleave', hide) + } element.addEventListener('focus', () => show(element, title)) element.addEventListener('blur', hide) @@ -90,7 +92,7 @@ export function initTooltips() { e.stopPropagation() if (activeElement === element) { // only hide if immediately preceded by mouse enter - if (Date.now() - mouseEnteredAt > 50) { + if (isOnHover && Date.now() - mouseEnteredAt > 50) { hide() } } else { diff --git a/packages/frontend/src/styles/debug.css b/packages/frontend/src/styles/debug.css new file mode 100644 index 000000000..89e1545fe --- /dev/null +++ b/packages/frontend/src/styles/debug.css @@ -0,0 +1,4 @@ +* { + box-sizing: border-box; + outline: 1px solid green; +} diff --git a/packages/frontend/src/view/assets/icons/CopyIcon.tsx b/packages/frontend/src/view/assets/icons/CopyIcon.tsx new file mode 100644 index 000000000..7513e9a26 --- /dev/null +++ b/packages/frontend/src/view/assets/icons/CopyIcon.tsx @@ -0,0 +1,30 @@ +import classNames from 'classnames' +import React from 'react' + +export function CopyIcon({ + className, + ...rest +}: React.SVGProps) { + return ( + + + + + + + + + + + ) +} diff --git a/packages/frontend/src/view/components/AssetAmountCard.tsx b/packages/frontend/src/view/components/AssetAmountCard.tsx index 62761204b..56e554b8d 100644 --- a/packages/frontend/src/view/components/AssetAmountCard.tsx +++ b/packages/frontend/src/view/components/AssetAmountCard.tsx @@ -22,24 +22,28 @@ export function AssetAmountCard({ }: AssetAmountCardProps) { const assetInfo = assetToInfo(asset) return ( -
-
-

{amountLabel}

-

- {amount !== undefined ? formatAmount(asset, amount) : 'Unknown'} -

-
-
-

- {assetLabel} -

-
- +
+
+
+

+ {amountLabel} +

+

+ {amount !== undefined ? formatAmount(asset, amount) : 'Unknown'} +

+
+
+

+ {assetLabel} +

+
+ +
diff --git a/packages/frontend/src/view/components/Card.tsx b/packages/frontend/src/view/components/Card.tsx index cd102d2c1..164a6dd18 100644 --- a/packages/frontend/src/view/components/Card.tsx +++ b/packages/frontend/src/view/components/Card.tsx @@ -5,7 +5,10 @@ type CardProps = React.HTMLAttributes export function Card({ className, children, ...rest }: CardProps) { return (
{children} diff --git a/packages/frontend/src/view/components/CopyButton.tsx b/packages/frontend/src/view/components/CopyButton.tsx new file mode 100644 index 000000000..d8971ac3e --- /dev/null +++ b/packages/frontend/src/view/components/CopyButton.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +import { CopyIcon } from '../assets/icons/CopyIcon' +import { TooltipWrapper } from './Tooltip' + +export function CopyButton({ content }: { content: string }) { + return ( + + + + ) +} diff --git a/packages/frontend/src/view/components/LongHash.tsx b/packages/frontend/src/view/components/LongHash.tsx new file mode 100644 index 000000000..d7c888d68 --- /dev/null +++ b/packages/frontend/src/view/components/LongHash.tsx @@ -0,0 +1,27 @@ +import classNames from 'classnames' +import React from 'react' + +import { CopyButton } from './CopyButton' + +interface LongHashProps { + className?: string + children: string | string[] + withCopy?: boolean +} + +export function LongHash({ + children, + className, + withCopy = false, +}: LongHashProps) { + return ( + + {children}{' '} + {withCopy && } + + ) +} + +function getCopyButtonContent(content: string | string[]) { + return Array.isArray(content) ? content.join('') : content +} diff --git a/packages/frontend/src/view/components/OrderedList.tsx b/packages/frontend/src/view/components/OrderedList.tsx index f2e0c2e70..c1ec87f3a 100644 --- a/packages/frontend/src/view/components/OrderedList.tsx +++ b/packages/frontend/src/view/components/OrderedList.tsx @@ -11,8 +11,8 @@ export function OrderedList({ items, className }: FancyListProps) {
    {items.map((item, index) => { return ( -
  1. -
    +
  2. +
    {item}
    3. @@ -27,12 +27,7 @@ interface IndexProps { } function Index({ index }: IndexProps) { return ( - + {index + 1} ) diff --git a/packages/frontend/src/view/components/SectionHeading.tsx b/packages/frontend/src/view/components/SectionHeading.tsx index 114bbf55e..7e33c650f 100644 --- a/packages/frontend/src/view/components/SectionHeading.tsx +++ b/packages/frontend/src/view/components/SectionHeading.tsx @@ -1,4 +1,4 @@ -import { default as classNames, default as cx } from 'classnames' +import classNames from 'classnames' import React, { ReactNode } from 'react' interface SectionHeadingProps { @@ -17,7 +17,7 @@ export function SectionHeading(props: SectionHeadingProps) { )} >

    +
    -
    +
    @@ -43,7 +43,7 @@ export function Tabs({ items }: TabsProps) { ))}
    -
    +
    diff --git a/packages/frontend/src/view/components/Tooltip.tsx b/packages/frontend/src/view/components/Tooltip.tsx index edb3f85c1..6f0386fc4 100644 --- a/packages/frontend/src/view/components/Tooltip.tsx +++ b/packages/frontend/src/view/components/Tooltip.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames' import React from 'react' export function Tooltip() { @@ -19,11 +20,21 @@ export function Tooltip() { interface TooltipWrapperProps { children: React.ReactNode content: string + onlyOnClick?: boolean + className?: string } -export function TooltipWrapper({ children, content }: TooltipWrapperProps) { +export function TooltipWrapper({ + children, + content, + className, + onlyOnClick, +}: TooltipWrapperProps) { return ( - + {children} ) diff --git a/packages/frontend/src/view/components/page/ContentWrapper.tsx b/packages/frontend/src/view/components/page/ContentWrapper.tsx index 99958d085..0c200d378 100644 --- a/packages/frontend/src/view/components/page/ContentWrapper.tsx +++ b/packages/frontend/src/view/components/page/ContentWrapper.tsx @@ -10,7 +10,7 @@ export function ContentWrapper(props: ContentWrapperProps) { return (
    diff --git a/packages/frontend/src/view/components/page/FreezeBanner.tsx b/packages/frontend/src/view/components/page/FreezeBanner.tsx index 3e14bd483..1192188d2 100644 --- a/packages/frontend/src/view/components/page/FreezeBanner.tsx +++ b/packages/frontend/src/view/components/page/FreezeBanner.tsx @@ -4,7 +4,7 @@ import React from 'react' export function FreezeBanner({ freezeStatus }: { freezeStatus: FreezeStatus }) { if (freezeStatus === 'freezable') { return ( -
    +
    This exchange can be frozen due to inactivity of the operator. @@ -16,7 +16,7 @@ export function FreezeBanner({ freezeStatus }: { freezeStatus: FreezeStatus }) { } if (freezeStatus === 'frozen') { return ( -
    +
    This exchange is frozen and no longer operates normally.
    ) diff --git a/packages/frontend/src/view/components/page/Page.tsx b/packages/frontend/src/view/components/page/Page.tsx index 1706e4845..b2378f3d8 100644 --- a/packages/frontend/src/view/components/page/Page.tsx +++ b/packages/frontend/src/view/components/page/Page.tsx @@ -24,6 +24,7 @@ interface Props { } export function Page(props: Props) { + const isDebug = process.env.DEBUG === 'true' const isPreview = process.env.DEPLOYMENT_ENV === 'preview' return ( {isPreview && } diff --git a/packages/frontend/src/view/components/table/Table.tsx b/packages/frontend/src/view/components/table/Table.tsx index 058ed51f9..b7afaf360 100644 --- a/packages/frontend/src/view/components/table/Table.tsx +++ b/packages/frontend/src/view/components/table/Table.tsx @@ -17,7 +17,8 @@ export function Table(props: TableProps) { return (
    0 && 'pb-3 group-[.Card]/card:pb-0' )} > +
    There are no {props.entryLongNamePlural} to view.
    )} diff --git a/packages/frontend/src/view/components/table/TableWithPagination.tsx b/packages/frontend/src/view/components/table/TableWithPagination.tsx index 0a30c854e..6a3c4a08f 100644 --- a/packages/frontend/src/view/components/table/TableWithPagination.tsx +++ b/packages/frontend/src/view/components/table/TableWithPagination.tsx @@ -27,18 +27,17 @@ export function TableWithPagination(props: TableWithPaginationProps) { return ( - -
    -

    - {getDescription( - props.offset, - props.visible, - props.total, - props.entryShortNamePlural - )} -

    - -
    + + {props.children} {props.visible === 0 && ( diff --git a/packages/frontend/src/view/pages/MerkleProofPage.tsx b/packages/frontend/src/view/pages/MerkleProofPage.tsx index 01613c491..4bac7e1d3 100644 --- a/packages/frontend/src/view/pages/MerkleProofPage.tsx +++ b/packages/frontend/src/view/pages/MerkleProofPage.tsx @@ -3,6 +3,7 @@ import { PedersenHash } from '@explorer/types' import React from 'react' import { Card } from '../components/Card' +import { LongHash } from '../components/LongHash' import { OrderedList } from '../components/OrderedList' import { ContentWrapper } from '../components/page/ContentWrapper' import { Page } from '../components/page/Page' @@ -34,6 +35,7 @@ function MerkleProofPage(props: MerkleProofPageProps) { null, 2 ) + return ( Root Hash -

    {props.merkleProof.rootHash}

    + 0x{props.merkleProof.rootHash.toString()}
    Leaf - 
    {formattedLeaf}
    + + {formattedLeaf} +
    @@ -72,9 +76,9 @@ function MerkleProofPage(props: MerkleProofPageProps) { ( -
    -

    Left: {path.left}

    -

    Right: {path.right}

    +
    + Left: 0x{path.left.toString()} + Right: 0x{path.right.toString()}
    ))} /> diff --git a/packages/frontend/src/view/pages/RawL2TransactionPage.tsx b/packages/frontend/src/view/pages/RawL2TransactionPage.tsx index 978cc55de..50c07833a 100644 --- a/packages/frontend/src/view/pages/RawL2TransactionPage.tsx +++ b/packages/frontend/src/view/pages/RawL2TransactionPage.tsx @@ -37,7 +37,7 @@ export function RawL2TransactionPage(props: RawL2TransactionPageProps) {
    - 
    +          
                 {toJsonWithoutBigInts(props.transaction, 2)}
           
    
         
diff --git a/packages/frontend/src/view/pages/forced-actions/EscapeHatchActionPage.tsx b/packages/frontend/src/view/pages/forced-actions/EscapeHatchActionPage.tsx
index 2b078330b..4858aec44 100644
--- a/packages/frontend/src/view/pages/forced-actions/EscapeHatchActionPage.tsx
+++ b/packages/frontend/src/view/pages/forced-actions/EscapeHatchActionPage.tsx
@@ -11,9 +11,9 @@ import { z } from 'zod'
 import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
 import { OrderedList } from '../../components/OrderedList'
+import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
-import { ForcedActionCard } from './components/ForcedActionCard'
 
 export const VERIFY_ESCAPE_REQUEST_FORM_ID = 'verify-escape-request-form'
 
@@ -64,56 +64,52 @@ function EscapeHatchActionPage(props: Props) {
       description="Withdraw funds via Escape Hatch"
       context={props.context}
     >
-      
    
-        
    
-          
    
-            
-              The exchange is frozen, preventing it from executing regular
-              operations or supporting standard actions.
-            
-            
-              You have the option to request a withdrawal of the entire value of
-              any position by activating an 'escape hatch.' This process
-              involves interacting with an Ethereum contract, which calculates
-              the total value of the position, including any open trades and
-              funding rates.
-            
-            
-              The escape process consists of three steps:
-            
-            
-            
-              Please note, the execution of an Escape can be expensive due to
-              Ethereum gas cost.
-            
+      
+        
    
+          
    
+            Escape your funds
           
    
-          
-            
    
-              
    
-                Escape Hatch
-              
    
-              
-                
    
-                  
    
-                    
-                      Position
-                    
-                    
-                      #{props.positionOrVaultId.toString()}
-                    
-                  
    
-                
    
-                  
-              
-            
-              
+          
+            The exchange is frozen, preventing it from executing regular
+            operations or supporting standard actions.
+          
+          
+            You have the option to request a withdrawal of the entire value of
+            any position by activating an 'escape hatch.' This process involves
+            interacting with an Ethereum contract, which calculates the total
+            value of the position, including any open trades and funding rates.
+          
+          The escape process consists of three steps:
+          
+          
+            Please note, the execution of an Escape can be expensive due to
+            Ethereum gas cost.
+          
         
    
-      
    
+        
+          
    
+            
    
+              Escape
+              
+                
+                  {props.context.tradingMode === 'perpetual'
+                    ? 'Position'
+                    : 'Vault'}
+                {' '}
+                
+                  #{props.positionOrVaultId.toString()}
+                
+              
+            
    
+            
+          
+            
+      
     
   )
 }
diff --git a/packages/frontend/src/view/pages/forced-actions/FreezeRequestActionPage.tsx b/packages/frontend/src/view/pages/forced-actions/FreezeRequestActionPage.tsx
index d93e61a56..21497f77c 100644
--- a/packages/frontend/src/view/pages/forced-actions/FreezeRequestActionPage.tsx
+++ b/packages/frontend/src/view/pages/forced-actions/FreezeRequestActionPage.tsx
@@ -11,6 +11,7 @@ import { z } from 'zod'
 
 import { Button } from '../../components/Button'
 import { Link } from '../../components/Link'
+import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
 
@@ -74,8 +75,8 @@ function FreezeRequestActionPage(props: Props) {
       description="Request to freeze the exchange"
       context={props.context}
     >
-      
    
-        
    
+      
+        
    
           Freeze exchange
           
             The exchange operators have not fulfilled their obligation to
@@ -101,7 +102,7 @@ function FreezeRequestActionPage(props: Props) {
         >
           
         
-      
    
+      
     
   )
 }
diff --git a/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx b/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx
index be7c2c89f..26dca89be 100644
--- a/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx
+++ b/packages/frontend/src/view/pages/forced-actions/NewPerpetualForcedActionPage.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import { Card } from '../../components/Card'
 import { OrderedList } from '../../components/OrderedList'
+import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
 import { getForcedActionInstructionsParams } from './components/common'
@@ -38,51 +39,49 @@ function NewPerpetualForcedActionPage(
       description="Perform forced actions on your assets"
       context={context}
     >
-      
    
-        
    
-          
    
-            
-              {instructionParams.header}
-            
-            
-              
-                The cost of this process is very high, and so should only be
-                used in an emergency.
-              {' '}
-              For regular usage, you should perform the equivalent standard
-              operation through the exchange.
-            
-            
-              {instructionParams.description}
-            
-            
-          
    
-          
-            
    
-              {isWithdrawal ? (
-                
-              ) : (
-                
-              )}
-            
-              
+      
+        
    
+          
+            {instructionParams.header}
+          
+          
+            
+              The cost of this process is very high, and so should only be used
+              in an emergency.
+            {' '}
+            For regular usage, you should perform the equivalent standard
+            operation through the exchange.
+          
+          
+            {instructionParams.description}
+          
+          
         
    
-      
    
+        
+          
    
+            {isWithdrawal ? (
+              
+            ) : (
+              
+            )}
+          
+            
+      
     
   )
 }
diff --git a/packages/frontend/src/view/pages/forced-actions/NewSpotForcedWithdrawalPage.tsx b/packages/frontend/src/view/pages/forced-actions/NewSpotForcedWithdrawalPage.tsx
index c870a1dd6..68cbfb4d1 100644
--- a/packages/frontend/src/view/pages/forced-actions/NewSpotForcedWithdrawalPage.tsx
+++ b/packages/frontend/src/view/pages/forced-actions/NewSpotForcedWithdrawalPage.tsx
@@ -8,6 +8,7 @@ import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
 import { Link } from '../../components/Link'
 import { OrderedList } from '../../components/OrderedList'
+import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
 import { reactToHtml } from '../../reactToHtml'
 import { ForcedActionCard } from './components/ForcedActionCard'
@@ -49,78 +50,74 @@ function NewSpotForcedWithdrawalPage(props: Props) {
       description="Perform forced withdrawal"
       context={props.context}
     >
-      
    
-        
    
-          
    
-            
-              Begin withdrawal process
-            
-            
-              
-                The cost of this process is very high, and so should only be
-                used in an emergency.
-              {' '}
-              For regular usage, you should perform the equivalent standard
-              operation through the exchange.
-            
-            
-              The withdrawal process consists of three steps:
-            
-            
-          
    
-          
-            
    
-              
    
-                Withdrawal
-                
-                  
-                    Vault
-                  {' '}
-                  
-                    #{props.positionOrVaultId.toString()}
-                  
+      
+        
    
+          
+            Begin withdrawal process
+          
+          
+            
+              The cost of this process is very high, and so should only be used
+              in an emergency.
+            {' '}
+            For regular usage, you should perform the equivalent standard
+            operation through the exchange.
+          
+          
+            The withdrawal process consists of three steps:
+          
+          
+        
    
+        
+          
+            
    
+              Withdrawal
+              
+                Vault{' '}
+                
+                  #{props.positionOrVaultId.toString()}
                 
-              
    
-              
    
-                
-                  
    
-                    
    
-                      
-                        Balance
-                      
-                      
-                        {formattedBalance}
-                      
-                    
    
-                    
    
-                      
-                        Asset
-                      
-                      
-                    
    
+              
+            
    
+            
    
+              
+                
    
+                  
    
+                    
+                      Balance
+                    
+                    
+                      {formattedBalance}
+                    
                   
    
-                
-              
    
-              
    
-                
-                
-              
    
-            
-          
-        
    
-      
    
+                  
    
+                    
+                      Asset
+                    
+                    
+                  
    
+
    + + +
    + + +
    + +     + ) } diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx index 82fa3e200..a28acd75c 100644 --- a/packages/frontend/src/view/pages/home/HomePage.tsx +++ b/packages/frontend/src/view/pages/home/HomePage.tsx @@ -57,9 +57,9 @@ function HomePage(props: HomePageProps) { withoutSearch showNavLinks > - +
    -
    +
    )}
    -
    - - - - - - - {props.context.showL2Transactions && ( - - - - - - )} - - - - - - {props.offers && props.context.tradingMode === 'perpetual' && ( - - - - - - )} - -
    + {tutorials.length > 0 && ( )} @@ -151,3 +95,68 @@ function HomePage(props: HomePageProps) { ) } + +function Tables(props: HomePageProps) { + const secondColumnTables = [ + ...(props.context.showL2Transactions + ? [ + + + , + ] + : []), + + + , + ...(props.offers && props.context.tradingMode === 'perpetual' + ? [ + + + , + ] + : []), + ] + + return ( +
    + + + + + + + {...secondColumnTables} + + {secondColumnTables.map((table, i) => { + return ( + + {table} + + ) + })} +
    + ) +} diff --git a/packages/frontend/src/view/pages/home/common.ts b/packages/frontend/src/view/pages/home/common.ts index 9acd2b358..05b785826 100644 --- a/packages/frontend/src/view/pages/home/common.ts +++ b/packages/frontend/src/view/pages/home/common.ts @@ -6,7 +6,7 @@ export const STATE_UPDATE_TABLE_PROPS = { } export const L2_TRANSACTIONS_TABLE_PROPS = { - title: 'Live transactions', + title: 'Transactions', entryShortNamePlural: 'transactions', entryLongNamePlural: 'transactions', path: '/l2-transactions', diff --git a/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx b/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx index c7a64a19e..3b90c7f1f 100644 --- a/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx @@ -1,4 +1,4 @@ -import { PageContext, PerpetualL2TransactionData } from '@explorer/shared' +import { PageContext } from '@explorer/shared' import React from 'react' import { AlternativeTransactionIcon } from '../../assets/icons/AlternativeTransactionIcon' @@ -47,15 +47,8 @@ export function PerpetualL2TransactionDetailsPage(
    - {getPageTitle( - props.transaction.originalTransaction.type, - props.transaction.transactionId, - isMultiOrAlt - )} + {getPageTitle(props.transaction.transactionId, isMultiOrAlt)} - - L2 TRANSACTION -
    {(isMultiOrAlt || isReplaced) && (
    @@ -107,12 +100,8 @@ export function PerpetualL2TransactionDetailsPage( ) } -function getPageTitle( - type: PerpetualL2TransactionData['type'], - transactionId: number, - isMultiOrAlt: boolean -) { - const base = `${l2TransactionTypeToText(type)} transaction ` +function getPageTitle(transactionId: number, isMultiOrAlt: boolean) { + const base = 'Transaction' return isMultiOrAlt ? base : `${base} #${transactionId}` } diff --git a/packages/frontend/src/view/pages/l2-transaction/components/AlternativeTransactionBanner.tsx b/packages/frontend/src/view/pages/l2-transaction/components/AlternativeTransactionBanner.tsx index 0c6567ff7..d8180cc5d 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/AlternativeTransactionBanner.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/AlternativeTransactionBanner.tsx @@ -12,10 +12,12 @@ export function AlternativeTransactionBanner( props: AlternativeTransactionNoteProps ) { return ( -
    - - Alternative - +
    +
    + + Alternative +
    + Please mind, this transaction is alternative transaction # {props.altIndex} of transaction{' '} diff --git a/packages/frontend/src/view/pages/l2-transaction/components/AssetTradeCard.tsx b/packages/frontend/src/view/pages/l2-transaction/components/AssetTradeCard.tsx index 63050f30a..4a78b7851 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/AssetTradeCard.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/AssetTradeCard.tsx @@ -5,32 +5,28 @@ import { HorizontalBidirectionalArrow } from '../../../assets/icons/ArrowIcon' import { AssetAmountCard } from '../../../components/AssetAmountCard' interface AssetTradeCardProps { - synthetic: { + left: { asset: Asset amount: bigint + assetLabel?: string + amountLabel?: string } - collateral: { + right: { asset: Asset amount: bigint + assetLabel?: string + amountLabel?: string } } export function AssetTradeCard(props: AssetTradeCardProps) { return ( -
    - -
    - +
    + +
    +
    - +
    ) } diff --git a/packages/frontend/src/view/pages/l2-transaction/components/MultiTransactionBanner.tsx b/packages/frontend/src/view/pages/l2-transaction/components/MultiTransactionBanner.tsx index 566492543..ef842377b 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/MultiTransactionBanner.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/MultiTransactionBanner.tsx @@ -10,10 +10,12 @@ interface MultiTransactionNoteProps { export function MultiTransactionBanner(props: MultiTransactionNoteProps) { return ( -
    - - Multi transaction - +
    +
    + + Multi transaction +
    + This transaction is #{props.multiIndex} transaction of multi transaction{' '} #{props.transactionId} diff --git a/packages/frontend/src/view/pages/l2-transaction/components/ReplacedTransactionBanner.tsx b/packages/frontend/src/view/pages/l2-transaction/components/ReplacedTransactionBanner.tsx index 6f8d91ba7..6bb60beac 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/ReplacedTransactionBanner.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/ReplacedTransactionBanner.tsx @@ -4,10 +4,12 @@ import { ReplacedTransactionIcon } from '../../../assets/icons/ReplacedTransacti export function ReplacedTransactionBanner() { return ( -
    - - Replaced - +
    +
    + + Replaced +
    + Please mind, this transaction is replaced by alternatives listed below.
    diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualConditionalTransferDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualConditionalTransferDetails.tsx index 46bb6cbc6..9f738bda1 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualConditionalTransferDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualConditionalTransferDetails.tsx @@ -5,8 +5,12 @@ import { AssetAmountCard } from '../../../../components/AssetAmountCard' import { EtherscanLink } from '../../../../components/EtherscanLink' import { InlineEllipsis } from '../../../../components/InlineEllipsis' import { Link } from '../../../../components/Link' +import { LongHash } from '../../../../components/LongHash' import { TransactionField } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -17,6 +21,9 @@ export function PerpetualConditionalTransferDetails( ) { return ( + + {l2TransactionTypeToText(props.data.type)} + @@ -25,28 +32,31 @@ export function PerpetualConditionalTransferDetails( #{props.data.senderPositionId.toString()} - + #{props.data.receiverPositionId.toString()}
    -
    +
    - + {props.data.senderStarkKey.toString()} - + {props.data.receiverStarkKey.toString()}
    @@ -56,11 +66,13 @@ export function PerpetualConditionalTransferDetails( type="address" address={props.data.factRegistryAddress.toString()} > - {props.data.factRegistryAddress.toString()} + + {props.data.factRegistryAddress.toString()} + - {props.data.fact.toString()} + {props.data.fact.toString()} {formatTimestamp(props.data.expirationTimestamp)} diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualDeleverageDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualDeleverageDetails.tsx index 2dd0d774c..18dff2210 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualDeleverageDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualDeleverageDetails.tsx @@ -5,7 +5,10 @@ import { TransactionField, TransactionYesOrNoField, } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { AssetTradeCard } from '../AssetTradeCard' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -15,6 +18,9 @@ export function PerpetualDeleverageDetails( ) { return ( + + {l2TransactionTypeToText(props.data.type)} + @@ -22,7 +28,10 @@ export function PerpetualDeleverageDetails( #{props.data.deleveragerPositionId.toString()} - + #{props.data.deleveragedPositionId.toString()}
    @@ -31,11 +40,11 @@ export function PerpetualDeleverageDetails( value={props.data.isDeleveragerBuyingSynthetic} /> + + {l2TransactionTypeToText(props.data.type)} + @@ -22,11 +29,13 @@ export function PerpetualDepositDetails( - {props.data.starkKey.toString()} + + {props.data.starkKey.toString()} + diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualForcedTradeDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualForcedTradeDetails.tsx index 255c5ceb3..64ffbab7b 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualForcedTradeDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualForcedTradeDetails.tsx @@ -5,7 +5,10 @@ import { formatTimestamp } from '../../../../../utils/formatting/formatTimestamp import { InlineEllipsis } from '../../../../components/InlineEllipsis' import { Link } from '../../../../components/Link' import { TransactionField } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { AssetTradeCard } from '../AssetTradeCard' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -29,21 +32,24 @@ export function PerpetualForcedTradeDetails( ) return ( + + {l2TransactionTypeToText(props.data.type)} + -
    +
    #{syntheticBuyer.positionId.toString()} #{syntheticSeller.positionId.toString()}
    -
    +
    @@ -53,7 +59,7 @@ export function PerpetualForcedTradeDetails( @@ -63,11 +69,11 @@ export function PerpetualForcedTradeDetails(
    + + {l2TransactionTypeToText(props.data.type)} + @@ -21,11 +28,13 @@ export function PerpetualForcedWithdrawalDetails( - {props.data.starkKey.toString()} + + {props.data.starkKey.toString()} + diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualFundingTickDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualFundingTickDetails.tsx index da15be53d..68d6ad683 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualFundingTickDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualFundingTickDetails.tsx @@ -5,7 +5,10 @@ import { assetToInfo } from '../../../../../utils/assets' import { formatTimestamp } from '../../../../../utils/formatting/formatTimestamp' import { AssetWithLogo } from '../../../../components/AssetWithLogo' import { TransactionField } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -14,6 +17,9 @@ export function PerpetualFundingTickDetails( ) { return ( + + {l2TransactionTypeToText(props.data.type)} + @@ -21,7 +27,7 @@ export function PerpetualFundingTickDetails( {formatTimestamp(props.data.globalFundingIndices.timestamp)} -
    +
    {props.data.globalFundingIndices.indices.map((index, i) => { return ( + + {l2TransactionTypeToText(props.data.type)} + - {props.data.liquidatorOrder.starkKey.toString()} + + + {props.data.liquidatorOrder.starkKey.toString()} + +
    #{props.data.liquidatorOrder.positionId.toString()} - + #{props.data.liquidatedPositionId.toString()}
    @@ -34,11 +49,11 @@ export function PerpetualLiquidateDetails( value={props.data.liquidatorOrder.isBuyingSynthetic} /> + + + {l2TransactionTypeToText(props.data.type)} + @@ -33,6 +37,6 @@ export function PerpetualMultiTransactionDetails( altIndex={props.altIndex} /> - + ) } diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualOraclePricesTickDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualOraclePricesTickDetails.tsx index 1431c0624..53033040c 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualOraclePricesTickDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualOraclePricesTickDetails.tsx @@ -3,7 +3,10 @@ import React from 'react' import { formatTimestamp } from '../../../../../utils/formatting/formatTimestamp' import { AssetPriceCard } from '../../../../components/AssetPriceCard' import { TransactionField } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -12,6 +15,9 @@ export function PerpetualOraclePricesTickDetails( ) { return ( + + {l2TransactionTypeToText(props.data.type)} + @@ -19,7 +25,7 @@ export function PerpetualOraclePricesTickDetails( {formatTimestamp(props.data.timestamp)} -
    +
    {props.data.oraclePrices.map((oraclePrice, index) => { return ( + + {l2TransactionTypeToText(props.data.type)} + -
    +
    #{syntheticSeller.positionId.toString()} #{syntheticBuyer.positionId.toString()}
    -
    +
    @@ -49,7 +55,7 @@ export function PerpetualTradeDetails( @@ -59,11 +65,11 @@ export function PerpetualTradeDetails(
    + + {l2TransactionTypeToText(props.data.type)} + @@ -21,28 +27,31 @@ export function PerpetualTransferDetails( #{props.data.senderPositionId.toString()} - + #{props.data.receiverPositionId.toString()}
    -
    +
    - + {props.data.senderStarkKey.toString()} - + {props.data.receiverStarkKey.toString()}
    diff --git a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualWithdrawalToAddressDetails.tsx b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualWithdrawalToAddressDetails.tsx index ed8075c13..c48b70d1d 100644 --- a/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualWithdrawalToAddressDetails.tsx +++ b/packages/frontend/src/view/pages/l2-transaction/components/details/PerpetualWithdrawalToAddressDetails.tsx @@ -3,9 +3,13 @@ import React from 'react' import { formatTimestamp } from '../../../../../utils/formatting/formatTimestamp' import { AssetAmountCard } from '../../../../components/AssetAmountCard' import { EtherscanLink } from '../../../../components/EtherscanLink' +import { InlineEllipsis } from '../../../../components/InlineEllipsis' import { Link } from '../../../../components/Link' import { TransactionField } from '../../../transaction/components/TransactionField' -import { PerpetualTransactionDetailsProps } from '../../common' +import { + l2TransactionTypeToText, + PerpetualTransactionDetailsProps, +} from '../../common' import { CurrentStatusField } from '../CurrentStatusField' import { L2TransactionDetailsCard } from './TransactionDetailsCard' @@ -16,6 +20,9 @@ export function PerpetualWithdrawalToAddressDetails( ) { return ( + + {l2TransactionTypeToText(props.data.type)} + @@ -24,7 +31,9 @@ export function PerpetualWithdrawalToAddressDetails( - {props.data.starkKey.toString()} + + {props.data.starkKey.toString()} + @@ -33,11 +42,13 @@ export function PerpetualWithdrawalToAddressDetails( type="address" address={props.data.ethereumAddress.toString()} > - {props.data.ethereumAddress.toString()} + + {props.data.ethereumAddress.toString()} + diff --git a/packages/frontend/src/view/pages/state-update/components/StateUpdateStats.tsx b/packages/frontend/src/view/pages/state-update/components/StateUpdateStats.tsx index e5bbf6242..e415a07b9 100644 --- a/packages/frontend/src/view/pages/state-update/components/StateUpdateStats.tsx +++ b/packages/frontend/src/view/pages/state-update/components/StateUpdateStats.tsx @@ -7,6 +7,7 @@ import { EtherscanLink } from '../../../components/EtherscanLink' import { ExpandableContainer } from '../../../components/ExpandableContainer' import { InlineEllipsis } from '../../../components/InlineEllipsis' import { Link } from '../../../components/Link' +import { LongHash } from '../../../components/LongHash' import { PageTitle } from '../../../components/PageTitle' export interface StateUpdateStatsProps { @@ -35,18 +36,18 @@ export function StateUpdateStats(props: StateUpdateStatsProps) { // ) return ( -
    +
    State Update #{props.id} +
    - + {props.transactionHash.toString()} @@ -60,22 +61,30 @@ export function StateUpdateStats(props: StateUpdateStatsProps) {
    {props.hashes.positionTreeRoot && ( - 0x{props.hashes.positionTreeRoot.toString()} + + 0x{props.hashes.positionTreeRoot.toString()} + )} {props.hashes.onChainVaultTreeRoot && ( - 0x{props.hashes.onChainVaultTreeRoot.toString()} + + 0x{props.hashes.onChainVaultTreeRoot.toString()} + )} {props.hashes.offChainVaultTreeRoot && ( - 0x{props.hashes.offChainVaultTreeRoot.toString()} + + 0x{props.hashes.offChainVaultTreeRoot.toString()} + )} {props.hashes.orderRoot && ( - 0x{props.hashes.orderRoot.toString()} + + 0x{props.hashes.orderRoot.toString()} + )} {props.rawDataAvailable && ( diff --git a/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx b/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx index 750c5a4f2..9912a1410 100644 --- a/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx +++ b/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx @@ -92,7 +92,7 @@ function OfferAndForcedTradePage(props: OfferAndForcedTradePageProps) { >
    -
    +
    {props.transactionHash ? ( -
    +
    @@ -50,7 +51,7 @@ export function TransactionOverview(props: TransactionOverviewProps) { {props.timestamp && ( {formatTimestamp(props.timestamp.timestamp)} UTC{' '} @@ -66,33 +67,34 @@ export function TransactionOverview(props: TransactionOverviewProps) { txHash={props.transactionHash.toString()} type="tx" > - {props.transactionHash.toString()} + + {props.transactionHash.toString()} + )} {props.value && ( )} {props.trade && ( -
    - - - -
    + )}
    ) diff --git a/packages/frontend/src/view/pages/transaction/components/TransactionUserDetails.tsx b/packages/frontend/src/view/pages/transaction/components/TransactionUserDetails.tsx index 60a8735a2..abf915af4 100644 --- a/packages/frontend/src/view/pages/transaction/components/TransactionUserDetails.tsx +++ b/packages/frontend/src/view/pages/transaction/components/TransactionUserDetails.tsx @@ -21,7 +21,7 @@ export function TransactionUserDetails(props: TransactionUserDetailsProps) { return (
    -
    +
    {props.vaultOrPositionId && ( - + {props.starkKey.toString()} @@ -43,7 +43,7 @@ export function TransactionUserDetails(props: TransactionUserDetailsProps) { type="address" address={props.ethereumAddress.toString()} > - + {props.ethereumAddress.toString()} diff --git a/packages/frontend/src/view/pages/user/UserRecoverPage.tsx b/packages/frontend/src/view/pages/user/UserRecoverPage.tsx index dc414ec71..b8316a44d 100644 --- a/packages/frontend/src/view/pages/user/UserRecoverPage.tsx +++ b/packages/frontend/src/view/pages/user/UserRecoverPage.tsx @@ -23,10 +23,16 @@ function UserRecoverPage(props: UserRegisterPageProps) { description="Recover your stark key from your ethereum address" path="/users/recover" > - -
    -
    Recover Stark key
    -
    + +
    + Recover Stark key +
    + +
    +
    + Recover Stark key +
    +
    Our system doesn't recognize any Stark key associated with your Ethereum address. @@ -53,27 +59,28 @@ function UserRecoverPage(props: UserRegisterPageProps) {
    - +

    Stark key

    Unknown

    -

    Ethereum address

    - + {props.context.user.address.toString()} +     diff --git a/packages/frontend/src/view/pages/user/UserRegisterPage.tsx b/packages/frontend/src/view/pages/user/UserRegisterPage.tsx index e21602025..cd5dc575c 100644 --- a/packages/frontend/src/view/pages/user/UserRegisterPage.tsx +++ b/packages/frontend/src/view/pages/user/UserRegisterPage.tsx @@ -23,12 +23,15 @@ function UserRegisterPage(props: UserRegisterPageProps) { description="Register your stark key to your ethereum address" path="/users/register" > - -
    -
    + +
    + Register your Ethereum address +
    +
    +
    Register your Ethereum address
    -
    +
    Our system doesn't recognize any Ethereum address registered to your Stark key. @@ -42,25 +45,26 @@ function UserRegisterPage(props: UserRegisterPageProps) {
    - -

    + +

    Stark key

    + + {props.context.user.starkKey.toString()} + +

    Ethereum address

    - + {props.context.user.address.toString()} -
    -

    Stark key

    - - {props.context.user.starkKey.toString()} - +     diff --git a/packages/frontend/src/view/pages/user/components/UserProfile.tsx b/packages/frontend/src/view/pages/user/components/UserProfile.tsx index c6ee60208..d24ffc1c3 100644 --- a/packages/frontend/src/view/pages/user/components/UserProfile.tsx +++ b/packages/frontend/src/view/pages/user/components/UserProfile.tsx @@ -3,7 +3,9 @@ import { EthereumAddress, StarkKey } from '@explorer/types' import React from 'react' import { Button } from '../../../components/Button' +import { Card } from '../../../components/Card' import { InfoBanner } from '../../../components/InfoBanner' +import { LongHash } from '../../../components/LongHash' interface UserProfileProps { user: Partial | undefined @@ -18,24 +20,32 @@ export function UserProfile({ }: UserProfileProps) { const isMine = user?.starkKey === starkKey return ( -
    +

    Stark key

    -

    {starkKey.toString()}

    + + {starkKey.toString()} +

    Ethereum address

    {ethereumAddress ? ( -

    + {ethereumAddress.toString()} -

    + ) : ( <> -
    -

    - {user?.address && isMine ? user.address.toString() : 'Unknown'} -

    +
    + {user?.address && isMine ? ( + {user.address.toString()} + ) : ( + 'Unknown' + )} {isMine && ( - )} @@ -48,6 +58,6 @@ export function UserProfile({ )} )} -
    + ) } diff --git a/packages/frontend/src/view/pages/user/components/UserQuickActionsTable.tsx b/packages/frontend/src/view/pages/user/components/UserQuickActionsTable.tsx index a73b0fe0b..3f12d4006 100644 --- a/packages/frontend/src/view/pages/user/components/UserQuickActionsTable.tsx +++ b/packages/frontend/src/view/pages/user/components/UserQuickActionsTable.tsx @@ -6,6 +6,7 @@ import { Asset, assetToInfo } from '../../../../utils/assets' import { formatAmount } from '../../../../utils/formatting/formatAmount' import { AssetWithLogo } from '../../../components/AssetWithLogo' import { Button } from '../../../components/Button' +import { Card } from '../../../components/Card' import { InlineEllipsis } from '../../../components/InlineEllipsis' import { OfferEntry } from '../../../components/tables/OffersTable' import { FinalizeEscapeForm } from './FinalizeEscapeForm' @@ -46,7 +47,7 @@ export function UserQuickActionsTable(props: UserQuickActionsTableProps) { } return ( -
    + {props.withdrawableAssets.length > 0 && } {props.escapableAssets.length > 0 && } {props.context.tradingMode === 'perpetual' && @@ -56,7 +57,7 @@ export function UserQuickActionsTable(props: UserQuickActionsTableProps) { context={props.context} /> )} -
    + ) } @@ -72,13 +73,16 @@ function EscapableAssets( {props.escapableAssets.map((asset) => { const assetInfo = assetToInfo(asset.asset) return ( -
    +
    -

    +

    Finalize the escape of{' '} {formatAmount(asset.asset, asset.amount)}{' '} @@ -130,13 +134,16 @@ function WithdrawableAssets( {props.withdrawableAssets.map((asset) => { const assetInfo = assetToInfo(asset.asset) return ( -

    +
    -

    +

    Finalize the withdrawal of{' '} {formatAmount(asset.asset, asset.amount)}{' '} @@ -178,7 +185,7 @@ function OffersToFinalize( const syntheticAssetInfo = assetToInfo(offer.syntheticAsset) return (

    -

    +

    Finalize the offer{' '} {formatAmount(offer.syntheticAsset, offer.syntheticAmount)}{' '}