Smart contracts need more frontends

Transcript

[Music] yeah so hi everybody so my name is Hari and I am the co-founder of okay contract uh and today we're gonna talk about why smart contracts need more front ends so right now uh when you want to use Smart contracts uh most often you'll go to the DAP uh which is built by the same team that has built the contract so for instance uh if you want to play a game in the sandbox you go to the sandbox page and then you will find the game

event that you want to participate with you're gonna find follow click to the link to Mint the nft the Avatar which is required and you'll follow maybe a few other links and you'll mint it but you started from the dab if you want to borrow or land assets uh maybe you'll go to compound finance and you'll go to their own dap and then borrow there etc etc same if you want to trade perps on GMX or if you want to provide liquidity for instance on YouTube you go to the same adapt which is built by the team who wrote the contracts uh there's an exception to that and that's quite interesting for instance uni swap is building widgets as an SDK so you can

use the uni swap widgets and embed them in another site but this is just for uni Swap and they built this SDK manually and the question is can we do the same for every contract that would be cool though and so here is something very interesting of course with smart contracts is that they're permissionless so you don't need in web 2 you would need to let's say if you want to integrate with a given startup you need to call them maybe call the sales team get an API key so you can build your own front-end your own interaction uh but

smart contracts permissionless no colors for the API key so you can just directly build a front end what do you need to do that obviously you need the deployed contract address you need the method you need the ABI and if you want to program it yourself and not just go to if the scan and use the the simple Bare Bones generated interface then you you'll need maybe your SDK uh and this is how for instance if you remember loot uh loot you've been minting a very cool list of items and there was no front end no front-end at all provided by the project itself uh you'd go so again maybe to if the scan

and called mint but that's a very easy case because mint has no parameters and also the mint was free so there was no value because otherwise you would need to convert and format the right amount and take 18 decimals Etc to put the price so free mint uh just no parameters that were easy but maybe if you want to deal uh with more complex and real stuff you need more than a few SDK so let's look at a real example and let's look at the implementation of uniswap V2 for one contract the router one method add liquidity and their react JS

implementation so we see here exactly what we said there's a few sdks so we find there's ethers JS there's uniswap own SDK core there's web3 react uh there's react of course and a few Frameworks but we're just getting started here because the the actual implementation is more than 500 lines of code and again 500 lines for just one method of one contract but done extremely well so this is the uh let's say the quality that we want to reach uniswap provides a very good experience and this is the the what we expect so going a bit more into the other Imports we see there's a lot of react hooks so

which are not counted in these 500 lines so there's hooks to compute the currencies there's uke hooks sorry to to get the the balances uh there's types important for transaction Etc lots of utilities function so it's quite complex and again it's repeated for every page that is built if you scroll down a bit you'll go to add liquidity and then maybe you will start finding what interests us is the semantics in fact of that particular transaction and then you see here we start assembling together the parameters but mostly it's about getting the right inputs in that application and there's also some

theming coming in uh you see const theme equals used theme so we still have to to scroll down a bit more to to find what we want is the the semantics again so here we see ah there's transaction values so here we see we are Computing the deadline for instance we're Computing the sleepage of that transaction uh we have some formatting for the amount but we still have to scroll down where we finally instantiate the contract the router contract and we go down and then yeah we add our transaction parameters that's the only ad callback here we compute the amounts and it goes and goes and goes on over 500 likes because here we didn't even

start the js6 components so again on ad here we call the gas estimation we manage the event we put together the values so and here it's more than yeah 200 and still not the GSX why not because unlike the very easy lootment here on D5 when you want to do something you have to do client-side computations and these client-side computations may require calling other contracts to get some data some inputs then you need to manage wallet changes change changes customize the interaction with balances manage approvals so there's a ton of stuff to do and often it's more than one transaction you have the approval you

have maybe you are staking uh something after you you swap a pool so maybe that's one two three four several transactions and we didn't touch uh nfts which will be led for maybe another talk where you have also to manage opt-chain data so can we stop here [Music] this simpler and at okay contract we spent a lot of time figuring out what is exactly the problem that you are trying to solve and how can we find a proper let's say computer science way to solve it and this is where we thought okay the start of it is the intent of the transaction we want to swap x a tokens for YB tokens

