This repository was archived by the owner on Mar 27, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 103
Master on main #57
Open
Dargon789
wants to merge
5
commits into
MetaMask:main
Choose a base branch
from
Dargon789:master
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Master on main #57
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
eb3f6ec
fix: ci/cd versel api bug time out (#2)
Dargon789 6e3a6b1
Merge branch 'MetaMask:main' into master
Dargon789 eb1bf6a
Merge branch 'MetaMask:main' into master
Dargon789 db49d28
Merge branch 'MetaMask:main' into master
Dargon789 59626cf
Fix React Server Components CVE vulnerabilities (#61) (#62)
Dargon789 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # Use the latest 2.1 version of CircleCI pipeline process engine. | ||
| # See: https://circleci.com/docs/configuration-reference | ||
| version: 2.1 | ||
|
|
||
| # Define a job to be invoked later in a workflow. | ||
| # See: https://circleci.com/docs/jobs-steps/#jobs-overview & https://circleci.com/docs/configuration-reference/#jobs | ||
| jobs: | ||
| say-hello: | ||
| # Specify the execution environment. You can specify an image from Docker Hub or use one of our convenience images from CircleCI's Developer Hub. | ||
| # See: https://circleci.com/docs/executor-intro/ & https://circleci.com/docs/configuration-reference/#executor-job | ||
| docker: | ||
| # Specify the version you desire here | ||
| # See: https://circleci.com/developer/images/image/cimg/base | ||
| - image: cimg/base:current | ||
|
|
||
| # Add steps to the job | ||
| # See: https://circleci.com/docs/jobs-steps/#steps-overview & https://circleci.com/docs/configuration-reference/#steps | ||
| steps: | ||
| # Checkout the code as the first step. | ||
| - checkout | ||
| - run: | ||
| name: "Say hello" | ||
| command: "echo Hello, World!" | ||
|
|
||
| # Orchestrate jobs using workflows | ||
| # See: https://circleci.com/docs/workflows/ & https://circleci.com/docs/configuration-reference/#workflows | ||
| workflows: | ||
| say-hello-workflow: # This is the name of the workflow, feel free to change it to better match your workflow. | ||
| # Inside the workflow, you define the jobs you want to run. | ||
| jobs: | ||
| - say-hello | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.* | ||
| .yarn/* | ||
| !.yarn/patches | ||
| !.yarn/plugins | ||
| !.yarn/releases | ||
| !.yarn/versions | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # next.js | ||
| /.next/ | ||
| /out/ | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # debug | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| .pnpm-debug.log* | ||
|
|
||
| # env files (can opt-in for committing if needed) | ||
| .env* | ||
|
|
||
| # vercel | ||
| .vercel | ||
|
|
||
| # typescript | ||
| *.tsbuildinfo | ||
| next-env.d.ts |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # Vercel Web Analytics Implementation | ||
|
|
||
| Successfully implemented Vercel Web Analytics for this Next.js App Router project. | ||
|
|
||
| ## Changes Made | ||
|
|
||
| ### 1. Installed Dependencies | ||
| - Installed `@vercel/analytics` package (v1.6.1) using pnpm | ||
| - Updated `package.json` to include the new dependency | ||
| - Generated `pnpm-lock.yaml` to lock dependency versions | ||
|
|
||
| ### 2. Modified Files | ||
|
|
||
| #### `app/layout.tsx` | ||
| - Added import statement: `import { Analytics } from "@vercel/analytics/next";` | ||
| - Added `<Analytics />` component inside the `<body>` tag, placed after the `</main>` closing tag | ||
| - The component is properly positioned to track page views and web vitals | ||
|
|
||
| ### 3. Verification Steps Completed | ||
| ✅ Build completed successfully with `pnpm build` | ||
| ✅ Linting passed with no errors using `pnpm lint` | ||
| ✅ No TypeScript compilation errors | ||
| ✅ All changes staged with git | ||
|
|
||
| ## Implementation Details | ||
|
|
||
| The Analytics component was added to the root layout following Vercel's best practices for App Router projects: | ||
| - Imported from `@vercel/analytics/next` (the Next.js-specific package) | ||
| - Placed inside the `<body>` tag to ensure proper tracking across all pages | ||
| - Positioned after the main content to avoid blocking initial page rendering | ||
|
|
||
| ## Notes | ||
|
|
||
| - This is an App Router project (uses `app/` directory structure) | ||
| - The Analytics component will automatically track page views and Web Vitals | ||
| - No environment variables or configuration needed for basic functionality | ||
| - Analytics data will be available in the Vercel dashboard once deployed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| # Quickstart App | ||
|
|
||
| This quickstart application demonstrates how to integrate the **MetaMask SDK** with a **Next.js** application using **wagmi**. It showcases connecting to a wallet, switching networks, and interacting with Ethereum-based functionalities. | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| - [Quickstart App](#quickstart-app) | ||
| - [Table of Contents](#table-of-contents) | ||
| - [Introduction](#introduction) | ||
| - [Features](#features) | ||
| - [Project Structure](#project-structure) | ||
| - [`app/page.tsx`](#apppagetsx) | ||
| - [`app/layout.tsx`](#applayouttsx) | ||
| - [`wagmi.config.ts`](#wagmiconfigts) | ||
| - [`app/providers.tsx`](#appproviderstsx) | ||
| - [`components/navbar.tsx`](#componentsnavbartsx) | ||
| - [Technologies Used](#technologies-used) | ||
| - [Getting Started](#getting-started) | ||
| - [Contributing](#contributing) | ||
| - [License](#license) | ||
|
|
||
| ## Introduction | ||
|
|
||
| The **Quickstart App** serves as a foundation for developers to build decentralized applications (dApps) using Next.js and MetaMask. It provides a seamless integration with the Ethereum blockchain, allowing users to connect their wallets, switch networks, and interact with smart contracts. | ||
|
|
||
| ## Features | ||
|
|
||
| - **Wallet Connection**: Connect to MetaMask wallet seamlessly. | ||
| - **Network Switching**: Switch between Ethereum networks like Linea Sepolia, Linea, and Mainnet. | ||
| - **Interactive UI**: Responsive design with interactive cards guiding users. | ||
| - **Modular Components**: Easy-to-understand and customizable components. | ||
| - **Smart Contract Interaction**: Templates for interacting with smart contracts. | ||
|
|
||
| ## Project Structure | ||
|
|
||
| The application is organized into several key components and configurations: | ||
|
|
||
| ### `app/page.tsx` | ||
|
|
||
| This is the main landing page of the application. It displays a welcome message and interactive cards that guide users to various resources and functionalities. | ||
|
|
||
| - **Welcome Section**: Displays a welcome message and prompts users to connect their wallet. | ||
| - **Cards Section**: Contains interactive cards linking to documentation, testnet ETH, guides, and examples. | ||
|
|
||
| ### `app/layout.tsx` | ||
|
|
||
| Defines the root layout of the application, including global styles, fonts, and providers. | ||
|
|
||
| - **Fonts**: Uses `Geist` and `Geist_Mono` fonts for styling. | ||
| - **Metadata**: Sets the page title and description. | ||
| - **Providers**: Wraps the application with necessary providers for state management. | ||
| - **Navbar**: Includes the navigation bar across all pages. | ||
|
|
||
| ### `wagmi.config.ts` | ||
|
|
||
| Configures the `wagmi` client for blockchain interactions, specifying supported chains and storage. | ||
|
|
||
| - **Chains**: Supports Linea Sepolia, Linea, and Ethereum Mainnet. | ||
| - **Storage**: Uses cookies for storage to maintain state between sessions. | ||
| - **Transports**: Sets up HTTP transports for chain communication. | ||
|
|
||
| ### `app/providers.tsx` | ||
|
|
||
| Sets up providers for state management and data fetching using `WagmiProvider` and `QueryClientProvider`. | ||
|
|
||
| - **WagmiProvider**: Provides Ethereum context and state. | ||
| - **QueryClientProvider**: Manages data fetching and caching. | ||
| - **Initial State**: Retrieves initial state from cookies for server-side rendering (SSR). | ||
|
|
||
| ### `components/navbar.tsx` | ||
|
|
||
| The navigation bar that handles wallet connections, network switching, and displays user account information. | ||
|
|
||
| - **Logo**: Displays the MetaMask logo. | ||
| - **Wallet Connection**: Shows a **Connect Wallet** button if not connected. | ||
| - **Account Information**: Displays connected wallet address and allows disconnection. | ||
| - **Network Switching**: Enables users to switch between supported networks. | ||
|
|
||
| ## Technologies Used | ||
|
|
||
| - **Next.js**: React framework for building server-side rendered and statically generated applications. | ||
| - **React**: JavaScript library for building user interfaces. | ||
| - **TypeScript**: Typed superset of JavaScript for improved developer experience. | ||
| - **wagmi**: React hooks library for Ethereum. | ||
| - **MetaMask SDK**: Enables interaction with the MetaMask wallet. | ||
| - **Tailwind CSS**: Utility-first CSS framework for rapid UI development. | ||
| - **Lucide Icons**: Open-source icon library for consistent iconography. | ||
| - **@tanstack/react-query**: Data fetching and caching library. | ||
|
|
||
| ## Getting Started | ||
|
|
||
| To run the application locally, follow these steps: | ||
|
|
||
| 1. **Clone the repository** | ||
|
|
||
| ```bash | ||
| git clone https://github.com/MetaMask/metamask-sdk-examples.git | ||
| ``` | ||
|
|
||
| 2. **Navigate to the project directory** | ||
|
|
||
| ```bash | ||
| cd quickstart | ||
| ``` | ||
|
|
||
| 3. **Install dependencies** | ||
|
|
||
| ```bash | ||
| pnpm i | ||
| # or | ||
| yarn install | ||
| ``` | ||
|
|
||
| 4. **Run the development server** | ||
|
|
||
| ```bash | ||
| pnpm dev | ||
| # or | ||
| yarn dev | ||
| ``` | ||
|
|
||
| 5. **Open your browser** | ||
|
|
||
| Visit [http://localhost:3000](http://localhost:3000) to see the application running. | ||
|
|
||
| ## Contributing | ||
|
|
||
| Contributions are welcome! If you'd like to improve the app or add new features, please fork the repository and submit a pull request. | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the [MIT License](LICENSE). | ||
|
|
||
| --- | ||
|
|
||
| Feel free to customize and expand upon this README to suit your project's needs. |
Binary file not shown.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Boilerplate CI config does nothing for the project
Low Severity
This
.circleci/config.ymlis a verbatim auto-generated CircleCI template whose only step isecho Hello, World!. The repository contains multiple real projects withbuildandlintscripts, but this CI config doesn't invoke any of them. It appears to be default scaffolding that was unintentionally included in the merge to main.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey!