Crypto-Portfolio App

Demo Live Demo on CodeSandbox (link)

Project Overview Crypto-Portfolio App is a single-page application (SPA) that allows users to manage their cryptocurrency portfolio. Users can add tokens to their watch list, view current and historical balances, check token allowances, and transfer tokens to other addresses. The application connects to the Ethereum blockchain via MetaMask or by allowing users to input a wallet address directly.

Features Wallet Connection: Connect to your wallet using MetaMask or input a wallet address manually. Token Watch List: Add tokens to your watch list and monitor their balances in real-time. Historical Balance: View the historical balance of each token over a selected date range. Token Allowance: Check the allowance of tokens for different smart contracts. Token Transfer: Transfer tokens to other addresses directly from the application. Data Visualization: Display token balances, historical data, and allowances using charts and graphs for better visualization. Technical Stack Frontend: React.js Blockchain Interaction: Ethers.js Visualization: Chart.js, React-Chart.js, and React DatePicker Getting Started Prerequisites To run the project locally, you need to have the following installed:

Node.js npm (comes with Node.js) MetaMask (or another Ethereum wallet) Installation Clone the Repository:

bash Copy code git clone https://github.com/Ruhul2404/crypto-portfolio-app.git cd crypto-portfolio-app Install Dependencies:

bash Copy code npm install Run the Application:

bash Copy code npm start The application should now be running on http://localhost:3000.

Deployment You can deploy the application on a platform like Netlify or Vercel. Follow their respective guides to deploy a React.js app.

For a quick demo, you can also use CodeSandbox:

Go to CodeSandbox. Click on "Create Sandbox" and choose "React" as the template. Copy the code from your local App.js and index.js into the respective files in CodeSandbox. Click on the "Share" button to get a preview link. Usage Wallet Connection Click on the Connect Wallet button to link your MetaMask wallet. Alternatively, you can manually input your wallet address. Managing Tokens In the Token Watch List section, enter the token symbol and contract address. Click Add Token to add it to your watch list. The current balance of the token will be displayed. Token Transfer In the Token Transfer section, input the recipient address and the amount you wish to transfer. Click Transfer to send tokens. Viewing Historical Data In the Historical Data section, use the date picker to select a date range. The historical balance for each token will be displayed on the graph. Code Structure App.js: Contains the main logic and UI components of the application. index.js: The entry point of the React application, which renders the App component.