gm

Blockchain Designed Front-End

dApps

Disclaimer

• My stack = React.js
• EVM compatible chains

Why blockchain?

• ready to use platform
• ownership out of the box
• open source

web3 ➡️ blockchain

web2 ➡️ backend

a node

❌ node.js

Node providers

Infura

Alchemy

• ✅ read
• ✅ write 👛
• ❌ put
• ❌ delete

0x5981ac4718e35aE03F5533290eD204a767148450

A P B I

						const provider = new ethers.providers.Web3Provider(
        window.ethereum
      );
						await provider.send("eth_requestAccounts", []);
						const contract = new ethers.Contract(
        address,
        abi,
        provider,
      );
						await contract.mintMyNFT()
					

Reading

• free 🆓
• no wallet required
• () ⇒ Promise<Result>
• no event emitted

Writing

• costs you to pay for gas
• wallet required

• 
                  () ⇒ Promise<{ 
                    wait: () ⇒ Promise<Receipt>
                  }>
                

• can emit events

Challenges
for
front-end devs

BigNumber

*18 decimals precisions

*only integers

            const myBalance = BigNumber.from('8920584203949257369');
					

            const myBalance = BigNumber.from('8920584203949257369')
              .div('24342667722')
              .mul('58407229393064');
					

Primitive BigNumber  Obsession

            const collateral = BigNumber.from('5000000000000000000000');
            const interestRate = BigNumber.from('8920584203949257369');
            const total = BigNumber.from('5180000000000000000000');
					

            function openSwap(total: BigNumber) {
              ...
            }
					

            function openSwap(total: Total) {
              ...
            }
					

            type Total = BigNumber & {
              __brand: 'TOTAL';
            };
					

            BigNumber.from('5000000000000000000000') as Collateral;
            BigNumber.from('8920584203949257369') as InterestRate;
            BigNumber.from('5180000000000000000000') as Total;
					

Real time UI

The old way

• refresh data in relevant interval
• update when transaction affects your data
• filter out redundant calls
• manage priority

Error logging

How mouch cost developing?

grab the slides