├── .env.example ├── .eslintrc.json ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── components ├── account │ └── tokens.tsx ├── layout.tsx ├── nav.tsx ├── notifications │ └── success.tsx ├── program-mini-card.tsx ├── program │ ├── accounts-data │ │ ├── account-selector.tsx │ │ ├── filter.tsx │ │ └── index.tsx │ ├── builds.tsx │ ├── idl-viewer.tsx │ ├── idl │ │ ├── accounts.tsx │ │ ├── constants.tsx │ │ ├── errors.tsx │ │ ├── events.tsx │ │ ├── instructions.tsx │ │ └── types.tsx │ ├── index.tsx │ ├── metadata.tsx │ ├── program-banner.tsx │ ├── readme.tsx │ ├── source-files.tsx │ ├── source.tsx │ └── tabs.tsx ├── search.tsx └── status.tsx ├── context ├── AutoConnectProvider.tsx └── ContextProvider.tsx ├── hooks └── useAuth.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── 404.tsx ├── _app.tsx ├── _document.tsx ├── _error.js ├── account.tsx ├── api │ ├── auth │ │ └── [...nextauth].js │ ├── idl.ts │ ├── keys.ts │ └── user.ts ├── idl │ └── [address].tsx ├── index.tsx └── program │ └── [address] │ ├── build │ └── [id].tsx │ └── index.tsx ├── postcss.config.js ├── public ├── banner-text copy.png ├── banner-text.png ├── boxes.png ├── favicon.ico ├── logo.png ├── missing.png └── social.png ├── sentry.client.config.js ├── sentry.properties ├── sentry.server.config.js ├── src ├── Copyright.tsx ├── ProTip.tsx ├── createEmotionCache.ts └── theme.ts ├── style.css ├── tailwind.config.js ├── tsconfig.json ├── types ├── index.d.ts └── next-auth.d.ts ├── utils ├── apps-data.json ├── build-status.ts ├── fetcher-md.js ├── fetcher-multi.js ├── fetcher.js ├── files-tree.ts ├── format-date.ts ├── from-now.js ├── loadMoreApps.js ├── markdown.js ├── network-status.ts └── renderArguments.tsx └── yarn.lock /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_API_ENDPOINT=urlgoeshere 2 | NEXT_PUBLIC_NETWORK_ENV=devnet 3 | NEXTAUTH_URL=http://localhost:3000 4 | NEXT_PUBLIC_SENTRY_DSN= 5 | SENTRY_AUTH_TOKEN= 6 | SENTRY_ORG= 7 | SENTRY_PROJECT= 8 | NEXT_PUBLIC_NODE_URL=https://ssc-dao.genesysgo.net/ 9 | SKIP_BUILD_STATIC_GENERATION=true -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next/core-web-vitals", 4 | "prettier" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | .idea 37 | # Sentry 38 | .sentryclirc 39 | 40 | # Sentry 41 | .sentryclirc 42 | 43 | # Sentry 44 | .sentryclirc 45 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Anchor 2 | 3 | Thank you for your interest in contributing to apr! All contributions are welcome no 4 | matter how big or small. This includes (but is not limited to) filing issues, 5 | adding documentation, fixing bugs, creating examples, and implementing features. 6 | 7 | ## Finding issues to work on 8 | 9 | If you're looking to get started, 10 | check out [good first issues](https://github.com/coral-xyz/apr-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 11 | or issues where [help is wanted](https://github.com/coral-xyz/apr-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22). 12 | For simple documentation changes or typos, feel free to just open a pull request. 13 | 14 | If you're considering larger changes or self motivated features, please file an issue 15 | and engage with the maintainers in [Discord](https://discord.gg/sxy4zxBckh). 16 | 17 | ## Choosing an issue 18 | 19 | If you'd like to contribute, please claim an issue by commenting, forking, and 20 | opening a pull request, even if empty. This allows the maintainers to track who 21 | is working on what issue as to not overlap work. 22 | 23 | ## Issue Guidelines 24 | 25 | Please follow these guidelines: 26 | 27 | Before coding: 28 | 29 | - choose a branch name that describes the issue you're working on 30 | - enable [commit signing](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) 31 | 32 | While coding: 33 | 34 | - Submit a draft PR asap 35 | - Only change code directly relevant to your PR. Sometimes you might find some code that could really need some refactoring. However, if it's not relevant to your PR, do not touch it. File an issue instead. This allows the reviewer to focus on a single problem at a time. 36 | - If you write comments, do not exceed 80 chars per line. This allows contributors who work with multiple open windows to still read the comments without horizontally scrolling. 37 | - Write adversarial tests. For example, if you're adding a new account type, do not only write tests where the instruction succeeds. Also write tests that test whether the instruction fails, if a check inside the new type is violated. 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2020 Serum Foundation 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

Anchor Program Registry "apr"

5 | 6 |

7 | Solana's program registry 8 |

9 | 10 |

11 | Discord Chat 12 | License 13 |

