Deploy UI (#495)

.prettierignore

@@ -1,4 +1,4 @@
-node_modules
-.next
-build
-dist
+**/.next/
+**/dist/
+**/node_modules/
+**/out/

.vscode/settings.json

@@ -2,7 +2,34 @@
   "workbench.colorCustomizations": {
     "activityBar.background": "#38027e"
   },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "css.validate": false,
+  "eslint.codeActionsOnSave.mode": "problems",
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "eslint.onIgnoredFiles": "warn",
   "eslint.workingDirectories": [
-    "./apps/dapp", 
-  ],
+    {
+      "pattern": "apps/*",
+      "!cwd": false
+    },
+    {
+      "pattern": "packages/*",
+      "!cwd": false
+    }
+  ]
 }

apps/dapp/.eslintrc.js

@@ -1 +1,10 @@
-module.exports = require('config/eslint-preset')
+// @ts-check
+
+/** @type {import("eslint").Linter.Config} */
+const eslintConfig = {
+  extends: [require.resolve('@dao-dao/config/eslint')],
+  ignorePatterns: ['.next', '.turbo', 'node_modules', 'out'],
+  root: true,
+}
+
+module.exports = eslintConfig

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>
@@ -128,11 +128,13 @@ function WalletConnect() {
   }
   return (
     <div className="my-4">
-      <Button full onClick={handleConnect}>
-        <>
-          <SvgWallet className="inline w-5 mr-1" fill="currentColor" />
-          <p className="text-sm my-2">connect wallet</p>
-        </>
+      <Button
+        className="py-4 w-full hover:outline-brand hover:outline"
+        full
+        onClick={handleConnect}
+      >
+        <SvgWallet fill="currentColor" height="20px" width="20px" />
+        <p className="text-light link-text">Connect wallet</p>
       </Button>
     </div>
   )