# Applying Atomic Design Principles to Modular Wallet Development | Leilani L.- Covalent, Jayen H.

- Channel: [Ethereum Denver](https://streameth.org/ethereum-denver)
- Date: 2024-10-09
- Duration: 10:17
- Topics: blockchain, web3, ethereum, Entertainment
- Watch: https://streameth.org/watch/yt-6QjZqdCV8ZQ
- YouTube: https://www.youtube.com/watch?v=6QjZqdCV8ZQ

## Description

APPLICATIONS FOR ETHDenver 2024: #YearOfTheSpork ARE OPEN


APPLY NOW
https://ethdenver.com/apply

## Transcript

web 3 development so uh quick vocabulary just for people to keep an eye on um you know Atomic design is the is a framework for UI Design Systems broken down into five stages atoms molecules organisms uh templates Pages components pattern libraries Gold Rush kit and we'll be getting into all of that today so consider Atomic design as a mental model for UI Design Systems uh coined by Brad Frost so again atoms molecules organisms templates Pages Adam serves as a Adam serves as a foundational building block uh a component is a reusable block of code that can stand alone or form part part of a multiple uh UI patterns uh here's an example of some atoms with uh Instagram it breaks down the components to its smallest element in the library each interactive element is its own atom a button image text Etc uh but like in nature atoms only really come to life with applications through a collection of atoms which brings us to uh molecules uh which are relatively small groupings of UI elements functioning together as a unit they generally have a single responsibility for our Instagram example we have a nav bar uh image uh and the ability to like comment uh on the photo itself we'll just scroll so no here we go now organisms are fully formed and rather complex sections of interfaces composed of multiple molecules and many atoms these organisms are distinct uh sections of interface uh so I mentioned that you can think of atoms as component libraries then molecules and organisms are like a group of components uh that form pattern uh a pattern Library within a design system uh in our Instagram example organisms here are found between clear page breaks uh pointing to each UI experience in your feed template plates are page level objects uh such as component layouts and wireframes uh which include atoms molecules and organisms here we see components uh come together in the context of a full layout uh in this example it's our full wireframe in broader libraries templates uh serve as distinct application examples within distinct uh uxes in our social Med media example uh templates like Instagram and then a template like Twitter uh in a full UI library and finally pages are complete live working templates or apps in a live with live content each composed of organisms which are composed of molecules which are composed of atoms so how might Atomic design apply to web 3 interface well uh looking at our example we have addresses uh token icons user icons and uh all as the base atoms user profiles uh with related addresses and profile names as molecules uh or text elements and the related output in this case gas fees as uh molecules and finally organisms come come together with lists of transfer details of an nft or bespoke receipts view you can see all the different transactions uh click through on an nft you know those would be a full organism so if you look at web 3 UI across the ecosystem here are some common interfaces we see for example uh an nft Marketplace will show a list of nft collections that show a thumbnail of the IM image and a click through to get more details often displayed as a full scrollable board another example are Dex uh analytics dashboards showing historical prices liquidity uh data token d uh top tokens by 24-hour volume and historical t uh tvl because web 3 is open source and composable uh it's easy to spin up uh similar uh application environments however it's not often easy to scope out the development time to iterate on these so we're looking at openc wallets dexes that sort of thing so here's some less common web 3 interfaces so the problem is users are often limited to finding tooling to gain semantic meaning from for their increasingly more complex trans uh transaction types and block explorers are not sufficient anymore to visually show these uncommon interactions some examples are points dashboards internal onchain marketing analytics views user interaction dashboards social fees like onchain forecaster interaction points uh gamey quests and achievements dashboard metrics for po apps dashboards showing total margin risk in pers exchanges uh yield and reh hypothecated visual real-time data lending rates over time relative to current Bank rates and the list goes on and all of these examples are a pain in the ass to build uh with a small seed funded team so what do you end up having you end up having a uh consumer facing app where you click the uh add your wallet and then you interact with it and you leave and you don't do anything more so it's it doesn't keep the user actually engaged with your application there are a handful of common ux uh interfaces from Big teams with lots of funding but there are infinitely more ways to create UI and ux the point is there and and that's the point is that you know you can Fork these other uh uxs or you can spend the time to uh spend the development resources to really try and build that out and access all of that semantic meaning from your smart contract or you can do it a little simpler so here's a little example it's a receipts view so 90% of consumer facing applications need an application specific receipts view I don't care about block height I care about the semantic meaning that I just did in my transaction that's what I care about please stop sending me to a block Explorer to review my TX stop emailing me TX links that is tied to these meaningless views in a block Explorer I want Clarity of what I just did based off the event logs in the smart contract and that's me speaking as someone who interacts and has been in the space a long time I'm tired of it I want to see better do better so Gold Rush actually makes all of this possible Gold Rush kit is the op Source UI kit designed for visually showing live blockchain data using Atomic design principles each interface built uh is simply different group of atoms molecules and organisms there's also an open source uh Gold Rush decoder for all of those bespoke contract specific event logs that are tied to the semantic meaning of your application so and then this is specifically designed for uh for your ux so it gives you a little bit for your backend developer and your front end developer to work on to work on together and ship product so stop pulling your hair out of and trying to build a some sort of user dashboard or uh internal tooling to to see uh try stop trying to you know index your own data try Gold Rush that sits on top of the coent SDK which is now available in VM for the typescript uh ethereum developers out there with support of for over 200 blockchains and that is uh my talk thank you my name is Jane this QR code goes directly to the repo check it out and uh if if there's any questions I'd love to uh field them w