This repository provides a starter kit for building a P2P (Peer-to-Peer) onramp and offramp platform. It includes a clean code structure and an easy-to-navigate architecture, making it simple for developers to plug in their business logic and start working without worrying about the client UI.
-
Clean Code Structure: The project is organized with a clean and modular code structure, making it easy to understand and maintain.
-
Inbuilt Mini Design System: This repository comes with an inbuilt mini design system, including primitive components, that you can leverage to build your user interface quickly.
-
TypeSafe with TypeScript: The project is set up with TypeScript, ensuring type safety and improved development workflows.
-
React Native: The project is built using React Native, allowing you to develop for both iOS and Android platforms with a single codebase.
-
Styled-Components: Styling is done with Styled-Components, enabling you to create styled and responsive components with ease.
-
TypeScript: Type safety and improved code quality are achieved through TypeScript, making development more robust and efficient.
Follow these steps to get started with the P2P Onramp and Offramp project:
-
Clone the repository:
git clone https://github.com/Koushith/HyperRamp-p2p-starter-code.git
-
Install dependencies:
cd p2p-onramp-offramp npm install
-
Run the App:
npm start //will start the metro server a - android i - ios
-
Start developing your business logic and connect it to the provided components and design system.
-
Customize the design system to match your branding and visual requirements.
-
Build and test your application on both iOS and Android platforms.
Now that you have successfully run the app, let's modify it.
-
Open
App.tsx
in your text editor of choice and edit some lines. -
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!
For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!
You've successfully run and modified your React Native App. 🥳
- Plug in your business logic. thats all
Integrate React Navigation for handling navigation within your app. React Navigation provides an easy and customizable way to navigate between screens and manage navigation stacks.
Installation:
npm install @react-navigation/native
- Configure your navigation structure within the
navigation
directory. - Implement different navigation stacks for various sections of your app.
Extend the inbuilt design system with additional primitive components that can be commonly used across your application. These might include buttons, input fields, modals, and more. Organize these components within the components
directory.
Update the directory structure to reflect the new additions:
src
- components
- primitive
- Input
- TextArea
- Card
- Modal
- Toasts
- Loader, etc
- appComponents
- screens
- onboarding
- home
- buy
- sell
- recieve
- notification
- add-new-bank
- add-new-wallet
- account-settings
- navigation
- AuthNavigator
- MainNavigator
- utils
- constants
- helpers
- theme
- colors
- typography
- spacing
- index
- hooks
- redux (new directory for Redux setup)
- actions
- reducers
- store
if you are intrested in building this, we got you covered🚀
HyperRamp is a decentralized peer to peer on/off ramp based on https://www.reclaimprotocol.org/
Here is the Figma - https://www.figma.com/file/0u2xwd8lK7HI8z7WaBKADK/HyperRamp?type=design&node-id=0-1&mode=design
- A has crypto on-chain
- B has fiat in his/her bank account
- A submits their bank account number and bank name to a smart contract
- B submits their bank account number and bank name to a smart contract
- A deposits crypto into an on-chain smart contract (escrow)
- B transfer the fiat to A’s bank account
- B generates a zero knowledge proof that they did the transfer
- B submits the zero knowledge proof to escrow to release the crypto
here are some documents to read:
- https://apps.apple.com/ru/app/reclaim-wallet/id6447378796?l=en
- https://play.google.com/store/apps/details?id=com.credentialswallet
- https://docs.reclaimprotocol.org/
- If you want to add this new React Native code to an existing application, check out the Integration guide.
- If you're curious to learn more about React Native, check out the Introduction to React Native.
Developer: Koushith Amin
- Twitter: @koushithAmin
- Portfolio: koushith.com
This project is designed to provide a solid foundation for building P2P onramp and offramp solutions. You can easily customize and extend it to fit your specific business requirements.
This project is open-source and available under the MIT License.
Happy coding! If you have any questions or need assistance, feel free to reach out to me.
Feel free to replace the placeholders and add your business logic. extend this starter code.