How do I get started with DApp

Let me explain this code:

Solidity for Beginners · Smart Contract Development Crash Course

Today I'm going to show you how to get started programming with the Solidity so that you can become a blockchain developer. I'll show you how to write your first Ethereum smart contracts with Solidity as a beginner! You don't have know anything about the language to get started with this tutorial. We'll even do all the programming inside your web browser so you won't have install any development tools or anything like that.

In summary, you go from trusting an entity and hoping that they will do what they promised, to trusting the code and knowing it will do what it promised, regardless of the different actors involved and the different motivations they might have.

Smart contracts¶

Smart contracts are on-chain logic programs that can implement highly customized transfer conditions. They can be composed with all other layer-1 features, (including Algos, NFTs, fungible tokens) to produce powerful and sophisticated decentralized applications.

Let’s return to the auction bidding scenario and use smart contracts to implement on-chain bidding. What this means is that instead of sending bids to an account controlled by a centralized entity, subject to attacks and single points of failure, we can send those bids to a smart contract, governed by code, that is open and publicly verifiable by anyone. And that code won’t unexpectedly change. That doesn’t mean it can’t change, but if it does, it will be public and evident to users. And if you don’t like the idea that it can change, you can even program it from the start to restrict certain changes or disallow all changes to the contract.

In summary, you go from trusting an entity and hoping that they will do what they promised, to trusting the code and knowing it will do what it promised, regardless of the different actors involved and the different motivations they might have.

An important sidebar here is that it is critical for smart contract code to be reviewed and audited for security flaws. Badly written code that does not account for all potential attack vectors of course will not secure anything.

There are a growing number of DApps that are being developed on various DApp platforms. However, the use of these applications has always been somewhat cumbersome. Since all these DApps have a unique code, it meant that they may only work on specific platforms. And not all DApps worked on traditional browsers like Google Chrome, Microsoft Edge or Safari. This required the use of DApp browsers to specialize in opening various DApps.

What is a DApp Browser?

There are a growing number of DApps that are being developed on various DApp platforms. However, the use of these applications has always been somewhat cumbersome. Since all these DApps have a unique code, it meant that they may only work on specific platforms. And not all DApps worked on traditional browsers like Google Chrome, Microsoft Edge or Safari. This required the use of DApp browsers to specialize in opening various DApps.

These DApp browsers serve as a bridge between the DApps and their users. It allowed the users to use their mobile phones and desktops to interact with DApps. Some of these browsers are part of cryptocurrency wallets that can be used to receive Ethereum and ERC20 tokens and also store DeFi assets and NFT. Some of the most popular DApp browsers include MetaMask, Trust Wallet, Coinbase Wallet and Argent.

Step 2: Read the transaction information carefully:

How to Swap Trader Joe natively on Coin98 Wallet

Step 1: On the homepage, click Swap.

Step 2: Select Trader Joe.

Step 3: Click the settings icon at the top right corner of the screen and choose between 2 interface options: the Basic UI (1) and the Pro UI (2).

Users must fill in the following information to complete the transaction:

  • Select the wallet containing the token/coin that you want to trade.
  • Choose the trading pair from the list: For example, AVAX and JOE. Users can choose other tokens as preferred.
  • For those tokens that haven’t been listed on Coin98 Wallet, users can trade using their contract addresses.

Step 4: Slide the bar to adjust the trading amount. Carefully read the information before deciding to trade:

  • Rate & Inverse rate: The price ratio of the 2 tokens.
  • Price impact: Estimated % difference in price when swap compared to the displayed price.
  • Liquidity Provider Fee: the amount of fees that will be used to pay the liquidity providers fees.
  • Gwei bar: a feature that allows users to adjust the amount of Gas fee (transaction fee) according to their needs by sliding the bar.
  • Share URL: Share trading pair via url.

Step 5: Select Approve → Click Swap to finish.

Note: Users can also adjust the gas fee and slippage by clicking the settings icon at the top right corner of the trading interface.

  • Slippage Tolerance: This is one of the most common reasons for swap failure. You can trade with the default slippage rate on the wallet (2%), or customize it higher to ensure the highest success rate.
  • Transaction Deadline: the maximum transaction time that you can specify to avoid the case of long waiting time without any matching orders.
  • Unlimited Approval: a feature that enables users to grant platforms and smart contracts the permission to spend tokens/ coins on your behalf without limit.
  • Default Pair: the default tokens for each trading pair.
  • The default gas fee on Coin98 Wallet has been set for the highest speed with the most reasonable cost.
  • The arrow in the middle of the trading interface is used to switch between the buying and selling positions. Users need to check the tokens’ positions carefully before making any transactions.

