feat: improve Orderbook UI

public/tradingview.css

@@ -0,0 +1,4 @@
+:root {
+  --tv-color-platform-background: var(--page-card, hsl(212deg, 28%, 17%));
+  --tv-color-pane-background: var(--default, hsl(219deg, 40%, 11%));
+}

src/components/RadioButtonGroupInput/RadioButtonGroupInput.tsx

@@ -43,11 +43,17 @@ function useSelectedButtonBackgroundMove<T extends string | number>(
       if (movingButton && targetButton) {
         movingButton.style.width = `${targetButton.offsetWidth}px`;
         movingButton.style.left = `${targetButton.offsetLeft}px`;
-        if (newValue !== undefined) {
+        if (newValue !== undefined && movingButton.style.opacity !== '0') {
           movingButton.classList.add('transition-ready');
         } else {
           movingButton?.classList.remove('transition-ready');
         }
+        movingButton.style.opacity = '1';
+      }
+      // "remove" button if the target was not found
+      else if (movingButton) {
+        movingButton?.classList.remove('transition-ready');
+        movingButton.style.opacity = '0';
       }
     },
     [value, refsByValue, movingButton]
@@ -72,7 +78,10 @@ function useSelectedButtonBackgroundMove<T extends string | number>(
 interface Props<T extends string | number> {
   className?: string;
   buttonClassName?: string;
-  values: { [value in T]: ReactNode } | Map<T, ReactNode> | T[];
+  values:
+    | { readonly [value in T]: ReactNode }
+    | Map<T, ReactNode>
+    | readonly T[];
   value: T;
   onChange: (value: T) => void;
 }
@@ -87,21 +96,24 @@ export default function RadioButtonGroupInput<T extends string | number>({
   const [movingAssetRef, createRefForValue] =
     useSelectedButtonBackgroundMove<T>(value);
   const entries = useMemo(() => {
+    const valueIsNumber = typeof value === 'number';
     return Array.isArray(values)
-      ? values.map<[T, string]>((value) => [value, `${value}`])
+      ? values.filter(Boolean).map<[T, string]>((value) => [value, `${value}`])
       : values instanceof Map
       ? Array.from(values.entries())
       : (Object.entries(values).map(([value, description]) => [
-          value,
+          valueIsNumber ? Number(value) : value,
           description,
         ]) as [T, string][]);
-  }, [values]);
+  }, [value, values]);
   const selectedIndex = entries.findIndex(
     ([entryValue]) => entryValue === value
   );
   const includedIndexes = useMemo(() => {
     return (
       entries
+        // do not display falsy description buttons
+        .filter(([_key, value]) => !!value)
         .map((_, index, entries) => {
           // cumulate weightings
           let result = 0;
@@ -156,6 +168,9 @@ export default function RadioButtonGroupInput<T extends string | number>({
         const currentIndex = includedIndexes.includes(index);
         const nextIndex = includedIndexes.includes(index + 1);
 
+        // skip those with no description
+        if (!description) return [];
+
         // include button if required or if excluding it
         // will not reduce the number of shown buttons
         if (currentIndex || (previousIndex && nextIndex)) {

src/components/Table/Table.tsx

@@ -12,6 +12,7 @@ export default function Table<
   getRowKey,
   context,
   rowDescription = 'Data',
+  messageOnEmptyData,
   filtered = false,
 }: {
   className?: string;
@@ -27,6 +28,7 @@ export default function Table<
   getRowKey?: (row: DataRow) => string | number;
   context: Context;
   rowDescription?: string;
+  messageOnEmptyData?: ReactNode;
   filtered?: boolean;
 }) {
   if (columns.length !== headings.length) {
@@ -85,9 +87,11 @@ export default function Table<
           <tr>
             <td colSpan={columns.length}>
               {data ? (
-                <>
-                  No {filtered ? 'Matching' : ''} {rowDescription} Found
-                </>
+                messageOnEmptyData || (
+                  <>
+                    No {filtered ? 'Matching' : ''} {rowDescription} Found
+                  </>
+                )
               ) : (
                 <>Loading...</>
               )}

src/components/Tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import './Tabs.scss';
 
 export interface Tab {
   nav: ReactNode;
-  Tab: React.FunctionComponent;
+  tab?: ReactNode;
 }
 export default function Tabs({
   tabs,
@@ -23,7 +23,7 @@ export default function Tabs({
     givenTabIndex !== undefined
       ? [givenTabIndex, givenSetTabIndex]
       : [defaultTabIndex, defaultSetTabIndex];
-  const { Tab } = tabs[tabIndex];
+  const { tab } = tabs[tabIndex];
 
   return (
     <div className={['tabs col gap-4', className].filter(Boolean).join(' ')}>
@@ -47,9 +47,7 @@ export default function Tabs({
         })}
       </div>
       <div className="tabs__tab flex row">
-        <div className="flex col">
-          <Tab />
-        </div>
+        <div className="flex col">{tab}</div>
       </div>
     </div>
   );

src/components/TokenInputGroup/TokenInputGroup.scss

@@ -9,8 +9,6 @@
     border-radius: 1rem;
     border: 1px solid transparent;
     background-color: var(--default);
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr auto;
     color: var(--default-alt);
     display: grid;
     row-gap: 2px;
@@ -21,7 +19,7 @@
     background-color: hsla(0, 73%, 97%, 1);
     &,
     .token-group-balance button {
-      border: 1px solid var(--error);
+      border-color: var(--error);
     }
     .token-group-title,
     .token-picker-toggle,
@@ -34,41 +32,24 @@
   }
 
   .token-picker-toggle {
-    grid-column: 1;
     text-align: start;
-    grid-row-start: 2;
-    grid-row-end: 4;
-    grid-row: 2 / 4;
-    row-gap: 2px;
-
     .token-chain {
       margin-bottom: -2px;
     }
   }
 
   .token-group-title {
-    grid-column: 1;
     font-size: font-size.$text-m;
-    text-align: start;
-    grid-row: 1;
     font-weight: normal;
-    align-self: center;
   }
 
   .token-group-balance {
     font-size: font-size.$text-m;
-    grid-column: 2;
-    grid-row: 1;
     text-align: end;
-    display: flex;
-    gap: paddings.$p-3;
-    margin-left: auto;
   }
 
   .token-group-value {
     font-size: font-size.$text-m;
-    grid-column: 2;
-    grid-row: 3;
     text-align: end;
   }
 
@@ -78,12 +59,7 @@
       background-color: transparent;
       border: 0px none transparent;
       font-size: font-size.$input;
-      color: var(--default-alt);
-      grid-column: 2;
-      text-align: end;
-      grid-row: 2;
       outline: none;
-      margin-top: margins.$m-2;
     }
 
     &:disabled {

src/components/TokenInputGroup/TokenInputGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { ReactNode, useCallback, useMemo, useRef } from 'react';
 import BigNumber from 'bignumber.js';
 
 import TokenPicker from '../TokenPicker';
@@ -29,6 +29,9 @@ interface InputGroupProps {
   disabled?: boolean;
   disabledInput?: boolean;
   disabledToken?: boolean;
+  inactive?: boolean;
+  header?: ReactNode;
+  subHeader?: ReactNode;
   maxValue?: number;
 }
 
@@ -46,9 +49,12 @@ export default function TokenInputGroup({
   token,
   denom = token?.base,
   defaultAssetMode,
+  header,
+  subHeader,
   disabled = false,
   disabledInput = disabled,
   disabledToken = disabled,
+  inactive = false,
   maxValue: givenMaxValue,
 }: InputGroupProps) {
   const onPickerChange = useCallback(
@@ -72,7 +78,8 @@ export default function TokenInputGroup({
   }, [value, price]);
 
   const { data: balance } = useBankBalanceDisplayAmount(denom);
-  const maxValue = givenMaxValue || balance;
+  const maxValue = givenMaxValue ?? balance;
+  const inputRef = useRef<HTMLInputElement>(null);
   return (
     <div
       className={[
@@ -82,70 +89,85 @@ export default function TokenInputGroup({
       ]
         .filter(Boolean)
         .join(' ')}
+      onClick={() => inputRef.current?.focus()}
+      onKeyDown={() => undefined}
+      role="button"
+      tabIndex={-1}
     >
-      {maxValue && (
-        <h5 className="token-group-title">
-          Available{' '}
-          {formatAmount(maxValue, {
-            useGrouping: true,
-          })}
-        </h5>
-      )}
-      {!disabledInput && token && maxValue && Number(maxValue) > 0 && (
-        <span className="token-group-balance">
-          <button
-            type="button"
-            className="badge badge-light"
-            onClick={() =>
-              onValueChanged?.(
-                // allow max value be as long as it needs to be to perfectly fit user's balance
-                roundToBaseUnit(token, maxValue) || ''
-              )
-            }
+      <div className="row gap-3">
+        <div className="col flex my-1">
+          <h5 className="token-group-title">
+            {header ||
+              (maxValue &&
+                `Available ${formatAmount(maxValue, {
+                  useGrouping: true,
+                })}`) || <>&nbsp;</>}
+          </h5>
+        </div>
+        {subHeader && (
+          <div className="col token-group-sub-header my-1">{subHeader}</div>
+        )}
+        {!disabledInput && token && !!maxValue && Number(maxValue) > 0 && (
+          <div className="col token-group-balance gap-3">
+            <button
+              type="button"
+              className="badge badge-light"
+              onClick={() =>
+                onValueChanged?.(
+                  // allow max value be as long as it needs to be to perfectly fit user's balance
+                  roundToBaseUnit(token, maxValue) || ''
+                )
+              }
+            >
+              MAX
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="row">
+        <div className="col flex">
+          <TokenPicker
+            className="gutter-l-3"
+            value={token}
+            onChange={onTokenChanged ? onPickerChange : undefined}
+            exclusion={exclusion}
+            disabled={disabledToken}
+            defaultAssetMode={defaultAssetMode}
+          />
+        </div>
+        <div className="col flex mt-sm">
+          <NumberInput
+            type="text"
+            innerRef={inputRef}
+            className={[
+              'token-group-input',
+              !Number(value) && 'input--zero',
+              inactive && 'text-muted',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            value={value}
+            placeholder={placeholder}
+            onChange={onValueChanged}
+            onClick={selectAll}
+            disabled={disabledInput}
+            style={useMemo(() => {
+              return {
+                // set width as minimum amount available
+                minWidth: '100%',
+                width: 0,
+              };
+            }, [])}
+          />
+          <span
+            className={['token-group-value', inactive && 'text-muted']
+              .filter(Boolean)
+              .join(' ')}
           >
-            MAX
-          </button>
-          <button
-            type="button"
-            className="badge badge-light"
-            onClick={() =>
-              // allow rounding on half of balance because we don't need an exact target
-              onValueChanged?.(
-                roundToBaseUnit(token, Number(maxValue) / 2) || ''
-              )
-            }
-          >
-            HALF
-          </button>
-        </span>
-      )}
-      <TokenPicker
-        className="gutter-l-3"
-        value={token}
-        onChange={onPickerChange}
-        exclusion={exclusion}
-        disabled={disabledToken}
-        defaultAssetMode={defaultAssetMode}
-      />
-      <NumberInput
-        type="text"
-        className={['token-group-input', !Number(value) && 'input--zero']
-          .filter(Boolean)
-          .join(' ')}
-        value={value}
-        placeholder={placeholder}
-        onChange={onValueChanged}
-        onClick={selectAll}
-        disabled={disabledInput}
-        style={useMemo(() => {
-          return {
-            // set width as minimum amount available
-            minWidth: '100%',
-            width: 0,
-          };
-        }, [])}
-      />
-      <span className="token-group-value">{secondaryValue}</span>
+            {secondaryValue}
+          </span>
+        </div>
+      </div>
     </div>
   );
 }