generated from scaffold-eth/scaffold-eth-2
-
Notifications
You must be signed in to change notification settings - Fork 1
/
List.tsx
131 lines (116 loc) · 4.39 KB
/
List.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { useEffect, useState } from "react";
import { ApolloClient, InMemoryCache, createHttpLink, gql } from "@apollo/client";
import { SchemaEncoder } from "@ethereum-attestation-service/eas-sdk";
import { useInterval } from "usehooks-ts";
import { Address } from "~~/components/scaffold-eth";
import scaffoldConfig from "~~/scaffold.config";
type TAttestation = {
id: string;
attester: string;
data: string;
timeCreated: number;
};
export const List = () => {
const [isLoading, setIsLoading] = useState(true);
const [attestations, setAttestations] = useState<TAttestation[]>([]);
const schemaEncoder = new SchemaEncoder("address BuidlGuidlMember");
const graphUri = "https://optimism.easscan.org/graphql";
const httpLink = createHttpLink({
uri: graphUri,
});
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
});
const getAttestationsGraphQl = gql`
query Attestation($where: AttestationWhereInput) {
attestations(where: $where) {
attester
data
timeCreated
id
}
}
`;
const fetchAttestations = async () => {
console.log("attests");
const newAttestations = await apolloClient.query({
query: getAttestationsGraphQl,
variables: {
where: { schemaId: { equals: "0x3f28accb30b3437613eb87309d89b85e2f9f515616b603f5af8998e3529edb27" } },
},
});
setIsLoading(false);
console.log("newAttestations: ", newAttestations);
setAttestations(newAttestations.data.attestations);
};
useEffect(() => {
(async () => {
await fetchAttestations();
})();
}, []);
useInterval(async () => {
await fetchAttestations();
}, scaffoldConfig.pollingInterval);
return (
<div className="list__container flex flex-col justify-center items-center bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] py-10 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div className="flex justify-center">
<table className="table table-zebra w-full shadow-lg">
<thead>
<tr>
<th className="bg-primary text-white p-1.5 sml:p-4">UID</th>
<th className="bg-primary text-white p-1.5 sml:p-4">Attester</th>
<th className="bg-primary text-white p-1.5 sml:p-4 address__container-text">BuidlGuidl Member</th>
<th className="bg-primary text-white p-1.5 sml:p-4">Attested at</th>
</tr>
</thead>
{isLoading ? (
<tbody>
{[...Array(10)].map((_, rowIndex) => (
<tr key={rowIndex} className="bg-base-200 hover:bg-base-300 transition-colors duration-200 h-12">
{[...Array(4)].map((_, colIndex) => (
<td className="w-1/4 p-1 sml:p-4" key={colIndex}>
<div className="h-2 bg-gray-200 rounded-full animate-pulse"></div>
</td>
))}
</tr>
))}
</tbody>
) : (
<tbody>
{attestations.map(attestation => {
return (
<tr key={attestation.id} className="hover text-sm">
<td className="w-1/4 p-1 sml:p-4">
<a
href={`https://optimism.easscan.org/attestation/view/${attestation.id}`}
title={attestation.id}
target="_blank"
rel="noreferrer"
className="flex"
>
<span className="list__container--first_row-data">{attestation.id.slice(0, 20)}</span>...
</a>
</td>
<td className="w-1/4 p-1 sml:p-4">
<Address address={attestation.attester} size="sm" />
</td>
<td className="w-1/4 p-1 sml:p-4">
<Address
address={schemaEncoder.decodeData(attestation.data)[0].value.value.toString()}
size="sm"
/>
</td>
<td className="text-right list__container--last_row-data p-1 sml:p-4">
{new Date(attestation.timeCreated * 1000).toLocaleString()}
</td>
</tr>
);
})}
</tbody>
)}
</table>
</div>
</div>
);
};