After swapping successfully, users can access the Trade History from the swapping interface to view their transactions or go back to the home screen to check the traded tokens if needed.

Open a document in a document library

What's in a SharePoint site

Organizations use SharePoint to create websites. In Microsoft 365, you can create a site from the SharePoint start page. You also get a SharePoint team site whenever you create a Microsoft 365 group in Outlook Online or Microsoft 365. If you're in SharePoint Server, you can create a team or a number of other types of sites. You can use the sites as a secure place to store, organize, share, and access information from any device. All you need is a web browser, such as Microsoft Edge, Internet Explorer, Google Chrome, or Mozilla Firefox. Get the SharePoint mobile app to stay connected from your mobile devices.

We'll be using Create React App with a TypeScript template to build our app. We don't use a lot of TypeScript in the tutorial but it's a good way to dip your toes in if you haven't used it before.

Step 4: Formatting & Styling our Connect Button

The etherBalance value returned by the useEtherBalance hook is giving us a BigNumber object that we need to format. Let's import a utility from ethers.js:

Exit fullscreen mode

Once we've done that, we can use formatEther which will convert ETH denominated in Wei into a floating point number, which we will then pass through the JavaScript method parseFloat set to 3 fixed decimal places:

Exit fullscreen mode

Now we should see: 0.000 ETH (or if you already have ETH you'll see your account balance). You can grab some Ethereum from the Ropsten faucet here if you want to see a nice balance :)

Now we're going to add some styles and also pull in the user account address to display it on the Connect Button's logged in state:

Exit fullscreen mode

Here we've added some styles to replicate the Uniswap button, using some neat Chakra properties on the components. You'll notice that we also use the .slice string method to shorten the Ethereum account address - an Ethereum address is 42 characters long, which is a bit unwieldy for the UI, so the standard practice is to trim some of the middle characters for display. Here we show the first 6 and last 4 characters, the same as the Uniswap UI.

Let's compare our Connect Button with the Uniswap version:

image

image

We're looking pretty close, but we're missing the little avatar. Let's make another component, called Identicon.tsx , which we'll create in our components folder:

Exit fullscreen mode

At the moment this won't show us anything different - we're going to install a library called Jazzicon made by MetaMask themselves:

Exit fullscreen mode

The Jazzicon library takes a diameter in pixels, and a JavaScript integer and returns a colorful, Cubist avatar - this is actually the exact same library and technique that the Uniswap interface uses:

Exit fullscreen mode

NOTE: You might run into a TypeScript error here, so we'll quickly declare a module to get rid of the error. Go to the react-app-env.d.ts file (preinstalled by Create React App), and add the following module declaration:

Exit fullscreen mode

Now let's import Identicon.tsx into ConnectButton.tsx and add the Identicon component to our account button:

Exit fullscreen mode

Lovely! Now we should have an element that displays our Ethereum account and ETH balance along with a nice little avatar:

image

So let's take stock of where we are now:

  • We have added the useDApp provider to our React dapp
  • We can connect an Ethereum account and retrieve the address & ETH balance
  • We've used Chakra to mimic the style of the Uniswap connect element

A reasonable question that might come up now is: how do we "logout" from the dapp? Notice that the useEthers hook comes with the activateBrowserWallet function. It also comes with a deactivate function that we can use to "log out" from the dapp - however, that needs to come with a bit of extra info: using the deactivate function does not actually disconnect the user from the dapp, it merely clears the state in the provider. If we "deactivate" and refresh the page, then click "Connect to a wallet" again, you'll see that the user address and balance is instantly shown, without logging back in via MetaMask.

The reason for this is that once MetaMask is connected via the permissions, it will remain connected until we explicitly disconnect via the MetaMask interface:

image

If you've used a lot of DeFi products you'll notice that this is the standard Web3 practice, even though it is unintuitive compared to traditional Web2-style auth. This is an ongoing issue related to MetaMask: https://github.com/MetaMask/metamask-extension/issues/8990, and while several solutions have been suggested, I personally haven't found one that works as expected. You might notice that in the Uniswap interface itself, they don't provide a "logout" button, just a way to swap wallets:

image

For a bit of extra fun, let's emulate that modal, which will give us a chance to see what else Chakra UI can do in terms of building interfaces.

Step 5: Add an Account Modal

Let's start by creating AccountModal.tsx inside our components folder:

Exit fullscreen mode

We're importing a lot of components from Chakra UI here, including 6 modal component elements, and also a couple of icons.

Exit fullscreen mode

Now let's flesh out the modal:

Exit fullscreen mode

Now we've got the layout for the modal, but no way to trigger it. Normally in a React UI I would create a UI context and wrap my app in the provider, so that I can trigger modals and sidebars via a single control point. However, we're keeping our dapp simple, so instead we're going to pass callbacks as props down from our App.tsx component.

Inside App.tsx , we'll import a handy Chakra hook called useDisclosure that abstracts away the standard (and often repeated) logic for opening and closing modals. We've already imported ChakraProvider, so we'll just add the useDisclosure hook and destructure the variables:

Exit fullscreen mode

Since we're passing a prop to our ConnectButton, we'll have to make a slight change there to handle it:

Exit fullscreen mode

We've also added two props to AccountModal.tsx , so let's add a TypeScript type (just using "any" to keep TypeScript from complaining - not best practice) and add the handlers:

Exit fullscreen mode

Now we should be able to trigger our AccountModal when we click on the logged-in ConnectButton , which will open up the modal and allow us to deactivate the account by clicking "Change".

image

You'll notice that if you click "Change" that we will see the logged out ConnectButton . If you click it you'll also see that we're immediately logged in - our MetaMask was never disconnected from the dapp.

And that's it for this tutorial! Hopefully it will help you feel comfortable getting started with connecting an Ethereum account to a Web3 dapp, and show you the power of combining the useDApp framework with React, alongside the power of the Chakra UI component library.

The next steps for us will be to learn how to import contracts and make transactions - let me know in the comments if that's something you'd like to learn!

To carry out any transaction in the Ethereum blockchain, we will be charged some ether, otherwise known as a gas fee. And, since this is a test project, we do not want to pay actual money to run transactions. To get free test ETH, open MetaMask, and change the network to ropsten test network, copy your wallet address, and finally, submit your wallet in ropsten faucet to get 0.3 free ETH.

Building our DApp

To get started, visit this GitHub repository and follow the instructions on the repository README to set up the project frontend branch on your local machine. This repository contains all the files we need in creating our DApp, as well as the markup code for the user interface, but no functionality added yet.

If you followed the installation process successfully and ran the index.html file, you should have an output similar to the image below:

DApp Installation Process

Getting free ETH

To carry out any transaction in the Ethereum blockchain, we will be charged some ether, otherwise known as a gas fee. And, since this is a test project, we do not want to pay actual money to run transactions. To get free test ETH, open MetaMask, and change the network to ropsten test network, copy your wallet address, and finally, submit your wallet in ropsten faucet to get 0.3 free ETH.

Minting USDC

Since we are building a DApp that lets us transfer USDC, we want to mint some for ourselves first, from our ETH balance. To do this, open up the /script/mint-usdc.js file and update it with the following content:

Next, save this file and run the mint-usdc.html file available in our root folder. Now if you click the Mint Now button on this page, this should prompt a new MetaMask request, and confirming this request will mint 10 USDC to our wallet as well as the transaction hash and gas fee used for the request printed in our console.

Displaying USDC balance

Now that we’ve minted some USDC, let’s go ahead and display it in the designated area in our markup. To do this, open /script/app.js and update it with the code below:

Here, we used the balanceOf() function available in the USDC ABI while passing our address. And just like it was mentioned in the getting started section, the balance will be returned in Wei, so we’d used the Ethers.js utility function to convert it from Wei to ETH and displayed the result in our div with an id of usdcBalance .

Now if we run index.html , we should see our USDC balance as well as our wallet displayed in their designated section, like below:

DApp USDC Balance

Adding transfer functionality

The final step is to add the transfer functionality. Open up script/transfer-usdc.js and update its contents with the code below:

Code explanation

The code is pretty much self-explanatory. First, we got the required input (receivers wallet and amount) from our form, and after creating our contract, we checked if the entered address is a valid one and also if the user had a sufficient amount. And finally, using the transfer() method from our ABI, we initiated the transfer.

And our app is ready to go!

You can try it out by creating a new account on MetaMask and transferring some USDC to it.

Also, the full source code is available here on GitHub, in case you missed any step.

When I was first diving in, I met with Ryan, co-founder of Dapphub Chat and Nexus, blockchain R&D firm specializing in the Ethereum technology stack, and he shared a few starting points. It was a goldmine. Although I’m still working through the resources, I realized I’m not the only person thinking about how to get started — so wanted to share it with the broader community.

How about testing?

One of the first questions I asked was whether I needed to download the full blockchain on my local computer to do my dev work. As of the end of 2016, the full-mode size requirement was 75GB, growing at 1GB per month. I’d need a lot more storage on my computer to manage that. Recommend using Test RPC, Node.js based Ethereum client for testing and development. It’s managed by EthereumJS.

Another option is to use Parity, developed by Ethcore, which is a fast and lightweight Ethereum client that can be used to access dapps.

Comments

Popular posts from this blog

Can you actually make money off NFTs

Does Ulta ever offer free shipping? Does Kangaroo Express sell gift cards?