This application aims to create a democratic and secure solution for the purchase and sale of ERC20 tokens, through the PIX, integrating the functionalities of smart contracts (smart contracts) of the blockchain with a receipt by digital signature. Allowing the integration of national financial system transactions to public blockchains, dispensing with custody through intermediaries.

• Metamask Tutorial
• Recommended IDE Setup
• Dependencies
• Build Setup

Install the Metamask extension at https://metamask.io/download/

Go to Settings -> Advanced -> Show Testnets

Now you can select the Goerli testnet.

To add the Mumbai network, follow the instructions at: https://www.youtube.com/watch?v=Jegmru0Q0j4

Go to Import Tokens and paste the following address: 0x294003F602c321627152c6b7DED3EAb5bEa853Ee

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

See Vite Configuration Reference.

For full operation of the application, it is necessary to correctly configure the variable that points to the api in the .env file, in the repository there is an .env.example file, just rename it to just .env and modify the variable VITE_API_URL. The api can be run locally see https://github.com/liftlearning/Pix-Explorer-Back-End, or it can be pointed to just her staging address: https://p2pix-block-explorer-api-staging.vercel.app/

In the .env file, set VITE_GOERLI_API_URL=https://eth-goerli.g.alchemy.com/v2/Zu9m4b2U_EzVU_zd-vgZDOleY8OF1DNP and VITE_MUMBAI_API_URL=https://polygon-mumbai.g.alchemy.com/v2/ZANeCqfj6VsXGpOH6gWAP6SIVIgD9Pwv

You can also replace it with your own Alchemy Keys if you have one.

The application can be tested by its trial version https://p2pix-staging.vercel.app/, the only requirement is to be running the smart contract of local way. To run the application locally, there are two different ways:

# Clone the repo
git clone https://github.com/liftlearning/P2Pix-Front-End
cd P2Pix-Front-End

# Install dependencies with yarn
yarn install

# Type-Check, Compile and Minify for Production
yarn build

# Compile and Hot-Reload for Development (port 3000)
yarn start

# Lint with [ESLint](https://eslint.org/)
yarn lint

# Clone the repo
git clone https://github.com/liftlearning/P2Pix-Front-End
cd P2Pix-Front-End

#1. Install [Docker](https://docs.docker.com/install/linux/docker-ce/ubuntu/);
#2. Install [Docker Compose](https://docs.docker.com/compose/install/).

# Run docker-compose up command
docker-compose up