From 6ebe4c44acccef0c2fede58e3cc42b0166f56476 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Mon, 18 Sep 2023 18:39:46 -0400 Subject: [PATCH 01/22] chore: add client for graphql calls/rename folder --- package.json | 3 ++ src/app/layout.tsx | 2 +- src/app/profile/page.tsx | 22 ++++++++-- src/components/Address.tsx | 1 - src/components/Dashboard.tsx | 2 +- src/components/Pool/Pool.tsx | 2 +- src/components/Registry/Profile.tsx | 42 ++++--------------- src/components/Registry/types.ts | 4 +- src/components/SelectNetwork.tsx | 2 +- yarn.lock | 63 +++++++++++++++++++++++++++++ 10 files changed, 98 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 3caabb0..2b07fb6 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,15 @@ "daisyui": "^3.7.3", "eslint": "8.48.0", "eslint-config-next": "13.4.16", + "graphql": "^16.8.0", + "graphql-request": "^6.1.0", "heroicons": "^2.0.18", "next": "13.4.16", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", "react-icons": "^4.11.0", + "swr": "^2.2.2", "tailwindcss": "3.3.3", "typescript": "5.2.2" }, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 78bead0..7890995 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import { NetworkContextProvider } from "@/Context/NetworkContext"; +import { NetworkContextProvider } from "@/context/NetworkContext"; import Navbar from "@/components/Navbar"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 065b5ef..4d5a9fb 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,6 +1,22 @@ -"use client"; import Profile from "@/components/Registry/Profile"; +import { request, gql } from "graphql-request"; -export default function ProfileHome() { - return ; +export default async function ProfileHome() { + const query = gql` + { + profiles { + profileId + anchor + name + chainId + creator + } + } + `; + const data: any = await request("http://localhost:5555/graphql", query); + const { profiles } = data; + + console.log("Pleasse work...", data); + + return ; } diff --git a/src/components/Address.tsx b/src/components/Address.tsx index c5d41ed..3c7d207 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -1,5 +1,4 @@ import { getNetworks } from "@/api/networks"; -import { Slug } from "@/types/types"; import { TbCopy, TbExternalLink } from "react-icons/tb"; export const convertAddressToShortString = (address: string) => { diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 8ec6713..a621c59 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -1,4 +1,4 @@ -import { NetworkContext } from "@/Context/NetworkContext"; +import { NetworkContext } from "@/context/NetworkContext"; import { getNetworksBySlug } from "@/api/networks"; import { useContext } from "react"; import { AddressResponsive } from "./Address"; diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index b25d46a..370cd4a 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,4 +1,4 @@ -import { PoolContext } from "@/Context/PoolContext"; +import { PoolContext } from "@/context/PoolContext"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { useContext } from "react"; import Table from "../Table"; diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index d219f3b..d66d2b6 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -1,55 +1,27 @@ +"use client"; // import { ProfileContext } from "@/Context/ProfileContext"; // import { useContext } from "react"; -import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { Address, convertBytesToShortString } from "../Address"; import { getNetworks } from "@/api/networks"; import Table from "../Table"; import { TTableData } from "@/types/types"; import { convertChainIdToNetworkName } from "@/utils"; -const ProfileContent = () => { - // Test data for UI development - const profileTestData: TProfile[] = [ - { - id: "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", - name: "Developer Profile", - chainId: 5, - sender: "0xa671616e3580D3611139834Cd34D7838e82A04cD", - }, - { - id: "0x3b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - anchor: "0x4f15B8c6F9939879Cb030D6dd935348E57109637", - name: "Developer Profile", - chainId: 42069, - sender: "0xa671616e3580D3611139834Cd34D7838e82A04cD", - }, - { - id: "0x4b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - anchor: "0x5f15B8c6F9939879Cb030D6dd935348E57109637", - name: "Developer Profile", - chainId: 58008, - sender: "0xa671616e3580D3611139834Cd34D7838e82A04cD", - }, - ]; - - // TODO: replace with useContext hook when we move to live data - const profiles = profileTestData; - // const { profiles } = useContext(ProfileContext); - +const Profile = (data: any) => { const tableData: TTableData = { name: "Profiles", description: "A list of all the profiles in the registry on all supported networks", headers: ["ID", "Anchor", "Name", "Sender", "Network"], - rows: profiles.map((profile) => { + rows: Object.values(data.data).map((profile: any) => { + console.log("profile", profile); return [ - convertBytesToShortString(profile.id), + convertBytesToShortString(profile.profileId), // eslint-disable-next-line react/jsx-key
, profile.name, // eslint-disable-next-line react/jsx-key -
, +
, convertChainIdToNetworkName(profile.chainId), ]; }), @@ -58,4 +30,4 @@ const ProfileContent = () => { return ; }; -export default ProfileContent; +export default Profile; diff --git a/src/components/Registry/types.ts b/src/components/Registry/types.ts index 7de9e52..a2dbda3 100644 --- a/src/components/Registry/types.ts +++ b/src/components/Registry/types.ts @@ -1,7 +1,7 @@ type TProfile = { - id: string; + profileId: string; anchor: string; name: string; chainId: number; - sender: string; + creator: string; } diff --git a/src/components/SelectNetwork.tsx b/src/components/SelectNetwork.tsx index b9a8769..54990c9 100644 --- a/src/components/SelectNetwork.tsx +++ b/src/components/SelectNetwork.tsx @@ -1,6 +1,6 @@ "use client"; -import { NetworkContext } from "@/Context/NetworkContext"; +import { NetworkContext } from "@/context/NetworkContext"; import { getNetworks } from "@/api/networks"; import { INetwork, Slug, TNetworkData } from "@/types/types"; import { useContext } from "react"; diff --git a/yarn.lock b/yarn.lock index abc0cb0..14ce048 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,11 @@ resolved "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz" integrity sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw== +"@graphql-typed-document-node/core@^3.2.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" + integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== + "@headlessui/react@^1.7.17": version "1.7.17" resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6" @@ -676,6 +681,13 @@ concat-map@0.0.1: resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== +cross-fetch@^3.1.5: + version "3.1.8" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82" + integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg== + dependencies: + node-fetch "^2.6.12" + cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz" @@ -1332,6 +1344,19 @@ graphemer@^1.4.0: resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +graphql-request@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-6.1.0.tgz#f4eb2107967af3c7a5907eb3131c671eac89be4f" + integrity sha512-p+XPfS4q7aIpKVcgmnZKhMNqhltk20hfXtkaIkTfjjmiKMJ5xrt5c743cL03y/K7y1rg3WrIC49xGiEQ4mxdNw== + dependencies: + "@graphql-typed-document-node/core" "^3.2.0" + cross-fetch "^3.1.5" + +graphql@^16.8.0: + version "16.8.0" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.0.tgz#374478b7f27b2dc6153c8f42c1b80157f79d79d4" + integrity sha512-0oKGaR+y3qcS5mCu1vb7KG+a89vjn06C7Ihq/dDl3jA+A8B3TKomvi3CiEcVLJQGalbu8F52LxkOym7U5sSfbg== + has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz" @@ -1836,6 +1861,13 @@ next@13.4.16: "@next/swc-win32-ia32-msvc" "13.4.16" "@next/swc-win32-x64-msvc" "13.4.16" +node-fetch@^2.6.12: + version "2.7.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" + integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A== + dependencies: + whatwg-url "^5.0.0" + node-releases@^2.0.13: version "2.0.13" resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz" @@ -2381,6 +2413,14 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +swr@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.2.tgz#abcb1f9c97e10527789884169d58b878472d4c98" + integrity sha512-CbR41AoMD4TQBQw9ic3GTXspgfM9Y8Mdhb5Ob4uIKXhWqnRLItwA5fpGvB7SmSw3+zEjb0PdhiEumtUvYoQ+bQ== + dependencies: + client-only "^0.0.1" + use-sync-external-store "^1.2.0" + tailwindcss@3.3.3, tailwindcss@^3: version "3.3.3" resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz" @@ -2440,6 +2480,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +tr46@~0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== + ts-api-utils@^1.0.1: version "1.0.3" resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz" @@ -2560,6 +2605,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz" @@ -2573,6 +2623,19 @@ watchpack@2.4.0: glob-to-regexp "^0.4.1" graceful-fs "^4.1.2" +webidl-conversions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== + +whatwg-url@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== + dependencies: + tr46 "~0.0.3" + webidl-conversions "^3.0.0" + which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz" From d0fa3180c4fb2949be4cd67a214b57e8dfa19558 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Mon, 18 Sep 2023 19:29:10 -0400 Subject: [PATCH 02/22] chore: add api call for pools --- package.json | 1 + src/app/pool/page.tsx | 25 +++++++++++++-- src/app/profile/page.tsx | 2 -- src/components/Pool/Pool.tsx | 36 ++++++++++------------ src/components/Registry/Profile.tsx | 5 +-- src/utils.ts | 11 ------- src/utils/utils.ts | 20 ++++++++++++ yarn.lock | 48 +++++++++++++++++++++++++++++ 8 files changed, 109 insertions(+), 39 deletions(-) delete mode 100644 src/utils.ts create mode 100644 src/utils/utils.ts diff --git a/package.json b/package.json index 2b07fb6..427664b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "daisyui": "^3.7.3", "eslint": "8.48.0", "eslint-config-next": "13.4.16", + "ethers": "^6.7.1", "graphql": "^16.8.0", "graphql-request": "^6.1.0", "heroicons": "^2.0.18", diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index c979bc9..63f9076 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -1,6 +1,25 @@ -"use client"; import Pool from "@/components/Pool/Pool"; +import { request, gql } from "graphql-request"; -export default function PoolHome() { - return ; +export default async function PoolHome() { + // FIXME: THE API DOES NOT RETURN THE POOL NAME AND STATUS + const query = gql` + { + pools { + poolId + chainId + strategy + token + amount + profile { + owner + metadataPointer + } + } + } + `; + const data: any = await request("http://localhost:5555/graphql", query); + const { pools } = data; + + return ; } diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 4d5a9fb..8fb23a9 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -16,7 +16,5 @@ export default async function ProfileHome() { const data: any = await request("http://localhost:5555/graphql", query); const { profiles } = data; - console.log("Pleasse work...", data); - return ; } diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 370cd4a..cfcaef5 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,16 +1,12 @@ -import { PoolContext } from "@/context/PoolContext"; -import { ChevronDownIcon } from "@heroicons/react/20/solid"; -import { useContext } from "react"; +"use client"; import Table from "../Table"; import { TTableData } from "@/types/types"; import { Address, convertBytesToShortString } from "../Address"; -import { convertChainIdToNetworkName } from "@/utils"; +import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils"; import Status from "../Status"; -const Pool = () => { - // const { pools } = useContext(PoolContext); - - const pools = [ +const Pool = (data: any) => { + const testPools = [ { id: 1, address: "0xAEc621EC8D9dE4B524f4864791171045d6BBBe27", @@ -37,10 +33,10 @@ const Pool = () => { }, ]; - const data: TTableData = { + const tableData: TTableData = { name: "Pools", description: - "A list of all the pools in the registry on all supported networks", + "A list of all the ools in the registry on all supported networks", headers: [ "ID", "Address", @@ -52,26 +48,28 @@ const Pool = () => { "Identifier", "Network", ], - rows: pools.map((pool) => { + rows: Object.values(data.data).map((pool: any) => { + console.log("pool", pool); return [ - pool.id, + pool.poolId, // eslint-disable-next-line react/jsx-key -
, - pool.name, +
, + // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME + shortenPoolName("Pool Name is really long"), // eslint-disable-next-line react/jsx-key
, - pool.amount, + formatAmount(pool.amount), // eslint-disable-next-line react/jsx-key - , + , // FIXME: THE API DOES NOT RETURN THE POOL STATUS // eslint-disable-next-line react/jsx-key -
, - convertBytesToShortString(pool.strategyIdentifier), +
, + convertBytesToShortString(pool.strategy), convertChainIdToNetworkName(pool.chainId), ]; }), }; - return
; + return
; }; export default Pool; diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index d66d2b6..230e260 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -1,11 +1,8 @@ "use client"; -// import { ProfileContext } from "@/Context/ProfileContext"; -// import { useContext } from "react"; import { Address, convertBytesToShortString } from "../Address"; -import { getNetworks } from "@/api/networks"; import Table from "../Table"; import { TTableData } from "@/types/types"; -import { convertChainIdToNetworkName } from "@/utils"; +import { convertChainIdToNetworkName } from "@/utils/utils"; const Profile = (data: any) => { const tableData: TTableData = { diff --git a/src/utils.ts b/src/utils.ts deleted file mode 100644 index e474c08..0000000 --- a/src/utils.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { getNetworks } from "./api/networks"; - -const networks = getNetworks(); - -export const convertChainIdToNetworkName = (chainId: number) => { - return `${networks[chainId].name} (${chainId})`; -}; - -export function classNames(...classes: any[]) { - return classes.filter(Boolean).join(" "); -} \ No newline at end of file diff --git a/src/utils/utils.ts b/src/utils/utils.ts new file mode 100644 index 0000000..6d0ced2 --- /dev/null +++ b/src/utils/utils.ts @@ -0,0 +1,20 @@ +import { getNetworks } from "../api/networks"; +import { ethers } from "ethers"; + +const networks = getNetworks(); + +export const convertChainIdToNetworkName = (chainId: number) => { + return `${networks[chainId].name} (${chainId})`; +}; + +export function classNames(...classes: any[]) { + return classes.filter(Boolean).join(" "); +} + +export function formatAmount(amount: number) { + return ethers.formatEther(amount); +} + +export function shortenPoolName(name: string) { + return name.length > 10 ? `${name.slice(0, 10)}...` : name; +} diff --git a/yarn.lock b/yarn.lock index 14ce048..788a676 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== +"@adraffy/ens-normalize@1.9.2": + version "1.9.2" + resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.2.tgz#60111a5d9db45b2e5cbb6231b0bb8d97e8659316" + integrity sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg== + "@alloc/quick-lru@^5.2.0": version "5.2.0" resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz" @@ -195,6 +200,16 @@ resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.16.tgz#79a151d94583e03992c80df3d3e7f7686390ddac" integrity sha512-WamDZm1M/OEM4QLce3lOmD1XdLEl37zYZwlmOLhmF7qYJ2G6oYm9+ejZVv+LakQIsIuXhSpVlOvrxIAHqwRkPQ== +"@noble/hashes@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.1.2.tgz#e9e035b9b166ca0af657a7848eb2718f0f22f183" + integrity sha512-KYRCASVTv6aeUi1tsF8/vpyR7zpfs3FUzy2Jqm+MU+LmUKhQ0y2FpfwqkCcxSg2ua4GALJd8k2R76WxwZGbQpA== + +"@noble/secp256k1@1.7.1": + version "1.7.1" + resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c" + integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw== + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -279,6 +294,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.0.tgz#9d7daa855d33d4efec8aea88cd66db1c2f0ebe16" integrity sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg== +"@types/node@18.15.13": + version "18.15.13" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.13.tgz#f64277c341150c979e42b00e4ac289290c9df469" + integrity sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q== + "@types/node@20.5.9": version "20.5.9" resolved "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz" @@ -377,6 +397,11 @@ acorn@^8.9.0: resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz" integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw== +aes-js@4.0.0-beta.5: + version "4.0.0-beta.5" + resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-4.0.0-beta.5.tgz#8d2452c52adedebc3a3e28465d858c11ca315873" + integrity sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q== + ajv@^6.12.4: version "6.12.6" resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz" @@ -1117,6 +1142,19 @@ esutils@^2.0.2: resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== +ethers@^6.7.1: + version "6.7.1" + resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.7.1.tgz#9c65e8b5d8e9ad77b7e8cf1c46099892cfafad49" + integrity sha512-qX5kxIFMfg1i+epfgb0xF4WM7IqapIIu50pOJ17aebkxxa4BacW5jFrQRmCJpDEg2ZK2oNtR5QjrQ1WDBF29dA== + dependencies: + "@adraffy/ens-normalize" "1.9.2" + "@noble/hashes" "1.1.2" + "@noble/secp256k1" "1.7.1" + "@types/node" "18.15.13" + aes-js "4.0.0-beta.5" + tslib "2.4.0" + ws "8.5.0" + fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz" @@ -2519,6 +2557,11 @@ tsconfig-paths@^3.14.2: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^2.4.0: version "2.6.2" resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" @@ -2698,6 +2741,11 @@ wrappy@1: resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz" integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== +ws@8.5.0: + version "8.5.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f" + integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg== + yallist@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz" From 3c8862115f3885585d3609a46d5f384db05d57ce Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Mon, 18 Sep 2023 19:56:35 -0400 Subject: [PATCH 03/22] chore: remove unused context/clean up --- src/Context/PoolContext.tsx | 25 ---------------- src/Context/ProfileContext.tsx | 31 -------------------- src/app/global-error.tsx | 18 ++++++++++++ src/app/layout.tsx | 2 +- src/app/pool/error.tsx | 30 +++++++++++++++++++ src/app/profile/error.tsx | 30 +++++++++++++++++++ src/components/Address.tsx | 2 +- src/components/Dashboard.tsx | 4 +-- src/components/Pool/Pool.tsx | 28 ------------------ src/components/Registry/Profile.tsx | 1 - src/components/SelectNetwork.tsx | 4 +-- src/components/Sort.tsx | 45 ----------------------------- src/{api => utils}/networks.ts | 0 src/utils/utils.ts | 2 +- 14 files changed, 85 insertions(+), 137 deletions(-) delete mode 100644 src/Context/PoolContext.tsx delete mode 100644 src/Context/ProfileContext.tsx create mode 100644 src/app/global-error.tsx create mode 100644 src/app/pool/error.tsx create mode 100644 src/app/profile/error.tsx delete mode 100644 src/components/Sort.tsx rename src/{api => utils}/networks.ts (100%) diff --git a/src/Context/PoolContext.tsx b/src/Context/PoolContext.tsx deleted file mode 100644 index 4b53d0b..0000000 --- a/src/Context/PoolContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; -import React from "react"; - -type Pool = { - id: number; - name: string; - address: string; - balance: number; -} - -interface IPoolContextProps { - pools: Pool[]; -} - -export const PoolContext = React.createContext({ - pools: [], -}); - -export const PoolContextProvider = (props: any) => { - return ( - - {props.children} - - ); -}; diff --git a/src/Context/ProfileContext.tsx b/src/Context/ProfileContext.tsx deleted file mode 100644 index f6dff9c..0000000 --- a/src/Context/ProfileContext.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; -import React, { useState } from "react"; -import { Slug } from "@/types/types"; - -interface IProfileContextProps { - profiles: TProfile[]; - network: Slug; - setNetwork: (network: Slug) => void; -} - -export const ProfileContext = React.createContext({ - profiles: [], - network: Object.values(Slug)[0], - setNetwork: () => {}, -}); - -export const ProfileContextProvider = (props: any) => { - const [network, setNetwork] = useState(Object.values(Slug)[0]); - - return ( - - {props.children} - - ); -}; diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx new file mode 100644 index 0000000..eb1e6b3 --- /dev/null +++ b/src/app/global-error.tsx @@ -0,0 +1,18 @@ +"use client"; + +export default function GlobalError({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + return ( + + +

