Run prettier

.prettierignore

@@ -1 +1,2 @@
-public
+public
+src/vendor

.prettierrc

@@ -6,5 +6,6 @@
   "plugins": [
     "prettier-plugin-organize-imports",
     "prettier-plugin-tailwindcss"
-  ]
+  ],
+  "tailwindFunctions": ["clsx"]
 }

.vscode/settings.json

@@ -16,14 +16,14 @@
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -38,11 +38,6 @@
   },
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
-  "[typescript][typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": "explicit"
-    }
-  },
   "tailwindCSS.experimental.classRegex": [
     ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ]

src/app/app.tsx

@@ -42,7 +42,7 @@ export function App({ children }: PropsWithChildren<any>) {
 
 export function BodyLayout({ children }: PropsWithChildren<any>) {
   return (
-    <div className="min-w-screen bg-taupe-100 relative flex h-full min-h-screen w-full flex-col justify-between text-black">
+    <div className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-taupe-100 text-black">
       <Header />
       <main className="w-full flex-1">{children}</main>
       <Footer />

src/components/animation/Fade.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, useEffect, useState } from 'react'
+import { PropsWithChildren, useEffect, useState } from 'react';
 
 export function Fade(props: PropsWithChildren<{ show: boolean }>) {
-  const { show, children } = props
-  const [render, setRender] = useState(show)
+  const { show, children } = props;
+  const [render, setRender] = useState(show);
 
   useEffect(() => {
-    if (show) setRender(true)
-  }, [show])
+    if (show) setRender(true);
+  }, [show]);
 
   const onAnimationEnd = () => {
-    if (!show) setRender(false)
-  }
+    if (!show) setRender(false);
+  };
 
   return render ? (
     <div
@@ -22,5 +22,5 @@ export function Fade(props: PropsWithChildren<{ show: boolean }>) {
     >
       {children}
     </div>
-  ) : null
+  ) : null;
 }

src/components/animation/Spinner.tsx

@@ -1,5 +1,5 @@
-import { memo } from 'react'
-import styles from 'src/components/animation/Spinner.module.css'
+import { memo } from 'react';
+import styles from 'src/components/animation/Spinner.module.css';
 
 // From https://loading.io/css/
 function _Spinner() {
@@ -10,7 +10,7 @@ function _Spinner() {
       <div></div>
       <div></div>
     </div>
-  )
+  );
 }
 
-export const Spinner = memo(_Spinner)
+export const Spinner = memo(_Spinner);

src/components/buttons/OutlineButton.tsx

