# dApp frontends A basic how-to for ethereum based frontends --- ## David Lange frontend developer @finiam :wave: --- ### Really broad overview  --- ### (slightly less) really broad overview  --- ### Signer Requires user interaction Wallet Ability to sign (messages or transactions) --- ### Provider Connection to the blockchain (read) Infura, Alchemy, default providers ---   --- ### Contract Instance of a deployed contract Allows interaction Requires a provider/signer --- ABI ```ts { readonly type: "event"; readonly name: "Transfer"; readonly inputs: readonly [{ readonly indexed: true; readonly name: "from"; readonly type: "address"; }, { readonly indexed: true; readonly name: "to"; readonly type: "address"; }, { readonly indexed: false; readonly name: "value"; readonly type: "uint256"; }]; } ``` --- ethers.js https://docs.ethers.org/v5 web3js https://web3js.readthedocs.io --- ### code --- ### rainbow kit  --- ### web3modal  --- ### dappkit  --- ### wagmi  --- ### wagmi.sh example --- ### Indexing How to read data? --- ``` javascript // NFT contract contract.getAllTheAssets() // that's not how it works ``` ---  --- ### Storage   --- ### IPFS distributed system (p2p) for storing and accessing files, websites, applications, and data. ---  ---  --- ```typescript= const nft = { image, // use image Blob as `image` field name: "Coimbra blockchain", description: "Something meaningful", } const client = new NFTStorage({ token: API_KEY }) const metadata = await client.store(nft) console.log('Metadata URI: ', metadata.url) ``` --- ### It's not only overpriced JPGs [opensea.io/collection/detris](https://opensea.io/collection/detris) --- ### Sign-in with Ethereum EIP-4361 ---  --- ### Wrapping up Check out finiam.com / @wearefiniam