14 |
15 | 16 | ## Public Roadmap 17 | 18 | - https://github.com/orgs/coral-xyz/projects/1 19 | 20 | ## Getting Started 21 | 22 | 1. Install dependencies 23 | 2. `cp .env.example .env.local` 24 | 3. Change `NEXT_PUBLIC_API_ENDPOINT` value (ex. `https://api.apr.dev`) 25 | 4. yarn dev 26 | 5. open browser `http://localhost:3000` 27 | 28 | ### `NEXT_PUBLIC_API_ENDPOINT` env var 29 | 30 | Ask @italoacasas or @armaniferrante in Discord or Twitter. 31 | 32 | ## TailwindCSS & Material UI 33 | 34 | All new components should use TailwindCSS and not Material UI. The goal is to remove Material UI from the project. 35 | 36 | ## APR API 37 | 38 | apr codebase possesses two projects, the UI (Next.js) and the API (Rust). The API will be open source at a later date. 39 | -------------------------------------------------------------------------------- /components/account/tokens.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useState } from "react"; 2 | import { styled } from "@mui/material/styles"; 3 | import Table from "@mui/material/Table"; 4 | import TableBody from "@mui/material/TableBody"; 5 | import TableCell, { tableCellClasses } from "@mui/material/TableCell"; 6 | import TableContainer from "@mui/material/TableContainer"; 7 | import TableHead from "@mui/material/TableHead"; 8 | import TableRow from "@mui/material/TableRow"; 9 | import Paper from "@mui/material/Paper"; 10 | import { Box, Button, InputAdornment, TextField } from "@mui/material"; 11 | import useSWR from "swr"; 12 | import fetcher from "../../utils/fetcher"; 13 | import formatDate from "../../utils/format-date"; 14 | import { Key } from "@mui/icons-material"; 15 | 16 | const StyledTableCell = styled(TableCell)(({ theme }) => ({ 17 | [`&.${tableCellClasses.head}`]: { 18 | backgroundColor: theme.palette.grey["700"], 19 | color: theme.palette.common.white, 20 | }, 21 | [`&.${tableCellClasses.body}`]: { 22 | fontSize: 14, 23 | }, 24 | })); 25 | 26 | const StyledTableRow = styled(TableRow)(({ theme }) => ({ 27 | "&:nth-of-type(odd)": { 28 | backgroundColor: theme.palette.action.hover, 29 | }, 30 | // hide last border 31 | "&:last-child td, &:last-child th": { 32 | border: 0, 33 | }, 34 | })); 35 | 36 | /** 37 | * Delete specific access token 38 | * @param id access token key id 39 | */ 40 | async function deleteTokenOnClick(id: string) { 41 | await fetch(`/api/keys/`, { 42 | method: "DELETE", 43 | body: JSON.stringify({ id }), 44 | }); 45 | } 46 | 47 | function Tokens() { 48 | const [accessTokenName, setAccessTokenName] = useState(""); 49 | const [accessTokenError, setAccessTokenError] = useState(false); 50 | const [newAccessToken, setNewAccessToken] = useState(""); 51 | const { data: keys = [] } = useSWR("/api/keys", fetcher, { 52 | refreshInterval: 5000, 53 | }); 54 | 55 | async function generateNewTokenOnClick() { 56 | if (accessTokenName.length === 0) { 57 | setAccessTokenError(true); 58 | return; 59 | } 60 | 61 | setAccessTokenError(false); 62 | 63 | const response = await fetch("/api/keys/", { 64 | method: "POST", 65 | body: JSON.stringify({ name: accessTokenName }), 66 | }); 67 | 68 | const data = await response.json(); 69 | 70 | setNewAccessToken(data.plaintext); 71 | } 72 | return ( 73 | <> 74 | 75 | 76 | {newAccessToken && ( 77 | 87 | 88 | 89 | ), 90 | }} 91 | /> 92 | )} 93 | 94 | 95 | 102 | setAccessTokenName(e.target.value)} 111 | /> 112 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | Token 126 | Name 127 | Created 128 | Delete 129 | 130 | 131 | 132 | {keys.map((row) => ( 133 | 134 | {row.token_name} 135 | {row.name} 136 | 137 | {formatDate(row.created_at)} 138 | 139 | 140 | 149 | 150 | 151 | ))} 152 | 153 |
154 | 155 | 156 | ); 157 | } 158 | 159 | interface TokensProps { 160 | keys: Token[]; 161 | } 162 | 163 | interface Token { 164 | token_name: string; 165 | id: string; 166 | name: string; 167 | created_at: string; 168 | } 169 | 170 | export default memo(Tokens); 171 | -------------------------------------------------------------------------------- /components/layout.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | export default function Layout({ children, metaTags }) { 4 | return ( 5 | <> 6 | 7 | {metaTags.title} 8 | 9 | 10 | 11 | {/* Google */} 12 | {metaTags.shouldIndex ? ( 13 | <> 14 | {" "} 15 | 16 | 17 | 18 | ) : ( 19 | <> 20 | 21 | 22 | 23 | )} 24 | 25 | {/* Open Graph */} 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | {/* Twitter */} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
{children}
45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /components/nav.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, memo, useEffect, useState } from "react"; 2 | import { Disclosure, Menu, Transition } from "@headlessui/react"; 3 | import { UserCircleIcon } from "@heroicons/react/solid"; 4 | import { 5 | DuplicateIcon, 6 | ExternalLinkIcon, 7 | IdentificationIcon, 8 | LinkIcon, 9 | LogoutIcon, 10 | MenuIcon, 11 | SearchIcon, 12 | XIcon, 13 | } from "@heroicons/react/outline"; 14 | import { GlobalHotKeys } from "react-hotkeys"; 15 | import Image from "next/image"; 16 | import { useWallet } from "@solana/wallet-adapter-react"; 17 | import { useWalletModal } from "@solana/wallet-adapter-react-ui"; 18 | import Link from "next/link"; 19 | import dynamic from "next/dynamic"; 20 | import { useRouter } from "next/router"; 21 | import useSWR from "swr"; 22 | import { signIn, signOut, useSession } from "next-auth/react"; 23 | import bs58 from "bs58"; 24 | import fetcher from "../utils/fetcher"; 25 | 26 | const Search = dynamic(() => import("./search")); 27 | 28 | function classNames(...classes: any) { 29 | return classes.filter(Boolean).join(" "); 30 | } 31 | 32 | function Nav() { 33 | const [showSearch, setShowSearch] = useState(false); 34 | const { data = [], error } = useSWR( 35 | `${process.env.NEXT_PUBLIC_API_ENDPOINT}/api/v0/programs/latest`, 36 | fetcher 37 | ); 38 | const [anchorEl, setAnchorEl] = useState(null); 39 | const { pathname } = useRouter(); 40 | const { data: session, status } = useSession(); 41 | const { wallet, publicKey, signMessage, connected } = useWallet(); 42 | const { setVisible } = useWalletModal(); 43 | 44 | const keyMap = { 45 | SEARCH: "command+k", 46 | }; 47 | 48 | const handlers = { 49 | SEARCH: () => setShowSearch(true), 50 | }; 51 | 52 | useEffect(() => { 53 | async function login() { 54 | const message = `Sign this message for authenticating with your wallet`; 55 | const encodedMessage = new TextEncoder().encode(message); 56 | try { 57 | const signedMessage = await signMessage(encodedMessage); 58 | 59 | signIn("credentials", { 60 | publicKey: publicKey, 61 | signature: bs58.encode(signedMessage), 62 | callbackUrl: `${window.location.origin}/`, 63 | }); 64 | } catch (error) { 65 | console.error(error); 66 | } 67 | } 68 | 69 | if (connected && status === "unauthenticated") login(); 70 | }, [wallet, status, publicKey, connected, signMessage]); 71 | 72 | const open = Boolean(anchorEl); 73 | const handleClick = (event: React.MouseEvent) => { 74 | setAnchorEl(event.currentTarget); 75 | }; 76 | const handleClose = () => { 77 | setAnchorEl(null); 78 | }; 79 | 80 | return ( 81 | <> 82 | 83 | {({ open }) => ( 84 | <> 85 |
86 |
87 |
88 | {/* Logo */} 89 | 90 |
91 | 97 |
98 | 99 |
100 | 101 | {/* Search */} 102 | {pathname !== "/" && ( 103 | 104 |
105 |
106 | 126 |
127 |
128 | 129 | )} 130 | 131 | {/* Actions */} 132 |
133 | 139 | Docs 140 | 142 | 143 | {/* Wallet not connected */} 144 | {status === "unauthenticated" && ( 145 | 153 | )} 154 | 155 | {/* Wallet Connected desktop */} 156 | {status === "authenticated" && ( 157 |
158 |
159 | {/* Auth or Profile */} 160 | 161 |
162 | 163 | Open user menu 164 | 165 | 166 |
167 | 176 | 181 | 182 | {({ active }) => ( 183 |
184 | Connected as 185 | 186 | {publicKey && ( 187 | <> 188 | {publicKey.toBase58().slice(0, 6)}... 189 | {publicKey.toBase58().slice(-4)} 190 | 191 | )} 192 | 193 |
194 | )} 195 | 196 | 197 | {({ active }) => ( 198 | 199 | 205 | 206 | My Account 207 | 208 | 209 | )} 210 | 211 | 212 | {({ active }) => ( 213 | 227 | )} 228 | 229 | 230 | {({ active }) => ( 231 | 241 | )} 242 | 243 | 244 | 245 | 246 |
247 |
248 | )} 249 | 250 | {/* Mobile menu button */} 251 | {status === "authenticated" && ( 252 |
253 | 258 | Open main menu 259 | {open ? ( 260 | 268 |
269 | )} 270 |
271 |
272 |
273 | 274 | 275 | {/* Connected menu, mobile version */} 276 | {status === "authenticated" && ( 277 |
278 | 279 |
280 | 281 | Connected as 282 | 283 | 284 | {publicKey && ( 285 | <> 286 | {publicKey.toBase58().slice(0, 6)}... 287 | {publicKey.toBase58().slice(-4)} 288 | 289 | )} 290 | 291 |
292 | 293 | 294 | 299 | 300 |
301 | 302 | My Account 303 |
304 | 305 | 306 | 307 | { 312 | navigator.clipboard.writeText(publicKey.toBase58()); 313 | }} 314 | > 315 | 316 | Copy Address 317 | 318 | signOut()} 323 | > 324 | 325 | Disconnect 326 | 327 |
328 | )} 329 | 330 | 331 | )} 332 | 333 | {showSearch && ( 334 | 335 | )} 336 | 337 | ); 338 | } 339 | 340 | export default memo(Nav); 341 | -------------------------------------------------------------------------------- /components/notifications/success.tsx: -------------------------------------------------------------------------------- 1 | import { Dispatch, Fragment, memo, SetStateAction } from "react"; 2 | import { Transition } from "@headlessui/react"; 3 | import { CheckCircleIcon } from "@heroicons/react/outline"; 4 | import { XIcon } from "@heroicons/react/solid"; 5 | 6 | function Notification({ 7 | show, 8 | setShow, 9 | message, 10 | subText, 11 | }: { 12 | show: boolean; 13 | setShow: Dispatch>; 14 | message: string; 15 | subText: string; 16 | }) { 17 | return ( 18 |
22 |
23 | 33 |
34 |
35 |
36 |
37 |
42 |
43 |

{message}

44 |

{subText}

45 |
46 |
47 | 57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 | ); 65 | } 66 | 67 | export default memo(Notification); 68 | -------------------------------------------------------------------------------- /components/program-mini-card.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import Link from "next/link"; 3 | 4 | function ProgramMiniCard({ name, address, id }: ProgramMiniCardProps) { 5 | const programUrl: string = id 6 | ? `/program/${address}/build/${id}` 7 | : `/program/${address}`; 8 | 9 | return ( 10 | 11 |
12 |
13 | {/* Program Name */} 14 |

{name}

15 |
16 | 17 | {/* Program Address */} 18 |
{address}
19 |
20 | 21 | ); 22 | } 23 | 24 | interface ProgramMiniCardProps { 25 | name: string; 26 | address: string; 27 | id: string | boolean; 28 | } 29 | 30 | export default memo(ProgramMiniCard); 31 | -------------------------------------------------------------------------------- /components/program/accounts-data/account-selector.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useState } from "react"; 2 | import { CheckIcon, SelectorIcon } from "@heroicons/react/solid"; 3 | import { Combobox } from "@headlessui/react"; 4 | 5 | function classNames(...classes) { 6 | return classes.filter(Boolean).join(" "); 7 | } 8 | 9 | function AccountSelector({ 10 | accounts, 11 | selectedAccount, 12 | setSelectedAccount, 13 | setCurrentPage, 14 | }: AccountSelectorProps) { 15 | const [query, setQuery] = useState(""); 16 | 17 | const filteredAccounts = 18 | query === "" 19 | ? accounts 20 | : accounts.filter((account) => { 21 | return account.toLowerCase().includes(query.toLowerCase()); 22 | }); 23 | 24 | return ( 25 | { 30 | setSelectedAccount(account); 31 | setCurrentPage(0); 32 | }} 33 | > 34 | 35 | Account 36 | 37 |
38 | setQuery(event.target.value)} 42 | displayValue={(account) => account} 43 | /> 44 | 45 | 47 | 48 | {filteredAccounts.length > 0 && ( 49 | 50 | {filteredAccounts.map((account) => ( 51 | 55 | classNames( 56 | "relative cursor-default select-none py-2 pl-3 pr-9", 57 | active ? "bg-amber-500 text-white" : "text-gray-900" 58 | ) 59 | } 60 | > 61 | {({ active, selected }) => ( 62 | <> 63 |
64 | {/* TODO: icon */} 65 | 71 | {account} 72 | 73 |
74 | 75 | {selected && ( 76 | 82 | 84 | )} 85 | 86 | )} 87 | 88 | ))} 89 | 90 | )} 91 |
92 | 93 | ); 94 | } 95 | 96 | interface AccountSelectorProps { 97 | accounts: string[]; 98 | selectedAccount: string; 99 | setSelectedAccount: (account: string) => void; 100 | setCurrentPage: (page: number) => void; 101 | } 102 | 103 | export default memo(AccountSelector); 104 | -------------------------------------------------------------------------------- /components/program/accounts-data/filter.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { RadioGroup } from "@headlessui/react"; 3 | 4 | const filterOptions = ["address", "memcmp"]; 5 | 6 | function classNames(...classes) { 7 | return classes.filter(Boolean).join(" "); 8 | } 9 | 10 | function AccountsDataFilter({ 11 | filter, 12 | setFilter, 13 | option, 14 | setOption, 15 | }: AccountsDataFilterProps) { 16 | return ( 17 |
18 |
19 |

Filter using:

20 |
21 | 22 | 23 |
24 | {filterOptions.map((option) => ( 25 | setFilter({})} 29 | className={({ active, checked }) => 30 | classNames( 31 | "cursor-pointer focus:outline-none", 32 | active ? "ring-2 ring-amber-500 ring-offset-2" : "", 33 | checked 34 | ? "border-transparent bg-amber-600 text-white hover:bg-amber-700" 35 | : "border-gray-200 bg-white text-gray-900 hover:bg-gray-50", 36 | "flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium sm:flex-1" 37 | ) 38 | } 39 | > 40 | {option} 41 | 42 | ))} 43 |
44 | 45 | 46 | {option === "address" && ( 47 |
48 | 49 | account 50 | 51 | 56 | setFilter({ ...filter, address: event.target.value }) 57 | } 58 | className="block w-28 flex-1 rounded-none rounded-r-md border-gray-300 px-3 py-2 focus:border-amber-500 focus:ring-amber-500 sm:text-sm" 59 | placeholder="HWx6Bcau9SJGcdX5PYTeFGzrhwVcFRrj2D1jadicLVkj" 60 | /> 61 |
62 | )} 63 | 64 | {option === "memcmp" && ( 65 | <> 66 |
67 | 68 | offset 69 | 70 | 75 | setFilter({ ...filter, offset: event.target.value }) 76 | } 77 | className="block w-28 flex-1 rounded-none rounded-r-md border-gray-300 px-3 py-2 focus:border-amber-500 focus:ring-amber-500 sm:text-sm" 78 | placeholder="1" 79 | /> 80 |
81 | 82 |
83 | 84 | bytes 85 | 86 | 90 | setFilter({ ...filter, bytes: event.target.value }) 91 | } 92 | id="bytes" 93 | className="block w-96 flex-1 rounded-none rounded-r-md border-gray-300 px-3 py-2 focus:border-amber-500 focus:ring-amber-500 sm:text-sm" 94 | placeholder="AYtuQqncT1C7rY1M5sgupBNj8tqemkN3PJ9smGVdRgMJ" 95 | /> 96 |
97 | 98 | )} 99 |
100 | ); 101 | } 102 | 103 | interface AccountsDataFilterProps { 104 | filter: any; 105 | option: string; 106 | setFilter: (filter: any) => void; 107 | setOption: (option: string) => void; 108 | } 109 | 110 | export default memo(AccountsDataFilter); 111 | -------------------------------------------------------------------------------- /components/program/accounts-data/index.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useCallback, useEffect, useState } from "react"; 2 | import { AnchorProvider, Program } from "@project-serum/anchor"; 3 | import { Connection, PublicKey } from "@solana/web3.js"; 4 | import AccountSelector from "./account-selector"; 5 | import AccountsDataFilter from "./filter"; 6 | import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter"; 7 | import { CollectionIcon } from "@heroicons/react/solid"; 8 | 9 | function AccountsData({ idl, programID }: AccountsDataProps) { 10 | const [selectedAccount, setSelectedAccount] = useState(); 11 | const [data, setData] = useState([]); 12 | // Pagination 13 | const [accountsLength, setAccountsLength] = useState(0); 14 | const [pageSize, setPageSize] = useState(10); 15 | const [pages, setPages] = useState(); 16 | const [currentPage, setCurrentPage] = useState(0); 17 | // Filter 18 | const [option, setOption] = useState(""); 19 | const [filter, setFilter] = useState({}); 20 | 21 | // Initialize Anchor program 22 | const defineProgram = useCallback(async (): Promise => { 23 | try { 24 | const connection = new Connection( 25 | process.env.NEXT_PUBLIC_NODE_URL as string 26 | ); 27 | 28 | const provider = new AnchorProvider( 29 | connection, 30 | { 31 | publicKey: PublicKey.default, 32 | signAllTransactions: undefined, 33 | signTransaction: undefined, 34 | }, 35 | { commitment: "processed", skipPreflight: true } 36 | ); 37 | console.log(idl); 38 | console.log(programID); 39 | return new Program(idl, programID, provider); 40 | } catch (e) { 41 | console.error("Error defining program:", e); 42 | } 43 | }, [idl, programID]); 44 | 45 | // Find all accounts 46 | const getAccounts = useCallback( 47 | async (accountName: string): Promise => { 48 | try { 49 | const program = await defineProgram(); 50 | 51 | // normalize account name 52 | const name = accountName.charAt(0).toLowerCase() + accountName.slice(1); 53 | 54 | let accountFilter: any | undefined = undefined; 55 | if (filter.offset && filter.bytes) { 56 | accountFilter = [ 57 | { 58 | memcmp: { 59 | offset: Number(filter.offset), 60 | bytes: filter.bytes, 61 | }, 62 | }, 63 | ]; 64 | } 65 | 66 | // Get all accounts 67 | const accounts = await program.account[name].all(accountFilter); 68 | 69 | // Pagination 70 | setAccountsLength(accounts.length); 71 | setPages(Math.ceil(accounts.length / 10)); 72 | 73 | return accounts.map((account) => { 74 | return account.publicKey; 75 | }); 76 | } catch (e) { 77 | console.log("Error:", e); 78 | } 79 | }, 80 | [defineProgram, filter] 81 | ); 82 | 83 | // Get data for selected accounts 84 | const getData = useCallback( 85 | async (accountName: string): Promise => { 86 | try { 87 | const program = await defineProgram(); 88 | 89 | // normalize account name 90 | const name = accountName.charAt(0).toLowerCase() + accountName.slice(1); 91 | // Check if I need to find an specific account or all accounts 92 | if (filter.address) { 93 | const data = await program.account[name].fetch(filter.address); 94 | setAccountsLength(1); 95 | setPages(1); 96 | return data; 97 | } else { 98 | const pks = await getAccounts(accountName); 99 | return await program.account[name].fetchMultiple( 100 | pks.slice(currentPage, currentPage + pageSize) 101 | ); 102 | } 103 | } catch (e) { 104 | console.log("Error:", e); 105 | } 106 | }, 107 | [defineProgram, getAccounts, currentPage, pageSize, filter.address] 108 | ); 109 | 110 | useEffect(() => { 111 | async function fetchData() { 112 | try { 113 | const data = await getData(selectedAccount); 114 | setData(data); 115 | } catch (e) { 116 | console.log("Error:", e); 117 | } 118 | } 119 | if (selectedAccount) fetchData(); 120 | }, [getData, selectedAccount, filter]); 121 | 122 | // List of accounts names to display 123 | const listOfAccounts = idl.accounts.map((account) => account.name); 124 | 125 | return ( 126 |
127 |
128 |
129 | 135 |
136 |
137 | 143 |
144 |
145 | 146 |
147 |
148 | {/* Account name */} 149 |
150 | 151 |
152 | {selectedAccount ? selectedAccount : "Select an Account"} 153 |
154 |
155 | 156 | {/* Pagination state */} 157 | {selectedAccount && ( 158 |
159 | Showing {currentPage * pageSize} to{" "} 160 | {accountsLength >= pageSize 161 | ? pageSize * currentPage + pageSize 162 | : accountsLength}{" "} 163 | of {accountsLength} results 164 |
165 | )} 166 | 167 | {/* Pagination actions */} 168 |
169 | 180 | 190 |
191 |
192 | 193 |
194 | 200 | {JSON.stringify(data, null, 2)} 201 | 202 |
203 |
204 |
205 | ); 206 | } 207 | 208 | interface AccountsDataProps { 209 | idl: any; 210 | programID: string; 211 | } 212 | 213 | export default memo(AccountsData); 214 | -------------------------------------------------------------------------------- /components/program/builds.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { CalendarIcon, KeyIcon } from "@heroicons/react/outline"; 3 | import Link from "next/link"; 4 | import Status from "../status"; 5 | import FormatDate from "../../utils/format-date"; 6 | 7 | function Builds({ builds }: BuildsProps) { 8 | return ( 9 |
    10 | {builds.map((build) => { 11 | return ( 12 | 17 |
    18 | {/* Build */} 19 |
    20 |
    Build #{build.id}
    21 |
    22 | 23 | {/* Middle section */} 24 |
    25 | {/* Published date*/} 26 |
    27 | 28 | 29 |
    30 | Publish {FormatDate(build.updated_at)} 31 |
    32 |
    33 | 34 | {/* SHA */} 35 | {build.sha256 && ( 36 |
    37 | 38 | 39 |
    40 | {build.sha256} 41 |
    42 |
    43 | )} 44 |
    45 | 46 | {/* Build status */} 47 |
    48 | 49 |
    50 |
    51 | 52 | ); 53 | })} 54 |
55 | ); 56 | } 57 | 58 | interface BuildsProps { 59 | builds: any[]; 60 | } 61 | 62 | export default memo(Builds); 63 | -------------------------------------------------------------------------------- /components/program/idl-viewer.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import dynamic from "next/dynamic"; 3 | import { useRouter } from "next/router"; 4 | import { DownloadIcon } from "@heroicons/react/solid"; 5 | 6 | const Instructions = dynamic(() => import("./idl/instructions")); 7 | const Accounts = dynamic(() => import("./idl/accounts")); 8 | const Errors = dynamic(() => import("./idl/errors")); 9 | const Events = dynamic(() => import("./idl/events")); 10 | const Types = dynamic(() => import("./idl/types")); 11 | const Constants = dynamic(() => import("./idl/constants")); 12 | 13 | const tabs = [ 14 | { name: "Instructions" }, 15 | { name: "Accounts" }, 16 | { name: "Types" }, 17 | { name: "Errors" }, 18 | { name: "Constants" }, 19 | { name: "Events" }, 20 | { name: "Raw" }, 21 | ]; 22 | 23 | function classNames(...classes) { 24 | return classes.filter(Boolean).join(" "); 25 | } 26 | 27 | function IdlViewer({ data, url }: IDLViewerProps) { 28 | const router = useRouter(); 29 | 30 | const selectedTab = router.query.idl || "Instructions"; 31 | 32 | return ( 33 |
34 |
35 | 38 | 48 |
49 |
50 | 94 |
95 | {selectedTab === "Instructions" && ( 96 | 97 | )} 98 | {selectedTab === "Accounts" && } 99 | {data.errors && selectedTab === "Errors" && } 100 | {data.types && selectedTab === "Types" && } 101 | {data.events && selectedTab === "Events" && } 102 | {data.events && selectedTab === "Constants" && ( 103 | 104 | )} 105 |
106 | ); 107 | } 108 | 109 | interface IDLViewerProps { 110 | data: any; 111 | url: string; 112 | } 113 | 114 | export default memo(IdlViewer); 115 | -------------------------------------------------------------------------------- /components/program/idl/accounts.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | import renderArguments from "../../../utils/renderArguments"; 4 | 5 | function IDLAccounts({ data }: IDLAccountsProps) { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 | 13 | 14 | 20 | 26 | 27 | 28 | 29 | {data.map((item) => ( 30 | 31 | 34 | 37 | 38 | ))} 39 | 40 |
18 | Name 19 | 24 | Fields 25 |
32 | {item.name} 33 | 35 | {renderArguments(item.type.fields)} 36 |
41 |
42 |
43 |
44 |
45 | ); 46 | } 47 | 48 | interface IDLAccountsProps { 49 | data: any; 50 | } 51 | 52 | export default memo(IDLAccounts); 53 | -------------------------------------------------------------------------------- /components/program/idl/constants.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | function IDLConstants({ data }: IDLConstantsProps) { 4 | return ( 5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 | 18 | 24 | 30 | 31 | 32 | 33 | {data.map((item) => ( 34 | 35 | 38 | 43 | 46 | 47 | ))} 48 | 49 |
16 | Name 17 | 22 | Fields 23 | 28 | Value 29 |
36 | {item.name} 37 | 39 | 40 | `{item.type.defined}` 41 | 42 | 44 | {item.value} 45 |
50 |
51 |
52 |
53 |
54 | ); 55 | } 56 | 57 | interface IDLConstantsProps { 58 | data: any; 59 | } 60 | 61 | export default memo(IDLConstants); 62 | -------------------------------------------------------------------------------- /components/program/idl/errors.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | function IDLErrors({ data }: IDLErrorsProps) { 4 | return ( 5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 | 18 | 24 | 30 | 31 | 32 | 33 | {data.map((item) => ( 34 | 35 | 38 | 41 | 44 | 45 | ))} 46 | 47 |
16 | Code 17 | 22 | Name 23 | 28 | Message 29 |
36 | {item.code} 37 | 39 | {item.name} 40 | 42 | {item.msg} 43 |
48 |
49 |
50 |
51 |
52 | ); 53 | } 54 | 55 | interface IDLErrorsProps { 56 | data: any; 57 | } 58 | 59 | export default memo(IDLErrors); 60 | -------------------------------------------------------------------------------- /components/program/idl/events.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | import renderArguments from "../../../utils/renderArguments"; 4 | 5 | function IDLEvents({ data }: IDLEventsProps) { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 | 13 | 14 | 20 | 26 | 27 | 28 | 29 | {data.map((item) => ( 30 | 31 | 34 | 37 | 38 | ))} 39 | 40 |
18 | Name 19 | 24 | Fields 25 |
32 | {item.name} 33 | 35 | {renderArguments(item.fields)} 36 |
41 |
42 |
43 |
44 |
45 | ); 46 | } 47 | 48 | interface IDLEventsProps { 49 | data: any; 50 | } 51 | 52 | export default memo(IDLEvents); 53 | -------------------------------------------------------------------------------- /components/program/idl/instructions.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | import renderArguments from "../../../utils/renderArguments"; 4 | 5 | function renderAccounts(accounts) { 6 | let component = []; 7 | 8 | for (let i = 0; i < accounts.length; i++) { 9 | component.push( 10 |
11 | {accounts[i].name} 12 |
13 | {accounts[i].isSigner && ( 14 | 15 | isSigner 16 | 17 | )} 18 | {accounts[i].isMut && ( 19 | 20 | isMut 21 | 22 | )} 23 |
24 |
25 | ); 26 | } 27 | 28 | return component; 29 | } 30 | 31 | function Instructions({ data }: InstructionsProps) { 32 | return ( 33 |
34 |
35 |
36 |
37 | 38 | 39 | 40 | 46 | 52 | 58 | 59 | 60 | 61 | {data.map((item) => ( 62 | 63 | 66 | 69 | 72 | 73 | ))} 74 | 75 |
44 | Name 45 | 50 | Arguments 51 | 56 | Accounts 57 |
64 | {item.name} 65 | 67 | {renderArguments(item.args)} 68 | 70 | {renderAccounts(item.accounts)} 71 |
76 |
77 |
78 |
79 |
80 | ); 81 | } 82 | 83 | interface InstructionsProps { 84 | data: any; 85 | } 86 | 87 | export default memo(Instructions); 88 | -------------------------------------------------------------------------------- /components/program/idl/types.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | 3 | function renderArguments(type) { 4 | let component = []; 5 | 6 | if (type.fields) { 7 | const args = type.fields; 8 | for (let i = 0; i < args.length; i++) { 9 | let type = ""; 10 | 11 | if (args[i].type.array) { 12 | type = `[${args[i].type.array[0]}; ${args[i].type.array[1]}]`; 13 | } else if (args[i].type.vec) { 14 | if (args[i].type.vec.defined) { 15 | type = `Vec<${args[i].type.vec.defined}>`; 16 | } else { 17 | type = `Vec<[${args[i].type.vec.array[0]}; ${args[i].type.vec.array[1]}]>`; 18 | } 19 | } else if (args[i].type.defined) { 20 | type = args[i].type.defined; 21 | } else if (args[i].type.option) { 22 | type = `Option<${args[i].type.option}>`; 23 | } else if (args[i].type.variant) { 24 | } else { 25 | type = args[i].type; 26 | } 27 | 28 | component.push( 29 |
30 | 31 | {args[i].name}: 32 | 33 | `{type}` 34 | 35 | {args[i].index && ( 36 | 37 | index 38 | 39 | )} 40 | 41 |
42 | ); 43 | } 44 | } else if (type.variants) { 45 | const args = type.variants; 46 | for (let i = 0; i < args.length; i++) { 47 | let type = args[i].name; 48 | 49 | component.push( 50 |
51 | 52 | 53 | `{type}` 54 | 55 | 56 |
57 | ); 58 | } 59 | } 60 | 61 | return component; 62 | } 63 | 64 | function IDLTypes({ data }: IDLTypesProps) { 65 | return ( 66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | 79 | 85 | 86 | 87 | 88 | {data.map((item) => ( 89 | 90 | 93 | 96 | 97 | ))} 98 | 99 |
77 | Name 78 | 83 | Fields 84 |
91 | {item.type.kind} {item.name} 92 | 94 | {renderArguments(item.type)} 95 |
100 |
101 |
102 |
103 |
104 | ); 105 | } 106 | 107 | interface IDLTypesProps { 108 | data: any; 109 | } 110 | 111 | export default memo(IDLTypes); 112 | -------------------------------------------------------------------------------- /components/program/index.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from "next/dynamic"; 2 | import { memo } from "react"; 3 | import { 4 | ClockIcon, 5 | CodeIcon, 6 | DatabaseIcon, 7 | DocumentTextIcon, 8 | TerminalIcon, 9 | } from "@heroicons/react/solid"; 10 | 11 | const ProgramBanner = dynamic(() => import("./program-banner")); 12 | const Tabs = dynamic(() => import("./tabs")); 13 | 14 | const tabs = [ 15 | { name: "Readme", icon: DocumentTextIcon }, 16 | { name: "Explorer", icon: CodeIcon }, 17 | { name: "IDL", icon: TerminalIcon }, 18 | { name: "Accounts Data", icon: DatabaseIcon }, 19 | { name: "Builds", icon: ClockIcon }, 20 | ]; 21 | 22 | function Program({ 23 | program, 24 | selectedBuild, 25 | builds, 26 | readme, 27 | files, 28 | }: ProgramProps) { 29 | const latestBuild = selectedBuild.id === builds[0].id; 30 | 31 | return ( 32 |
33 | 39 | 40 | 48 |
49 | ); 50 | } 51 | 52 | interface ProgramProps { 53 | program: any; 54 | builds: any[]; 55 | selectedBuild: any; 56 | readme: string; 57 | files: string[]; 58 | } 59 | 60 | export default memo(Program); 61 | -------------------------------------------------------------------------------- /components/program/metadata.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Divider, Typography } from "@mui/material"; 2 | import Box from "@mui/material/Box"; 3 | import { CloudDownloadOutlined, OpenInNew } from "@mui/icons-material"; 4 | import { styled } from "@mui/material/styles"; 5 | import FormatDate from "../../utils/format-date"; 6 | 7 | const StyledTitle = styled(Typography)(({ theme }) => ({ 8 | fontSize: 13, 9 | color: theme.palette.grey["600"], 10 | fontWeight: "bold", 11 | textTransform: "uppercase", 12 | })); 13 | 14 | export default function Metadata({ data }) { 15 | return ( 16 | 17 | 18 | Last Updated 19 | 20 | {FormatDate(data.updated_at)} 21 | 22 | 23 | 24 | 25 | 26 | 27 | Artifact 28 | 39 | 40 | 41 | 42 | 43 | {data.sha256 && ( 44 | 45 | Build 46 | 59 | 60 | )} 61 | 62 | {data.upgrade_authority && ( 63 | <> 64 | 65 | 66 | 67 | Upgrade authority 68 | 82 | 83 | 84 | )} 85 | 86 | {data.verified_slot && ( 87 | <> 88 | 89 | 90 | Slot deployed 91 | 105 | 106 | 107 | )} 108 | 109 | ); 110 | } 111 | -------------------------------------------------------------------------------- /components/program/program-banner.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { ExternalLinkIcon } from "@heroicons/react/outline"; 3 | import FormatDate from "../../utils/format-date"; 4 | import { CloudDownloadOutlined } from "@mui/icons-material"; 5 | import dynamic from "next/dynamic"; 6 | 7 | const Status = dynamic(() => import("../status")); 8 | 9 | function ProgramCard({ 10 | name, 11 | address, 12 | selectedBuild, 13 | latest, 14 | }: ProgramCardProps) { 15 | return ( 16 | <> 17 |
18 |
19 |
20 |
21 | {/* Program Name */} 22 |

{name}

23 | {/* Program SHA */} 24 |

25 | 26 | 32 | {address} 33 | 34 |

35 |
36 | 37 | {/* Tags */} 38 |
39 | {selectedBuild ? ( 40 | 41 | build #{selectedBuild.id} 42 | 43 | ) : ( 44 | <> 45 | 46 | mainnet-beta 47 | 48 | 49 | )} 50 | 51 | {latest && ( 52 | 53 | latest 54 | 55 | )} 56 |
57 |
58 |
59 | 60 | {selectedBuild && ( 61 | <> 62 |
63 | 70 | 71 |
72 | {/* Verification Status */} 73 |
74 |
75 | Status 76 |
77 | 78 |
79 | 80 | {/* Last Updated */} 81 |
82 |
83 | Last Updated 84 |
85 |
86 | {FormatDate(selectedBuild.updated_at)} 87 |
88 |
89 | 90 | {/* Build */} 91 |
92 |
93 | Build 94 |
95 | 104 |
105 | 106 | {/* Artifact */} 107 |
108 |
109 | Artifact 110 |
111 | 120 |
121 |
122 | 123 | )} 124 |
125 | 126 | ); 127 | } 128 | 129 | interface ProgramCardProps { 130 | name: string; 131 | address: string; 132 | selectedBuild: any | boolean; 133 | latest: boolean; 134 | } 135 | 136 | export default memo(ProgramCard); 137 | -------------------------------------------------------------------------------- /components/program/readme.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { BookOpenIcon } from "@heroicons/react/solid"; 3 | 4 | function Readme({ readme }: ReadmeProps) { 5 | return ( 6 |
7 |
8 | 9 |
Readme
10 |
11 | 12 |
16 |
17 | ); 18 | } 19 | 20 | interface ReadmeProps { 21 | readme: string; 22 | } 23 | 24 | export default memo(Readme); 25 | -------------------------------------------------------------------------------- /components/program/source-files.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useEffect, useState } from "react"; 2 | import Box from "@mui/material/Box"; 3 | import filesTree from "../../utils/files-tree"; 4 | import { 5 | Breadcrumbs, 6 | Button, 7 | Paper, 8 | TableCell, 9 | TableContainer, 10 | } from "@mui/material"; 11 | import Table from "@mui/material/Table"; 12 | import TableRow from "@mui/material/TableRow"; 13 | import TableBody from "@mui/material/TableBody"; 14 | import { Folder } from "@mui/icons-material"; 15 | import Typography from "@mui/material/Typography"; 16 | import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined"; 17 | import Source from "./source"; 18 | 19 | function table( 20 | tree: any[], 21 | setTree: Function, 22 | setSource: Function, 23 | setShowSource: Function, 24 | setBreadcrumbs: Function, 25 | breadcrumbs: any[] 26 | ) { 27 | return ( 28 | 33 | 34 | 35 | {tree.map((file) => ( 36 | 37 | {file.type === "folder" && ( 38 | { 42 | setBreadcrumbs([ 43 | ...breadcrumbs, 44 | { 45 | name: file.name, 46 | children: file.children, 47 | }, 48 | ]); 49 | 50 | setTree(file.children); 51 | }} 52 | sx={{ cursor: "pointer" }} 53 | > 54 | 55 | {" "} 60 |   61 | {file.name} 62 | 63 | 64 | )} 65 | {file.type === "file" && ( 66 | { 70 | setBreadcrumbs([ 71 | ...breadcrumbs, 72 | { 73 | name: file.name, 74 | children: file.children, 75 | }, 76 | ]); 77 | setSource({ name: file.name, url: file.url }); 78 | setShowSource(true); 79 | }} 80 | sx={{ cursor: "pointer" }} 81 | > 82 | 83 |   84 | {file.name} 85 | 86 | 87 | )} 88 | 89 | ))} 90 | 91 |
92 | 93 | ); 94 | } 95 | 96 | function SourceFiles({ name, files, readme }: SourceFilesProps) { 97 | const [tree, setTree] = useState([]); 98 | const [source, setSource] = useState(); 99 | const [showSource, setShowSource] = useState(false); 100 | const [breadcrumbs, setBreadcrumbs] = useState([]); 101 | 102 | useEffect(() => { 103 | const structure = filesTree(files); 104 | setTree(structure); 105 | 106 | setBreadcrumbs([{ name, children: structure }]); 107 | }, [files, name]); 108 | 109 | return ( 110 | 113 | 114 | {breadcrumbs.map((item) => ( 115 | 140 | ))} 141 | 142 | 143 | {showSource ? ( 144 | 145 | ) : ( 146 | table( 147 | tree, 148 | setTree, 149 | setSource, 150 | setShowSource, 151 | setBreadcrumbs, 152 | breadcrumbs 153 | ) 154 | )} 155 | 156 | ); 157 | } 158 | 159 | interface SourceFilesProps { 160 | name: string; 161 | files: string[]; 162 | readme: string; 163 | } 164 | 165 | interface SourceProps { 166 | name: string; 167 | url: string; 168 | } 169 | 170 | export default memo(SourceFiles); 171 | -------------------------------------------------------------------------------- /components/program/source.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import useSWR from "swr"; 3 | import fetchMD from "../../utils/fetcher-md"; 4 | import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter"; 5 | import Readme from "./readme"; 6 | 7 | function language(file: string): string { 8 | const extension = file.split(".")[1]; 9 | switch (extension) { 10 | case "rs": 11 | return "rust"; 12 | case "js": 13 | return "javascript"; 14 | case "ts": 15 | return "typescript"; 16 | case "yaml": 17 | return "yaml"; 18 | case "md": 19 | return "markdown"; 20 | case "jsx": 21 | return "jsx"; 22 | case "tsx": 23 | return "tsx"; 24 | case "sql": 25 | return "sql"; 26 | case "toml": 27 | return "toml"; 28 | case "json": 29 | return "json"; 30 | case "sh": 31 | return "bash"; 32 | default: 33 | return ""; 34 | } 35 | } 36 | 37 | function Source({ url, name, readme }: SourceProps) { 38 | const { data } = useSWR(url as string, fetchMD); 39 | 40 | return ( 41 |
42 | {name !== "README.md" ? ( 43 | <> 44 |
45 | 51 | Raw 52 | 53 |
54 |
55 | 61 | {data} 62 | 63 |
64 | 65 | ) : ( 66 | 67 | )} 68 |
69 | ); 70 | } 71 | 72 | interface SourceProps { 73 | name: string; 74 | url: string; 75 | readme: string; 76 | } 77 | 78 | export default memo(Source); 79 | -------------------------------------------------------------------------------- /components/program/tabs.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import useSWR from "swr"; 3 | import dynamic from "next/dynamic"; 4 | import { useRouter } from "next/router"; 5 | import fetcher from "../../utils/fetcher"; 6 | import { Address, Idl } from "@project-serum/anchor"; 7 | 8 | const Readme = dynamic(() => import("./readme")); 9 | const Builds = dynamic(() => import("./builds")); 10 | const IdlViewer = dynamic(() => import("./idl-viewer")); 11 | const SourceFiles = dynamic(() => import("./source-files")); 12 | const AccountsData = dynamic(() => import("./accounts-data")); 13 | 14 | function classNames(...classes) { 15 | return classes.filter(Boolean).join(" "); 16 | } 17 | 18 | function Tabs({ 19 | tabs, 20 | selectedBuild, 21 | builds, 22 | readme, 23 | files, 24 | networkIdl, 25 | idlAddress, 26 | }: TabsProps) { 27 | const router = useRouter(); 28 | const { data: apiIdl } = useSWR( 29 | selectedBuild && (selectedBuild.artifacts.idl as string), 30 | fetcher 31 | ); 32 | 33 | const idl = apiIdl || networkIdl; 34 | const address = selectedBuild?.address || idlAddress; 35 | 36 | let selectedTab = router.query.tab || "Readme"; 37 | 38 | if (router.pathname.includes("/idl/")) { 39 | selectedTab = router.query.tab == "Accounts Data" ? "Accounts Data" : "IDL"; 40 | } 41 | 42 | const idlHasAccount = 43 | idl && Array.isArray(idl.accounts) && idl.accounts.length > 0; 44 | 45 | return ( 46 |
47 |
48 |
49 | 52 | 62 |
63 |
64 |
65 |
66 | 109 |
110 |
111 | 112 | {selectedTab === "Readme" && } 113 | {selectedTab === "Builds" && } 114 | {selectedTab === "Explorer" && ( 115 | 116 | )} 117 | {selectedTab === "IDL" && (idl || networkIdl) && ( 118 | 119 | )} 120 | {selectedTab === "Accounts Data" && idl && idl.accounts && ( 121 | 122 | )} 123 |
124 | ); 125 | } 126 | 127 | interface TabsProps { 128 | readme: string | undefined; 129 | selectedBuild: any | undefined; 130 | builds: any[] | undefined; 131 | files: string[] | undefined; 132 | tabs: any[]; 133 | networkIdl: Idl | undefined; 134 | idlAddress: Address | undefined; 135 | } 136 | 137 | export default memo(Tabs); 138 | -------------------------------------------------------------------------------- /components/search.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useCallback, useEffect, useMemo, useState } from "react"; 2 | import { Combobox, Dialog, Transition } from "@headlessui/react"; 3 | import { FilterIcon } from "@heroicons/react/solid"; 4 | import { AnchorProvider, Program } from "@project-serum/anchor"; 5 | import { Connection, PublicKey } from "@solana/web3.js"; 6 | 7 | function classNames(...classes) { 8 | return classes.filter(Boolean).join(" "); 9 | } 10 | 11 | export default function Search({ programs, open, setOpen }: ProgramsProps) { 12 | const [query, setQuery] = useState(""); 13 | const [list, setList] = useState([]); 14 | const [unpublishedProgram, setUnpublishedProgram] = useState(false); 15 | 16 | const filteredPrograms = useMemo(async () => { 17 | if (query === "") { 18 | setList([]); 19 | } else { 20 | const data = programs.filter((program) => { 21 | if (program.name.toLowerCase().includes(query.toLowerCase())) { 22 | return true; 23 | } else if ( 24 | program.address.toLowerCase().includes(query.toLowerCase()) 25 | ) { 26 | return true; 27 | } 28 | return false; 29 | }); 30 | 31 | setList(data); 32 | setUnpublishedProgram(false); 33 | } 34 | }, [programs, query]); 35 | 36 | const fetchIdl = useCallback(async (address: PublicKey): Promise => { 37 | try { 38 | const connection = new Connection( 39 | process.env.NEXT_PUBLIC_NODE_URL as string 40 | ); 41 | 42 | const provider = new AnchorProvider( 43 | connection, 44 | { 45 | publicKey: PublicKey.default, 46 | signAllTransactions: undefined, 47 | signTransaction: undefined, 48 | }, 49 | { commitment: "processed", skipPreflight: true } 50 | ); 51 | 52 | const idl = await Program.fetchIdl(address, provider); 53 | return idl; 54 | } catch (e) { 55 | console.error("Error:", e); 56 | } 57 | }, []); 58 | 59 | useEffect(() => { 60 | { 61 | async function run() { 62 | try { 63 | const key = new PublicKey(query); 64 | 65 | // If real key, try fetching idl 66 | if (PublicKey.isOnCurve(key.toBytes())) { 67 | const idl = await fetchIdl(key); 68 | 69 | if (idl) { 70 | setList([{ address: query, name: idl.name, idl: idl, id: 1 }]); 71 | setUnpublishedProgram(true); 72 | } 73 | } 74 | } catch (e) { 75 | console.log("Error:", e); 76 | } 77 | } 78 | if (list.length == 0 && query.length > 20) { 79 | run(); 80 | } 81 | } 82 | }, [list.length, fetchIdl, query, filteredPrograms]); 83 | 84 | return ( 85 | setQuery("")} 89 | appear 90 | > 91 | 92 | 101 |
102 | 103 | 104 |
105 | 114 | 115 | { 117 | if (unpublishedProgram) { 118 | return (window.location = `/idl/${program.address}`); 119 | } 120 | 121 | return (window.location = `/program/${program.address}`); 122 | }} 123 | > 124 | setQuery(event.target.value)} 128 | /> 129 | 130 | {list.length > 0 && ( 131 | 135 | {list.map((program) => ( 136 | 140 | classNames( 141 | "cursor-default select-none border-b border-gray-200 px-4 py-2", 142 | active && "bg-sky-50 text-sky-500" 143 | ) 144 | } 145 | > 146 |
147 | 148 | {program.name} 149 | 150 | 151 | {program.address} 152 | 153 |
154 | 155 | ))} 156 | 157 | )} 158 | 159 | {query !== "" && list.length === 0 && ( 160 |
161 |
169 | )} 170 | 171 | 172 | 173 |
174 |
175 | 176 | ); 177 | } 178 | 179 | interface ProgramsProps { 180 | programs: any[]; 181 | open: boolean; 182 | setOpen: (open: boolean) => void; 183 | } 184 | -------------------------------------------------------------------------------- /components/status.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { 3 | CheckCircleIcon, 4 | ClockIcon, 5 | ExclamationCircleIcon, 6 | ExclamationIcon, 7 | } from "@heroicons/react/solid"; 8 | 9 | function Status({ buildStatus }: StatusProps) { 10 | return ( 11 |
12 | {buildStatus === "verified" && ( 13 | 14 | 15 | Verified 16 | 17 | )} 18 | 19 | {buildStatus === "failed" && ( 20 | 21 | 22 | Verification Failed 23 | 24 | )} 25 | 26 | {buildStatus === "aborted" && ( 27 | 28 | 29 | Build Aborted 30 | 31 | )} 32 | 33 | {buildStatus === "building" && ( 34 | 35 | 36 | Building 37 | 38 | )} 39 | 40 | {buildStatus === "built" && ( 41 | 42 | 43 | Built 44 | 45 | )} 46 |
47 | ); 48 | } 49 | 50 | interface StatusProps { 51 | buildStatus: string; 52 | } 53 | 54 | export default memo(Status); 55 | -------------------------------------------------------------------------------- /context/AutoConnectProvider.tsx: -------------------------------------------------------------------------------- 1 | import { useLocalStorage } from "@solana/wallet-adapter-react"; 2 | import { createContext, FC, ReactNode, useContext } from "react"; 3 | 4 | export interface AutoConnectContextState { 5 | autoConnect: boolean; 6 | setAutoConnect(autoConnect: boolean): void; 7 | } 8 | 9 | export const AutoConnectContext = createContext( 10 | {} as AutoConnectContextState 11 | ); 12 | 13 | export function useAutoConnect(): AutoConnectContextState { 14 | return useContext(AutoConnectContext); 15 | } 16 | 17 | export const AutoConnectProvider: FC<{ children: ReactNode }> = ({ children }) => { 18 | const [autoConnect, setAutoConnect] = useLocalStorage("autoConnect", true); 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /context/ContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { WalletAdapterNetwork } from "@solana/wallet-adapter-base"; 2 | import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react"; 3 | import { WalletModalProvider } from "@solana/wallet-adapter-react-ui"; 4 | import { 5 | PhantomWalletAdapter, 6 | SolflareWalletAdapter, 7 | GlowWalletAdapter, 8 | } from "@solana/wallet-adapter-wallets"; 9 | import { clusterApiUrl } from "@solana/web3.js"; 10 | import { FC, ReactNode, useMemo } from "react"; 11 | import { AutoConnectProvider, useAutoConnect } from "./AutoConnectProvider"; 12 | 13 | const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => { 14 | const { autoConnect } = useAutoConnect(); 15 | 16 | let network = null; 17 | if (process.env.NEXT_PUBLIC_NETWORK_ENV === "devnet") network = WalletAdapterNetwork.Devnet; 18 | if (process.env.NEXT_PUBLIC_NETWORK_ENV === "testnet") network = WalletAdapterNetwork.Testnet; 19 | if (process.env.NEXT_PUBLIC_NETWORK_ENV === "mainnet") network = WalletAdapterNetwork.Mainnet; 20 | 21 | const endpoint = useMemo(() => clusterApiUrl(network), [network]); 22 | 23 | const wallets = useMemo( 24 | () => [ 25 | new PhantomWalletAdapter(), 26 | new GlowWalletAdapter(), 27 | new SolflareWalletAdapter({ network }), 28 | ], 29 | [network] 30 | ); 31 | 32 | return ( 33 | 34 | 35 | {children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export const ContextProvider: FC<{ children: ReactNode }> = ({ children }) => { 42 | return ( 43 | 44 | {children} 45 | 46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /hooks/useAuth.ts: -------------------------------------------------------------------------------- 1 | import { useSession } from "next-auth/react"; 2 | import { useRouter } from "next/router"; 3 | 4 | export default function useAuth(privatePage: boolean) { 5 | const router = useRouter(); 6 | const { data, status } = useSession({ 7 | required: privatePage, 8 | onUnauthenticated() { 9 | router.push("/"); 10 | }, 11 | }); 12 | 13 | return { 14 | session: data, 15 | status, 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const { withSentryConfig } = require("@sentry/nextjs"); 2 | const { withPlausibleProxy } = require("next-plausible"); 3 | 4 | const moduleExports = withPlausibleProxy()({ 5 | experimental: { 6 | legacyBrowsers: false, 7 | images: { allowFutureImage: true }, 8 | }, 9 | reactStrictMode: true, 10 | swcMinify: true, 11 | typescript: { 12 | ignoreBuildErrors: true, 13 | }, 14 | images: { 15 | domains: [], 16 | formats: ["image/avif", "image/webp"], 17 | }, 18 | }); 19 | 20 | const sentryWebpackPluginOptions = { 21 | // Additional config options for the Sentry Webpack plugin. Keep in mind that 22 | // the following options are set automatically, and overriding them is not 23 | // recommended: 24 | // release, url, org, project, authToken, configFile, stripPrefix, 25 | // urlPrefix, include, ignore 26 | 27 | silent: true, // Suppresses all logs 28 | // For all available options, see: 29 | // https://github.com/getsentry/sentry-webpack-plugin#options. 30 | }; 31 | 32 | // Make sure adding Sentry options is the last code to run before exporting, to 33 | // ensure that your source maps include changes from all other Webpack plugins 34 | module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions); 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "registry", 3 | "version": "5.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@sentry/nextjs": "^7.11.1", 13 | "@sentry/tracing": "^7.11.1", 14 | "next": "^12.2.5", 15 | "next-auth": "4.10.3", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-hotkeys": "^2.0.0" 19 | }, 20 | "devDependencies": { 21 | "@emotion/cache": "^11.10.3", 22 | "@emotion/react": "^11.10.0", 23 | "@emotion/server": "^11.10.0", 24 | "@emotion/styled": "^11.10.0", 25 | "@headlessui/react": "^1.6.6", 26 | "@heroicons/react": "v1", 27 | "@mapbox/rehype-prism": "^0.8.0", 28 | "@mui/icons-material": "^5.10.2", 29 | "@mui/lab": "^5.0.0-alpha.96", 30 | "@mui/material": "^5.10.2", 31 | "@mui/x-data-grid": "^5.15.3", 32 | "@project-serum/anchor": "^0.25.0", 33 | "@solana/wallet-adapter-base": "^0.9.15", 34 | "@solana/wallet-adapter-react": "^0.15.17", 35 | "@solana/wallet-adapter-react-ui": "^0.9.15", 36 | "@solana/wallet-adapter-wallets": "^0.18.4", 37 | "@solana/web3.js": "^1.53.0", 38 | "@tailwindcss/aspect-ratio": "^0.4.0", 39 | "@tailwindcss/forms": "^0.5.2", 40 | "@tailwindcss/typography": "^0.5.4", 41 | "@types/node": "^18.7.11", 42 | "@types/react": "^18.0.17", 43 | "autoprefixer": "^10.4.8", 44 | "bs58": "^5.0.0", 45 | "eslint": "^8.22.0", 46 | "eslint-config-next": "^12.2.5", 47 | "eslint-config-prettier": "^8.5.0", 48 | "isomorphic-unfetch": "^3.1.0", 49 | "next-plausible": "^3.2.0", 50 | "postcss": "^8.4.16", 51 | "prettier": "^2.7.1", 52 | "prettier-plugin-tailwindcss": "^0.1.13", 53 | "react-json-view": "^1.21.3", 54 | "react-syntax-highlighter": "^15.5.0", 55 | "remark": "^14.0.2", 56 | "remark-gfm": "^3.0.1", 57 | "remark-html": "^15.0.1", 58 | "remark-prism": "^1.3.6", 59 | "swr": "^1.3.0", 60 | "tailwindcss": "^3.1.8", 61 | "typescript": "^4.7.4" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /pages/404.tsx: -------------------------------------------------------------------------------- 1 | export default function Custom404() { 2 | return <>; 3 | } 4 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { AppProps } from "next/app"; 2 | import { ThemeProvider } from "@mui/material/styles"; 3 | import { CacheProvider, EmotionCache } from "@emotion/react"; 4 | import theme from "../src/theme"; 5 | import createEmotionCache from "../src/createEmotionCache"; 6 | import { SessionProvider } from "next-auth/react"; 7 | import PlausibleProvider from "next-plausible"; 8 | import { ContextProvider } from "../context/ContextProvider"; 9 | import Nav from "../components/nav"; 10 | import "../style.css"; 11 | 12 | require("@solana/wallet-adapter-react-ui/styles.css"); 13 | 14 | // Client-side cache, shared for the whole session of the user in the browser. 15 | const clientSideEmotionCache = createEmotionCache(); 16 | 17 | interface MyAppProps extends AppProps { 18 | emotionCache?: EmotionCache; 19 | } 20 | 21 | export default function MyApp(props: MyAppProps) { 22 | const { 23 | Component, 24 | emotionCache = clientSideEmotionCache, 25 | pageProps: { session, ...pageProps }, 26 | } = props; 27 | 28 | return ( 29 | 30 | 31 | 32 |
33 |
42 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { Head, Html, Main, NextScript } from "next/document"; 2 | import createEmotionServer from "@emotion/server/create-instance"; 3 | import theme from "../src/theme"; 4 | import createEmotionCache from "../src/createEmotionCache"; 5 | 6 | export default class MyDocument extends Document { 7 | render() { 8 | return ( 9 | 10 | 11 | {/* PWA primary color */} 12 | 13 | 14 | 15 | 16 | 20 | {/* Inject MUI styles first to match with the prepend: true configuration. */} 21 | {(this.props as any).emotionStyleTags} 22 | 26 | 27 | 28 |
29 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | // `getInitialProps` belongs to `_document` (instead of `_app`), 37 | // it's compatible with static-site generation (SSG). 38 | MyDocument.getInitialProps = async (ctx) => { 39 | // Resolution order 40 | // 41 | // On the server: 42 | // 1. app.getInitialProps 43 | // 2. page.getInitialProps 44 | // 3. document.getInitialProps 45 | // 4. app.render 46 | // 5. page.render 47 | // 6. document.render 48 | // 49 | // On the server with error: 50 | // 1. document.getInitialProps 51 | // 2. app.render 52 | // 3. page.render 53 | // 4. document.render 54 | // 55 | // On the client 56 | // 1. app.getInitialProps 57 | // 2. page.getInitialProps 58 | // 3. app.render 59 | // 4. page.render 60 | 61 | const originalRenderPage = ctx.renderPage; 62 | 63 | // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. 64 | // However, be aware that it can have global side effects. 65 | const cache = createEmotionCache(); 66 | const { extractCriticalToChunks } = createEmotionServer(cache); 67 | 68 | ctx.renderPage = () => 69 | originalRenderPage({ 70 | enhanceApp: (App: any) => 71 | function EnhanceApp(props) { 72 | return ; 73 | }, 74 | }); 75 | 76 | const initialProps = await Document.getInitialProps(ctx); 77 | // This is important. It prevents emotion to render invalid HTML. 78 | // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 79 | const emotionStyles = extractCriticalToChunks(initialProps.html); 80 | const emotionStyleTags = emotionStyles.styles.map((style) => ( 81 |