Pera Challenge Solved!

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,95 +1,73 @@
-# Pera Challenge
+# Live App
+[https://pera-challenge.vercel.app/](https://pera-challenge.vercel.app/)
 
-## Introduction
+# Getting Started with Create React App
 
-Welcome to the **Pera Challenge**! Pera is the leading gateway for Algorand projects, providing essential tools and libraries for developers. This challenge simulates real-world scenarios in decentralized application (dApp) development using [Pera Connect](https://github.com/perawallet/connect) —a library designed to simplify wallet integration and blockchain interactions.
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Objective
+## Available Scripts
 
-Build a simple web application using your favorite web framework (React, Vue, or any other) that:
+In the project directory, you can run:
 
-- Connects to a user's Algorand address using Pera Connect.
-- Handles transactions and displays verified assets.
-- Provides a seamless and user-friendly experience.
+### `npm start`
 
-## Challenge Steps
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-### Step 1: Connect the Wallet
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
 
-- **Implement "Connect with Pera" Button:**
-  - Add a button labeled **"Connect with Pera"** to your dApp.
-  - Upon clicking, initiate the wallet connection using Pera Connect.
-- **Handle Multiple Accounts:**
-  - Pera Connect may return multiple accounts, if the user selects.
-  - If multiple accounts are returned, prompt the user to select one.
-  - Display the selected account address on the screen.
-- **Network Compatibility:**
-  - Ensure your application can connect with both **Testnet** and **Mainnet**.
-  - Provide an option for users to switch between networks.
+### `npm test`
 
-### Step 2: Implement Payment Transaction
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-- **"Donate 1 ALGO" Feature:**
-  - Add a button labeled **"Donate 1 ALGO"**.
-  - When clicked, prompt the user to sign a transaction sending **1 ALGO** to your account.
-- **Transaction Handling:**
-  - Provide feedback on the transaction status (e.g., pending, confirmed, failed).
-  - Handle errors gracefully and inform the user accordingly.
+### `npm run build`
 
-### Step 3: Display Verified Assets
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-- **Fetch and List Verified Assets:**
-  - Use Pera's [Public API](https://docs.perawallet.app/references/public-api) to retrieve a list of all available verified assets.
-  - Display the assets in a user-friendly list, including their logos and names.
-
-### Step 4: Asset Opt-In Functionality
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
 
-- **Opt-In to Assets:**
-  - When a user clicks on an asset from the list, initiate an opt-in transaction for that asset.
-  - Prompt the user to sign the opt-in transaction via Pera Connect.
-- **Confirmation and Feedback:**
-  - Confirm to the user when the opt-in is successful.
-  - Display any errors if the opt-in fails.
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
----
+### `npm run eject`
 
-## Optional Enhancements
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
 
-*For participants looking to go the extra mile, consider implementing the following feature, which requires a basic backend service:*
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-- **Atomic Swap Engine:**
-  - Create a minimal clone of belowed https://atomixwap.xyz. This will be a good chance to understand the hidden details and complexities creating a real-life blockchain application.
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
 
----
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
 
-**SUBMISSIONS SHOULD BE A PR FOR THIS REPO**
+## Learn More
 
----
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-## Resources
-- [Pera Developer Docs](https://docs.perawallet.app)
-- [Pera Connect Documentation](https://github.com/perawallet/connect)
-- [Pera Public API Documentation](https://docs.perawallet.app/references/public-api)
-- [Algorand Developer Portal](https://developer.algorand.org/)
-- [Algorand JavaScript SDK](https://github.com/algorand/js-algorand-sdk)
+To learn React, check out the [React documentation](https://reactjs.org/).
 
----
+### Code Splitting
 
-## Evaluation Criteria
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
 
-Your submission will be evaluated based on:
+### Analyzing the Bundle Size
 
-- **Functionality:**
-  - Does the application meet all the required steps?
-  - Are optional enhancements implemented?
-- **Code Quality:**
-  - Is the code clean, well-organized, and commented?
-  - Are best practices followed?
-- **User Experience (UX):**
-  - Is the application intuitive and easy to use?
-  - Does it handle errors gracefully?
-- **Creativity and Innovation:**
-  - Any unique features or improvements beyond the requirements.
-- **Technical Implementation:**
-  - Efficient use of APIs and handling of asynchronous operations.
-  - Security considerations (e.g., handling sensitive data appropriately).
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

README.old.md

@@ -0,0 +1,95 @@
+# Pera Challenge
+
+## Introduction
+
+Welcome to the **Pera Challenge**! Pera is the leading gateway for Algorand projects, providing essential tools and libraries for developers. This challenge simulates real-world scenarios in decentralized application (dApp) development using [Pera Connect](https://github.com/perawallet/connect) —a library designed to simplify wallet integration and blockchain interactions.
+
+## Objective
+
+Build a simple web application using your favorite web framework (React, Vue, or any other) that:
+
+- Connects to a user's Algorand address using Pera Connect.
+- Handles transactions and displays verified assets.
+- Provides a seamless and user-friendly experience.
+
+## Challenge Steps
+
+### Step 1: Connect the Wallet
+
+- **Implement "Connect with Pera" Button:**
+  - Add a button labeled **"Connect with Pera"** to your dApp.
+  - Upon clicking, initiate the wallet connection using Pera Connect.
+- **Handle Multiple Accounts:**
+  - Pera Connect may return multiple accounts, if the user selects.
+  - If multiple accounts are returned, prompt the user to select one.
+  - Display the selected account address on the screen.
+- **Network Compatibility:**
+  - Ensure your application can connect with both **Testnet** and **Mainnet**.
+  - Provide an option for users to switch between networks.
+
+### Step 2: Implement Payment Transaction
+
+- **"Donate 1 ALGO" Feature:**
+  - Add a button labeled **"Donate 1 ALGO"**.
+  - When clicked, prompt the user to sign a transaction sending **1 ALGO** to your account.
+- **Transaction Handling:**
+  - Provide feedback on the transaction status (e.g., pending, confirmed, failed).
+  - Handle errors gracefully and inform the user accordingly.
+
+### Step 3: Display Verified Assets
+
+- **Fetch and List Verified Assets:**
+  - Use Pera's [Public API](https://docs.perawallet.app/references/public-api) to retrieve a list of all available verified assets.
+  - Display the assets in a user-friendly list, including their logos and names.
+
+### Step 4: Asset Opt-In Functionality
+
+- **Opt-In to Assets:**
+  - When a user clicks on an asset from the list, initiate an opt-in transaction for that asset.
+  - Prompt the user to sign the opt-in transaction via Pera Connect.
+- **Confirmation and Feedback:**
+  - Confirm to the user when the opt-in is successful.
+  - Display any errors if the opt-in fails.
+
+---
+
+## Optional Enhancements
+
+*For participants looking to go the extra mile, consider implementing the following feature, which requires a basic backend service:*
+
+- **Atomic Swap Engine:**
+  - Create a minimal clone of belowed https://atomixwap.xyz. This will be a good chance to understand the hidden details and complexities creating a real-life blockchain application.
+
+---
+
+**SUBMISSIONS SHOULD BE A PR FOR THIS REPO**
+
+---
+
+## Resources
+- [Pera Developer Docs](https://docs.perawallet.app)
+- [Pera Connect Documentation](https://github.com/perawallet/connect)
+- [Pera Public API Documentation](https://docs.perawallet.app/references/public-api)
+- [Algorand Developer Portal](https://developer.algorand.org/)
+- [Algorand JavaScript SDK](https://github.com/algorand/js-algorand-sdk)
+
+---
+
+## Evaluation Criteria
+
+Your submission will be evaluated based on:
+
+- **Functionality:**
+  - Does the application meet all the required steps?
+  - Are optional enhancements implemented?
+- **Code Quality:**
+  - Is the code clean, well-organized, and commented?
+  - Are best practices followed?
+- **User Experience (UX):**
+  - Is the application intuitive and easy to use?
+  - Does it handle errors gracefully?
+- **Creativity and Innovation:**
+  - Any unique features or improvements beyond the requirements.
+- **Technical Implementation:**
+  - Efficient use of APIs and handling of asynchronous operations.
+  - Security considerations (e.g., handling sensitive data appropriately).

config-overrides.js

@@ -0,0 +1,22 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {};
+
+  Object.assign(fallback, {
+    crypto: require.resolve('crypto-browserify'),
+    stream: require.resolve('stream-browserify'),
+  });
+  config.resolve.fallback = fallback;
+  // ignore warning about source map of perawallet/connect
+
+  config.ignoreWarnings = [/Failed to parse source map/];
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ]);
+  return config;
+};