✨ add tribute

components/dao-dashboard/layout/Profile.tsx

@@ -21,6 +21,7 @@ import { getDaoInfo } from '@graph/queries'
 import { DashboardElementProps } from './types'
 import Link from 'next/link'
 import { useGetDaoMeta } from '@components/hooks/useGetDaoMeta'
+import Tribute from '../newproposal/apps/Tribute'
 
 const Profile = ({ address, chainId }: DashboardElementProps) => {
   const router = useRouter()
@@ -41,7 +42,6 @@ const Profile = ({ address, chainId }: DashboardElementProps) => {
       </Skeleton>
     )
 
-  console.log('meta', meta)
   return (
     <Card padding="6" width="full">
       <Stack
@@ -60,7 +60,7 @@ const Profile = ({ address, chainId }: DashboardElementProps) => {
               </Heading>
               <Text>{meta?.description}</Text>
               <Divider />
-              <Stack direction={'horizontal'}>
+              <Stack direction={'horizontal'} align="center">
                 {meta?.socials?.twitter && (
                   <a href={`${meta?.socials?.twitter}`} target="_blank" rel="noreferrer">
                     <IconTwitter size="5" color="foreground" />
@@ -81,6 +81,7 @@ const Profile = ({ address, chainId }: DashboardElementProps) => {
                     <IconLink size="5" color="foreground" />
                   </a>
                 )}
+                <Tribute />
               </Stack>
             </Stack>
           )}

components/dao-dashboard/layout/Treasury.tsx

@@ -79,13 +79,15 @@ const Treasury = ({ address, chainId }: DashboardElementProps) => {
               </Card>
             ))}
         </Stack>
-        <Stack direction={"horizontal"} align="center">
-        <Link href={`/daos/${chainId}/${address}/treasury`} passHref>
-          <Button shape="circle" size="small" as="a" variant="transparent">
-            <IconBookOpen />
-          </Button>
-        </Link>
-        <Text size="label" color="foregroundSecondary">{lastUpdated}</Text>
+        <Stack direction={'horizontal'} align="center">
+          <Link href={`/daos/${chainId}/${address}/treasury`} passHref>
+            <Button shape="circle" size="small" as="a" variant="transparent">
+              <IconBookOpen />
+            </Button>
+          </Link>
+          <Text size="label" color="foregroundSecondary">
+            {lastUpdated}
+          </Text>
         </Stack>
       </Box>
     </Card>

components/dao-dashboard/layout/index.tsx

@@ -8,6 +8,8 @@ import Profile from '@components/dao-dashboard/layout/Profile'
 import Treasury from '@components/dao-dashboard/layout/Treasury'
 import Header from '@components/layout/Header'
 import Nav from '@components/dao-dashboard/layout/Nav'
