Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomkat-cr/web3_walllet_conn
Web3 Wallet Connect. Built with React 18, Next.JS, Web3 React Library y MetaMask Wallet.
https://github.com/tomkat-cr/web3_walllet_conn
ethereum-wallet metamask nextjs react reactjs web3-react web3js
Last synced: 21 days ago
JSON representation
Web3 Wallet Connect. Built with React 18, Next.JS, Web3 React Library y MetaMask Wallet.
- Host: GitHub
- URL: https://github.com/tomkat-cr/web3_walllet_conn
- Owner: tomkat-cr
- Created: 2022-07-14T02:38:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-19T12:23:08.000Z (over 2 years ago)
- Last Synced: 2024-10-26T06:52:18.314Z (2 months ago)
- Topics: ethereum-wallet, metamask, nextjs, react, reactjs, web3-react, web3js
- Language: JavaScript
- Homepage:
- Size: 154 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web3_walllet_conn
Conectar una aplicación React con una Wallet de Ethereum.
Connect a React app with a Ethereum Wallet.
# Documentación (español)
## Introducción
A partir de la entrevista de @Midudev a Oscar Barajas, seguí las instrucciones para hacer la demo para conectar una aplicación React con una Wallet de Ethereum.
Entrevista: Todo lo que necesitas para Aprender y Entender Web3 como desarrollador JavaScript
Las tecnologías utilizadas son: ReactJs 18, Next.Js, Web3 React Library y MetaMask Wallet.
ReactJs 18:
Next.Js:
Web3 React Library:
MetaMask Wallet:
Repo con la demo:
Este es un proyecto [Next.js](https://nextjs.org/) inicializado con [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Inicializando el Proyecto
Primero, ejecute el servidor de desarrollo:
```bash
npm run dev
# or
yarn dev
```
Abra [http://localhost:3000](http://localhost:3000) en su navegador para ver el resultado.
Puede comenzar editando la página modificando el archivo `pages/index.js`. La página se auto actualizará a medida que vaya editando el archivo.
Se puede tener acceso a la API [API routes](https://nextjs.org/docs/api-routes/introduction) desde [http://localhost:3000/api/hello](http://localhost:3000/api/hello). Este endpoint puede ser editado en `pages/api/hello.js`.
El directorio `pages/api` esta mapeado a `/api/*`. Los archivos en este directorio son tratados como rutas o [API routes](https://nextjs.org/docs/api-routes/introduction) en vez de Páginas de React.
## Aprenda Más
Para aprender más sobre Next.js, de un vistazo a los siguientes recursos:
- [Next.js Documentation](https://nextjs.org/docs) - aprenda sobre las características y el API de Next.js.
- [Learn Next.js](https://nextjs.org/learn) - un tutorial interactivo sobre Next.js.
Es posible hacer check out del repositorio [the Next.js GitHub repository](https://github.com/vercel/next.js/) - su retroalimentación (feedback) y aportes son bienvenidos!
## Deploy a Vercel
La manera más fácil de desplegar su aplicación Next.js es utilizando la plataforma [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) de los creadores de Next.js.
Recomendamos revisar nuestra documentación [Next.js deployment documentation](https://nextjs.org/docs/deployment) para más detalles.
# Documentation (english)
## Introduction
After whatched the interview video with @Midudev and Oscar Barajas, I followed the instructions to build a demo to connect a React app with a Ethereum Wallet.
Interview: All you need to learn and understand from Web3 as a JavaScript developer
Technology stack used: ReactJs 18, Next.Js, Web3 React Library, MetaMask Wallet.
ReactJs 18:
Next.Js:
Web3 React Library:
MetaMask Wallet:
Demo code repo:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.