From 155146b394c5b7392b5db7bc747022dfdc63f5df Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Wed, 13 Apr 2022 04:33:54 +0700
Subject: [PATCH 1/7] feat(dapp/deps): add clsx dependency

---
 apps/dapp/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/dapp/package.json b/apps/dapp/package.json
index 9b6859840..453ecb6e2 100644
--- a/apps/dapp/package.json
+++ b/apps/dapp/package.json
@@ -34,6 +34,7 @@
     "@types/react-json-editor-ajrm": "^2.5.2",
     "ajv": "^8.9.0",
     "axios": "^0.26.1",
+    "clsx": "^1.1.1",
     "codemirror": "^5.65.0",
     "dotenv": "^10.0.0",
     "fast-average-color-node": "^2.1.0",

From 9c6622537511d6260daaf8ae84936894051cf882 Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Thu, 14 Apr 2022 01:31:16 +0700
Subject: [PATCH 2/7] feat(dapp/ui): create tooltip icon component

---
 .../components/TooltipsDisplay/TooltipIcon.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx

diff --git a/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx
new file mode 100644
index 000000000..4cf69cce1
--- /dev/null
+++ b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx
@@ -0,0 +1,16 @@
+import { forwardRef } from 'react'
+
+import { InformationCircleIcon } from '@heroicons/react/outline'
+import Tooltip, { TooltipProps } from '@reach/tooltip'
+
+export type TooltipIconProps = Omit<TooltipProps, 'children'>
+
+export const TooltipIcon = forwardRef<HTMLDivElement, TooltipIconProps>(
+  function TooltipIcon(props, ref) {
+    return (
+      <Tooltip {...props} ref={ref}>
+        <InformationCircleIcon className="w-4 h-4 mb-1 text-gray-500 hover:text-gray-400 cursor-help" />
+      </Tooltip>
+    )
+  }
+)

From 21e6033283decf125ce9a6dc67e51d92ccf45005 Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Thu, 14 Apr 2022 17:32:45 +0700
Subject: [PATCH 3/7] feat(dapp/ui): improve input label component

---
 apps/dapp/components/input/InputLabel.tsx | 30 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/dapp/components/input/InputLabel.tsx b/apps/dapp/components/input/InputLabel.tsx
index 69f172eec..c3b1094c7 100644
--- a/apps/dapp/components/input/InputLabel.tsx
+++ b/apps/dapp/components/input/InputLabel.tsx
@@ -1,19 +1,31 @@
-export function InputLabel({
-  className,
-  mono,
-  name,
-}: {
-  className?: string
+import { ComponentProps, ReactNode } from 'react'
+
+import clsx from 'clsx'
+
+import { TooltipIcon } from '@components/TooltipsDisplay/TooltipIcon'
+
+export type InputLabelProps = Omit<ComponentProps<'span'>, 'children'> & {
   mono?: boolean
   name: string
-}) {
+  tooltip?: ReactNode
+  _outer?: Omit<ComponentProps<'label'>, 'children'>
+}
+
+export function InputLabel(props: InputLabelProps) {
+  const { className, mono, name, tooltip, _outer, ...rest } = props
+
   return (
-    <label className="flex">
+    <label
+      {..._outer}
+      className={clsx('flex items-center space-x-1', _outer?.className)}
+    >
       <span
-        className={`caption-text ml-1 ${mono ? 'font-mono' : ''} ${className}`}
+        className={clsx('caption-text', { 'font-mono': mono }, className)}
+        {...rest}
       >
         {name}
       </span>
+      {tooltip && <TooltipIcon label={tooltip} />}
     </label>
   )
 }

From 71742bd09cd7f521b832b0d71c3e81abf58e604c Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Thu, 14 Apr 2022 17:42:29 +0700
Subject: [PATCH 4/7] feat(dapp/pages): wip create dao field tooltips

---
 apps/dapp/pages/dao/create.tsx | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/dapp/pages/dao/create.tsx b/apps/dapp/pages/dao/create.tsx
index 0259689d0..0d8a0446b 100644
--- a/apps/dapp/pages/dao/create.tsx
+++ b/apps/dapp/pages/dao/create.tsx
@@ -277,7 +277,12 @@ const CreateDao: NextPage = () => {
             />
 
             <div className="flex flex-col justify-center items-center mx-auto mt-4 max-w-prose rounded-lg">
-              <InputLabel className="pb-1" mono name="DAO Name" />
+              <InputLabel
+                className="pb-1"
+                mono
+                name="DAO Name"
+                tooltip={daoCreateTooltipsGetter('name').content}
+              />
               <TextInput
                 className="font-bold text-center"
                 error={errors.name}
@@ -291,7 +296,11 @@ const CreateDao: NextPage = () => {
 
           <div className="px-8">
             <div className="flex flex-col gap-1">
-              <InputLabel mono name="Description" />
+              <InputLabel
+                mono
+                name="Description"
+                tooltip={daoCreateTooltipsGetter('description').content}
+              />
               <TextareaInput
                 error={errors.description}
                 label="description"
@@ -363,7 +372,11 @@ const CreateDao: NextPage = () => {
                     </div>
                   </div>
                   <div className="flex flex-col col-span-1 gap-1">
-                    <InputLabel mono name="Symbol" />
+                    <InputLabel
+                      mono
+                      name="Symbol"
+                      tooltip={daoCreateTooltipsGetter('tokenSymbol').content}
+                    />
                     <TextInput
                       error={errors.tokenSymbol}
                       label="tokenSymbol"
@@ -373,7 +386,11 @@ const CreateDao: NextPage = () => {
                     <InputErrorMessage error={errors.tokenSymbol} />
                   </div>
                   <div className="flex flex-col col-span-2 gap-1">
-                    <InputLabel mono name="Name" />
+                    <InputLabel
+                      mono
+                      name="Name"
+                      tooltip={daoCreateTooltipsGetter('tokenName').content}
+                    />
                     <TextInput
                       error={errors.tokenName}
                       label="tokenName"
@@ -387,7 +404,13 @@ const CreateDao: NextPage = () => {
               {tokenMode === TokenMode.UseExisting && (
                 <div className="flex gap-3">
                   <div className="flex basis-1/4 items-center">
-                    <InputLabel mono name="Existing token address" />
+                    <InputLabel
+                      mono
+                      name="Existing token address"
+                      tooltip={
+                        daoCreateTooltipsGetter('existingTokenAddress').content
+                      }
+                    />
                   </div>
                   <div className="flex basis-3/4 flex-col">
                     <AddressInput

From 671fe3cb0c0297215bc1534ff94380b0c1201364 Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Thu, 14 Apr 2022 17:52:18 +0700
Subject: [PATCH 5/7] feat(dapp/ui): tidy image selector and add tooltip

---
 apps/dapp/components/input/ImageSelector.tsx | 82 +++++++++++---------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/apps/dapp/components/input/ImageSelector.tsx b/apps/dapp/components/input/ImageSelector.tsx
index 27c6984b5..04ecfc6fc 100644
--- a/apps/dapp/components/input/ImageSelector.tsx
+++ b/apps/dapp/components/input/ImageSelector.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 
 import { PlusIcon, XIcon } from '@heroicons/react/outline'
+import clsx from 'clsx'
 import {
   FieldError,
   FieldPathValue,
@@ -12,32 +13,38 @@ import { Button } from 'ui'
 
 import SvgAirplane from '@components/icons/Airplane'
 import { Modal } from '@components/Modal'
+import { daoCreateTooltipsGetter } from '@components/TooltipsDisplay/daoCreate'
 
 import { InputErrorMessage } from './InputErrorMessage'
 import { InputLabel } from './InputLabel'
 import { TextInput } from './TextInput'
 
-export function ImageSelectorModal<
-  FieldValues,
-  FieldName extends Path<FieldValues>
->({
-  label,
-  register,
-  error,
-  validation,
-  imageUrl,
-  onClose,
-}: {
+export type ImageSelectorModalProps<
+  FieldName extends Path<FieldValues>,
+  FieldValues
+> = {
   label: FieldName
   register: UseFormRegister<FieldValues>
   validation?: Validate<FieldPathValue<FieldValues, FieldName>>[]
   error?: FieldError
   imageUrl: string
   onClose: () => void
-}) {
+}
+
+export function ImageSelectorModal<
+  FieldValues,
+  FieldName extends Path<FieldValues>
+>(props: ImageSelectorModalProps<FieldName, FieldValues>) {
+  const { label, register, error, validation, imageUrl, onClose } = props
+
   return (
     <Modal>
-      <div className="flex relative flex-col gap-3 items-center p-6 max-w-md h-min bg-white rounded-lg border border-focus">
+      <div
+        className={clsx(
+          'flex relative flex-col gap-3 items-center p-6 max-w-md h-min bg-white',
+          'rounded-lg border border-focus'
+        )}
+      >
         <button
           className="absolute top-2 right-2 p-1 hover:bg-secondary rounded-full transition"
           onClick={onClose}
@@ -49,12 +56,14 @@ export function ImageSelectorModal<
           aria-label="DAO's Custom Logo"
           className="w-[95px] h-[95px] bg-center bg-cover rounded-full border border-inactive"
           role="img"
-          style={{
-            backgroundImage: `url(${imageUrl})`,
-          }}
-        ></div>
+          style={{ backgroundImage: `url(${imageUrl})` }}
+        />
         <div className="flex flex-col gap-1">
-          <InputLabel mono name="Image URL" />
+          <InputLabel
+            mono
+            name="Image URL"
+            tooltip={daoCreateTooltipsGetter(label).content}
+          />
           <TextInput
             error={error}
             label={label}
@@ -73,38 +82,39 @@ export function ImageSelectorModal<
   )
 }
 
-export function ImageSelector<
-  FieldValues,
-  FieldName extends Path<FieldValues>
->({
-  label,
-  register,
-  error,
-  validation,
-  imageUrl,
-}: {
+export type ImageSelectorProps<
+  FieldName extends Path<FieldValues>,
+  FieldValues
+> = {
   label: FieldName
   register: UseFormRegister<FieldValues>
   validation?: Validate<FieldPathValue<FieldValues, FieldName>>[]
   error?: FieldError
   imageUrl: string
-}) {
+}
+
+export function ImageSelector<FieldValues, FieldName extends Path<FieldValues>>(
+  props: ImageSelectorProps<FieldName, FieldValues>
+) {
+  const { label, register, error, validation, imageUrl } = props
+
   const [showImageSelect, setShowImageSelect] = useState(false)
   return (
     <>
       <button
-        className={`w-24 h-24 rounded-full border mt-12 mx-auto border-inactive flex items-center justify-center hover:ring transition bg-center bg-cover ${
-          error ? 'ring ring-error' : ''
-        }`}
+        className={clsx(
+          'flex justify-center items-center mx-auto mt-12 w-24 h-24 bg-center bg-cover',
+          'rounded-full border border-inactive',
+          'hover:ring transition',
+          { 'ring ring-error': error }
+        )}
         onClick={() => setShowImageSelect(true)}
-        style={{
-          backgroundImage: `url(${imageUrl})`,
-        }}
+        style={{ backgroundImage: `url(${imageUrl})` }}
         type="button"
       >
         <PlusIcon className="w-4" />
       </button>
-      <div className={`${showImageSelect ? '' : 'hidden'}`}>
+      <div className={clsx({ hidden: !showImageSelect })}>
         <ImageSelectorModal
           error={error}
           imageUrl={imageUrl}

From 65bd3f0995d490ac903a9f0a25cac7e5e75032cf Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Fri, 15 Apr 2022 05:23:32 +0700
Subject: [PATCH 6/7] feat(ui): add tooltip border

---
 packages/ui/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index 9767954a4..c6e13a31b 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -11,7 +11,7 @@
   pointer-events: none;
   position: absolute;
   white-space: nowrap;
-  @apply animate-slide-up-fade bg-white px-2 py-1 rounded shadow text-xs z-50;
+  @apply animate-slide-up-fade bg-white border border-neutral-700 px-2 py-1 rounded shadow shadow-neutral-900 text-xs z-50;
 }
 
 html {

From d9420997be37da2eee6f977581337eb576a5355a Mon Sep 17 00:00:00 2001
From: Griko Nibras <git@griko.id>
Date: Fri, 15 Apr 2022 05:26:21 +0700
Subject: [PATCH 7/7] chore(dapp): format and lint

---
 apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx
index 4cf69cce1..82abc7c03 100644
--- a/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx
+++ b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx
@@ -9,7 +9,7 @@ export const TooltipIcon = forwardRef<HTMLDivElement, TooltipIconProps>(
   function TooltipIcon(props, ref) {
     return (
       <Tooltip {...props} ref={ref}>
-        <InformationCircleIcon className="w-4 h-4 mb-1 text-gray-500 hover:text-gray-400 cursor-help" />
+        <InformationCircleIcon className="mb-1 w-4 h-4 text-gray-500 hover:text-gray-400 cursor-help" />
       </Tooltip>
     )
   }