chore: housekeeping (#54)

* rename constants dir to avoid name clash Signed-off-by: ryanwolhuter <[email protected]> * organize constant dir Signed-off-by: ryanwolhuter <[email protected]> * update constant imports Signed-off-by: ryanwolhuter <[email protected]> * organize helpers dir Signed-off-by: ryanwolhuter <[email protected]> * split type defs into separate files Signed-off-by: ryanwolhuter <[email protected]> * use default prettier config Signed-off-by: ryanwolhuter <[email protected]> * apply prettier default formatting Signed-off-by: ryanwolhuter <[email protected]> * fix error caused by lint Signed-off-by: ryanwolhuter <[email protected]> Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Nov 2, 2022 · d44fb73 · d44fb73 · vercel · Nov 2, 2022
1 parent 7ecbc3a
commit d44fb73
Show file tree

Hide file tree

Showing 214 changed files with 2,735 additions and 1,005 deletions.
diff --git a/.prettierrc b/.prettierrc
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -1,8 +1,8 @@
-import { red100, red500, red600, white } from "constants/colors";
+import { red100, red500, red600, white } from "constant";
+import { isExternalLink } from "helpers";
 import Link from "next/link";
 import { ReactNode } from "react";
 import styled, { CSSProperties } from "styled-components";
-import { isExternalLink } from "helpers";
 
 interface Props {
   /**
@@ -54,7 +54,9 @@ export function Button({
   type = "button",
 }: Props) {
   if (onClick && href) {
-    throw new Error("Cannot have both onClick and href. Must behave as either a link or a button.");
+    throw new Error(
+      "Cannot have both onClick and href. Must behave as either a link or a button."
+    );
   }
 
   if (!onClick && !href && type !== "submit") {
@@ -64,7 +66,9 @@ export function Button({
   }
 
   if (href && disabled) {
-    throw new Error("`disabled` only makes sense on `button` elements. Cannot be used with `href`. ");
+    throw new Error(
+      "`disabled` only makes sense on `button` elements. Cannot be used with `href`. "
+    );
   }
 
   width = typeof width === "string" ? width : `${width}px`;
@@ -111,7 +115,12 @@ export function Button({
         </_Link>
       ) : null}
       {onClick || type === "submit" ? (
-        <_Button onClick={onClick} style={style} disabled={disabled} type={type}>
+        <_Button
+          onClick={onClick}
+          style={style}
+          disabled={disabled}
+          type={type}
+        >
           {label}
         </_Button>
       ) : null}

diff --git a/components/Checkbox/Checkbox.tsx b/components/Checkbox/Checkbox.tsx
@@ -1,9 +1,9 @@
 import { CustomCheckboxContainer, CustomCheckboxInput } from "@reach/checkbox";
 import "@reach/checkbox/styles.css";
-import { black, white } from "constants/colors";
+import { black, white } from "constant";
+import Check from "public/assets/icons/check.svg";
 import { ChangeEvent, ReactNode } from "react";
 import styled, { CSSProperties } from "styled-components";
-import Check from "public/assets/icons/check.svg";
 
 interface Props {
   label: ReactNode;
@@ -12,7 +12,13 @@ interface Props {
   disabled?: boolean;
   gap?: number;
 }
-export function Checkbox({ label, checked, onChange, disabled, gap = 15 }: Props) {
+export function Checkbox({
+  label,
+  checked,
+  onChange,
+  disabled,
+  gap = 15,
+}: Props) {
   const boxBackgroundColor = checked ? black : white;
   return (
     <Label

diff --git a/components/DonutChart/DonutChart.tsx b/components/DonutChart/DonutChart.tsx
@@ -3,7 +3,13 @@ Adapted from: https://codesandbox.io/s/yw3zyr0q2j?file=/src/DonutView.jsx
 */
 import styled, { CSSProperties } from "styled-components";
 import { InputDataT } from "types";
-import { angleForArcLength, computeColors, computePercentages, degreesToRadians, radiansToDegrees } from "./helpers";
+import {
+  angleForArcLength,
+  computeColors,
+  computePercentages,
+  degreesToRadians,
+  radiansToDegrees,
+} from "./helpers";
 
 interface Props {
   data: InputDataT[];
@@ -20,7 +26,12 @@ interface Props {
    */
   gapSize?: number;
 }
-export function DonutChart({ data, size = 200, hole = 160, gapSize = 1 }: Props) {
+export function DonutChart({
+  data,
+  size = 200,
+  hole = 160,
+  gapSize = 1,
+}: Props) {
   /**
    * The center of the viewBox, center of the chart
    */
@@ -40,16 +51,22 @@ export function DonutChart({ data, size = 200, hole = 160, gapSize = 1 }: Props)
   /**
    * Compute the angle offset required to establish the gaps between segments at the inner edge
    */
-  const gapAngleOffsetInner = radiansToDegrees(angleForArcLength(gapSize, radiusInner));
+  const gapAngleOffsetInner = radiansToDegrees(
+    angleForArcLength(gapSize, radiusInner)
+  );
   /**
    * Compute the angle offset required to establish the gaps between segments at the outer edge
    */
-  const gapAngleOffsetOuter = radiansToDegrees(angleForArcLength(gapSize, radiusOuter));
+  const gapAngleOffsetOuter = radiansToDegrees(
+    angleForArcLength(gapSize, radiusOuter)
+  );
   /**
    * The minimum angle that won't be swallowed by the gap offsets at the inner edge.
    * Used to compute the minimum value that won't get swallowed (minimumValue defined below)
    */
-  const minimumAngleDeg = radiansToDegrees(angleForArcLength(gapSize * 2, radiusInner));
+  const minimumAngleDeg = radiansToDegrees(
+    angleForArcLength(gapSize * 2, radiusInner)
+  );
 
   /**
    * The minimum value that won't get swallowed by the gap offsets at the inner edge
@@ -112,7 +129,9 @@ export function DonutChart({ data, size = 200, hole = 160, gapSize = 1 }: Props)
       `A${radiusInner} ${radiusInner} 0 ${largeArc} ${sweepInner} ${x1} ${y1}`,
     ];
 
-    paths.push(<path key={i} fill={color} stroke="none" d={commands.join(" ")} />);
+    paths.push(
+      <path key={i} fill={color} stroke="none" d={commands.join(" ")} />
+    );
 
     return {
       paths,

diff --git a/components/DonutChart/helpers.ts b/components/DonutChart/helpers.ts
@@ -7,7 +7,9 @@ export function convertToNumbers(data: InputDataT[]) {
   return data.map(({ value, label }) => {
     const numberValue = Number(value);
     if (Number.isNaN(numberValue)) {
-      throw new Error(`Non-numeric string used as value in input data: ${value}`);
+      throw new Error(
+        `Non-numeric string used as value in input data: ${value}`
+      );
     }
     return {
       value: numberValue,
@@ -58,4 +60,7 @@ function determineLightness(initialLightness: number, index: number) {
  * @param {number} atRadius - the radius of the arc
  * @returns {number} - the angle in radians of an arc of the given length at the given radius
  */
-export const angleForArcLength = (arcLength: number, atRadius: number): number => arcLength / atRadius;
+export const angleForArcLength = (
+  arcLength: number,
+  atRadius: number
+): number => arcLength / atRadius;
diff --git a/components/Dropdown/Dropdown.tsx b/components/Dropdown/Dropdown.tsx
@@ -1,7 +1,13 @@
-import { Menu, MenuButton, MenuContextValue, MenuItem, MenuPopover } from "@reach/menu-button";
+import {
+  Menu,
+  MenuButton,
+  MenuContextValue,
+  MenuItem,
+  MenuPopover,
+} from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
 import { positionMatchWidth } from "@reach/popover";
-import { black, blackOpacity50 } from "constants/colors";
+import { black, blackOpacity50 } from "constant";
 import Chevron from "public/assets/icons/chevron.svg";
 import { ReactNode } from "react";
 import styled, { CSSProperties, keyframes } from "styled-components";
@@ -16,28 +22,46 @@ interface Props {
   textColor?: string;
   borderColor?: string;
 }
-export function Dropdown({ items, label, selected, onSelect, disabled, textColor, borderColor = black }: Props) {
+export function Dropdown({
+  items,
+  label,
+  selected,
+  onSelect,
+  disabled,
+  textColor,
+  borderColor = black,
+}: Props) {
   const toggleTextColor = selected ? textColor ?? black : blackOpacity50;
   return (
     <Wrapper>
       {({ isExpanded }: MenuContextValue) => (
         <>
           <ToggleButton
-            style={{ "--color": toggleTextColor, "--border-color": borderColor } as CSSProperties}
+            style={
+              {
+                "--color": toggleTextColor,
+                "--border-color": borderColor,
+              } as CSSProperties
+            }
             aria-disabled={disabled}
           >
             {selected ? selected.label : label}
             <ChevronIcon $isExpanded={isExpanded} />
           </ToggleButton>
-          <DropdownList position={positionMatchWidth} style={{ "--border-color": borderColor } as CSSProperties}>
+          <DropdownList
+            position={positionMatchWidth}
+            style={{ "--border-color": borderColor } as CSSProperties}
+          >
             {items.map((item) => (
               <DropdownItem
                 $isSelected={selected?.value === item.value}
                 onSelect={() => onSelect(item)}
                 key={item.label}
               >
                 <Label>{item.label}</Label>
-                {item.secondaryLabel ? <SecondaryLabel>({item.secondaryLabel})</SecondaryLabel> : null}
+                {item.secondaryLabel ? (
+                  <SecondaryLabel>({item.secondaryLabel})</SecondaryLabel>
+                ) : null}
               </DropdownItem>
             ))}
           </DropdownList>
@@ -98,7 +122,8 @@ const DropdownItem = styled(MenuItem)<{ $isSelected: boolean }>`
   font: var(--text-md);
   color: var(--black);
   border-radius: 5px;
-  background-color: ${({ $isSelected }) => ($isSelected ? "var(--grey-50)" : "var(--white)")};
+  background-color: ${({ $isSelected }) =>
+    $isSelected ? "var(--grey-50)" : "var(--white)"};
   &:hover {
     background-color: var(--grey-50);
     color: currentColor;

diff --git a/components/GlobalStyle/GlobalStyle.ts b/components/GlobalStyle/GlobalStyle.ts
@@ -1,37 +1,40 @@
 import {
+  bannerHeight,
   black,
   blackOpacity25,
   blackOpacity50,
   blackOpacity60,
   blackOpacity75,
+  desktopMaxWidth,
+  desktopPanelWidth,
   green,
   grey100,
   grey50,
   grey500,
   grey800,
+  headerHeight,
+  headerLg,
+  headerMd,
+  headerSm,
+  headerXl,
+  headerXs,
   loadingSkeletonOpacity10,
   loadingSkeletonOpacity100,
   red100,
   red500,
   red500Opacity5,
   red600,
-  white,
-  whiteOpacity10,
-} from "constants/colors";
-import { bannerHeight, desktopMaxWidth, desktopPanelWidth, headerHeight } from "constants/containers";
-import {
-  headerLg,
-  headerMd,
-  headerSm,
-  headerXl,
-  headerXs,
+  shadow1,
+  shadow2,
+  shadow3,
   textFine,
   textLg,
   textMd,
   textSm,
   textXs,
-} from "constants/fonts";
-import { shadow1, shadow2, shadow3 } from "constants/shadows";
+  white,
+  whiteOpacity10,
+} from "constant";
 import { createGlobalStyle } from "styled-components";
 
 /** Creates the global style object for the dapp.

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -8,9 +8,11 @@ import Menu from "/public/assets/icons/menu.svg";
 
 export function Header() {
   const { openPanel } = usePanelContext();
-  const { getDelegationStatus, getDelegationDataLoading } = useDelegationContext();
+  const { getDelegationStatus, getDelegationDataLoading } =
+    useDelegationContext();
 
-  const showDelegationNotification = !getDelegationDataLoading() && getDelegationStatus() === "delegate-pending";
+  const showDelegationNotification =
+    !getDelegationDataLoading() && getDelegationStatus() === "delegate-pending";
 
   function openMenuPanel() {
     openPanel("menu");