@@ -7,7 +7,7 @@ export function OutlineButton({
 }: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
   return (
     <button
-      className={`border-taupe-300 btn btn-outline h-fit min-h-fit rounded-full px-4 py-2.5 font-semibold text-black hover:bg-black/5 ${className}`}
+      className={`btn btn-outline h-fit min-h-fit rounded-full border-taupe-300 px-4 py-2.5 font-semibold text-black hover:bg-black/5 ${className}`}
       {...props}
     >
       {children}

src/components/buttons/SolidButton.tsx

@@ -7,7 +7,7 @@ export function SolidButton({
 }: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
   return (
     <button
-      className={`border-taupe-300 btn h-fit min-h-fit rounded-full bg-yellow-500 px-5 py-2.5 font-semibold text-black hover:bg-yellow-500 hover:opacity-90 ${className}`}
+      className={`btn h-fit min-h-fit rounded-full border-taupe-300 bg-yellow-500 px-5 py-2.5 font-semibold text-black hover:bg-yellow-500 hover:opacity-90 ${className}`}
       {...props}
     >
       {children}

src/components/errors/ErrorBoundary.tsx

@@ -33,7 +33,7 @@ export class ErrorBoundary extends Component<any, ErrorBoundaryState> {
         <div className="flex h-screen w-screen items-center justify-center bg-gray-50">
           <div className="flex flex-col items-center">
             <Image src={ErrorIcon} width={80} height={80} alt="" />
-            <h1 className="text-lg mt-5">Fatal Error Occurred</h1>
+            <h1 className="mt-5 text-lg">Fatal Error Occurred</h1>
             <div className="mt-5 text-sm">{details}</div>
             <a
               href={links.discord}

src/components/icons/Identicon.tsx

@@ -24,7 +24,7 @@ export class Identicon extends PureComponent<Props> {
     const jazziconResult = jazzicon(size, addressToSeed(address));
 
     return (
-      <div className="border-taupe-300 flex w-fit items-center justify-center rounded-full border p-px">
+      <div className="flex w-fit items-center justify-center rounded-full border border-taupe-300 p-px">
         <div
           style={{ height: size, width: size, ...styles }}
           ref={(nodeElement) => {

src/components/menus/Dropdown.tsx

@@ -19,7 +19,7 @@ export function Dropdown({
       </div>
       <div
         tabIndex={0}
-        className="border-taupe-300 dropdown-content z-[1] mt-3 border bg-white p-4 shadow"
+        className="dropdown-content z-[1] mt-3 border border-taupe-300 bg-white p-4 shadow"
       >
         {content}
       </div>
@@ -46,7 +46,7 @@ export function DropdownMenu({
       </div>
       <ul
         tabIndex={0}
-        className="border-taupe-300 menu dropdown-content z-[1] mt-3 w-52 border bg-white p-2 shadow"
+        className="menu dropdown-content z-[1] mt-3 w-52 border border-taupe-300 bg-white p-2 shadow"
       >
         {items.map((item, index) => (
           <li key={index}>{item}</li>

src/components/nav/Footer.tsx

@@ -36,7 +36,7 @@ function ThemeToggle() {
       <div className="text-[15px] font-normal leading-tight text-gray-950 dark:text-neutral-400">
         Theme
       </div>
-      <div className="trainsition-color relative flex items-center justify-center gap-[5px] rounded-[32px] border border border border border-gray-950 px-0.5 py-[1px] dark:bg-fuchsia-200">
+      <div className="trainsition-color dark:bg-fuchsia-200 relative flex items-center justify-center gap-[5px] rounded-[32px] border border border border border-gray-950 px-0.5 py-[1px]">
         <div className="relative flex h-5 w-4 flex-col items-start justify-start p-1 pr-0">
           <Image src={Sun} alt="light theme icon" width={14} height={14} />
         </div>

src/config/chains.ts

@@ -5,11 +5,11 @@ export enum ChainId {
 }
 
 export interface ChainMetadata {
-  chainId: ChainId
-  name: string
-  rpcUrl: string
-  explorerUrl: string
-  explorerApiUrl: string
+  chainId: ChainId;
+  name: string;
+  rpcUrl: string;
+  explorerUrl: string;
+  explorerApiUrl: string;
 }
 
 export const Alfajores: ChainMetadata = {
@@ -18,28 +18,28 @@ export const Alfajores: ChainMetadata = {
   rpcUrl: 'https://alfajores-forno.celo-testnet.org',
   explorerUrl: 'https://alfajores.celoscan.io',
   explorerApiUrl: 'https://api-alfajores.celoscan.io/api',
-}
+};
 
 export const Baklava: ChainMetadata = {
   chainId: ChainId.Baklava,
   name: 'Baklava',
   rpcUrl: 'https://baklava-forno.celo-testnet.org',
   explorerUrl: 'https://explorer.celo.org/baklava',
   explorerApiUrl: 'https://explorer.celo.org/baklava/api',
-}
+};
 
 export const Celo: ChainMetadata = {
   chainId: ChainId.Celo,
   name: 'Celo',
   rpcUrl: 'https://forno.celo.org',
   explorerUrl: 'https://celoscan.io',
   explorerApiUrl: 'https://api.celoscan.io/api',
-}
+};
 
 export const chainIdToChain: Record<number, ChainMetadata> = {
   [ChainId.Alfajores]: Alfajores,
   [ChainId.Baklava]: Baklava,
   [ChainId.Celo]: Celo,
-}
+};
 
-export const allChains = [Celo, Alfajores, Baklava]
+export const allChains = [Celo, Alfajores, Baklava];

src/features/staking/hooks.ts

@@ -0,0 +1 @@
+export function useValidatorGroups() {}

src/features/wallet/WalletDropdown.tsx

@@ -20,7 +20,7 @@ export function WalletDropdown() {
       {address && isConnected ? (
         <Dropdown
           button={
-            <OutlineButton className="all:py-1 pl-1.5 pr-3">
+            <OutlineButton className="pl-1.5 pr-3 all:py-1">
               <div className="flex items-center justify-center space-x-1">
                 <Identicon address={address} size={26} />
                 <div className="text-sm">{shortenAddress(address, true)}</div>
@@ -73,7 +73,7 @@ function DropdownContent({ address, disconnect }: { address: Address; disconnect
 
 function ValueRow({ label, value }: { label: string; value: string | number | bigint }) {
   return (
-    <div className="border-taupe-300 flex flex-col border p-3">
+    <div className="flex flex-col border border-taupe-300 p-3">
       <label className="text-sm">{label}</label>
       <Amount value={value} className="text-xl" />
     </div>

src/global.d.ts

@@ -1,2 +1,2 @@
-declare type Address = string
+declare type Address = string;
 declare type HexString = string;

src/index.d.ts

@@ -1 +1 @@
-declare module '@metamask/jazzicon'
+declare module '@metamask/jazzicon';

src/styles/globals.css

@@ -171,9 +171,9 @@ Toasts
   --toastify-color-light: #ffffff;
   --toastify-color-dark: #2e3338;
   --toastify-color-info: #3498db;
-  --toastify-color-success: #56DF7C;
+  --toastify-color-success: #56df7c;
   --toastify-color-warning: #fcd34d;
-  --toastify-color-error: #E70532;
+  --toastify-color-error: #e70532;
   --toastify-color-transparent: rgba(255, 255, 255, 0.7);
 
   --toastify-icon-color-info: var(--toastify-color-info);

src/utils/debounce.ts

@@ -1,18 +1,18 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
 // Based on https://usehooks.com/useDebounce
 export function useDebounce<T>(value: T, delayMs = 500): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
     const handler = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delayMs)
+      setDebouncedValue(value);
+    }, delayMs);
 
     return () => {
-      clearTimeout(handler)
-    }
-  }, [value, delayMs])
+      clearTimeout(handler);
+    };
+  }, [value, delayMs]);
 
-  return debouncedValue
+  return debouncedValue;
 }

src/utils/logger.ts

@@ -5,4 +5,4 @@ export const logger = {
   info: (...args: any[]) => console.info(...args),
   warn: (...args: any[]) => console.warn(...args),
   error: (...args: any[]) => console.error(...args),
-}
+};

src/utils/objects.ts

@@ -12,32 +12,29 @@ export function deepCopy(v: any) {
 
 export type ValueOf<T> = T[keyof T];
 
-export function objMapEntries<
-  M extends Record<K, I>,
-  K extends keyof M,
-  O,
-  I = ValueOf<M>,
->(obj: M, func: (k: K, v: I) => O): [K, O][] {
+export function objMapEntries<M extends Record<K, I>, K extends keyof M, O, I = ValueOf<M>>(
+  obj: M,
+  func: (k: K, v: I) => O,
+): [K, O][] {
   return Object.entries<I>(obj).map(([k, v]) => [k as K, func(k as K, v)]);
 }
 
 // Map over the values of the object
-export function objMap<
-  M extends Record<K, I>,
-  K extends keyof M,
-  O,
-  I = ValueOf<M>,
->(obj: M, func: (k: K, v: I) => O): Record<K, O> {
+export function objMap<M extends Record<K, I>, K extends keyof M, O, I = ValueOf<M>>(
+  obj: M,
+  func: (k: K, v: I) => O,
+): Record<K, O> {
   return Object.fromEntries<O>(objMapEntries(obj, func)) as Record<K, O>;
 }
 
 export function objFilter<K extends string, I, O extends I>(
   obj: Record<K, I>,
   func: (k: K, v: I) => v is O,
 ): Record<K, O> {
-  return Object.fromEntries(
-    Object.entries<I>(obj).filter(([k, v]) => func(k as K, v)),
-  ) as Record<K, O>;
+  return Object.fromEntries(Object.entries<I>(obj).filter(([k, v]) => func(k as K, v))) as Record<
+    K,
+    O
+  >;
 }
 
 // promiseObjectAll :: {k: Promise a} -> Promise {k: a}
@@ -64,11 +61,7 @@ export function pick<K extends string, V = any>(obj: Record<K, V>, keys: K[]) {
 
 // Recursively merges b into a
 // Where there are conflicts, b takes priority over a
-export function objMerge(
-  a: Record<string, any>,
-  b: Record<string, any>,
-  max_depth = 10,
-): any {
+export function objMerge(a: Record<string, any>, b: Record<string, any>, max_depth = 10): any {
   if (max_depth === 0) {
     throw new Error('objMerge tried to go too deep');
   }

src/utils/ssr.ts

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
 // Is the component server-side rendering or not
 export function useIsSsr() {
-  const [isSsr, setIsSsr] = useState(true)
+  const [isSsr, setIsSsr] = useState(true);
   useEffect(() => {
-    setIsSsr(false)
-  }, [])
-  return isSsr
+    setIsSsr(false);
+  }, []);
+  return isSsr;
 }

src/utils/strings.ts

@@ -14,9 +14,7 @@ export function sanitizeString(str: string) {
 export function trimToLength(value: string, maxLength: number) {
   if (!value) return '';
   const trimmed = value.trim();
-  return trimmed.length > maxLength
-    ? trimmed.substring(0, maxLength) + '...'
-    : trimmed;
+  return trimmed.length > maxLength ? trimmed.substring(0, maxLength) + '...' : trimmed;
 }
 
 export function errorToString(error: any, maxLength = 300) {