kalidao · nerderlyne · Nov 18, 2022
diff --git a/components/dao-dashboard/layout/index.tsx b/components/dao-dashboard/layout/index.tsx
@@ -13,6 +13,7 @@ import Treasury from '@components/dao-dashboard/layout/Treasury'
 import Header from '@components/layout/Header'
 import Nav from '@components/dao-dashboard/layout/Nav'
 import Swap from '@components/dao-dashboard/layout/Swap'
+import Layout from '@components/layout'
 
 type Props = {
   title: string
@@ -26,13 +27,7 @@ const DashboardLayout = ({ title, content, children }: Props) => {
   const heading = `Kali | ${title}}`
 
   return (
-    <Box className={layout}>
-      <Head>
-        <title>{heading}</title>
-        <meta name="description" content={content} />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Header />
+    <Layout heading={heading} content={content}>
       <Box className={container}>
         <Stack>
           <Stack
@@ -53,7 +48,7 @@ const DashboardLayout = ({ title, content, children }: Props) => {
         </Stack>
       </Box>
       <Footer />
-    </Box>
+    </Layout>
   )
 }
 

diff --git a/components/home/DaoCard.tsx b/components/home/DaoCard.tsx
@@ -38,7 +38,7 @@ export default function DaoCard({ dao, chain }: Props) {
       prefix={<Avatar label="DAO Avatar" address={dao?.['id']} placeholder />}
       loading={loading}
     >
-      <Stat label="Members" value={dao?.['members'].length} />
+      <Stat label="Members" value={dao?.['members']?.length} />
     </ButtonCard>
   )
 }
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
@@ -1,6 +1,21 @@
-import Header from './Header'
 import Head from 'next/head'
-import { Box } from '@kalidao/reality'
+import { useAccount } from 'wagmi'
+import { Chat } from "@pushprotocol/uiweb";
+import { AddressZero } from '@ethersproject/constants';
+import { useRouter } from 'next/router'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Box, Button, IconGrid, Stack } from '@kalidao/reality'
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { layout, dashboardHeader, container } from '@components/dao-dashboard/layout/layout.css'
+import Footer from '@components/dao-dashboard/layout/Footer'
+import Members from '@components/dao-dashboard/layout/Members'
+import Profile from '@components/dao-dashboard/layout/Profile'
+import Wrappr from '@components/dao-dashboard/layout/Wrappr'
+import Treasury from '@components/dao-dashboard/layout/Treasury'
+import Header from '@components/layout/Header'
+import Nav from '@components/dao-dashboard/layout/Nav'
+import Swap from '@components/dao-dashboard/layout/Swap'
 
 type LayoutProps = {
   heading?: string
@@ -9,24 +24,32 @@ type LayoutProps = {
 }
 
 export default function Layout({ heading, content, children }: LayoutProps) {
-  const title = 'KALI - ' + heading
-
+  const { address } = useAccount()
   return (
-    <div>
-      <Head>
-        <title>{title}</title>
-        <meta property="og:title" content={title} key="title" />
+    <Box className={layout}>
+    <Head>
+    <title>{heading}</title>
+        <meta property="og:title" content={heading} key="title" />
         <meta property="og:description" name="description" content={content} key="description" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" key="icon-apple" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" key="icon-32" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" key="icon-16" />
         <link rel="manifest" href="/site.webmanifest" key="webmanifest" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
-      </Head>
-      <Box width="viewWidth">
-        <Header heading={heading} />
+    </Head>
+    <Header />
+    <Box className={container}>
         {children}
-      </Box>
-    </div>
+    </Box>
+    <Footer />
+    {address && <Chat
+        account={address ? address : AddressZero} //user address
+        supportAddress="0xC316f415096223561e2077c30A26043499d579aD" //support address
+        apiKey={process.env.NEXT_PUBLIC_PUSH_SUPPORT_API_KEY}
+        env="staging"
+        primaryColor={"#5842c3"}
+        modalTitle="Support"
+      />}
+  </Box>
   )
 }
diff --git a/components/user-daos/index.tsx b/components/user-daos/index.tsx
@@ -1,69 +1,55 @@
 import React, { useState, useEffect } from 'react'
-import { Flex } from '../../styles/elements'
 import { useNetwork } from 'wagmi'
 import { GRAPH_URL } from '@graph/index'
 import DaoCard from '../home/DaoCard'
-import { Text } from '@kalidao/reality'
+import { Card, Avatar, Stack, Text, Tag } from '@kalidao/reality'
+import { useQuery } from '@tanstack/react-query'
+import { getLensProfile } from '@graph/queries/getLensProfile'
+import { useGetAllUserDaos } from '@graph/queries/getAllUserDaos'
 
 type Props = {
   address: string
 }
 
 export default function UserDAOs({ address }: Props) {
-  const { chain: activeChain } = useNetwork()
-  const [daos, setDaos] = useState([])
-
-  useEffect(() => {
-    fetchData()
-
-    async function fetchData() {
-      if (activeChain) {
-        try {
-          const result = await fetch(GRAPH_URL[activeChain.id], {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              query: `query {
-                members(where: {
-                  address: "${address.toLowerCase()}"
-                }) {
-                  dao {
-                    id
-                    token {
-                      name
-                    }
-                  }
-                }
-              }`,
-            }),
-          }).then((res) => res.json())
-
-          console.log('result', result)
-          setDaos(result['data']['members'])
-        } catch (e) {
-          return new Error('Not a valid url.')
-        }
-      }
-    }
-  }, [activeChain, address])
+  // const [daos, setDaos] = useState([])
+  const { data: lensProfile} = useQuery(["lensProfile", address], () => getLensProfile(address), {
+    enabled: !!address,
+  })
+  const { data, error, isLoading } = useGetAllUserDaos(address)
+  console.log('daos', data, isLoading, error)
 
   return (
-    <>
-      {daos != undefined ? (
-        <Flex dir="col" css={{ gap: '1rem', position: 'absolute', left: '8rem', top: '5rem', margin: '1rem' }}>
+    <Stack direction={"horizontal"}>
+      <Card padding="6">
+      <Stack direction={"horizontal"}>
+        <Avatar size="24" label={`${address} profile pic`} src={lensProfile?.picture?.original?.url}   />
+        <pre style={{
+          color: "white"
+        }}>{JSON.stringify(lensProfile)}</pre>
+        <Stack direction={"vertical"} align="center">
+          <Text size="headingOne">{lensProfile?.name}</Text>
+          <Tag>@{lensProfile?.handle}</Tag>
+          <Text>{lensProfile?.bio}</Text>
+        </Stack>
+
+      </Stack>
+      </Card>
+      {/* {daos != undefined ? (
+        <Stack>
           {daos.length > 1 ? (
             <Text> They are are in {daos.length} DAOs </Text>
           ) : daos.length === 1 ? (
             <Text>They are in {daos.length} DAO</Text>
           ) : (
             <Text>They are not in any DAO!</Text>
           )}
-          <div>
+          <Stack direction={"horizontal"} wrap>
             {daos &&
               daos.map((dao) => <DaoCard key={dao['dao']['id']} dao={dao['dao']} chain={Number(activeChain?.id)} />)}
-          </div>
-        </Flex>
-      ) : null}
-    </>
+          </Stack>
+        </Stack>
+      ) : null} */}
+    </Stack>
   )
 }
diff --git a/graph/queries/getAllUserDaos.ts b/graph/queries/getAllUserDaos.ts
@@ -0,0 +1,49 @@
+import { GRAPH_URL } from '../url'
+import { useQuery } from '@tanstack/react-query'
+
+export const getAllUserDaos = async (address: string) => {
+  const query = address.toLowerCase()
+  try {
+    const daos = []
+    for (const chainId in GRAPH_URL) {
+        console.log('dao', chainId, GRAPH_URL, GRAPH_URL[chainId], address)
+        const res = await fetch(GRAPH_URL[chainId], {
+            method: 'POST',
+            body: JSON.stringify({
+              query: `query {
+                  members(where: { address: "${query}" }) {
+                      dao {
+                        id
+                        token {
+                          name
+                          symbol
+                        }
+                        members {
+                          id
+                        }
+                      }
+                    }
+                  }`,
+            }),
+          })
+        const data = await res.json()
+        if (res.ok) {
+            daos.push({
+                chainId,
+                daos: data?.data?.members
+            })
+        }
+    }
+    return daos
+  } catch (e) {
+    console.error('Error fetching user daos.')
+    return e
+  }
+}
+
+export function useGetAllUserDaos(address: string) {
+  return useQuery(['getAllUserDaos', address], async () => {
+    const data = await getAllUserDaos(address)
+    return data
+  })
+}
diff --git a/graph/queries/getLensProfile.ts b/graph/queries/getLensProfile.ts
@@ -0,0 +1,112 @@
+export const getLensProfile = async (address: string) => {
+    // curl 'https://api.lens.dev/' -H 'Accept-Encoding: gzip, deflate, br' -H 'Content-Type: application/json' -H 'Accept: application/json' -H 'Connection: keep-alive' -H 'DNT: 1' -H 'Origin: https://api.lens.dev' --data-binary '{"query":"query Profiles {\n  profiles(request: { ownedBy: [\"0xCB0592589602B841BE035e1e64C2A5b1Ef006aa2\"], limit: 10 }) {\n    items {\n      id\n      name\n      bio\n      attributes {\n        displayType\n        traitType\n        key\n        value\n      }\n      followNftAddress\n      metadata\n      isDefault\n      picture {\n        ... on NftImage {\n          contractAddress\n          tokenId\n          uri\n          verified\n        }\n        ... on MediaSet {\n          original {\n            url\n            mimeType\n          }\n        }\n        __typename\n      }\n      handle\n      coverPicture {\n        ... on NftImage {\n          contractAddress\n          tokenId\n          uri\n          verified\n        }\n        ... on MediaSet {\n          original {\n            url\n            mimeType\n          }\n        }\n        __typename\n      }\n      ownedBy\n      dispatcher {\n        address\n        canUseRelay\n      }\n      stats {\n        totalFollowers\n        totalFollowing\n        totalPosts\n        totalComments\n        totalMirrors\n        totalPublications\n        totalCollects\n      }\n      followModule {\n        ... on FeeFollowModuleSettings {\n          type\n          amount {\n            asset {\n              symbol\n              name\n              decimals\n              address\n            }\n            value\n          }\n          recipient\n        }\n        ... on ProfileFollowModuleSettings {\n         type\n        }\n        ... on RevertFollowModuleSettings {\n         type\n        }\n      }\n    }\n    pageInfo {\n      prev\n      next\n      totalCount\n    }\n  }\n}"}' --compressed
+    // convert curl request to fetch request with address as variable for ownedBy field
+    try {
+        const res = await fetch('https://api.lens.dev/', {
+            method: 'POST',
+            headers: {
+                'Accept-Encoding': 'gzip, deflate, br',
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+                Connection: 'keep-alive',
+                DNT: '1',
+                Origin: 'https://api.lens.dev',
+            },
+            body: JSON.stringify({
+                query: `query Profiles {
+        profiles(request: { ownedBy: ["${address}"], limit: 10 }) {
+            items {
+                id
+                name
+                bio
+                attributes {
+                  displayType
+                  traitType
+                  key
+                  value
+                }
+                followNftAddress
+                metadata
+                isDefault
+                picture {
+                  ... on NftImage {
+                    contractAddress
+                    tokenId
+                    uri
+                    verified
+                  }
+                  ... on MediaSet {
+                    original {
+                      url
+                      mimeType
+                    }
+                  }
+                  __typename
+                }
+                handle
+                coverPicture {
+                  ... on NftImage {
+                    contractAddress
+                    tokenId
+                    uri
+                    verified
+                  }
+                  ... on MediaSet {
+                    original {
+                      url
+                      mimeType
+                    }
+                  }
+                  __typename
+                }
+                ownedBy
+                dispatcher {
+                  address
+                  canUseRelay
+                }
+                stats {
+                  totalFollowers
+                  totalFollowing
+                  totalPosts
+                  totalComments
+                  totalMirrors
+                  totalPublications
+                  totalCollects
+                }
+                followModule {
+                  ... on FeeFollowModuleSettings {
+                    type
+                    amount {
+                      asset {
+                        symbol
+                        name
+                        decimals
+                        address
+                      }
+                      value
+                    }
+                    recipient
+                  }
+                  ... on ProfileFollowModuleSettings {
+                   type
+                  }
+                  ... on RevertFollowModuleSettings {
+                   type
+                  }
+                }
+              }
+              pageInfo {
+                prev
+                next
+                totalCount
+              }
+            }
+          }`})
+        })
+
+        const data = await res.json()
+        return data?.data?.profiles?.items?.[0]
+      } catch (e) {
+        return e
+      }
+}
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@fleekhq/fleek-storage-js": "^1.0.20",
     "@kalidao/reality": "^0.0.5",
     "@pinata/sdk": "^1.1.26",
+    "@pushprotocol/uiweb": "0.2.3",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^0.1.6",
     "@radix-ui/react-alert-dialog": "^0.1.7",
@@ -57,6 +58,7 @@
     "react-markdown": "^8.0.0",
     "react-table": "^7.8.0",
     "sib-api-v3-sdk": "^8.3.0",
+    "styled-components": "^5.3.6",
     "swr": "^1.3.0",
     "victory": "^36.5.3",
     "wagmi": "^0.6.6"