Buy Crypto Without The Fuss Using Web3 And Ramp Network.
Buying Crypto is painful
If you’re not uploading your passport or driving license for tedious KYC checks, or waiting for your bank account to be approved, you’re waiting days to withdraw your crypto to your wallet (looking at you Coinbase).
This is no longer the case. New platforms are springing into existence that enables crypto onboarding in a few simple clicks, and without the need for a third party custody provider like Coinbase.
Not only that, but these new platforms are making it super easy for developers to integrate their onboarding capabilities into other applications.
Here’s how I made EasyEther, a DApp which allows users to purchase Crypto directly into their wallets.
Say goodbye to waiting for your crypto
The premise is simple. Log in using your browser wallet to sync your wallet address, then top up your wallet inside the DApp within a few clicks. Currently, supported wallets are injected web3 instances like Metamask extension for Chrome, or build in DApp browsers like Opera or TrustWallet.
The top-up functionality is made possible by Ramp Network. A Polish startup taking crypto onboarding and accessibility to the next level with their Instant integration.
Adding the Ramp widget to your DApp is as simple as adding 2 lines to your codebase. Innovation in this area is exactly what the Crypto space has been screaming out for since the explosion of Ethereum DApps in 2017.
The most popular DApp during the 2017 bubble was a digital cat collection game called CryptoKitties, which famously, had a huge bounce rate, in part due to the difficulty of onboarding users. Platforms like Ramp Network are leading the way to make onboarding easier to mainstream users.
How I built it in 6 steps
The full codebase can be found in the Github repository.
I play around with Web3 and Blockchain technologies pretty much daily, and when I stumbled upon Ramp Network on twitter I had to give it a go.
Step 1: Setting up the repo
Most of my DApp development comes in the form of Truffle Suite apps, using the React-Redux-Bootstrap Truffle Box as a starting point. Since the DApp I was creating didn’t need any custom Smart Contracts, the Truffle Box was unnecessary bloat. So instead, I opted for starting with a basic React App:
npx create-react-app easy-ether
I love structured code, and for React apps I always default to using Redux for state management, with “IARS” file structure. So the next step was installing these dependencies and getting the file structure in place.
Step 2: Connecting to wallets
Connecting to injected Web3 instances is pretty easy using Web3JS. Initially, I had thought to include some other wallet providers like Authereum, Portis, Torus, Fortmatic, and others. Web3Modal is a cool project with enables developers to add all of these and manage connections. However, to get the DApp to MVP as soon as possible, I opted to leave those until a later date. That way, I’d be able to get to the fun part of integrating Ramp quickly.
I created a file called getWeb3.js which has just one function, getWeb3:
import Web3 from 'web3';
export const getWeb3 = () =>
new Promise( async (resolve, reject) => {
// Modern dapp browsers...
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
try {
// Request account access if needed
await window.ethereum.enable();
// Acccounts now exposed
resolve(web3);
} catch (error) {
reject(error);
}
}
// Legacy dapp browsers...
else if (window.web3) {
// Use Mist/MetaMask's provider.
const web3 = window.web3;
resolve(web3);
}
// Fallback to localhost; use dev console port by default...
else {
reject(new Error("No web3 wallet available"));
}
});This is called by loadWeb3 in the interactions.js file when the user attempts to connect their browser wallet to the DApp:
export const loadWeb3 = async (dispatch) => {
dispatch(loggingIn());
let web3 = null;
try{
web3 = await getWeb3();
dispatch(loggedIn(web3));
loadAccount(dispatch, web3);
}
catch(error) {
dispatch(loginFailed(error));
}
return web3;
}The dispatch calls update the Redux store with the status of the login attempts, so the app can give feedback to the user if something fails.
Step 3: Designing the interface
User experience is so marred by excessive options in Ethereum DApps that it can be intimidating for new users. I wanted the interface to be as simple as possible, with only one call to action at any given time.
Bootstrap is my go-to framework for anything UI, and with react-bootstrap providing great tools for integrating with React, using it was a no brainer. The login page code looks like this:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Container, Row, Col, Button, Alert} from 'react-bootstrap';
import { loadWeb3 } from './redux/interactions';
import FadeIn from 'react-fade-in';
import { loggingInErrorSelector, loggingInSelector } from './redux/selectors';
class Login extends Component {
render() {
const {dispatch, loggingIn, loggingInError} = this.props;
const login = async (e) => {
e.preventDefault();
await loadWeb3(dispatch);
}
return (
<FadeIn>
<Container>
<Row>
<Col className="text-center">
<Button onClick={login}>
Connect
</Button>
{loggingInError !== false && loggingIn === false ? <FadeIn><Alert className="my-2" variant="danger">Connect to wallet failure: {loggingInError.message}</Alert></FadeIn> : <></>}
</Col>
</Row>
</Container>
</FadeIn>
);
}
}
function mapStateToProps(state){
return {
loggingInError: loggingInErrorSelector(state),
loggingIn: loggingInSelector(state)
}
}
export default connect(mapStateToProps)(Login);Using <FadeIn> gives the UI a smoother feel than simply loading the page components immediately.
Step 4: Topping up
Now that users can connect using their wallets, and the DApp has their active wallet address, we can integrate Ramp. I initially had thought to include an input box on the top-up page so the user can enter the top-up amount before opening the widget. Knowing that would clutter things slightly, I opted against and allowed the Ramp widget to deal with that part.
Integration was super easy. This is the top-up function inside interactions.js:
export const topupWallet = async (dispatch, account) => {
const ramp = new RampInstantSDK({
hostAppName: 'Easy Ether',
hostLogoUrl: 'https://alexroan.github.io/easy-ether/static/media/logo-white.86143c9b.png',
variant: 'auto',
userAddress: account
})
.show();
dispatch(rampOpened());
subscribeToRampEvents(dispatch, ramp);
}The subscribeToRampEvents function catches events that are emitted by the Ramp widget. The ones I’m currently listening to are WIDGET_CLOSE_REQUEST_CONFIRMED, PURCHASE_CREATED, PURCHASE_SUCCESSFUL and PURCHASE_FAILED.
Step 5: Snazzy branding
I am by no means a great designer. I love problem-solving and placing programmatic puzzle pieces together, so bedazzling UIs tends to be a bit tedious for me. Nevertheless, after a few SASS border-radius and background definitions later, and the “theme” was done.
I added in a few social icons at the bottom using the react-social-icons dependency, a logo (which I frequently use for projects. See BlockCentric), and it was ready to go!
Step 6: Releasing into the wild
Github pages enable repositories to host a static webpage for free, so long as you don’t mind the github.io URL. Adding and using the gh-pages package lets you automate this deployment process. I followed this article to set up a deployment script, and released into the wild!
What’s next?
As mentioned earlier, I want to add other wallet providers and possibly use Web3Modal or web3-react for this.
Ramp is not the only platform which makes buying crypto from bank accounts super easy. Moonpay is another that I recently applied for and received access to, so I’m also going to integrate that and see how it compares.
If you’re interested in contributing to the project, or just checking out the code, it can be found on Github.
Learn More
If you’re interested in Blockchain Development, I write tutorials, walkthroughs, hints, and tips on how to get started and build a portfolio. Check out this evolving list of Blockchain Development Resources.
If you enjoyed this post and want to learn more about Blockchain Development or the Blockchain Space in general, I highly recommend signing up to the Blockgeeks platform. They have courses on a wide range of topics in the industry, from Coding to Marketing to Trading. It has proven to be an invaluable tool for my development in the Blockchain space.
