chore: format and lint all sources (#493)

apps/dapp/atoms/pinned.ts

@@ -1,4 +1,5 @@
-import { atom, AtomEffect } from 'recoil'
+import { atom } from 'recoil'
+
 import { localStorageEffect } from 'atoms/localStorageEffect'
 
 // As a relic of when we were doing non-backwards compatible changes on the

apps/dapp/atoms/proposals.ts

@@ -1,5 +1,7 @@
 import { atom, atomFamily } from 'recoil'
+
 import { ContractProposalMap, ExtendedProposalResponse } from 'types/proposals'
+
 import { localStorageEffect } from './localStorageEffect'
 
 // By depending on this atom, the selector for retrieving the list

apps/dapp/atoms/status.ts

@@ -1,4 +1,5 @@
 import { atom } from 'recoil'
+
 import { localStorageEffect } from './localStorageEffect'
 
 export const loadingAtom = atom<boolean>({

apps/dapp/components/BetaWarning.tsx

@@ -6,9 +6,9 @@ import SvgMessage from 'components/icons/Message'
 
 export function BetaWarningModal({ onAccept }: { onAccept: Function }) {
   return (
-    <div className="fixed z-10 w-screen h-full backdrop-filter backdrop-blur-sm flex items-center justify-center">
-      <div className="bg-white h-min max-w-md p-6 rounded-lg border border-focus">
-        <div className="rounded-md prose prose-sm dark:prose-invert mb-6">
+    <div className="flex fixed z-10 justify-center items-center w-screen h-full backdrop-blur-sm backdrop-filter">
+      <div className="p-6 max-w-md h-min bg-white rounded-lg border border-focus">
+        <div className="mb-6 rounded-md prose prose-sm dark:prose-invert">
           <h2>Before you continue...</h2>
           <p>
             DAO DAO is in beta, and has not yet been audited. <b>Do not</b> keep
@@ -17,10 +17,10 @@ export function BetaWarningModal({ onAccept }: { onAccept: Function }) {
           </p>
           <p>
             <a
-              className="text-accent underline hover:no-underline"
+              className="underline hover:no-underline text-accent"
               href="https://njc09z4coq8.typeform.com/to/EBkp9QJU"
-              target="_blank"
               rel="noreferrer"
+              target="_blank"
             >
               Give us feedback!
             </a>{' '}
@@ -39,7 +39,7 @@ export function BetaWarningModal({ onAccept }: { onAccept: Function }) {
         </div>
         <Button onClick={() => onAccept()}>
           I accept the terms
-          <ChevronRightIcon className="w-4 h-4 ml-2" />
+          <ChevronRightIcon className="ml-2 w-4 h-4" />
         </Button>
       </div>
     </div>
@@ -48,25 +48,25 @@ export function BetaWarningModal({ onAccept }: { onAccept: Function }) {
 
 export function BetaNotice({ onClose }: { onClose: Function }) {
   return (
-    <div className="fixed bottom-3 left-3 bg-light text-primary-content z-10 rounded-md p-3">
+    <div className="fixed bottom-3 left-3 z-10 p-3 bg-light rounded-md text-primary-content">
       <div className="flex gap-2 items-center">
         <SvgMessage />
         <h2>
           DAO DAO is in <div className="inline text-error">beta!</div>
         </h2>
         <a
-          className="underline font-mono text-secondary text-sm"
+          className="font-mono text-sm text-secondary underline"
           href="https://njc09z4coq8.typeform.com/to/EBkp9QJU"
-          target="_blank"
           rel="noreferrer"
+          target="_blank"
         >
           Share feedback
         </a>
         <button
-          className="transition text-primary-content hover:text-secondary"
+          className="hover:text-secondary transition text-primary-content"
           onClick={() => onClose()}
         >
-          <XIcon className="inline h-3 mb-2" />
+          <XIcon className="inline mb-2 h-3" />
         </button>
       </div>
     </div>

apps/dapp/components/Breadcrumbs.tsx

@@ -7,11 +7,11 @@ import { ArrowNarrowLeftIcon } from '@heroicons/react/outline'
  */
 export function Breadcrumbs({ crumbs }: { crumbs: Array<[string, string]> }) {
   return (
-    <ul className="link-text list-none flex">
+    <ul className="flex list-none link-text">
       <li key="icon">
         <Link href={crumbs[crumbs.length - 2][0]}>
           <a>
-            <ArrowNarrowLeftIcon className="inline w-5 h-5 mb-1" />
+            <ArrowNarrowLeftIcon className="inline mb-1 w-5 h-5" />
           </a>
         </Link>
       </li>

apps/dapp/components/ChainEnableModal.tsx

@@ -14,12 +14,12 @@ function ChainEnableModal({
 }) {
   return (
     <Modal>
-      <div className="bg-white h-min max-w-md p-6 rounded-lg border border-focus relative">
+      <div className="relative p-6 max-w-md h-min bg-white rounded-lg border border-focus">
         <button
-          className="hover:bg-secondary transition rounded-full p-1 absolute right-2 top-2"
+          className="absolute top-2 right-2 p-1 hover:bg-secondary rounded-full transition"
           onClick={onClose}
         >
-          <XIcon className="h-4 w-4" />
+          <XIcon className="w-4 h-4" />
         </button>
 
         <h1 className="header-text">Add Chain &quot;{CHAIN_ID}&quot;</h1>
@@ -28,7 +28,7 @@ function ChainEnableModal({
           <code>{CHAIN_ID}</code> chain. You will need to approve adding the{' '}
           {CHAIN_NAME} <code>{CHAIN_ID}</code> chain to connect your wallet.
         </p>
-        <Button onClick={onAction} className="mt-8">
+        <Button className="mt-8" onClick={onAction}>
           ENABLE CHAIN &quot;{CHAIN_ID?.toUpperCase()}&quot;
         </Button>
       </div>

apps/dapp/components/Claims.tsx

@@ -93,12 +93,12 @@ function ClaimListItem({
   return (
     <div className="my-2">
       {avaliable ? (
-        <p className="text-secondary font-mono text-sm">
+        <p className="font-mono text-sm text-secondary">
           Avaliable
-          <CheckIcon className="inline h-4 ml-1" />
+          <CheckIcon className="inline ml-1 h-4" />
         </p>
       ) : (
-        <div className="flex flex-wrap gap-2 text-secondary font-mono text-sm">
+        <div className="flex flex-wrap gap-2 font-mono text-sm text-secondary">
           <p>{durationRemainingForHumans || '0'} left</p>
           <p>/ {durationForHumans}</p>
         </div>
@@ -136,11 +136,11 @@ export function ClaimsPendingList({
               return (
                 <ClaimListItem
                   key={idx}
-                  claim={claim}
                   blockHeight={blockHeight}
-                  unstakingDuration={unstakeDuration}
-                  tokenInfo={tokenInfo}
+                  claim={claim}
                   incrementClaimsAvaliable={incrementClaimsAvaliable}
+                  tokenInfo={tokenInfo}
+                  unstakingDuration={unstakeDuration}
                 />
               )
             })}
@@ -168,12 +168,12 @@ export function ClaimAvaliableCard({
     .reduce((p, n) => p + Number(n.amount), 0)
 
   return (
-    <div className="shadow p-6 rounded-lg w-full border border-base-300 mt-2">
-      <h2 className="text-sm font-mono text-secondary">
+    <div className="p-6 mt-2 w-full rounded-lg border shadow border-base-300">
+      <h2 className="font-mono text-sm text-secondary">
         Unclaimed (unstaked ${tokenInfo.symbol})
       </h2>
       {loading ? (
-        <div className="animate-spin-medium inline-block mt-2">
+        <div className="inline-block mt-2 animate-spin-medium">
           <LogoNoBorder />
         </div>
       ) : (
@@ -187,7 +187,7 @@ export function ClaimAvaliableCard({
       )}
       <div className="flex justify-end">
         <button
-          className="btn-outline btn btn-xs border-secondary normal-case"
+          className="normal-case btn-outline btn btn-xs border-secondary"
           onClick={onClaim}
         >
           Claim

apps/dapp/components/CodeIdSelect.tsx

@@ -18,19 +18,19 @@ export default function CodeIdSelect({
 }) {
   return (
     <div className="flex items-center">
-      <span className="font-medium px-2">Contract Version</span>
+      <span className="px-2 font-medium">Contract Version</span>
       <div className="dropdown dropdown-end">
         <Button size="sm">
-          {currentVersion.name} <ChevronDownIcon className="inline h-4 w-4" />
+          {currentVersion.name} <ChevronDownIcon className="inline w-4 h-4" />
         </Button>
         <ul
+          className="p-2 w-52 shadow-2xl dropdown-content menu bg-base-100 rounded-box"
           tabIndex={0}
-          className="dropdown-content menu p-2 shadow-2xl bg-base-100 rounded-box w-52"
         >
           {versions.map((v) => (
             <li
               key={v.name}
-              className="hover:bg-purple-500 p-2 rounded-md cursor-pointer"
+              className="p-2 hover:bg-purple-500 rounded-md cursor-pointer"
               onClick={() => onSelect(v)}
             >
               {v.name}

apps/dapp/components/ConnectWalletButton.tsx

@@ -32,12 +32,12 @@ function CopyButton({ text }: { text: string }) {
   return (
     <Tooltip label="Copy wallet address">
       <button
-        type="button"
         onClick={() => {
           navigator.clipboard.writeText(text)
           setTimeout(() => setCopied(false), 2000)
           setCopied(true)
         }}
+        type="button"
       >
         {copied ? (
           <CheckCircleIcon className="w-[18px]" />
@@ -52,7 +52,7 @@ function CopyButton({ text }: { text: string }) {
 function DisconnectButton({ onClick }: { onClick: () => void }) {
   return (
     <Tooltip label="Disconnect wallet">
-      <button type="button" onClick={onClick}>
+      <button onClick={onClick} type="button">
         <LogoutIcon className="w-[18px]" />
       </button>
     </Tooltip>
@@ -108,9 +108,9 @@ function WalletConnect() {
 
   if (walletAddress) {
     return (
-      <div className="w-full relative py-2 px-4 my-4 bg-primary hover:outline hover:outline-brand rounded-lg group relative">
-        <div className="flex items-center justify-left gap-4 h-full w-full">
-          <SvgWallet width="20px" height="20px" fill="currentColor" />
+      <div className="group relative py-2 px-4 my-4 w-full bg-primary rounded-lg hover:outline-brand hover:outline">
+        <div className="flex gap-4 items-center w-full h-full justify-left">
+          <SvgWallet fill="currentColor" height="20px" width="20px" />
           <div className="link-text">
             <span>{walletName}</span>
             <br />
@@ -119,7 +119,7 @@ function WalletConnect() {
             </span>
           </div>
         </div>
-        <div className="absolute right-2 top-1 flex gap-1 transition opacity-0 group-hover:opacity-100">
+        <div className="flex absolute top-1 right-2 gap-1 opacity-0 group-hover:opacity-100 transition">
           <CopyButton text={walletAddress} />
           <DisconnectButton onClick={handleConnect} />
         </div>
@@ -129,12 +129,12 @@ function WalletConnect() {
   return (
     <div className="my-4">
       <Button
+        className="py-4 w-full hover:outline-brand hover:outline"
         full
         onClick={handleConnect}
-        className="w-full hover:outline hover:outline-brand py-4"
       >
-        <SvgWallet width="20px" height="20px" fill="currentColor" />
-        <p className="link-text text-light">Connect wallet</p>
+        <SvgWallet fill="currentColor" height="20px" width="20px" />
+        <p className="text-light link-text">Connect wallet</p>
       </Button>
     </div>
   )

apps/dapp/components/ContractCard.tsx

@@ -42,14 +42,14 @@ function DIYLogo({
   return (
     <Link href={href}>
       <a>
-        <div className="transition-shadow shadow p-6 h-[300px] rounded-lg flex flex-col items-center m-2 bg-card from-transparent justify-between hover:shadow-brand hover:shadow-md hover:outline-brand hover:outline hover:outline-1 relative">
-          <div className="absolute w-full h-[110px] top-0 left-0 bg-gradient-to-t to-dark from-transparent opacity-[8%] rounded-lg "></div>
+        <div className="flex relative flex-col justify-between items-center p-6 m-2 h-[300px] bg-card from-transparent rounded-lg hover:outline-1 hover:outline-brand hover:outline shadow hover:shadow-md hover:shadow-brand transition-shadow">
+          <div className="absolute top-0 left-0 w-full h-[110px] bg-gradient-to-t from-transparent to-dark rounded-lg opacity-[8%] "></div>
           <div className="flex flex-col items-center max-w-full">
             <div className="relative">
               {children}
               {token && (
                 <div
-                  className="bg-center rounded-full absolute -bottom-1 -right-[10px] border border-light"
+                  className="absolute -right-[10px] -bottom-1 bg-center rounded-full border border-light"
                   style={{
                     width: '32px',
                     height: '32px',
@@ -58,17 +58,17 @@ function DIYLogo({
                 ></div>
               )}
             </div>
-            <h3 className="text-md font-semibold truncate max-w-full mt-3">
+            <h3 className="mt-3 max-w-full font-semibold truncate text-md">
               {title}
             </h3>
-            <p className="text-secondary text-xs font-mono text-center mt-1 break-words line-clamp-3">
+            <p className="mt-1 font-mono text-xs text-center text-secondary break-words line-clamp-3">
               {body}
             </p>
           </div>
-          <div className="flex flex-col items-left gap-1">
+          <div className="flex flex-col gap-1 items-left">
             {balance && (
               <p className="text-sm">
-                <SvgDao fill="currentColor" className="inline w-4 mr-2 mb-1" />
+                <SvgDao className="inline mr-2 mb-1 w-4" fill="currentColor" />
                 {convertMicroDenomToDenomWithDecimals(
                   balance,
                   NATIVE_DECIMALS
@@ -79,17 +79,17 @@ function DIYLogo({
             {proposals != undefined && (
               <p className="text-sm">
                 <SvgPencil
+                  className="inline mr-2 mb-1 w-4"
                   fill="currentColor"
-                  className="inline w-4 mr-2 mb-1"
                 />
                 {proposals} proposal{weight != 1 && 's'}
               </p>
             )}
             {weight != undefined && (
-              <p className="text-success text-sm text-valid">
+              <p className="text-sm text-valid text-success">
                 <SvgVotes
+                  className="inline mr-2 mb-1 h-5"
                   fill="currentColor"
-                  className="inline h-5 mr-2 mb-1"
                 />
                 {weight} vote{weight != 1 && 's'}
               </p>
@@ -125,24 +125,24 @@ export function ContractCard({
   return (
     <div className="relative">
       <DIYLogo
-        title={name}
+        balance={balance}
         body={description}
         href={href}
-        weight={weight}
         proposals={proposals}
-        balance={balance}
+        title={name}
+        weight={weight}
       >
         {imgUrl && CARD_IMAGES_ENABLED ? (
           <div
-            className="rounded-full bg-center bg-cover w-[80px] h-[80px]"
+            aria-label="DAO's Custom Logo"
+            className="w-[80px] h-[80px] bg-center bg-cover rounded-full"
+            role="img"
             style={{
               backgroundImage: `url(${imgUrl})`,
             }}
-            role="img"
-            aria-label="DAO's Custom Logo"
           ></div>
         ) : (
-          <Logo height={80} width={80} alt={name} />
+          <Logo alt={name} height={80} width={80} />
         )}
       </DIYLogo>
       <button
@@ -161,10 +161,10 @@ export function ContractCard({
 
 export function LoadingContractCard() {
   return (
-    <div className="transition-shadow shadow p-6 h-[300px] rounded-lg flex flex-col items-center  m-2 bg-card from-transparent justify-center relative">
-      <div className="absolute w-full h-[110px] top-0 left-0 bg-gradient-to-t to-dark from-transparent opacity-[8%] rounded-lg "></div>
-      <div className="w-[70px] h-[70px] flex justify-center items-center">
-        <div className="animate-spin inline-block">
+    <div className="flex relative flex-col justify-center items-center p-6 m-2 h-[300px]  bg-card from-transparent rounded-lg shadow transition-shadow">
+      <div className="absolute top-0 left-0 w-full h-[110px] bg-gradient-to-t from-transparent to-dark rounded-lg opacity-[8%] "></div>
+      <div className="flex justify-center items-center w-[70px] h-[70px]">
+        <div className="inline-block animate-spin">
           <Logo height={72} width={72} />
         </div>
       </div>
@@ -185,13 +185,13 @@ const EmptyStateContractCard = ({
 }) => {
   return (
     <Link href={href} passHref>
-      <a className="border border-inactive transition hover:border-brand rounded-md w-max overflow-hidden max-w-[400px]">
+      <a className="overflow-hidden w-max max-w-[400px] rounded-md border border-inactive hover:border-brand transition">
         <div
-          className={'h-72 bg-cover bg-no-repeat opacity-75'}
+          className={'h-72 bg-no-repeat bg-cover opacity-75'}
           style={{ backgroundImage: `url(${backgroundUrl})` }}
         />
-        <div className="px-6 py-4">
-          <div className="primary-text mb-2 flex items-center gap-2">
+        <div className="py-4 px-6">
+          <div className="flex gap-2 items-center mb-2 primary-text">
             <PlusIcon className="w-4" />
             {title}
           </div>