Adjust mobile design

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,

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

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",

packages/frontend/src/scripts/copyButtons.ts

@@ -0,0 +1,20 @@
+import { makeQuery } from './utils/query'
+
+export function initCopyButtons() {
+  const { $$ } = makeQuery(document.body)
+
+  const copyButtons = $$<HTMLButtonElement>('.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)
+  }
+}

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

packages/frontend/src/scripts/tooltips.ts

@@ -64,33 +64,35 @@ 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()
     }
   })
 
   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)
 
     element.addEventListener('click', (e) => {
       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 {

packages/frontend/src/styles/debug.css

@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+  outline: 1px solid green;
+}

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<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames('inline cursor-pointer fill-white', className)}
+      {...rest}
+    >
+      <g clipPath="url(#clip0_1041_8610)">
+        <path
+          d="M5.59996 0.199982C4.93696 0.199982 4.39996 0.736982 4.39996 1.39998V11C4.39996 11.663 4.93696 12.2 5.59996 12.2H13.4C14.063 12.2 14.6 11.663 14.6 11V4.09998C14.6 3.94098 14.537 3.78856 14.4242 3.67576L11.1242 0.375763C11.0114 0.262963 10.859 0.199982 10.7 0.199982H5.59996ZM10.4 1.34256L13.4574 4.39998H11C10.6688 4.39998 10.4 4.13118 10.4 3.79998V1.34256ZM2.59996 3.19998C1.93696 3.19998 1.39996 3.73698 1.39996 4.39998V14C1.39996 14.663 1.93696 15.2 2.59996 15.2H10.4C11.063 15.2 11.6 14.663 11.6 14V13.4H5.59996C4.27636 13.4 3.19996 12.3236 3.19996 11V3.19998H2.59996Z"
+          fillOpacity="0.8"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1041_8610">
+          <rect width="16" height="16" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

packages/frontend/src/view/components/AssetAmountCard.tsx

@@ -22,24 +22,28 @@ export function AssetAmountCard({
 }: AssetAmountCardProps) {
   const assetInfo = assetToInfo(asset)
   return (
-    <div
-      className={cx(
-        'flex items-center justify-between rounded-lg bg-slate-800 p-4',
-        className
-      )}
-    >
-      <div>
-        <p className="mb-2 text-sm font-medium text-zinc-500">{amountLabel}</p>
-        <p className="text-xl font-semibold text-white">
-          {amount !== undefined ? formatAmount(asset, amount) : 'Unknown'}
-        </p>
-      </div>
-      <div>
-        <p className="mb-2 text-right text-sm font-medium text-zinc-500">
-          {assetLabel}
-        </p>
-        <div className="flex justify-end gap-2">
-          <AssetWithLogo assetInfo={assetInfo} type="symbol" />
+    <div className="@container">
+      <div
+        className={cx(
+          'flex flex-col justify-between gap-3 rounded-lg bg-slate-800 p-4 @[300px]:flex-row sm:flex-row',
+          className
+        )}
+      >
+        <div className="flex flex-col justify-between">
+          <p className="mb-2 text-sm font-medium text-zinc-500">
+            {amountLabel}
+          </p>
+          <p className="text-xl font-semibold text-white">
+            {amount !== undefined ? formatAmount(asset, amount) : 'Unknown'}
+          </p>
+        </div>
+        <div className="flex flex-col justify-between">
+          <p className="mb-2 text-sm font-medium text-zinc-500 @[300px]:text-right">
+            {assetLabel}
+          </p>
+          <div className="flex gap-2 @[300px]:justify-end">
+            <AssetWithLogo assetInfo={assetInfo} type="symbol" />
+          </div>
         </div>
       </div>
     </div>

packages/frontend/src/view/components/Card.tsx

@@ -5,7 +5,10 @@ type CardProps = React.HTMLAttributes<HTMLDivElement>
 export function Card({ className, children, ...rest }: CardProps) {
   return (
     <div
-      className={cx('Card group/card rounded-lg bg-gray-800 p-6', className)}
+      className={cx(
+        'Card group/card -mx-4 rounded-lg bg-gray-800 p-6 sm:mx-0',
+        className
+      )}
       {...rest}
     >
       {children}

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 (
+    <TooltipWrapper className="inline-flex" content="Copied!" onlyOnClick>
+      <CopyIcon
+        className="CopyButton transition-opacity hover:opacity-80"
+        data-content={content}
+      />
+    </TooltipWrapper>
+  )
+}

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 (
+    <span className={classNames('break-words', className)}>
+      {children}{' '}
+      {withCopy && <CopyButton content={getCopyButtonContent(children)} />}
+    </span>
+  )
+}
+
+function getCopyButtonContent(content: string | string[]) {
+  return Array.isArray(content) ? content.join('') : content
+}

packages/frontend/src/view/components/OrderedList.tsx

@@ -11,8 +11,8 @@ export function OrderedList({ items, className }: FancyListProps) {
     <ol className={cx('ml-6', className)}>
       {items.map((item, index) => {
         return (
-          <li key={index} className="group relative pb-6 pl-4">
-            <div className="absolute -left-[13px] mt-2 h-full w-0.5 bg-zinc-500 group-last:hidden " />
+          <li key={index} className="group relative pb-6 pl-4 last:pb-0">
+            <div className="absolute -left-[13px] mt-2 h-full w-0.5 bg-zinc-500 group-last:hidden" />
             <Index index={index} />
             <span>{item}</span>
           </li>
@@ -27,12 +27,7 @@ interface IndexProps {
 }
 function Index({ index }: IndexProps) {
   return (
-    <span
-      className={cx(
-        'absolute -left-6 h-6 w-6 shrink-0 rounded-lg text-center',
-        index === 0 ? 'bg-brand' : 'bg-zinc-500'
-      )}
-    >
+    <span className="absolute -left-6 h-6 w-6 shrink-0 rounded-lg bg-brand text-center">
       {index + 1}
     </span>
   )

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) {
       )}
     >
       <h2
-        className={cx(
+        className={classNames(
           'text-xl font-semibold leading-tight',
           props.children && 'flex-1'
         )}

packages/frontend/src/view/components/Tabs.tsx

@@ -16,9 +16,9 @@ interface Tab {
 
 export function Tabs({ items }: TabsProps) {
   return (
-    <div className="Tabs">
+    <div className="Tabs -mx-4 sm:mx-0">
       <div className="relative mb-4 border-b border-zinc-800">
-        <div className="TabsArrowLeft absolute inset-y-0 -left-1 z-10 hidden w-6 cursor-pointer bg-gradient-to-r from-neutral-900 via-neutral-900">
+        <div className="TabsArrowLeft absolute inset-y-0 left-0 z-10 hidden w-6 cursor-pointer bg-gradient-to-r from-neutral-900 via-neutral-900">
           <div className="flex h-full items-center justify-center text-white">
             <ChevronLeftIcon />
           </div>
@@ -43,7 +43,7 @@ export function Tabs({ items }: TabsProps) {
           ))}
           <span className="TabsUnderline absolute bottom-0 block h-1 rounded-t-sm bg-brand transition-all duration-300" />
         </div>
-        <div className="TabsArrowRight absolute inset-y-0 -right-1 z-10 hidden w-6 cursor-pointer bg-gradient-to-l from-neutral-900 via-neutral-900">
+        <div className="TabsArrowRight absolute inset-y-0 right-0 z-10 hidden w-6 cursor-pointer bg-gradient-to-l from-neutral-900 via-neutral-900">
           <div className="flex h-full items-center justify-center">
             <ChevronRightIcon />
           </div>

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 (
-    <span className="Tooltip" title={content}>
+    <span
+      className={classNames('Tooltip', className, !onlyOnClick && 'OnHover')}
+      title={content}
+    >
       {children}
     </span>
   )

packages/frontend/src/view/components/page/ContentWrapper.tsx

@@ -10,7 +10,7 @@ export function ContentWrapper(props: ContentWrapperProps) {
   return (
     <main
       className={cx(
-        'mx-auto w-full max-w-5xl flex-1 px-4 py-16 sm:px-8',
+        'mx-auto w-full max-w-5xl flex-1 px-4 py-8 sm:py-16 md:px-8',
         props.className
       )}
     >

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 (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-2 bg-brand px-6 py-0.5 text-white">
+      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-brand px-6 py-0.5 text-center text-white">
         <span>
           This exchange can be frozen due to inactivity of the operator.
         </span>
@@ -16,7 +16,7 @@ export function FreezeBanner({ freezeStatus }: { freezeStatus: FreezeStatus }) {
   }
   if (freezeStatus === 'frozen') {
     return (
-      <div className="sticky top-0 z-50 flex items-center justify-center gap-2 bg-red-500 px-6 py-0.5 text-white">
+      <div className="sticky top-0 z-50 flex items-center justify-center gap-4 bg-red-500 px-6 py-0.5 text-center text-white">
         <span>This exchange is frozen and no longer operates normally. </span>
       </div>
     )