+import { useEffect } from 'react'
+import { useDaoStore } from '../useDaoStore'
 
 type Props = {
   title: string
@@ -19,6 +21,13 @@ const DashboardLayout = ({ title, content, children }: Props) => {
   const router = useRouter()
   const { chainId, dao } = router.query
   const heading = `Kali | ${title}`
+  const setDAO = useDaoStore((state) => state.setDao)
+
+  useEffect(() => {
+    if (chainId && dao) {
+      setDAO(dao as string, Number(chainId))
+    }
+  }, [chainId, dao, setDAO])
 
   return (
     <Box className={layout}>

components/dao-dashboard/newproposal/apps/Tribute.tsx

@@ -0,0 +1,94 @@
+import { Button, Stack, IconSparkles, Input, IconBookOpen } from '@kalidao/reality'
+import { Dialog } from '@design/Dialog'
+import { useDaoStore } from '@components/dao-dashboard/useDaoStore'
+import { useAccount, useContractRead, useContractWrite, usePrepareContractWrite } from 'wagmi'
+import { addresses } from '@constants/addresses'
+import TRIBUTE_ABI from '@abi/KaliDAOtribute.json'
+import { useState } from 'react'
+import { JSONContent } from '@tiptap/react'
+import { ethers } from 'ethers'
+import Editor from '@components/editor'
+import ChainGuard from '@components/dao-dashboard/ChainGuard'
+
+export default function Tribute() {
+  const name = useDaoStore((state) => state.name)
+  const symbol = useDaoStore((state) => state.symbol)
+  const daoAddress = useDaoStore((state) => state.address)
+  const chainId = useDaoStore((state) => state.chainId)
+  const abi = useDaoStore((state) => state.abi)
+  const tributeAddress = addresses[chainId].extensions.tribute
+  const {
+    data: status,
+    isLoading: isLoadingStatus,
+    isError: isStatusError,
+  } = useContractRead({
+    addressOrName: daoAddress,
+    contractInterface: abi,
+    chainId: chainId,
+    functionName: 'extensions',
+    args: [tributeAddress],
+  })
+  const { address, isConnected } = useAccount()
+  const [description, setDescription] = useState<JSONContent>()
+  const [amount, setAmount] = useState<string>('0')
+  const [value, setValue] = useState<string>('0')
+
+  const { config } = usePrepareContractWrite({
+    addressOrName: tributeAddress,
+    contractInterface: TRIBUTE_ABI,
+    functionName: 'submitTributeProposal',
+    chainId: chainId,
+    args: [
+      daoAddress,
+      0,
+      description,
+      [address],
+      [amount ? ethers.utils.parseEther(amount) : ethers.utils.parseEther('0')],
+      [ethers.constants.HashZero],
+      false, // nft
+      ethers.constants.AddressZero,
+      ethers.utils.parseEther('0'),
+    ],
+    overrides: {
+      value: value ? ethers.utils.parseEther(value) : ethers.utils.parseEther('0'),
+    },
+  })
+  const { write, isSuccess } = useContractWrite(config)
+
+  if (isLoadingStatus || isStatusError || Boolean(status) === false) return null
+
+  return (
+    <Dialog
+      title="✨ Tribute"
+      description={`Give a tribute to ${name}.`}
+      trigger={
+        <Button size="small" variant="secondary" tone="green" prefix={<IconSparkles />}>
+          Tribute
+        </Button>
+      }
+    >
+      <Stack>
+        <Editor label="Description" description="Why should we accept your tribute?" setContent={setDescription} />
+        <Input min="0" label="Tribute (ETH)" type="number" value={value} onChange={(e) => setValue(e.target.value)} />
+        <Input
+          min="0"
+          label={`Request (${symbol})`}
+          type="number"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+        />
+        <ChainGuard
+          fallback={
+            <Button width="full" prefix={<IconSparkles />}>
+              Give
+            </Button>
+          }
+        >
+          <Button prefix={<IconSparkles />} disabled={!write} width="full" onClick={() => write?.()}>
+            {isSuccess ? 'Success' : 'Give'}
+          </Button>
+        </ChainGuard>
+      </Stack>
+    </Dialog>
+  )
+}

components/dao-dashboard/timeline/index.tsx

@@ -15,25 +15,19 @@ import Card from './Card'
 import { useRouter } from 'next/router'
 import { ethers } from 'ethers'
 import { useGetProposals } from '@graph/queries/getProposals'
-import { useContractRead } from 'wagmi'
-import DAO_ABI from '@abi/KaliDAO.json'
+import { useDaoStore } from '../useDaoStore'
 
 export default function Timeline() {
   const router = useRouter()
-  const { dao, chainId } = router.query
-  const { data: name } = useContractRead({
-    addressOrName: dao ? (dao as string) : ethers.constants.AddressZero,
-    contractInterface: DAO_ABI,
-    functionName: 'name',
-    chainId: Number(chainId),
-  })
+  const dao = useDaoStore((state) => state.address)
+  const chainId = useDaoStore((state) => state.chainId)
+  const name = useDaoStore((state) => state.name)
+
   const { data, isLoading, error } = useGetProposals(
     chainId ? Number(chainId) : 1,
     dao ? (dao as string) : ethers.constants.AddressZero,
   )
 
-  console.log('proposals', data)
-
   const [show, setShow] = useState(2)
 
   // filtering out cancelled proposals
@@ -64,7 +58,7 @@ export default function Timeline() {
             pathname: '/daos/[chainId]/[dao]/propose',
             query: {
               dao: dao as string,
-              chainId: chainId as string,
+              chainId: chainId.toString(),
             },
           }}
           passHref

components/dao-dashboard/useDaoStore.ts

@@ -0,0 +1,31 @@
+import create from 'zustand'
+import DAO_ABI from '@abi/KaliDAO.json'
+import { getProvider } from '@utils/getProvider'
+import { ethers } from 'ethers'
+
+interface DaoStore {
+  address: string
+  name: string
+  symbol: string
+  decimals: number
+  chainId: number
+  abi: any
+  setDao: (address: string, chainId: number) => void
+}
+
+export const useDaoStore = create<DaoStore>((set) => ({
+  address: '',
+  name: '',
+  symbol: '',
+  decimals: 18,
+  chainId: 1,
+  abi: DAO_ABI,
+  setDao: async (address: string, chainId: number) => {
+    const provider = getProvider(chainId)
+    const contract = new ethers.Contract(address, DAO_ABI, provider)
+    const name = await contract.name()
+    const symbol = await contract.symbol()
+
+    set({ address, chainId, name, symbol })
+  },
+}))