Skip to content

Commit abf4132

Browse files
aahna-ashinaaahna-ashina
authored
Merge pull request #34 from sector-3/explore-daos
Explore DAOs (#5)
2 parents 6ec9b52 + b86eca7 commit abf4132

File tree

7 files changed

+299
-5
lines changed

7 files changed

+299
-5
lines changed

‎abis/Sector3DAOFactory.json‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
{
2+
"abi": [{
3+
"inputs": [],
4+
"stateMutability": "nonpayable",
5+
"type": "constructor"
6+
},
7+
{
8+
"inputs": [{
9+
"internalType": "uint256",
10+
"name": "",
11+
"type": "uint256"
12+
}],
13+
"name": "daos",
14+
"outputs": [{
15+
"internalType": "address",
16+
"name": "",
17+
"type": "address"
18+
}],
19+
"stateMutability": "view",
20+
"type": "function"
21+
},
22+
{
23+
"inputs": [{
24+
"internalType": "string",
25+
"name": "name",
26+
"type": "string"
27+
},
28+
{
29+
"internalType": "string",
30+
"name": "purpose",
31+
"type": "string"
32+
},
33+
{
34+
"internalType": "address",
35+
"name": "token",
36+
"type": "address"
37+
}
38+
],
39+
"name": "deployDAO",
40+
"outputs": [{
41+
"internalType": "address",
42+
"name": "",
43+
"type": "address"
44+
}],
45+
"stateMutability": "nonpayable",
46+
"type": "function"
47+
},
48+
{
49+
"inputs": [],
50+
"name": "getDAOs",
51+
"outputs": [{
52+
"internalType": "address[]",
53+
"name": "",
54+
"type": "address[]"
55+
}],
56+
"stateMutability": "view",
57+
"type": "function"
58+
},
59+
{
60+
"inputs": [],
61+
"name": "owner",
62+
"outputs": [{
63+
"internalType": "address",
64+
"name": "",
65+
"type": "address"
66+
}],
67+
"stateMutability": "view",
68+
"type": "function"
69+
},
70+
{
71+
"inputs": [{
72+
"internalType": "address",
73+
"name": "dao",
74+
"type": "address"
75+
}],
76+
"name": "removeDAO",
77+
"outputs": [],
78+
"stateMutability": "nonpayable",
79+
"type": "function"
80+
},
81+
{
82+
"inputs": [{
83+
"internalType": "address",
84+
"name": "owner_",
85+
"type": "address"
86+
}],
87+
"name": "setOwner",
88+
"outputs": [],
89+
"stateMutability": "nonpayable",
90+
"type": "function"
91+
}
92+
]
93+
}

‎public/token-logos/0x333A4823466879eeF910A04D473505da62142069.png‎

121 KB
Loading

‎src/components/v0/DAO.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,13 @@ export default function DAO({ address }: any) {
5959
let tokenLogoPath = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${dao.token}/logo.png`
6060

6161
const customTokenLogos = [
62-
'0x610210AA5D51bf26CBce146A5992D2FEeBc27dB1' // Sector#3
62+
'0x610210AA5D51bf26CBce146A5992D2FEeBc27dB1', // Sector#3
63+
'0x333A4823466879eeF910A04D473505da62142069' // Nation3
6364
]
6465
if (customTokenLogos.includes(dao.token)) {
6566
tokenLogoPath = `/token-logos/${dao.token}.png`
6667
}
68+
console.log('tokenLogoPath:', tokenLogoPath)
6769

6870
return tokenLogoPath
6971
}
@@ -75,7 +77,7 @@ export default function DAO({ address }: any) {
7577
alt="DAO token logo"
7678
width={100}
7779
height={100}
78-
className='rounded-full'
80+
className='rounded-full bg-gray-800'
7981
src={`/token-logos/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2.png`}
8082
loader={tokenLogoLoader}
8183
/>

‎src/pages/daos.tsx‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import Head from 'next/head'
2+
import { chainUtils } from '@/utils/ChainUtils'
3+
import { configureChains, createClient, useContractRead, useContractReads, WagmiConfig } from 'wagmi'
4+
import { publicProvider } from '@wagmi/core/providers/public'
5+
import Sector3DAOFactory from '../../abis/Sector3DAOFactory.json'
6+
import Sector3DAO from '../../abis/v0/Sector3DAO.json'
7+
import { config } from '@/utils/Config'
8+
import { useIsMounted } from '@/hooks/useIsMounted'
9+
import Link from 'next/link'
10+
import Image from 'next/image'
11+
12+
const { provider } = configureChains(
13+
[chainUtils.chain],
14+
[publicProvider()]
15+
)
16+
17+
const client = createClient({
18+
autoConnect: true,
19+
provider
20+
})
21+
22+
export default function DAOsPage() {
23+
console.log('DAOsPage')
24+
25+
return (
26+
<WagmiConfig client={client}>
27+
<Head>
28+
<title>Sector#3</title>
29+
<meta name="description" content="Do DAOs Dream of Electric Sheep? ⚡️🐑" />
30+
<meta name="viewport" content="width=device-width, initial-scale=1" />
31+
<link rel="icon" href="/favicon.ico" />
32+
</Head>
33+
34+
<video id="background-video" autoPlay loop muted poster="https://pbs.twimg.com/tweet_video_thumb/FpM9CcwagAIiRD7.jpg">
35+
{/* <source src="https://video.twimg.com/tweet_video/FpM9CcwagAIiRD7.mp4" type="video/mp4" /> */}
36+
</video>
37+
38+
<main className='p-2 sm:p-4 md:p-8 lg:p-16 xl:p-32 2xl:p-64'>
39+
40+
<div id='content'>
41+
<div className='container'>
42+
<Link href={`${config.etherscanDomain}/address/${config.daoFactoryAddress}#writeContract#F1`} target='_blank'>
43+
<button
44+
className='disabled:text-gray-600 disabled:bg-gray-400 float-right px-4 py-2 text-sm font-semibold text-indigo-200 bg-indigo-800 hover:bg-indigo-700 rounded-xl'
45+
>
46+
🚀 Deploy a DAO
47+
</button>
48+
</Link>
49+
50+
<h2 className="text-2xl text-gray-400">Explore DAOs</h2>
51+
</div>
52+
<DAOContainer />
53+
</div>
54+
</main>
55+
</WagmiConfig>
56+
)
57+
}
58+
59+
function DAOContainer() {
60+
console.log('DAOContainer')
61+
62+
const daoFactoryAddress: any = config.daoFactoryAddress;
63+
console.log('daoFactoryAddress:', daoFactoryAddress)
64+
65+
const { data, isError, isLoading } = useContractRead({
66+
address: daoFactoryAddress,
67+
abi: Sector3DAOFactory.abi,
68+
functionName: 'getDAOs'
69+
})
70+
const daoAddresses = data as []
71+
console.log('daoAddresses:', daoAddresses)
72+
73+
if (!useIsMounted() || isLoading) {
74+
return (
75+
<div className="container mt-4 flex items-center text-gray-400">
76+
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent border-gray-400 align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
77+
&nbsp;Loading...
78+
</div>
79+
)
80+
} else if (daoAddresses.length == 0) {
81+
return (
82+
<div className='container mt-4'>
83+
No data
84+
</div>
85+
)
86+
} else {
87+
return (
88+
<div className='container mt-4 grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4'>
89+
{
90+
daoAddresses.slice(0).reverse().map((daoAddress: any) => (
91+
<DAOPreview key={daoAddress} address={daoAddress} />
92+
))
93+
}
94+
</div>
95+
)
96+
}
97+
}
98+
99+
function DAOPreview({ address }: any) {
100+
console.log('DAOPreview')
101+
102+
console.log('address:', address)
103+
104+
const daoContract = {
105+
address: address,
106+
abi: Sector3DAO.abi
107+
}
108+
const { data, isError, isLoading } = useContractReads({
109+
contracts: [
110+
{
111+
...daoContract,
112+
functionName: 'name'
113+
},
114+
{
115+
...daoContract,
116+
functionName: 'purpose'
117+
},
118+
{
119+
...daoContract,
120+
functionName: 'token'
121+
},
122+
{
123+
...daoContract,
124+
functionName: 'version'
125+
}
126+
]
127+
})
128+
console.log('data:', data)
129+
console.log('isError:', isError)
130+
console.log('isLoading:', isLoading)
131+
132+
let dao: any = null
133+
if (data != undefined) {
134+
const name = data[0]
135+
const purpose = data[1]
136+
const token = data[2]
137+
const version = data[3]
138+
dao = {
139+
address: address,
140+
protocolVersion: version,
141+
name: name,
142+
purpose: purpose,
143+
token: token
144+
}
145+
}
146+
console.log('dao:', dao)
147+
148+
if (!useIsMounted() || isLoading) {
149+
return (
150+
<div className='p-6 bg-black rounded-xl border-4 border-black border-l-gray-700 border-r-gray-700'>
151+
<div className="container mt-4 flex items-center text-gray-400">
152+
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent border-gray-400 align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
153+
&nbsp;Loading...
154+
</div>
155+
</div>
156+
)
157+
} else {
158+
const tokenLogoLoader = () => {
159+
let tokenLogoPath = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${dao.token}/logo.png`
160+
161+
const customTokenLogos = [
162+
'0x610210AA5D51bf26CBce146A5992D2FEeBc27dB1', // Sector#3 DAO
163+
'0x333A4823466879eeF910A04D473505da62142069' // Nation3
164+
]
165+
if (customTokenLogos.includes(dao.token)) {
166+
tokenLogoPath = `/token-logos/${dao.token}.png`
167+
}
168+
console.log('tokenLogoPath:', tokenLogoPath)
169+
170+
return tokenLogoPath
171+
}
172+
173+
return (
174+
// <Link href={`/v${dao.protocolVersion}/daos/${dao.address}`}>
175+
<Link href={`/v0/daos/${dao.address}`}>
176+
<div className='p-6 bg-black rounded-xl border-4 border-black hover:border-gray-700 border-l-gray-700 border-r-gray-700'>
177+
<div className='flex'>
178+
<div className='w-1/6'>
179+
<Image
180+
alt="DAO token logo"
181+
width={100}
182+
height={100}
183+
className='rounded-full bg-gray-800'
184+
src={`/token-logos/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2.png`}
185+
loader={tokenLogoLoader}
186+
/>
187+
</div>
188+
<div className='w-5/6 pl-6'>
189+
<h2 className='text-xl font-bold'>{dao.name}</h2>
190+
<p className='text-gray-400 pb-6 md:pb-0'>Purpose: {dao.purpose}</p>
191+
</div>
192+
</div>
193+
</div>
194+
</Link>
195+
)
196+
}
197+
}

‎src/pages/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Image from 'next/image'
33
import { PT_Mono } from '@next/font/google'
44
import styles from '@/styles/Home.module.css'
55
import Link from 'next/link'
6+
import { config } from '@/utils/Config'
67

78
const font = PT_Mono({ subsets: ['latin'], weight: '400' })
89

@@ -59,7 +60,7 @@ export default function Home() {
5960
</Link>
6061

6162
<Link
62-
href="/new-dao"
63+
href={`${config.etherscanDomain}/address/${config.daoFactoryAddress}#writeContract#F1`}
6364
className={styles.card}
6465
>
6566
<h2 className="text-2xl">

‎src/pages/v0/daos/[address].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ function Priorities({ daoAddress, priorityCount }: any) {
220220

221221
<div className='container'>
222222
{
223-
priorityAddresses.map((priorityAddress: any) => (
223+
priorityAddresses.slice(0).reverse().map((priorityAddress: any) => (
224224
<div key={priorityAddress}>
225225
<Priority priorityAddress={priorityAddress} />
226226
</div>

‎src/utils/Config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const chain = process.env['NEXT_PUBLIC_CHAIN'] || 'localhost'
22
export const config = {
33
chain: chain,
4-
etherscanDomain: (chain == 'mainnet') ? 'https://etherscan.io' : `https://${chain}.etherscan.io`
4+
etherscanDomain: (chain == 'mainnet') ? 'https://etherscan.io' : `https://${chain}.etherscan.io`,
5+
daoFactoryAddress: (chain == 'mainnet') ? '<address>' : '0xE6dc5d73B7E3764C42A4A71C408E4F8246f034f7'
56
}
67
console.log('config:', config)

0 commit comments

Comments
 (0)