feat(web): table improvements

Author: kyranjamie

apps/web/app/components/icons/bitcoin-icon.tsx

@@ -3,6 +3,6 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 interface BitcoinIconProps extends HTMLStyledProps<'img'> {
   size?: number;
 }
-export function BitcoinIcon({ size = 24 }: BitcoinIconProps) {
+export function BitcoinIcon({ size = 20 }: BitcoinIconProps) {
   return <styled.img width={size} height={size} src="icons/bitcoin.svg" />;
 }

apps/web/app/components/icons/stacks-icon.tsx

@@ -3,6 +3,6 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 interface StacksIconProps extends HTMLStyledProps<'img'> {
   size?: number;
 }
-export function StacksIcon({ size = 24 }: StacksIconProps) {
+export function StacksIcon({ size = 20 }: StacksIconProps) {
   return <styled.img width={size} height={size} src="icons/stacks.svg" />;
 }

apps/web/app/components/table.tsx

@@ -16,28 +16,43 @@ export const theadBorderBottom = css({
   },
 });
 
-export function SortableHeader(props: HTMLStyledProps<'div'>) {
-  return <styled.div _hover={{ textDecoration: 'underline' }} {...props} />;
+export const rowPadding = css({
+  '& td:first-child': { pl: 'space.05' },
+  '& td:last-child': { pr: 'space.05' },
+  '& th:first-child': { pl: 'space.05' },
+  '& th:last-child': { pr: 'space.05' },
+});
+
+export function SortableHeader({ children, ...props }: HTMLStyledProps<'div'>) {
+  return (
+    <styled.div {...props}>
+      <styled.span zIndex={99} _hover={{ textDecoration: 'underline' }}>
+        {children}
+      </styled.span>
+    </styled.div>
+  );
 }
 
-export const TableContainer = forwardRef<HTMLDivElement, HTMLStyledProps<'div'>>((props, ref) => (
+export const TableRoot = forwardRef<HTMLDivElement, HTMLStyledProps<'div'>>((props, ref) => (
   <styled.div border="default" borderRadius="sm" ref={ref} {...props} />
 ));
 
 export const StyledTable = forwardRef<HTMLTableElement, HTMLStyledProps<'table'>>((props, ref) => (
   <styled.table
     borderCollapse="separate"
+    borderSpacing={0}
     overflow="hidden"
     w="100%"
-    px="space.05"
     pos="relative"
     ref={ref}
     {...props}
   />
 ));
 
 export const TableHead = forwardRef<HTMLTableSectionElement, HTMLStyledProps<'thead'>>(
-  (props, ref) => <styled.thead height="40px" className={theadBorderBottom} ref={ref} {...props} />
+  (props, ref) => (
+    <styled.thead height="40px" className={theadBorderBottom} mx="space.05" ref={ref} {...props} />
+  )
 );
 
 export const TableHeader = forwardRef<HTMLTableCellElement, HTMLStyledProps<'th'>>((props, ref) => (
@@ -53,7 +68,7 @@ export const TableBody = forwardRef<HTMLTableSectionElement, HTMLStyledProps<'tb
 );
 
 export const Table = {
-  Root: TableContainer,
+  Root: TableRoot,
   Table: StyledTable,
   Head: TableHead,
   Header: TableHeader,

apps/web/app/constants.ts

@@ -1,5 +1,7 @@
 import { stxToMicroStx } from '@leather.io/utils';
 
+import packageJson from '../../package.json';
+
 export const EXPLORER_URL = 'https://explorer.stacks.co';
 
 export const STACKING_ADDRESS_FORMAT_HELP_URL =
@@ -24,3 +26,10 @@ export const FEE_RATE = 400;
 export const SEND_MANY_CONTACT_ID = 'SP3FBR2AGK5H9QBDH3EEN6DF8EK8JY7RX8QJ5SVTE.send-many-memo';
 
 export const BUY_STACKS_URL = 'https://coinmarketcap.com/currencies/stacks/markets/';
+
+export const DEFAULT_DEVNET_SERVER = 'http://localhost:3999';
+
+export const VERSION = packageJson.version;
+
+export const GITHUB_ORG = 'leather-io';
+export const GITHUB_REPO = 'mono';

apps/web/app/constants/app.ts renamed to apps/web/app/constants/constants.ts

@@ -21,7 +21,7 @@ export function SignInButtonContainer({ children }: HasChildren) {
 }
 
 export function SignInButtonLayout(props: ButtonProps) {
-  return <Button variant="outline" fullWidth {...props} />;
+  return <Button variant="outline" size="xs" fullWidth {...props} />;
 }
 
 interface ActiveAccountButtonLayoutProps {

apps/web/app/features/sign-in-button/sign-in-button.layout.tsx

@@ -1,5 +1,5 @@
 // import { IconEdit } from '@tabler/icons-react';
-import { MIN_DELEGATED_STACKING_AMOUNT_USTX } from '~/constants/app';
+import { MIN_DELEGATED_STACKING_AMOUNT_USTX } from '~/constants/constants';
 
 import { NetworkInstanceToPoxContractMap, Pool, PoolName } from '../utils/types-preset-pools';
 import { PoolIcon } from './pool-icon';

apps/web/app/features/stacking/components/preset-pools.tsx

@@ -12,7 +12,7 @@ import {
   uintCV,
 } from '@stacks/transactions';
 import { z } from 'zod';
-import { UI_IMPOSED_MAX_STACKING_AMOUNT_USTX } from '~/constants/app';
+import { UI_IMPOSED_MAX_STACKING_AMOUNT_USTX } from '~/constants/constants';
 import { StxCallContractParams, leather } from '~/helpers/leather-sdk';
 import { cyclesToBurnChainHeight } from '~/utils/calculate-burn-height';
 import { toHumanReadableStx } from '~/utils/unit-convert';

apps/web/app/features/stacking/utils/utils-delegate-stx.ts

@@ -1,5 +1,5 @@
 import { ChainId, StacksNetwork, StacksNetworkName } from '@stacks/network';
-import { DEFAULT_DEVNET_SERVER } from '~/constants';
+import { DEFAULT_DEVNET_SERVER } from '~/constants/constants';
 
 import { pools } from '../components/preset-pools';
 import {

apps/web/app/features/stacking/utils/utils-preset-pools.ts

@@ -2,12 +2,15 @@ import { styled } from 'leather-styles/jsx';
 import { WhenClient } from '~/components/client-only';
 import { SignInButton } from '~/features/sign-in-button/sign-in-button';
 
+import { LEATHER_EXTENSION_CHROME_STORE_URL } from '@leather.io/constants';
 import {
   BitcoinIcon,
   GlassesIcon,
   HouseIcon,
   Hr,
+  MobileIcon,
   NewspaperIcon,
+  PuzzleIcon,
   StacksIcon,
   SupportIcon,
   TerminalIcon,
@@ -61,7 +64,7 @@ export function Nav() {
         <Hr mx="space.04" my="space.04" width="132px" />
       </styled.div>
 
-      <styled.div>
+      <styled.div mt="space.01">
         <styled.h3 textStyle="label.03" mx="space.04" mb="space.03" color="ink.text-subdued">
           Learn
         </styled.h3>
@@ -88,56 +91,11 @@ export function Nav() {
           Install
         </styled.h3>
 
-        <NavItem
-          href="https://chromewebstore.google.com/detail/leather/ldinpeekobnhjjdofggfgjlcehhmanlj?hl=en&pli=1"
-          icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="17"
-              height="17"
-              viewBox="0 0 17 17"
-              fill="none"
-            >
-              <path
-                d="M3.20703 7.66667V4C3.20703 3.44772 3.65475 3 4.20703 3H13.207C13.7593 3 14.207 3.44771 14.207 4V7.66667M3.20703 7.66667V13C3.20703 13.5523 3.65475 14 4.20703 14H13.207C13.7593 14 14.207 13.5523 14.207 13V7.66667M3.20703 7.66667H14.207M7.8737 5.33333H12.207M6.20703 5.33333C6.20703 5.60948 5.98317 5.83333 5.70703 5.83333C5.43089 5.83333 5.20703 5.60948 5.20703 5.33333C5.20703 5.05719 5.43089 4.83333 5.70703 4.83333C5.98317 4.83333 6.20703 5.05719 6.20703 5.33333Z"
-                stroke="#12100F"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          }
-        >
-          Browser
+        <NavItem href={LEATHER_EXTENSION_CHROME_STORE_URL} icon={<PuzzleIcon variant="small" />}>
+          Extension
         </NavItem>
 
-        <NavItem
-          href="/sbtc-rewards"
-          icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="17"
-              height="17"
-              viewBox="0 0 17 17"
-              fill="none"
-            >
-              <g clipPath="url(#clip0_3940_1038)">
-                <path
-                  d="M7.20671 13.3346H10.2067M5.20671 15.3346H12.2067C12.5749 15.3346 12.8734 15.0362 12.8734 14.668V2.33464C12.8734 1.96645 12.5749 1.66797 12.2067 1.66797H5.20671C4.83852 1.66797 4.54004 1.96645 4.54004 2.33464V14.668C4.54004 15.0362 4.83852 15.3346 5.20671 15.3346Z"
-                  stroke="#12100F"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_3940_1038">
-                  <rect width="16" height="16" fill="white" transform="translate(0.707031 0.5)" />
-                </clipPath>
-              </defs>
-            </svg>
-          }
-        >
+        <NavItem href="/sbtc-rewards" icon={<MobileIcon variant="small" />}>
           Mobile
         </NavItem>
       </styled.div>