we want to buy the flow of nft collection we want to Mint a nft with some attached metadata Maybe and okay we start with the intent and now how do we automate it and we found out that the approach to solve this resolves around three things first it's a standard way to specify the smart contract interaction then we want to automatically create a transactional interface from that specification and it has to be a generic approach not something that you do manually for every contract and for every method and then third an easy way

to embed in fact that automated interface into any web page and web app and this is the the fame that would say web 2 to web3 that we speak a lot about in the community because this is how we'll bring much more users in fact to everything we built so let's start digging in with how we specify the smart contract interaction for this we have uh introduced a new language which we call Lambda script Lambda script is a purely functional programming language and so it has no side effects at all and this enables automated reasoning and enables static

analysis to do very interesting things and we specify what we call a low level intent uh or a high level transaction it depends when you put the cursor but basically if the intent swap x a tokens to YB token is very very high level what we want to specify is an intent is not 500 lines of JavaScript code it's just an intent of the semantics of interacting with a given contract on a given method so just to give you an example this is the complete implementation in Lambda script Force another method of the same unit swap router which is swap exact eth for tokens because this is a method that

many of us know quite well so here we say okay we maintain Two Dollar Self which is a special value in the environment and for token A and B we see that we integrate knowledge base a type knowledge environment about tokens where we can retrieve the precise address for each of the tokens using a unique ID and then we construct values like a path which is an array made of token A and B deadline a standard Library function and very important amount admin which computes basically the sleepage value and all this if you think about it this is our low level intent or high level transaction which specifies exactly what

we want to do and from that definition which we call the Lambda script program then we compile it to bytecode or gives an error if there's something wrong with the specification of that program and then when we'll have user inputs basically we'll merge together the byte code and the user inputs in the VM which runs basically the transaction and outputs the transaction to the wallet or gives an error if there's something wrong with the parameters or with the contract that maybe the contract has changed or the contract is fully minted or anything second step when we have the specification then we can automatically generate the interface for that

transaction so basically we go from bytecode to something highly Visual and which is fully automated from that specification not something that we need to toggle and that we need to re-implement for every contract or every method and here it's just a cartoon but we have actually built it and all these are screenshots those are real example of transactional interface which we have Auto generated with okay contract and you can see this nfts there's D5 it could be multi-step transaction as well where we can do Swap and stake and many other things we support themes as you could see with

gradients and everything input detection error management gas estimation and all this is done I would say once and for all and finally when we have this we can easily embed that interface into any web page or web app all this widget interaction that we have we can put it into any web page which was the goal something like uni swap did manually for one method or two methods from their contracts we can extend and generalize to any contract and any method and the runtime architecture for it is basically that we have this widget

which interacts directly with the wallet including pretty soon with account abstraction wallets of course which will change over all the whole ux and then the the component can interact directly with the RPC can also support ipfs including upload via pinning to ipfs Via other decentralized services and we can or as well provide data which you have seen like the the the list of token and several apis in fact website with that power the the web services which directly connect to the widget and the itself and this is how in fact we have built a graphical editor where you can just

choose a contract select a method Define your Lambda script program which is again the the low level intent or the high level uh specification of that transaction and then it generates the program which will be compiled in fact to the by code and run inside the VM so that we can put this and run this transaction into any web page so if you get back to the title originally how we will have more front end we'll have more front ends very soon because we are almost ready to release it publicly right now we started in a private beta so we've been working with projects like compound and alchemics for

instance in G5 where we do multi-step transaction to migrate liquidity uh between several pools collect rewards and restrict them to in Aura and we're working with the sandbox as well when we're going to onboard many partners an agency doing transactions for for all the brands that use the sandbox and all this will be available really really soon we just wanted to make sure that we iterate a lot on the specification before we release it publicly so we can publish it as a standard and release the open source components and uh so so that basically it's something that will be stable and that you will all be able to build upon and not something that will be shaky and

that will iterate quickly upon release and this is why it's not publicly released yet but it's coming very soon so if you want to support us uh please tweet and about it and follow us on Twitter and I'll tell you why it's just because that we gonna release batches of invites to the platform before the the public release and if you follow us on Twitter you'll know exactly how to use some okay contract widgets to Mint the the nfts that will open the gates to uh the platform and which enabled to test uh with your contracts so thanks again to all of you and if you have any question feel free to to catch

afterwards thank you [Applause] [Music] thank you foreign [Music]