Something went wrong!

+ + + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7890995..78bead0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import { NetworkContextProvider } from "@/context/NetworkContext"; +import { NetworkContextProvider } from "@/Context/NetworkContext"; import Navbar from "@/components/Navbar"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; diff --git a/src/app/pool/error.tsx b/src/app/pool/error.tsx new file mode 100644 index 0000000..c67321b --- /dev/null +++ b/src/app/pool/error.tsx @@ -0,0 +1,30 @@ +"use client"; // Error components must be Client Components + +import { useEffect } from "react"; + +export default function Error({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error); + }, [error]); + + return ( +
+

Something went wrong!

+ +
+ ); +} diff --git a/src/app/profile/error.tsx b/src/app/profile/error.tsx new file mode 100644 index 0000000..c67321b --- /dev/null +++ b/src/app/profile/error.tsx @@ -0,0 +1,30 @@ +"use client"; // Error components must be Client Components + +import { useEffect } from "react"; + +export default function Error({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error); + }, [error]); + + return ( +
+

Something went wrong!

+ +
+ ); +} diff --git a/src/components/Address.tsx b/src/components/Address.tsx index 3c7d207..1834c7d 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -1,4 +1,4 @@ -import { getNetworks } from "@/api/networks"; +import { getNetworks } from "@/utils/networks"; import { TbCopy, TbExternalLink } from "react-icons/tb"; export const convertAddressToShortString = (address: string) => { diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index a621c59..88efdad 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -1,5 +1,5 @@ -import { NetworkContext } from "@/context/NetworkContext"; -import { getNetworksBySlug } from "@/api/networks"; +import { NetworkContext } from "@/Context/NetworkContext"; +import { getNetworksBySlug } from "@/utils/networks"; import { useContext } from "react"; import { AddressResponsive } from "./Address"; import Table from "./Table"; diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index cfcaef5..51cbbd8 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -6,33 +6,6 @@ import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/ut import Status from "../Status"; const Pool = (data: any) => { - const testPools = [ - { - id: 1, - address: "0xAEc621EC8D9dE4B524f4864791171045d6BBBe27", - name: "DonationVotingMerklePayout", - token: "0x0000000000000000000000000000000000000000", - amount: 500, - status: true, - profileOwner: "0x0000000000000000000000000000000000000000", - strategyIdentifier: - "0xd71275a698bbfb611216b5ed38a4b48cc165febd4c3da5bc13bc8398792e6bca", - chainId: 5, - }, - { - id: 2, - address: "0xAEc621EC8D9dE4B524f4864791171045d6BBBe27", - name: "DonationVotingMerklePayout", - token: "0x0000000000000000000000000000000000000000", - amount: 20, - status: false, - profileOwner: "0x0000000000000000000000000000000000000000", - strategyIdentifier: - "0xd71275a698bbfb611216b5ed38a4b48cc165febd4c3da5bc13bc8398792e6bca", - chainId: 5, - }, - ]; - const tableData: TTableData = { name: "Pools", description: @@ -49,7 +22,6 @@ const Pool = (data: any) => { "Network", ], rows: Object.values(data.data).map((pool: any) => { - console.log("pool", pool); return [ pool.poolId, // eslint-disable-next-line react/jsx-key diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index 230e260..aeb6232 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -11,7 +11,6 @@ const Profile = (data: any) => { "A list of all the profiles in the registry on all supported networks", headers: ["ID", "Anchor", "Name", "Sender", "Network"], rows: Object.values(data.data).map((profile: any) => { - console.log("profile", profile); return [ convertBytesToShortString(profile.profileId), // eslint-disable-next-line react/jsx-key diff --git a/src/components/SelectNetwork.tsx b/src/components/SelectNetwork.tsx index 54990c9..8e21e55 100644 --- a/src/components/SelectNetwork.tsx +++ b/src/components/SelectNetwork.tsx @@ -1,7 +1,7 @@ "use client"; -import { NetworkContext } from "@/context/NetworkContext"; -import { getNetworks } from "@/api/networks"; +import { NetworkContext } from "@/Context/NetworkContext"; +import { getNetworks } from "@/utils/networks"; import { INetwork, Slug, TNetworkData } from "@/types/types"; import { useContext } from "react"; diff --git a/src/components/Sort.tsx b/src/components/Sort.tsx deleted file mode 100644 index 07da426..0000000 --- a/src/components/Sort.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - Search component with sort by network feature - - todo: ÍSearch networks by `chainId` - - todo: -*/ -import { - BarsArrowUpIcon, - MagnifyingGlassIcon, -} from "@heroicons/react/20/solid"; - -const Sort = () => { - return ( -
-
-
-
-
- -
- -
-
- ); -}; - -export default Sort; diff --git a/src/api/networks.ts b/src/utils/networks.ts similarity index 100% rename from src/api/networks.ts rename to src/utils/networks.ts diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 6d0ced2..ea8f076 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,4 +1,4 @@ -import { getNetworks } from "../api/networks"; +import { getNetworks } from "./networks"; import { ethers } from "ethers"; const networks = getNetworks(); From 6b099f3f8052e76484b2e178e84047e9cbc58fd1 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Mon, 18 Sep 2023 20:41:25 -0400 Subject: [PATCH 04/22] chore: add fallback/detail route pages --- src/app/middleware.ts | 29 +++++++++++++++++++++++++++++ src/app/pool/[id]/page.tsx | 3 +++ src/app/pool/page.tsx | 11 +++++++++-- src/app/profile/[id]/page.tsx | 3 +++ src/app/profile/page.tsx | 11 +++++++++-- src/components/Loading.tsx | 23 +++++++++++++++++++++++ src/components/Status.tsx | 4 ++-- src/utils/utils.ts | 2 ++ 8 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 src/app/middleware.ts create mode 100644 src/app/pool/[id]/page.tsx create mode 100644 src/app/profile/[id]/page.tsx create mode 100644 src/components/Loading.tsx diff --git a/src/app/middleware.ts b/src/app/middleware.ts new file mode 100644 index 0000000..010bc74 --- /dev/null +++ b/src/app/middleware.ts @@ -0,0 +1,29 @@ +import { NextResponse } from 'next/server' +import type { NextRequest } from 'next/server' + +export function middleware(request: NextRequest) { + // Assume a "Cookie:nextjs=fast" header to be present on the incoming request + // Getting cookies from the request using the `RequestCookies` API + let cookie = request.cookies.get('nextjs') + console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' } + const allCookies = request.cookies.getAll() + console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }] + + request.cookies.has('nextjs') // => true + request.cookies.delete('nextjs') + request.cookies.has('nextjs') // => false + + // Setting cookies on the response using the `ResponseCookies` API + const response = NextResponse.next() + response.cookies.set('vercel', 'fast') + response.cookies.set({ + name: 'vercel', + value: 'fast', + path: '/', + }) + cookie = response.cookies.get('vercel') + console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' } + // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header. + + return response +} \ No newline at end of file diff --git a/src/app/pool/[id]/page.tsx b/src/app/pool/[id]/page.tsx new file mode 100644 index 0000000..9ec227a --- /dev/null +++ b/src/app/pool/[id]/page.tsx @@ -0,0 +1,3 @@ +export default function PoolDetail({ params }: { params: { slug: string } }) { + return

My Page

; +} diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index 63f9076..65db862 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -1,5 +1,8 @@ +import { Loading } from "@/components/Loading"; import Pool from "@/components/Pool/Pool"; +import { graphqlEndpoint } from "@/utils/utils"; import { request, gql } from "graphql-request"; +import { Suspense } from "react"; export default async function PoolHome() { // FIXME: THE API DOES NOT RETURN THE POOL NAME AND STATUS @@ -18,8 +21,12 @@ export default async function PoolHome() { } } `; - const data: any = await request("http://localhost:5555/graphql", query); + const data: any = await request(graphqlEndpoint, query); const { pools } = data; - return ; + return ( + }> + + + ); } diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx new file mode 100644 index 0000000..af8b91c --- /dev/null +++ b/src/app/profile/[id]/page.tsx @@ -0,0 +1,3 @@ +export default function ProfileDetail({ params }: { params: { slug: string } }) { + return

My Page

; + } \ No newline at end of file diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 8fb23a9..8ddba1f 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,5 +1,8 @@ +import { Loading } from "@/components/Loading"; import Profile from "@/components/Registry/Profile"; +import { graphqlEndpoint } from "@/utils/utils"; import { request, gql } from "graphql-request"; +import { Suspense } from "react"; export default async function ProfileHome() { const query = gql` @@ -13,8 +16,12 @@ export default async function ProfileHome() { } } `; - const data: any = await request("http://localhost:5555/graphql", query); + const data: any = await request(graphqlEndpoint, query); const { profiles } = data; - return ; + return ( + }> + + + ); } diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 0000000..9eafba7 --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,23 @@ +export const Loading = () => { + return ( +
+ + Loading... +
+ ); +}; diff --git a/src/components/Status.tsx b/src/components/Status.tsx index 86b8bea..6b9b1cb 100644 --- a/src/components/Status.tsx +++ b/src/components/Status.tsx @@ -1,6 +1,6 @@ const Status = ({ status }: { status: boolean }) => { return ( - + ); }; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ea8f076..d7501f1 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -3,6 +3,8 @@ import { ethers } from "ethers"; const networks = getNetworks(); +export const graphqlEndpoint = "http://localhost:5555/graphql"; + export const convertChainIdToNetworkName = (chainId: number) => { return `${networks[chainId].name} (${chainId})`; }; From 456bb446efbe7b50230c9742f7278e464098bf7f Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 09:21:07 -0400 Subject: [PATCH 05/22] chore: some pairing cleanup/refactoring Co-authored-by: Aditya Anand M C Co-authored-by: Kurt --- src/app/middleware.ts | 29 ----------------------------- src/app/pool/page.tsx | 1 + src/components/Address.tsx | 4 ++++ src/components/Pool/Pool.tsx | 20 +++++++++++--------- src/components/Registry/Profile.tsx | 4 ++-- 5 files changed, 18 insertions(+), 40 deletions(-) delete mode 100644 src/app/middleware.ts diff --git a/src/app/middleware.ts b/src/app/middleware.ts deleted file mode 100644 index 010bc74..0000000 --- a/src/app/middleware.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NextResponse } from 'next/server' -import type { NextRequest } from 'next/server' - -export function middleware(request: NextRequest) { - // Assume a "Cookie:nextjs=fast" header to be present on the incoming request - // Getting cookies from the request using the `RequestCookies` API - let cookie = request.cookies.get('nextjs') - console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' } - const allCookies = request.cookies.getAll() - console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }] - - request.cookies.has('nextjs') // => true - request.cookies.delete('nextjs') - request.cookies.has('nextjs') // => false - - // Setting cookies on the response using the `ResponseCookies` API - const response = NextResponse.next() - response.cookies.set('vercel', 'fast') - response.cookies.set({ - name: 'vercel', - value: 'fast', - path: '/', - }) - cookie = response.cookies.get('vercel') - console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' } - // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header. - - return response -} \ No newline at end of file diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index 65db862..eb05bfb 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -15,6 +15,7 @@ export default async function PoolHome() { token amount profile { + name owner metadataPointer } diff --git a/src/components/Address.tsx b/src/components/Address.tsx index 1834c7d..e6879f4 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -90,3 +90,7 @@ export const AddressResponsive = (props: { ); }; + +export const truncatedString = (str: string) => { + return
{str}
; +} diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 51cbbd8..5bf24a5 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,9 +1,9 @@ "use client"; import Table from "../Table"; import { TTableData } from "@/types/types"; -import { Address, convertBytesToShortString } from "../Address"; +import { Address, convertBytesToShortString, truncatedString } from "../Address"; import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils"; -import Status from "../Status"; +// import Status from "../Status"; const Pool = (data: any) => { const tableData: TTableData = { @@ -13,12 +13,13 @@ const Pool = (data: any) => { headers: [ "ID", "Address", - "Name", + // "Name", "Token", "Amount", - "Status", + // "Status", + "Profile Name", "Profile Owner", - "Identifier", + "Strategy", "Network", ], rows: Object.values(data.data).map((pool: any) => { @@ -27,15 +28,16 @@ const Pool = (data: any) => { // eslint-disable-next-line react/jsx-key
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME - shortenPoolName("Pool Name is really long"), + // shortenPoolName("Pool Name is really long"), // eslint-disable-next-line react/jsx-key
, formatAmount(pool.amount), - // eslint-disable-next-line react/jsx-key - , // FIXME: THE API DOES NOT RETURN THE POOL STATUS + // eslint-disable-next-line react/jsx-key js + // , + shortenPoolName(pool.profile.name), // eslint-disable-next-line react/jsx-key
, - convertBytesToShortString(pool.strategy), +
, convertChainIdToNetworkName(pool.chainId), ]; }), diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index aeb6232..89c90ab 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -1,5 +1,5 @@ "use client"; -import { Address, convertBytesToShortString } from "../Address"; +import { Address, truncatedString } from "../Address"; import Table from "../Table"; import { TTableData } from "@/types/types"; import { convertChainIdToNetworkName } from "@/utils/utils"; @@ -12,7 +12,7 @@ const Profile = (data: any) => { headers: ["ID", "Anchor", "Name", "Sender", "Network"], rows: Object.values(data.data).map((profile: any) => { return [ - convertBytesToShortString(profile.profileId), + truncatedString(profile.profileId), // eslint-disable-next-line react/jsx-key
, profile.name, From 2ece7b9a599005bcebdd674c85d3ea175870cd95 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 09:47:43 -0400 Subject: [PATCH 06/22] chore: more cleanup/refactor Co-authored-by: Aditya Anand M C Co-authored-by: Kurt --- src/app/profile/[id]/page.tsx | 9 +++++++-- src/components/Pool/Pool.tsx | 8 +++++--- src/components/Registry/Profile.tsx | 6 +++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index af8b91c..d56f620 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -1,3 +1,8 @@ -export default function ProfileDetail({ params }: { params: { slug: string } }) { - return

My Page

; +export default function ProfileDetail({ params }: { params: { id: string } }) { + return ( +
+

Profile Detail

+

Profile ID: {params.id}

+
+ ) } \ No newline at end of file diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 5bf24a5..7bbb6b7 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,7 +1,7 @@ "use client"; import Table from "../Table"; import { TTableData } from "@/types/types"; -import { Address, convertBytesToShortString, truncatedString } from "../Address"; +import { Address, convertBytesToShortString } from "../Address"; import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils"; // import Status from "../Status"; @@ -31,13 +31,15 @@ const Pool = (data: any) => { // shortenPoolName("Pool Name is really long"), // eslint-disable-next-line react/jsx-key
, + // eslint-disable-next-line react/jsx-key formatAmount(pool.amount), - // eslint-disable-next-line react/jsx-key js - // , + // eslint-disable-next-line react/jsx-key shortenPoolName(pool.profile.name), // eslint-disable-next-line react/jsx-key
, + // eslint-disable-next-line react/jsx-key
, + // eslint-disable-next-line react/jsx-key convertChainIdToNetworkName(pool.chainId), ]; }), diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index 89c90ab..e1356f6 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -1,4 +1,5 @@ "use client"; +import Link from "next/link"; import { Address, truncatedString } from "../Address"; import Table from "../Table"; import { TTableData } from "@/types/types"; @@ -12,7 +13,10 @@ const Profile = (data: any) => { headers: ["ID", "Anchor", "Name", "Sender", "Network"], rows: Object.values(data.data).map((profile: any) => { return [ - truncatedString(profile.profileId), + // eslint-disable-next-line react/jsx-key + + {truncatedString(profile.profileId)} + , // eslint-disable-next-line react/jsx-key
, profile.name, From cab023d5eb938b82c0a0149724b0982268de6f40 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 10:30:39 -0400 Subject: [PATCH 07/22] chore: extract queries --- src/app/pool/page.tsx | 22 ++++------------------ src/utils/query.ts | 31 +++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 src/utils/query.ts diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index eb05bfb..f3b105f 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -1,28 +1,14 @@ import { Loading } from "@/components/Loading"; import Pool from "@/components/Pool/Pool"; +import { getPoolDataQuery } from "@/utils/query"; import { graphqlEndpoint } from "@/utils/utils"; -import { request, gql } from "graphql-request"; +import { request } from "graphql-request"; import { Suspense } from "react"; export default async function PoolHome() { // FIXME: THE API DOES NOT RETURN THE POOL NAME AND STATUS - const query = gql` - { - pools { - poolId - chainId - strategy - token - amount - profile { - name - owner - metadataPointer - } - } - } - `; - const data: any = await request(graphqlEndpoint, query); + + const data: any = await request(graphqlEndpoint, getPoolDataQuery); const { pools } = data; return ( diff --git a/src/utils/query.ts b/src/utils/query.ts new file mode 100644 index 0000000..f967427 --- /dev/null +++ b/src/utils/query.ts @@ -0,0 +1,31 @@ +import { request, gql } from "graphql-request"; +import { graphqlEndpoint } from "./utils"; + +export const getPoolDataQuery = gql` + { + pools { + poolId + chainId + strategy + token + amount + profile { + name + owner + metadataPointer + } + } + } +`; + +export const getProfileDataQuery = gql` + { + profiles { + profileId + anchor + name + chainId + creator + } + } + `; From f50c267b79fca6cf1424b32cf3f71418a21fa5ef Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Tue, 19 Sep 2023 18:08:21 +0200 Subject: [PATCH 08/22] added profile details --- src/app/profile/[id]/page.tsx | 54 +++++++++-- src/components/Address.tsx | 2 +- src/components/Registry/ProfileDetail.tsx | 105 ++++++++++++++++++++++ src/components/Registry/types.ts | 17 +++- src/types/types.ts | 7 +- 5 files changed, 172 insertions(+), 13 deletions(-) create mode 100644 src/components/Registry/ProfileDetail.tsx diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index d56f620..b32267a 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -1,8 +1,46 @@ -export default function ProfileDetail({ params }: { params: { id: string } }) { - return ( -
-

Profile Detail

-

Profile ID: {params.id}

-
- ) - } \ No newline at end of file +import ProfileDetail from "@/components/Registry/ProfileDetail"; +import { TProfileDetails } from "@/components/Registry/types"; + +export default async function ProfileDetailPage({ + params, +}: { + params: { id: string }; +}) { + const profile: TProfileDetails = { + id: "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", + anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", + name: "1000x Super Shiba Doge Moon Elon", + chainId: 5, + sender: "0xa671616e3580D3611139834Cd34D7838e82A04cD", + metadata: { + protocol: 1, + pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", + }, + nonce: 1337, + owner: "0xa671616e3580D3611139834Cd34D7838e82A04cD", + members: [ + "0xa71864fAd36439C50924359ECfF23Bb185FFDf21", + "0x3f15B8c6F9939879Cb030D6dd935348E57109637", + ], + adminRoleId: + "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", + memberRoleId: + "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", + }; + + const response = await fetch( + `https://ipfs.io/ipfs/${profile.metadata.pointer}`, + ); + + let metadata = ""; + // Check if the response status is OK (200) + if (response.ok) { + metadata = await response.text(); + } + + return ( +
+ +
+ ); +} diff --git a/src/components/Address.tsx b/src/components/Address.tsx index e6879f4..1590db3 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -52,7 +52,7 @@ export const AddressFull = (props: { address: string; chainId: number }) => { return (
-
+
{props.address}
{ + const metadataObj = JSON.parse(metadata); + + return ( +
+
+

+ {profile.name} +

+

+ {profile.id} +

+
+
+
+
+
+ Chain +
+
+ {convertChainIdToNetworkName(profile.chainId)} +
+
+
+
+ Nonce +
+
+ {profile.nonce} +
+
+
+
+ Anchor +
+
+ +
+
+
+
+ Creator +
+
+ +
+
+
+
+ Owner +
+
+ +
+
+
+
+ Members +
+
+
    + {profile.members.map((member) => ( +
  • +
    +
    + + + +
    +
    +
    • + ))} +
+
+
+
+
+
+ ); +}; + +export default ProfileDetail; diff --git a/src/components/Registry/types.ts b/src/components/Registry/types.ts index a2dbda3..bf2ae7a 100644 --- a/src/components/Registry/types.ts +++ b/src/components/Registry/types.ts @@ -1,7 +1,18 @@ -type TProfile = { - profileId: string; +import { Metadata } from "@/types/types"; + +export type TProfile = { + id: string; anchor: string; name: string; chainId: number; - creator: string; + sender: string; } + +export type TProfileDetails = TProfile & { + metadata: Metadata; + nonce: number; + owner: string; + members: string[]; + adminRoleId: string; + memberRoleId: string; +} \ No newline at end of file diff --git a/src/types/types.ts b/src/types/types.ts index b9b0124..3a0c798 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -40,4 +40,9 @@ export type TTableData = { description: string; headers: string[]; rows: any[][]; -}; \ No newline at end of file +}; + +export type Metadata = { + protocol: number; + pointer: string; +} \ No newline at end of file From f0189c29cf25f72f78c79f3e2694bc33e8322a42 Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Tue, 19 Sep 2023 18:41:21 +0200 Subject: [PATCH 09/22] last things --- package.json | 1 + src/app/layout.tsx | 4 ++- src/app/profile/[id]/page.tsx | 5 ++-- src/components/Registry/ProfileDetail.tsx | 31 ++++++++++++++++++++--- src/components/Registry/types.ts | 4 +-- src/types/types.ts | 5 ++++ yarn.lock | 9 ++++++- 7 files changed, 50 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 427664b..aef883e 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "typescript": "5.2.2" }, "devDependencies": { + "@uiw/react-json-view": "^2.0.0-alpha.4", "ts-jest": "^29.1.1" } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 78bead0..69d43e5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,7 +22,9 @@ export default function RootLayout({
-
{children}
+
+
{children}
+
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx index b32267a..9addb09 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[id]/page.tsx @@ -7,11 +7,12 @@ export default async function ProfileDetailPage({ params: { id: string }; }) { const profile: TProfileDetails = { - id: "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", + profileId: + "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", name: "1000x Super Shiba Doge Moon Elon", chainId: 5, - sender: "0xa671616e3580D3611139834Cd34D7838e82A04cD", + creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD", metadata: { protocol: 1, pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx index 06438de..aa9e2ed 100644 --- a/src/components/Registry/ProfileDetail.tsx +++ b/src/components/Registry/ProfileDetail.tsx @@ -2,6 +2,10 @@ import { convertChainIdToNetworkName } from "@/utils/utils"; import { AddressResponsive } from "../Address"; import { TProfileDetails } from "./types"; +import { MetadataProtocol } from "@/types/types"; +import { TbExternalLink } from "react-icons/tb"; +import JsonView from "@uiw/react-json-view"; + const ProfileDetail = ({ profile, @@ -19,14 +23,14 @@ const ProfileDetail = ({ {profile.name}

- {profile.id} + {profile.profileId}

- Chain + Network
{convertChainIdToNetworkName(profile.chainId)} @@ -57,7 +61,7 @@ const ProfileDetail = ({
@@ -96,7 +100,28 @@ const ProfileDetail = ({
+
+
+ Metadata ({MetadataProtocol[profile.metadata.protocol]}){" "} +
+
+
+ {profile.metadata.pointer} + + + +
+
+
+
+ +
); diff --git a/src/components/Registry/types.ts b/src/components/Registry/types.ts index bf2ae7a..e50a040 100644 --- a/src/components/Registry/types.ts +++ b/src/components/Registry/types.ts @@ -1,11 +1,11 @@ import { Metadata } from "@/types/types"; export type TProfile = { - id: string; + profileId: string; anchor: string; name: string; chainId: number; - sender: string; + creator: string; } export type TProfileDetails = TProfile & { diff --git a/src/types/types.ts b/src/types/types.ts index 3a0c798..c330a24 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -45,4 +45,9 @@ export type TTableData = { export type Metadata = { protocol: number; pointer: string; +} + +export enum MetadataProtocol { + "Undefined", + "IPFS" } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 788a676..6951f8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,7 +17,7 @@ resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz" integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw== -"@babel/runtime@^7.20.7": +"@babel/runtime@^7.20.7", "@babel/runtime@^7.22.6": version "7.22.15" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz" integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== @@ -387,6 +387,13 @@ "@typescript-eslint/types" "6.6.0" eslint-visitor-keys "^3.4.1" +"@uiw/react-json-view@^2.0.0-alpha.4": + version "2.0.0-alpha.4" + resolved "https://registry.yarnpkg.com/@uiw/react-json-view/-/react-json-view-2.0.0-alpha.4.tgz#7030e8a4a70f33cedbbb5e5e4f82f65972718ec6" + integrity sha512-a1pTQJr6escUMu3DA064m66vdphlOT/CY3igVpSd4ZHViPxi1x9LpuJz5R4xBbC8/cnLmaf/jioZP4wctlDsCg== + dependencies: + "@babel/runtime" "^7.22.6" + acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz" From f086e842403ea3936a4517a3f4652812c3fed83f Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Tue, 19 Sep 2023 18:46:46 +0200 Subject: [PATCH 10/22] added route --- src/app/profile/{ => [chain]}/[id]/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/app/profile/{ => [chain]}/[id]/page.tsx (95%) diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[chain]/[id]/page.tsx similarity index 95% rename from src/app/profile/[id]/page.tsx rename to src/app/profile/[chain]/[id]/page.tsx index 9addb09..9ccc010 100644 --- a/src/app/profile/[id]/page.tsx +++ b/src/app/profile/[chain]/[id]/page.tsx @@ -4,14 +4,14 @@ import { TProfileDetails } from "@/components/Registry/types"; export default async function ProfileDetailPage({ params, }: { - params: { id: string }; + params: { id: string, chain: number }; }) { const profile: TProfileDetails = { profileId: "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", name: "1000x Super Shiba Doge Moon Elon", - chainId: 5, + chainId: params.chain, creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD", metadata: { protocol: 1, From c83ceb965a4a17e3b9b33297033fbc6f8ae7951a Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 12:58:26 -0400 Subject: [PATCH 11/22] chore: some setup --- src/app/pool/[id]/page.tsx | 24 +++++++++++++++++++++++- src/app/profile/page.tsx | 17 ++++------------- src/components/Address.tsx | 2 ++ src/components/Pool/Pool.tsx | 10 +--------- src/components/Pool/types.ts | 15 +++++++++++++++ 5 files changed, 45 insertions(+), 23 deletions(-) create mode 100644 src/components/Pool/types.ts diff --git a/src/app/pool/[id]/page.tsx b/src/app/pool/[id]/page.tsx index 9ec227a..c335dd7 100644 --- a/src/app/pool/[id]/page.tsx +++ b/src/app/pool/[id]/page.tsx @@ -1,3 +1,25 @@ -export default function PoolDetail({ params }: { params: { slug: string } }) { +import { TPoolDetail } from "@/components/Pool/types"; + +export default function PoolDetailPage({ + params, +}: { + params: { id: string }; +}) { + const pool: TPoolDetail = { + poolId: Number(params.id), + chainId: 58008, + strategy: "0x1a749965c9142c873298362333ed2545d4edd2da", + token: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", + amount: 1e17, + profile: { + name: "Apollo Pool", + owner: "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", + }, + metadata: { + protocol: 1, + pointer: "0x123", + }, + }; + return

My Page

; } diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 8ddba1f..89fcdff 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,22 +1,13 @@ import { Loading } from "@/components/Loading"; import Profile from "@/components/Registry/Profile"; +import { getProfileDataQuery } from "@/utils/query"; import { graphqlEndpoint } from "@/utils/utils"; -import { request, gql } from "graphql-request"; +import { request } from "graphql-request"; import { Suspense } from "react"; export default async function ProfileHome() { - const query = gql` - { - profiles { - profileId - anchor - name - chainId - creator - } - } - `; - const data: any = await request(graphqlEndpoint, query); + + const data: any = await request(graphqlEndpoint, getProfileDataQuery); const { profiles } = data; return ( diff --git a/src/components/Address.tsx b/src/components/Address.tsx index 1590db3..3838f4b 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -1,3 +1,5 @@ +"use client"; + import { getNetworks } from "@/utils/networks"; import { TbCopy, TbExternalLink } from "react-icons/tb"; diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 7bbb6b7..8b7ad1a 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,4 +1,5 @@ "use client"; +// eslint-disable-file react/jsx-key import Table from "../Table"; import { TTableData } from "@/types/types"; import { Address, convertBytesToShortString } from "../Address"; @@ -19,27 +20,18 @@ const Pool = (data: any) => { // "Status", "Profile Name", "Profile Owner", - "Strategy", "Network", ], rows: Object.values(data.data).map((pool: any) => { return [ pool.poolId, - // eslint-disable-next-line react/jsx-key
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME // shortenPoolName("Pool Name is really long"), - // eslint-disable-next-line react/jsx-key
, - // eslint-disable-next-line react/jsx-key formatAmount(pool.amount), - // eslint-disable-next-line react/jsx-key shortenPoolName(pool.profile.name), - // eslint-disable-next-line react/jsx-key
, - // eslint-disable-next-line react/jsx-key -
, - // eslint-disable-next-line react/jsx-key convertChainIdToNetworkName(pool.chainId), ]; }), diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts new file mode 100644 index 0000000..411ddc6 --- /dev/null +++ b/src/components/Pool/types.ts @@ -0,0 +1,15 @@ +export type TPoolDetail = { + poolId: number; + chainId: number; + strategy: string; + token: string; + amount: number; + profile: { + name: string; + owner: string; + }; + metadata: { + protocol: number; + pointer: string; + }; +}; From a8ecbccad333d6526fd9f3d5dfe8f99654e5fb46 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 13:18:55 -0400 Subject: [PATCH 12/22] chore: add pool detail --- src/app/pool/[chain]/[id]/page.tsx | 37 +++++++++++ src/app/pool/[id]/page.tsx | 25 -------- src/components/Pool/Pool.tsx | 7 ++- src/components/Pool/PoolDetail.tsx | 98 +++++++++++++++++++++++++++++ src/components/Pool/types.ts | 1 + src/components/Registry/Profile.tsx | 2 +- 6 files changed, 142 insertions(+), 28 deletions(-) create mode 100644 src/app/pool/[chain]/[id]/page.tsx delete mode 100644 src/app/pool/[id]/page.tsx create mode 100644 src/components/Pool/PoolDetail.tsx diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx new file mode 100644 index 0000000..1433dfc --- /dev/null +++ b/src/app/pool/[chain]/[id]/page.tsx @@ -0,0 +1,37 @@ +import PoolDetailPage from "@/components/Pool/PoolDetail"; +import { TPoolDetail } from "@/components/Pool/types"; + +export default async function PoolDetail({ + params, +}: { + params: { id: string }; +}) { + const pool: TPoolDetail = { + poolId: Number(params.id), + chainId: 58008, + strategy: "0x1a749965c9142c873298362333ed2545d4edd2da", + token: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", + amount: 1e17, + profile: { + name: "Apollo Pool", + owner: "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", + }, + metadata: { + protocol: 1, + pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", + }, + creator: "0x3f15B8c6F9939879Cb030D6dd935348E57109637" + }; + + const response = await fetch( + `https://ipfs.io/ipfs/${pool.metadata.pointer}`, + ); + + let metadata = ""; + // Check if the response status is OK (200) + if (response.ok) { + metadata = await response.text(); + } + + return ; +} diff --git a/src/app/pool/[id]/page.tsx b/src/app/pool/[id]/page.tsx deleted file mode 100644 index c335dd7..0000000 --- a/src/app/pool/[id]/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { TPoolDetail } from "@/components/Pool/types"; - -export default function PoolDetailPage({ - params, -}: { - params: { id: string }; -}) { - const pool: TPoolDetail = { - poolId: Number(params.id), - chainId: 58008, - strategy: "0x1a749965c9142c873298362333ed2545d4edd2da", - token: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", - amount: 1e17, - profile: { - name: "Apollo Pool", - owner: "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", - }, - metadata: { - protocol: 1, - pointer: "0x123", - }, - }; - - return

My Page

; -} diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 8b7ad1a..cfb3696 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -2,8 +2,9 @@ // eslint-disable-file react/jsx-key import Table from "../Table"; import { TTableData } from "@/types/types"; -import { Address, convertBytesToShortString } from "../Address"; +import { Address, convertBytesToShortString, truncatedString } from "../Address"; import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils"; +import Link from "next/link"; // import Status from "../Status"; const Pool = (data: any) => { @@ -24,7 +25,9 @@ const Pool = (data: any) => { ], rows: Object.values(data.data).map((pool: any) => { return [ - pool.poolId, + + {truncatedString(pool.poolId)} + ,,
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME // shortenPoolName("Pool Name is really long"), diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx new file mode 100644 index 0000000..e7c12af --- /dev/null +++ b/src/components/Pool/PoolDetail.tsx @@ -0,0 +1,98 @@ +"use client"; +import { convertChainIdToNetworkName } from "@/utils/utils"; +import { AddressResponsive } from "../Address"; +import { TPoolDetail } from "./types"; +import { MetadataProtocol } from "@/types/types"; +import { TbExternalLink } from "react-icons/tb"; +import JsonView from "@uiw/react-json-view"; +import { ethers } from "ethers"; + +const PoolDetailPage = ({ + pool, + metadata, +}: { + pool: TPoolDetail; + metadata: string; +}) => { + const metadataObj = JSON.parse(metadata); + + return ( +
+
+

+ {/* {pool.name} */} + "Pool Name" +

+

+ {pool.poolId} +

+
+
+
+
+
+ Network +
+
+ {convertChainIdToNetworkName(pool.chainId)} +
+
+
+
+ Token +
+
+ {pool.token} +
+
+
+
+ Amount +
+
+ {ethers.formatEther(pool.amount.toString())} +
+
+
+
+ Creator +
+
+ +
+
+
+
+ Metadata ({MetadataProtocol[pool.metadata.protocol]}){" "} +
+
+
+ {pool.metadata.pointer} + + + +
+
+
+
+
+ +
+
+
+ ); +}; + +export default PoolDetailPage; diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index 411ddc6..c50d585 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -12,4 +12,5 @@ export type TPoolDetail = { protocol: number; pointer: string; }; + creator: string; }; diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index e1356f6..9e8bbbe 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -14,7 +14,7 @@ const Profile = (data: any) => { rows: Object.values(data.data).map((profile: any) => { return [ // eslint-disable-next-line react/jsx-key - + {truncatedString(profile.profileId)} , // eslint-disable-next-line react/jsx-key From 4e5430796a334abd90ced84710b0eaa7bcdf54c6 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 17:13:16 -0400 Subject: [PATCH 13/22] chore: wip mobile updates --- src/app/layout.tsx | 2 +- src/components/Pool/Pool.tsx | 18 +++++++++++++----- src/components/Pool/PoolDetail.tsx | 2 +- src/components/Registry/Profile.tsx | 4 +++- src/components/Table.tsx | 7 ++++++- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 69d43e5..6c3afa3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,7 +22,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index cfb3696..590fef7 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -2,8 +2,12 @@ // eslint-disable-file react/jsx-key import Table from "../Table"; import { TTableData } from "@/types/types"; -import { Address, convertBytesToShortString, truncatedString } from "../Address"; -import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils"; +import { Address } from "../Address"; +import { + convertChainIdToNetworkName, + formatAmount, + shortenPoolName, +} from "@/utils/utils"; import Link from "next/link"; // import Status from "../Status"; @@ -25,9 +29,13 @@ const Pool = (data: any) => { ], rows: Object.values(data.data).map((pool: any) => { return [ - - {truncatedString(pool.poolId)} - ,, + + {pool.poolId} + , + ,
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME // shortenPoolName("Pool Name is really long"), diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index e7c12af..738095a 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -23,7 +23,7 @@ const PoolDetailPage = ({ {/* {pool.name} */} "Pool Name" -

+

{pool.poolId}

diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index 9e8bbbe..6cc2976 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -15,7 +15,9 @@ const Profile = (data: any) => { return [ // eslint-disable-next-line react/jsx-key - {truncatedString(profile.profileId)} + + {truncatedString(profile.profileId)} + , // eslint-disable-next-line react/jsx-key
, diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 2cbd82d..b5bc060 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -19,7 +19,7 @@ const Table = ({ data }: { data: TTableData }) => {
+ <>
{ {/* Add margin for spacing */} {status ? "Active" : "Inactive"}
-
- + {data.headers.map((header, index) => ( ))} + + + {/* TODO: we need to dynamically display Anchor or Address depnding on profile or pool table */} + + {data.rows.map((row, index) => ( From 1811788644320bab4cc0e9bee9933a3c51c19bbd Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Tue, 19 Sep 2023 20:07:13 -0400 Subject: [PATCH 14/22] chore: more ui tweaks/add back button --- src/components/Pool/Pool.tsx | 4 ++++ src/components/Pool/PoolDetail.tsx | 26 ++++++++++++++++------- src/components/Registry/Profile.tsx | 1 + src/components/Registry/ProfileDetail.tsx | 12 +++++++---- src/components/Table.tsx | 14 ++++++------ 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 590fef7..1ada861 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -29,6 +29,7 @@ const Pool = (data: any) => { ], rows: Object.values(data.data).map((pool: any) => { return [ + // eslint-disable-next-line react/jsx-key { {pool.poolId} , , + // eslint-disable-next-line react/jsx-key
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME // shortenPoolName("Pool Name is really long"), + // eslint-disable-next-line react/jsx-key
, formatAmount(pool.amount), shortenPoolName(pool.profile.name), + // eslint-disable-next-line react/jsx-key
, convertChainIdToNetworkName(pool.chainId), ]; diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index 738095a..f648f6e 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -6,6 +6,7 @@ import { MetadataProtocol } from "@/types/types"; import { TbExternalLink } from "react-icons/tb"; import JsonView from "@uiw/react-json-view"; import { ethers } from "ethers"; +import Link from "next/link"; const PoolDetailPage = ({ pool, @@ -18,14 +19,23 @@ const PoolDetailPage = ({ return (
-
-

- {/* {pool.name} */} - "Pool Name" -

-

- {pool.poolId} -

+
+
+

+ {/* {pool.name} */} + This is a test pool +

+

+ {pool.poolId} +

+
+
+ + + +
diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index 6cc2976..bcbf1e7 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -1,4 +1,5 @@ "use client"; + import Link from "next/link"; import { Address, truncatedString } from "../Address"; import Table from "../Table"; diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx index aa9e2ed..f372c75 100644 --- a/src/components/Registry/ProfileDetail.tsx +++ b/src/components/Registry/ProfileDetail.tsx @@ -1,4 +1,5 @@ "use client"; + import { convertChainIdToNetworkName } from "@/utils/utils"; import { AddressResponsive } from "../Address"; import { TProfileDetails } from "./types"; @@ -6,7 +7,6 @@ import { MetadataProtocol } from "@/types/types"; import { TbExternalLink } from "react-icons/tb"; import JsonView from "@uiw/react-json-view"; - const ProfileDetail = ({ profile, metadata, @@ -83,8 +83,8 @@ const ProfileDetail = ({
    - {profile.members.map((member) => ( -
  • + {profile.members.map((member, index) => ( +
  • @@ -120,7 +120,11 @@ const ProfileDetail = ({
- +
diff --git a/src/components/Table.tsx b/src/components/Table.tsx index b5bc060..8e69582 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -40,12 +40,14 @@ const Table = ({ data }: { data: TTableData }) => { {data.rows.map((row, index) => (
{row.map((col, colIndex) => ( - + <> + + ))} ))} From 9a6c0197482093602f690b7e2b1bf96c95720c28 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Wed, 20 Sep 2023 18:29:45 -0400 Subject: [PATCH 15/22] chore: add queries to file --- .gitignore | 3 ++- src/utils/query.ts | 51 ++++++++++++++++++++++++++++++++++++---------- 2 files changed, 42 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index a0601ba..1ac22b7 100644 --- a/.gitignore +++ b/.gitignore @@ -33,4 +33,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts -.spec/connect.toml \ No newline at end of file +.spec/connect.toml +src/.env diff --git a/src/utils/query.ts b/src/utils/query.ts index f967427..a9eab32 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -1,5 +1,4 @@ -import { request, gql } from "graphql-request"; -import { graphqlEndpoint } from "./utils"; +import { gql } from "graphql-request"; export const getPoolDataQuery = gql` { @@ -19,13 +18,43 @@ export const getPoolDataQuery = gql` `; export const getProfileDataQuery = gql` - { - profiles { - profileId - anchor - name - chainId - creator - } + { + profiles { + profileId + anchor + name + chainId + creator + } + } +`; + +export const getAlloStatsQuery = gql` + AlloStats ($chainId: String!) { + allo(chainId: $chainId) { + registry + feePercentage + baseFee + treasury + cloneableStrategies + updatedAt } - `; + } +`; + +export const getAlloTransactions = gql` + { + alloTransactions { + hash + fromAddress + toAddress + functionName + functionArgs + status + blockHash + blockNumber + blockTimestamp + chainId + } + } +`; From 3c91a63879b4114569b1d4888914afa23eef66dc Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Wed, 20 Sep 2023 20:30:30 -0400 Subject: [PATCH 16/22] chore: issue displaying the pool details... --- src/app/pool/[chain]/[id]/page.tsx | 51 +++++++++++++++--------------- src/app/pool/page.tsx | 1 + src/components/Pool/PoolDetail.tsx | 21 +++++++----- src/components/Pool/types.ts | 17 +++++++--- src/utils/query.ts | 27 ++++++++++++++++ src/utils/utils.ts | 2 +- 6 files changed, 81 insertions(+), 38 deletions(-) diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx index 1433dfc..4ca6169 100644 --- a/src/app/pool/[chain]/[id]/page.tsx +++ b/src/app/pool/[chain]/[id]/page.tsx @@ -1,37 +1,38 @@ import PoolDetailPage from "@/components/Pool/PoolDetail"; import { TPoolDetail } from "@/components/Pool/types"; +import { getPoolDetailDataQuery } from "@/utils/query"; +import { graphqlEndpoint } from "@/utils/utils"; +import { request } from "graphql-request"; export default async function PoolDetail({ params, }: { - params: { id: string }; + params: { chain: string; id: string }; }) { - const pool: TPoolDetail = { - poolId: Number(params.id), - chainId: 58008, - strategy: "0x1a749965c9142c873298362333ed2545d4edd2da", - token: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", - amount: 1e17, - profile: { - name: "Apollo Pool", - owner: "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", - }, - metadata: { - protocol: 1, - pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", - }, - creator: "0x3f15B8c6F9939879Cb030D6dd935348E57109637" - }; - - const response = await fetch( - `https://ipfs.io/ipfs/${pool.metadata.pointer}`, + const poolDetails: TPoolDetail = await request( + graphqlEndpoint, + getPoolDetailDataQuery, + { + chainId: params.chain, + poolId: params.id, + } ); - let metadata = ""; - // Check if the response status is OK (200) - if (response.ok) { - metadata = await response.text(); + console.log(poolDetails); + let poolMetadata = "{}"; + + try { + const response = await fetch( + `https://ipfs.io/ipfs/${poolDetails.metadataPointer}` + ); + + // Check if the response status is OK (200) + if (response.ok) { + poolMetadata = await response.text(); + } + } catch (error) { + console.log(error); } - return ; + return ; } diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index f3b105f..c94a19f 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -17,3 +17,4 @@ export default async function PoolHome() { ); } +1 \ No newline at end of file diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index f648f6e..014f4b1 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -17,6 +17,8 @@ const PoolDetailPage = ({ }) => { const metadataObj = JSON.parse(metadata); + console.log("the fucking pool", pool); + return (
@@ -44,7 +46,7 @@ const PoolDetailPage = ({ Network
- {convertChainIdToNetworkName(pool.chainId)} + {convertChainIdToNetworkName(Number(pool.chainId))}
@@ -52,7 +54,10 @@ const PoolDetailPage = ({ Token
- {pool.token} +
@@ -60,7 +65,7 @@ const PoolDetailPage = ({ Amount
- {ethers.formatEther(pool.amount.toString())} + {ethers.formatEther(pool.amount ?? 0)} {pool.tokenMetadata?.symbol ?? ""}
@@ -69,23 +74,23 @@ const PoolDetailPage = ({
- Metadata ({MetadataProtocol[pool.metadata.protocol]}){" "} + Metadata ({MetadataProtocol[pool.metadataProtocol]}){" "}
- {pool.metadata.pointer} + {pool.metadataPointer} diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index c50d585..7bf9880 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -1,16 +1,25 @@ export type TPoolDetail = { - poolId: number; - chainId: number; + poolId: string; + chainId: string; strategy: string; token: string; - amount: number; + tokenMetadata: { + name: string | null; + symbol: string | null; + decimals: number | null; + } + amount: string; + metadataProtocol: number; + metadataPointer: string; profile: { + profileId: string; name: string; owner: string; + anchor: string; + creator: string; }; metadata: { protocol: number; pointer: string; }; - creator: string; }; diff --git a/src/utils/query.ts b/src/utils/query.ts index a9eab32..dea04c6 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -17,6 +17,33 @@ export const getPoolDataQuery = gql` } `; +export const getPoolDetailDataQuery = gql` + query GetPoolDetails($chainId: String!, $poolId: String!) { + pool(chainId: $chainId, poolId: $poolId) { + poolId + chainId + token + amount + strategy + metadataProtocol + metadataPointer + profileId + tokenMetadata + profile { + profileId + nonce + name + metadataProtocol + metadataPointer + owner + anchor + creator + createdAt + } + } + } +`; + export const getProfileDataQuery = gql` { profiles { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index d7501f1..f9bd33a 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -6,7 +6,7 @@ const networks = getNetworks(); export const graphqlEndpoint = "http://localhost:5555/graphql"; export const convertChainIdToNetworkName = (chainId: number) => { - return `${networks[chainId].name} (${chainId})`; + return `${networks[chainId]?.name} (${chainId})`; }; export function classNames(...classes: any[]) { From 2b6efc7abfb7b202acb9b7e779b61654986b5bce Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Wed, 20 Sep 2023 21:13:11 -0400 Subject: [PATCH 17/22] chore: not sure what is going on with render... --- package.json | 5 ++- src/app/pool/[chain]/[id]/page.tsx | 7 ++-- src/components/Pool/PoolDetail.tsx | 15 +++++--- src/components/Pool/types.ts | 28 +++++++-------- src/utils/query.ts | 8 +---- yarn.lock | 58 ++++++++++++++++++++++++++++++ 6 files changed, 89 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index aef883e..7a2517a 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "graphql-request": "^6.1.0", "heroicons": "^2.0.18", "next": "13.4.16", + "node-fetch": "^3.3.2", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", @@ -36,6 +37,8 @@ }, "devDependencies": { "@uiw/react-json-view": "^2.0.0-alpha.4", - "ts-jest": "^29.1.1" + "bufferutil": "^4.0.7", + "ts-jest": "^29.1.1", + "utf-8-validate": "^6.0.3" } } diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx index 4ca6169..85b3a5c 100644 --- a/src/app/pool/[chain]/[id]/page.tsx +++ b/src/app/pool/[chain]/[id]/page.tsx @@ -18,12 +18,13 @@ export default async function PoolDetail({ } ); - console.log(poolDetails); + console.log("Details", poolDetails); let poolMetadata = "{}"; try { const response = await fetch( - `https://ipfs.io/ipfs/${poolDetails.metadataPointer}` + `https://ipfs.io/ipfs/${poolDetails.metadataPointer}`, + { next: { revalidate: 300 } } ); // Check if the response status is OK (200) @@ -34,5 +35,5 @@ export default async function PoolDetail({ console.log(error); } - return ; + return ; } diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index 014f4b1..9518242 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -1,4 +1,5 @@ "use client"; + import { convertChainIdToNetworkName } from "@/utils/utils"; import { AddressResponsive } from "../Address"; import { TPoolDetail } from "./types"; @@ -7,19 +8,20 @@ import { TbExternalLink } from "react-icons/tb"; import JsonView from "@uiw/react-json-view"; import { ethers } from "ethers"; import Link from "next/link"; +import { Loading } from "../Loading"; const PoolDetailPage = ({ pool, - metadata, + poolMetadata, }: { pool: TPoolDetail; - metadata: string; + poolMetadata: string; }) => { - const metadataObj = JSON.parse(metadata); + const metadataObj: {} = JSON.parse(poolMetadata); console.log("the fucking pool", pool); - return ( + return pool && pool.profile ? (
@@ -65,7 +67,8 @@ const PoolDetailPage = ({ Amount
- {ethers.formatEther(pool.amount ?? 0)} {pool.tokenMetadata?.symbol ?? ""} + {ethers.formatEther(pool.amount ?? 0)}{" "} + {pool.tokenMetadata.symbol ?? ""}
@@ -107,6 +110,8 @@ const PoolDetailPage = ({
+ ) : ( + ); }; diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index 7bf9880..d72ef03 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -1,25 +1,21 @@ export type TPoolDetail = { - poolId: string; - chainId: string; - strategy: string; - token: string; - tokenMetadata: { - name: string | null; - symbol: string | null; - decimals: number | null; - } amount: string; - metadataProtocol: number; + chainId: string; metadataPointer: string; + metadataProtocol: number; + poolId: string; profile: { - profileId: string; - name: string; - owner: string; anchor: string; creator: string; + name: string; + owner: string; }; - metadata: { - protocol: number; - pointer: string; + strategy: string; + token: string; + tokenMetadata: { + name: string; + symbol: string; + decimals: number; }; + }; diff --git a/src/utils/query.ts b/src/utils/query.ts index dea04c6..e0e694a 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -27,18 +27,12 @@ export const getPoolDetailDataQuery = gql` strategy metadataProtocol metadataPointer - profileId tokenMetadata profile { - profileId - nonce name - metadataProtocol - metadataPointer owner anchor creator - createdAt } } } @@ -57,7 +51,7 @@ export const getProfileDataQuery = gql` `; export const getAlloStatsQuery = gql` - AlloStats ($chainId: String!) { + query AlloStats ($chainId: String!) { allo(chainId: $chainId) { registry feePercentage diff --git a/yarn.lock b/yarn.lock index 6951f8b..f80df9c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -623,6 +623,13 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "2.x" +bufferutil@^4.0.7: + version "4.0.7" + resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.7.tgz#60c0d19ba2c992dd8273d3f73772ffc894c153ad" + integrity sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw== + dependencies: + node-gyp-build "^4.3.0" + busboy@1.6.0: version "1.6.0" resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz" @@ -763,6 +770,11 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== +data-uri-to-buffer@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e" + integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A== + debug@^3.2.7: version "3.2.7" resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz" @@ -1200,6 +1212,14 @@ fastq@^1.6.0: dependencies: reusify "^1.0.4" +fetch-blob@^3.1.2, fetch-blob@^3.1.4: + version "3.2.0" + resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9" + integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ== + dependencies: + node-domexception "^1.0.0" + web-streams-polyfill "^3.0.3" + file-entry-cache@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz" @@ -1243,6 +1263,13 @@ for-each@^0.3.3: dependencies: is-callable "^1.1.3" +formdata-polyfill@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423" + integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g== + dependencies: + fetch-blob "^3.1.2" + fraction.js@^4.2.0: version "4.3.6" resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz" @@ -1906,6 +1933,11 @@ next@13.4.16: "@next/swc-win32-ia32-msvc" "13.4.16" "@next/swc-win32-x64-msvc" "13.4.16" +node-domexception@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5" + integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ== + node-fetch@^2.6.12: version "2.7.0" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" @@ -1913,6 +1945,20 @@ node-fetch@^2.6.12: dependencies: whatwg-url "^5.0.0" +node-fetch@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b" + integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA== + dependencies: + data-uri-to-buffer "^4.0.0" + fetch-blob "^3.1.4" + formdata-polyfill "^4.0.10" + +node-gyp-build@^4.3.0: + version "4.6.1" + resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.6.1.tgz#24b6d075e5e391b8d5539d98c7fc5c210cac8a3e" + integrity sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ== + node-releases@^2.0.13: version "2.0.13" resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz" @@ -2660,6 +2706,13 @@ use-sync-external-store@^1.2.0: resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== +utf-8-validate@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-6.0.3.tgz#7d8c936d854e86b24d1d655f138ee27d2636d777" + integrity sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA== + dependencies: + node-gyp-build "^4.3.0" + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz" @@ -2673,6 +2726,11 @@ watchpack@2.4.0: glob-to-regexp "^0.4.1" graceful-fs "^4.1.2" +web-streams-polyfill@^3.0.3: + version "3.2.1" + resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6" + integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q== + webidl-conversions@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" From 8f0e43c55b499441166ed97d075513cef5fee35d Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Thu, 21 Sep 2023 14:47:31 +0200 Subject: [PATCH 18/22] updated pool data --- src/app/pool/[chain]/[id]/page.tsx | 13 +++--- src/components/Pool/PoolDetail.tsx | 68 ++++++++++++++++++++++++++---- src/components/Pool/types.ts | 1 + src/types/types.ts | 1 + src/utils/networks.ts | 5 +++ src/utils/query.ts | 1 + 6 files changed, 76 insertions(+), 13 deletions(-) diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx index 85b3a5c..857c14b 100644 --- a/src/app/pool/[chain]/[id]/page.tsx +++ b/src/app/pool/[chain]/[id]/page.tsx @@ -9,31 +9,34 @@ export default async function PoolDetail({ }: { params: { chain: string; id: string }; }) { - const poolDetails: TPoolDetail = await request( + + const poolDetails: any = await request( graphqlEndpoint, getPoolDetailDataQuery, { chainId: params.chain, poolId: params.id, - } + }, ); + const { pool }: { pool: TPoolDetail } = poolDetails; + console.log("Details", poolDetails); let poolMetadata = "{}"; try { const response = await fetch( - `https://ipfs.io/ipfs/${poolDetails.metadataPointer}`, - { next: { revalidate: 300 } } + `https://ipfs.io/ipfs/${pool.metadataPointer}` ); // Check if the response status is OK (200) if (response.ok) { poolMetadata = await response.text(); + console.log("Pool metadata ", poolMetadata); } } catch (error) { console.log(error); } - return ; + return ; } diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index 9518242..8bfa8c3 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -1,7 +1,7 @@ "use client"; import { convertChainIdToNetworkName } from "@/utils/utils"; -import { AddressResponsive } from "../Address"; +import { AddressResponsive, truncatedString } from "../Address"; import { TPoolDetail } from "./types"; import { MetadataProtocol } from "@/types/types"; import { TbExternalLink } from "react-icons/tb"; @@ -9,6 +9,32 @@ import JsonView from "@uiw/react-json-view"; import { ethers } from "ethers"; import Link from "next/link"; import { Loading } from "../Loading"; +import { getNetworks } from "@/utils/networks"; + + +// { +// "pool": { +// "poolId": "1", +// "chainId": "5", +// "token": "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", +// "amount": "0", +// "strategy": "0x1a749965c9142c873298362333ed2545d4edd2da", +// "metadataProtocol": 1, +// "metadataPointer": "bafybeia4khbew3r2mkflyn7nzlvfzcb3qpfeftz5ivpzfwn77ollj47gqi", +// "tokenMetadata": { +// "name": null, +// "symbol": null, +// "decimals": null +// }, +// "profile": { +// "name": "Whoop Whoop", +// "owner": "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", +// "anchor": "0x4157199a3dfae237b67aba88b593735aea9d5d33", +// "creator": "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce" +// } +// } +// } + const PoolDetailPage = ({ pool, @@ -20,14 +46,14 @@ const PoolDetailPage = ({ const metadataObj: {} = JSON.parse(poolMetadata); console.log("the fucking pool", pool); + console.log("Pool metadata ", poolMetadata); - return pool && pool.profile ? ( + return (

- {/* {pool.name} */} - This is a test pool + Pool ID:

{pool.poolId} @@ -43,6 +69,17 @@ const PoolDetailPage = ({

+
+
+ Strategy +
+
+ +
+
Network @@ -67,8 +104,12 @@ const PoolDetailPage = ({ Amount
- {ethers.formatEther(pool.amount ?? 0)}{" "} - {pool.tokenMetadata.symbol ?? ""} + {ethers.formatUnits( + pool.amount ?? 0, + pool.tokenMetadata.decimals ?? 18, + )}{" "} + {pool.tokenMetadata.symbol ?? + getNetworks()[Number(pool.chainId)].symbol}
@@ -82,6 +123,19 @@ const PoolDetailPage = ({ />
+
+
+ Profile +
+
+ {pool.profile.name} + + +
+ {pool.profile.profileId} + +
+
Metadata ({MetadataProtocol[pool.metadataProtocol]}){" "} @@ -110,8 +164,6 @@ const PoolDetailPage = ({
- ) : ( - ); }; diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index d72ef03..3dd170a 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -5,6 +5,7 @@ export type TPoolDetail = { metadataProtocol: number; poolId: string; profile: { + profileId: string; anchor: string; creator: string; name: string; diff --git a/src/types/types.ts b/src/types/types.ts index c330a24..c302dc9 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -33,6 +33,7 @@ export type TNetworkData = { explorer: string; coreContracts: ICoreContracts; strategyContracts: IStrategyContracts; + symbol: string; }; export type TTableData = { diff --git a/src/utils/networks.ts b/src/utils/networks.ts index 1e66046..3bfcb94 100644 --- a/src/utils/networks.ts +++ b/src/utils/networks.ts @@ -48,6 +48,7 @@ export const getNetworks = (): INetwork => { explorer: "https://goerli.etherscan.io/", coreContracts: coreContracts, strategyContracts: strategyContracts, + symbol: "gETH", }, [420]: { id: "420", @@ -56,6 +57,7 @@ export const getNetworks = (): INetwork => { explorer: "https://goerli-optimism.etherscan.io/", coreContracts: coreContracts, strategyContracts: strategyContracts, + symbol: "opETH", }, [42069]: { id: "42069", @@ -64,6 +66,7 @@ export const getNetworks = (): INetwork => { explorer: "https://sepolia.etherscan.io/", coreContracts: coreContracts, strategyContracts: strategyContracts, + symbol: "sETH", }, [58008]: { id: "58008", @@ -72,6 +75,7 @@ export const getNetworks = (): INetwork => { explorer: "https://explorer.sepolia.publicgoods.network/", coreContracts: coreContracts, strategyContracts: strategyContracts, + symbol: "pgnETH", }, [44787]: { id: "44787", @@ -80,6 +84,7 @@ export const getNetworks = (): INetwork => { explorer: "https://explorer.celo.org/alfajores/", coreContracts: coreContracts, strategyContracts: strategyContracts, + symbol: "CELO", }, }; }; diff --git a/src/utils/query.ts b/src/utils/query.ts index e0e694a..8617c43 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -29,6 +29,7 @@ export const getPoolDetailDataQuery = gql` metadataPointer tokenMetadata profile { + profileId name owner anchor From 3124c3069f9560c4d1ad8debfa0bc15c3f03adf0 Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Thu, 21 Sep 2023 14:48:50 +0200 Subject: [PATCH 19/22] updated pool data --- src/components/Pool/PoolDetail.tsx | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index 8bfa8c3..a24eb4e 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -11,31 +11,6 @@ import Link from "next/link"; import { Loading } from "../Loading"; import { getNetworks } from "@/utils/networks"; - -// { -// "pool": { -// "poolId": "1", -// "chainId": "5", -// "token": "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", -// "amount": "0", -// "strategy": "0x1a749965c9142c873298362333ed2545d4edd2da", -// "metadataProtocol": 1, -// "metadataPointer": "bafybeia4khbew3r2mkflyn7nzlvfzcb3qpfeftz5ivpzfwn77ollj47gqi", -// "tokenMetadata": { -// "name": null, -// "symbol": null, -// "decimals": null -// }, -// "profile": { -// "name": "Whoop Whoop", -// "owner": "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce", -// "anchor": "0x4157199a3dfae237b67aba88b593735aea9d5d33", -// "creator": "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce" -// } -// } -// } - - const PoolDetailPage = ({ pool, poolMetadata, @@ -45,9 +20,6 @@ const PoolDetailPage = ({ }) => { const metadataObj: {} = JSON.parse(poolMetadata); - console.log("the fucking pool", pool); - console.log("Pool metadata ", poolMetadata); - return (
From b1ceb1084155a7f609b87c5e9cf117e56d824638 Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Thu, 21 Sep 2023 16:34:41 +0200 Subject: [PATCH 20/22] profile details --- src/app/pool/page.tsx | 8 ++- src/app/profile/[chain]/[id]/page.tsx | 52 +++++++++++--------- src/components/Dashboard.tsx | 22 ++++++--- src/components/Pool/Pool.tsx | 10 ++-- src/components/Pool/PoolDetail.tsx | 10 +++- src/components/Registry/Profile.tsx | 13 +++-- src/components/Registry/ProfileDetail.tsx | 59 +++++++++++++++++------ src/components/Registry/types.ts | 17 ++++--- src/components/Table.tsx | 38 +++++++++++---- src/types/types.ts | 2 - src/utils/query.ts | 41 ++++++++++++++++ 11 files changed, 195 insertions(+), 77 deletions(-) diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index c94a19f..db273df 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -13,8 +13,12 @@ export default async function PoolHome() { return ( }> - + ); } -1 \ No newline at end of file +1; diff --git a/src/app/profile/[chain]/[id]/page.tsx b/src/app/profile/[chain]/[id]/page.tsx index 9ccc010..1b9fb2f 100644 --- a/src/app/profile/[chain]/[id]/page.tsx +++ b/src/app/profile/[chain]/[id]/page.tsx @@ -1,39 +1,45 @@ import ProfileDetail from "@/components/Registry/ProfileDetail"; import { TProfileDetails } from "@/components/Registry/types"; +import { getProfileDetailDataQuery } from "@/utils/query"; +import { graphqlEndpoint } from "@/utils/utils"; +import request from "graphql-request"; export default async function ProfileDetailPage({ params, }: { params: { id: string, chain: number }; }) { - const profile: TProfileDetails = { - profileId: - "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", - name: "1000x Super Shiba Doge Moon Elon", - chainId: params.chain, - creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD", - metadata: { - protocol: 1, - pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", - }, - nonce: 1337, - owner: "0xa671616e3580D3611139834Cd34D7838e82A04cD", - members: [ - "0xa71864fAd36439C50924359ECfF23Bb185FFDf21", - "0x3f15B8c6F9939879Cb030D6dd935348E57109637", - ], - adminRoleId: - "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - memberRoleId: - "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", - }; +// const profile: TProfileDetails = { +// profileId: +// "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", +// anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", +// name: "1000x Super Shiba Doge Moon Elon", +// chainId: params.chain, +// creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD", +// metadataProtocol: 1, +// metadataPointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", + +// nonce: 1337, +// owner: "0xa671616e3580D3611139834Cd34D7838e82A04cD", +// }; + + const profileDetails: any = await request( + graphqlEndpoint, + getProfileDetailDataQuery, + { + chainId: params.chain, + profileId: params.id, + }, + ); + + const profile: TProfileDetails = profileDetails.profile; const response = await fetch( - `https://ipfs.io/ipfs/${profile.metadata.pointer}`, + `https://ipfs.io/ipfs/${profile.metadataPointer}`, ); let metadata = ""; + // Check if the response status is OK (200) if (response.ok) { metadata = await response.text(); diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 88efdad..391b48b 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -10,9 +10,6 @@ export const Dashboard = () => { const networkData = getNetworksBySlug(network); const dataCore: TTableData = { - name: "Allo-At-A-Glance", - description: - "A list of all the core contracts in the registry on all supported networks", headers: ["Contract", "Address"], rows: Object.values(networkData.coreContracts).map((contract) => { return [ @@ -27,9 +24,6 @@ export const Dashboard = () => { }; const dataStrategy: TTableData = { - name: "Cloneable Strategy Contracts", - description: - "A list of all the strategy contracts in the registry on all supported networks", headers: ["Contract", "Address"], rows: Object.values(networkData.strategyContracts).map((contract) => { return [ @@ -45,8 +39,20 @@ export const Dashboard = () => { return (
-
{
IDAnchress
- {col} - + {col} +
-
+
+
); }; diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 1ada861..ac76438 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -11,11 +11,9 @@ import { import Link from "next/link"; // import Status from "../Status"; -const Pool = (data: any) => { +const Pool = ({data, header, description}: {data: any, header?: string, description?: string}) => { + const tableData: TTableData = { - name: "Pools", - description: - "A list of all the ools in the registry on all supported networks", headers: [ "ID", "Address", @@ -27,7 +25,7 @@ const Pool = (data: any) => { "Profile Owner", "Network", ], - rows: Object.values(data.data).map((pool: any) => { + rows: Object.values(data).map((pool: any) => { return [ // eslint-disable-next-line react/jsx-key { }), }; - return
; + return
; }; export default Pool; diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index a24eb4e..4bb308d 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -18,7 +18,15 @@ const PoolDetailPage = ({ pool: TPoolDetail; poolMetadata: string; }) => { - const metadataObj: {} = JSON.parse(poolMetadata); + + let metadataObj; + try { + metadataObj = JSON.parse(poolMetadata); + } catch (error) { + metadataObj = { + error: "Error parsing metadata", + }; + } return (
diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index bcbf1e7..0996cdd 100644 --- a/src/components/Registry/Profile.tsx +++ b/src/components/Registry/Profile.tsx @@ -8,9 +8,6 @@ import { convertChainIdToNetworkName } from "@/utils/utils"; const Profile = (data: any) => { const tableData: TTableData = { - name: "Profiles", - description: - "A list of all the profiles in the registry on all supported networks", headers: ["ID", "Anchor", "Name", "Sender", "Network"], rows: Object.values(data.data).map((profile: any) => { return [ @@ -30,7 +27,15 @@ const Profile = (data: any) => { }), }; - return
; + return ( +
+ ); }; export default Profile; diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx index f372c75..50841d2 100644 --- a/src/components/Registry/ProfileDetail.tsx +++ b/src/components/Registry/ProfileDetail.tsx @@ -6,6 +6,8 @@ import { TProfileDetails } from "./types"; import { MetadataProtocol } from "@/types/types"; import { TbExternalLink } from "react-icons/tb"; import JsonView from "@uiw/react-json-view"; +import Link from "next/link"; +import Pool from "../Pool/Pool"; const ProfileDetail = ({ profile, @@ -14,17 +16,33 @@ const ProfileDetail = ({ profile: TProfileDetails; metadata: string; }) => { - const metadataObj = JSON.parse(metadata); + let metadataObj; + try { + metadataObj = JSON.parse(metadata); + } catch (error) { + metadataObj = { + error: "Error parsing metadata", + }; + } return ( -
-
-

- {profile.name} -

-

- {profile.profileId} -

+
+
+
+

+ {profile.name} +

+

+ {profile.profileId} +

+
+
+ + + +
@@ -83,13 +101,16 @@ const ProfileDetail = ({
    - {profile.members.map((member, index) => ( -
  • + {profile.role.roleAccounts.map((account, index) => ( +
  • @@ -102,16 +123,16 @@ const ProfileDetail = ({
    - Metadata ({MetadataProtocol[profile.metadata.protocol]}){" "} + Metadata ({MetadataProtocol[profile.metadataProtocol]}){" "}
    - {profile.metadata.pointer} + {profile.metadataPointer} @@ -127,6 +148,14 @@ const ProfileDetail = ({ />
    + {profile.pools.length > 0 && ( + <> +
    + Pools +
    + + + )}
    ); }; diff --git a/src/components/Registry/types.ts b/src/components/Registry/types.ts index e50a040..859ecb7 100644 --- a/src/components/Registry/types.ts +++ b/src/components/Registry/types.ts @@ -1,5 +1,3 @@ -import { Metadata } from "@/types/types"; - export type TProfile = { profileId: string; anchor: string; @@ -9,10 +7,17 @@ export type TProfile = { } export type TProfileDetails = TProfile & { - metadata: Metadata; + createdAt: string; + pools: { + poolId: string; + }[]; + metadataPointer: string; + metadataProtocol: number; nonce: number; owner: string; - members: string[]; - adminRoleId: string; - memberRoleId: string; + role: { + roleAccounts: { + accountId: string; + }[]; + }; } \ No newline at end of file diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 8e69582..edcfd5f 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -1,18 +1,36 @@ import { TTableData } from "@/types/types"; -const Table = ({ data }: { data: TTableData }) => { +const Table = ({ + data, + header, + description, +}: { + data: TTableData; + header: string | undefined | ""; + description: string | undefined | ""; +}) => { return ( <> -
    +
    -
    -

    - {data.name} -

    -

    - {data.description} -

    -
    + {(header || description) && ( +
    + {header && ( +

    + {header} +

    + )} + {description && ( +

    + {description} +

    + )} +
    + )}
    diff --git a/src/types/types.ts b/src/types/types.ts index c302dc9..48e60d5 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -37,8 +37,6 @@ export type TNetworkData = { }; export type TTableData = { - name: string; - description: string; headers: string[]; rows: any[][]; }; diff --git a/src/utils/query.ts b/src/utils/query.ts index 8617c43..0d71cd3 100644 --- a/src/utils/query.ts +++ b/src/utils/query.ts @@ -51,6 +51,47 @@ export const getProfileDataQuery = gql` } `; +export const getProfileDetailDataQuery = gql` + query getProfileDetails($chainId: String!, $profileId: String!) { + profile(chainId: $chainId, profileId: $profileId) { + pools { + poolId + chainId + token + amount + strategy + metadataProtocol + metadataPointer + tokenMetadata + profile { + profileId + name + owner + anchor + creator + } + } + + profileId + anchor + name + chainId + creator + createdAt + metadataPointer + metadataProtocol + nonce + owner + + role { + roleAccounts { + accountId + } + } + } + } +`; + export const getAlloStatsQuery = gql` query AlloStats ($chainId: String!) { allo(chainId: $chainId) { From 094eb05b2687c2bac6cca552493dfa21529ccff3 Mon Sep 17 00:00:00 2001 From: 0xKurt Date: Thu, 21 Sep 2023 16:35:43 +0200 Subject: [PATCH 21/22] added created at --- src/components/Registry/ProfileDetail.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx index 50841d2..83a5c16 100644 --- a/src/components/Registry/ProfileDetail.tsx +++ b/src/components/Registry/ProfileDetail.tsx @@ -73,6 +73,14 @@ const ProfileDetail = ({ />
+
+
+ Created at +
+
+ {new Date(profile.createdAt).toLocaleString()} +
+
Creator From bb60023874eeb196ca78edadfb551413fcfc0377 Mon Sep 17 00:00:00 2001 From: Jaxcoder Date: Thu, 21 Sep 2023 13:02:18 -0400 Subject: [PATCH 22/22] chore: finish up details/some cleanup --- src/app/pool/[chain]/[id]/page.tsx | 2 -- src/app/pool/page.tsx | 2 +- src/app/profile/[chain]/[id]/page.tsx | 15 ------------ src/components/Address.tsx | 26 ++++++++------------- src/components/Loading.tsx | 20 ++-------------- src/components/Navbar.tsx | 16 ++----------- src/components/Pool/Pool.tsx | 7 +----- src/components/Pool/PoolDetail.tsx | 28 +++++++++++------------ src/components/Pool/types.ts | 1 - src/components/Registry/ProfileDetail.tsx | 2 +- src/components/Table.tsx | 10 ++++---- 11 files changed, 34 insertions(+), 95 deletions(-) diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx index 857c14b..952130c 100644 --- a/src/app/pool/[chain]/[id]/page.tsx +++ b/src/app/pool/[chain]/[id]/page.tsx @@ -21,7 +21,6 @@ export default async function PoolDetail({ const { pool }: { pool: TPoolDetail } = poolDetails; - console.log("Details", poolDetails); let poolMetadata = "{}"; try { @@ -32,7 +31,6 @@ export default async function PoolDetail({ // Check if the response status is OK (200) if (response.ok) { poolMetadata = await response.text(); - console.log("Pool metadata ", poolMetadata); } } catch (error) { console.log(error); diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index db273df..19015e9 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -6,7 +6,7 @@ import { request } from "graphql-request"; import { Suspense } from "react"; export default async function PoolHome() { - // FIXME: THE API DOES NOT RETURN THE POOL NAME AND STATUS + // FIXME: THE API DOES NOT RETURN THE STATUS const data: any = await request(graphqlEndpoint, getPoolDataQuery); const { pools } = data; diff --git a/src/app/profile/[chain]/[id]/page.tsx b/src/app/profile/[chain]/[id]/page.tsx index 1b9fb2f..9a9c604 100644 --- a/src/app/profile/[chain]/[id]/page.tsx +++ b/src/app/profile/[chain]/[id]/page.tsx @@ -9,20 +9,6 @@ export default async function ProfileDetailPage({ }: { params: { id: string, chain: number }; }) { -// const profile: TProfileDetails = { -// profileId: -// "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415", -// anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637", -// name: "1000x Super Shiba Doge Moon Elon", -// chainId: params.chain, -// creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD", -// metadataProtocol: 1, -// metadataPointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu", - -// nonce: 1337, -// owner: "0xa671616e3580D3611139834Cd34D7838e82A04cD", -// }; - const profileDetails: any = await request( graphqlEndpoint, getProfileDetailDataQuery, @@ -40,7 +26,6 @@ export default async function ProfileDetailPage({ let metadata = ""; - // Check if the response status is OK (200) if (response.ok) { metadata = await response.text(); } diff --git a/src/components/Address.tsx b/src/components/Address.tsx index 3838f4b..7bdf25c 100644 --- a/src/components/Address.tsx +++ b/src/components/Address.tsx @@ -1,5 +1,3 @@ -"use client"; - import { getNetworks } from "@/utils/networks"; import { TbCopy, TbExternalLink } from "react-icons/tb"; @@ -31,12 +29,7 @@ export const Address = (props: { address: string; chainId: number }) => {
@@ -64,12 +57,7 @@ export const AddressFull = (props: { address: string; chainId: number }) => {
@@ -83,10 +71,14 @@ export const AddressResponsive = (props: { }) => { return (
-
{/* Show on sm screens, hide on md screens */} +
+ {" "} + {/* Show on sm screens, hide on md screens */}
-
{/* Show on md screens, hide on sm screens */} +
+ {" "} + {/* Show on md screens, hide on sm screens */}
@@ -95,4 +87,4 @@ export const AddressResponsive = (props: { export const truncatedString = (str: string) => { return
{str}
; -} +}; diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 9eafba7..31835c7 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -1,23 +1,7 @@ export const Loading = () => { return ( -
- - Loading... +
+
); }; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 148a82b..d2568a9 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,16 +1,9 @@ "use client"; import logo from "@/assets/logo.svg"; -import { Disclosure, Menu, Transition } from "@headlessui/react"; -import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline"; +import { Disclosure } from "@headlessui/react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; import Image from "next/image"; import Link from "next/link"; -import { Fragment } from "react"; -// import SelectNetwork from "./SelectNetwork"; -// import Sort from "./Sort"; - -// function classNames(...classes: any) { -// return classes.filter(Boolean).join(" "); -// } const Navbar = () => { return ( @@ -49,11 +42,6 @@ const Navbar = () => {
- {/*
-
- -
-
*/}
{/* Mobile menu button */} diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index ac76438..28fb20e 100644 --- a/src/components/Pool/Pool.tsx +++ b/src/components/Pool/Pool.tsx @@ -1,5 +1,5 @@ "use client"; -// eslint-disable-file react/jsx-key + import Table from "../Table"; import { TTableData } from "@/types/types"; import { Address } from "../Address"; @@ -9,7 +9,6 @@ import { shortenPoolName, } from "@/utils/utils"; import Link from "next/link"; -// import Status from "../Status"; const Pool = ({data, header, description}: {data: any, header?: string, description?: string}) => { @@ -17,10 +16,8 @@ const Pool = ({data, header, description}: {data: any, header?: string, descript headers: [ "ID", "Address", - // "Name", "Token", "Amount", - // "Status", "Profile Name", "Profile Owner", "Network", @@ -37,8 +34,6 @@ const Pool = ({data, header, description}: {data: any, header?: string, descript , // eslint-disable-next-line react/jsx-key
, - // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME - // shortenPoolName("Pool Name is really long"), // eslint-disable-next-line react/jsx-key
, formatAmount(pool.amount), diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx index 4bb308d..95bd1ef 100644 --- a/src/components/Pool/PoolDetail.tsx +++ b/src/components/Pool/PoolDetail.tsx @@ -1,14 +1,13 @@ "use client"; import { convertChainIdToNetworkName } from "@/utils/utils"; -import { AddressResponsive, truncatedString } from "../Address"; +import { AddressResponsive } from "../Address"; import { TPoolDetail } from "./types"; import { MetadataProtocol } from "@/types/types"; import { TbExternalLink } from "react-icons/tb"; import JsonView from "@uiw/react-json-view"; import { ethers } from "ethers"; import Link from "next/link"; -import { Loading } from "../Loading"; import { getNetworks } from "@/utils/networks"; const PoolDetailPage = ({ @@ -18,15 +17,14 @@ const PoolDetailPage = ({ pool: TPoolDetail; poolMetadata: string; }) => { - - let metadataObj; - try { - metadataObj = JSON.parse(poolMetadata); - } catch (error) { - metadataObj = { - error: "Error parsing metadata", - }; - } + let metadataObj; + try { + metadataObj = JSON.parse(poolMetadata); + } catch (error) { + metadataObj = { + error: "Error parsing metadata", + }; + } return (
@@ -86,7 +84,7 @@ const PoolDetailPage = ({
{ethers.formatUnits( pool.amount ?? 0, - pool.tokenMetadata.decimals ?? 18, + pool.tokenMetadata.decimals ?? 18 )}{" "} {pool.tokenMetadata.symbol ?? getNetworks()[Number(pool.chainId)].symbol} @@ -110,9 +108,11 @@ const PoolDetailPage = ({
{pool.profile.name} - +
- {pool.profile.profileId} + + {pool.profile.profileId} +
diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index 3dd170a..4c3b8b3 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -18,5 +18,4 @@ export type TPoolDetail = { symbol: string; decimals: number; }; - }; diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx index 83a5c16..8ce37a8 100644 --- a/src/components/Registry/ProfileDetail.tsx +++ b/src/components/Registry/ProfileDetail.tsx @@ -18,7 +18,7 @@ const ProfileDetail = ({ }) => { let metadataObj; try { - metadataObj = JSON.parse(metadata); + metadataObj = JSON.parse(metadata ?? ""); } catch (error) { metadataObj = { error: "Error parsing metadata", diff --git a/src/components/Table.tsx b/src/components/Table.tsx index edcfd5f..1f1c478 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -1,5 +1,8 @@ import { TTableData } from "@/types/types"; +/** TODO: the mobile view needs to be completed + * we could create a new component for mobile view entirely +*/ const Table = ({ data, header, @@ -37,7 +40,7 @@ const Table = ({
- + {data.headers.map((header, index) => ( - - - {/* TODO: we need to dynamically display Anchor or Address depnding on profile or pool table */} - - {data.rows.map((row, index) => (
))}
IDAnchress