Build Cross-Chain dApps with Across SDK
ProtoLayers Talks · December 2024 · 18:48
Alex Gaines of Across Protocol leads a hands-on workshop on building cross-chain dApps with the Across SDK. Participants see how to wire bridging and cross-chain transfers into an application, and how the SDK brings seamless interoperability between Ethereum rollups and other networks into the developer's own code.
Speakers
Topics
From ProtoLayers Talks, hosted by ProtoLayers.
Transcript
all right hey everyone my name is Alex uh I uh work at across we are AC cross stre Bridge um we have focused on value transfer uh between uh ethereum l2s um today I really want to give you a high Lev overview of what across is our technical architecture um and then how you can build with the cross uh in your own deps so this is probably something you've heard and seen a lot before from other teams but we are really focused on providing cheap fast secure interop so seemless you don't know you're using blockchain um and how we're really
trying to do this is through the infrastructure layer um by being able to transfer value uh between chains in less than two seconds um we also transfer value for for very cheap uh but we really are focused on this on the speed component um because we think it's uh incredibly important for uh ux user experience it's you know if your transactions are taking uh 10 minutes to go uh between different chains uh there's only so much you can do abstracting away the complexity with with wallets and everything um so we really are trying to get this this uh amount of time down between to about two to three seconds um to transfer value
between chains so before I get into kind of our uh implementation of this um I do want to address kind of like the past uh I mean a lot of people are probably familiar with Bridges um and a lot of these bridges are are message based um and we've seen countless Bridge hacks uh we've seen how expensive uh cross messaging can be um but most important uh is just how slow some of these uh these Bridge trans actions can be um with message based protocols so we've really focused on this alternative uh called Crossing intents and at across you can kind of think of
it at as three layers we have the intent layer we have the solver layer and then the settlement layer so this intent layer is just really the user articulating uh what they want done uh a vast majority of these um these intents are just trans erring value from on E from blockchain A to blockchain B um but over the last 6 to 12 months we've seen a lot more demand for more sophisticated actions uh such as doing a bridge plus swap um doing a bridge plus a mint uh or purchasing an nft uh then also doing uh a bridge plus deposit pretty much I mean there are other use cases but these are
really the three buckets that we've seen the most of is um yeah is swapping um minting or depositing and so under that after a user articulates you know what they want to be done uh I I put an X Out for we we don't pass a message between uh you know blockchain or blockchain b instead we have these sophisticated actors uh called solvers or or relays and they basically watch uh all the chains that across supports when they see a user uh wanting to uh transfer value from one chain another um they take their own funds and then front that Capital to uh the user on blockchain B
so after they do that the user is Happy they've received their their Capital um or they've received their you know their ethon blockchain B uh in two or three seconds um however their funds are still locked up in an escro contract on blockchain a so what we do is we use the Uma optimistic Oracle to essentially verify that um the intent was fulfilled accurately and issue a repayment um every 60 minutes or so so uh essentially how that works is we propose these repayments it goes through a challenge period And if nobody disputes those repayments are are issued uh to the solver so why this works great is the
user that wants um their funds transferred from blockchain A to blockchain B that's done in a few seconds and then the solver is able to be repaid um along with a small fee and then uh reuse that capital for fulfilling more intense and right now we have about uh 30 or 40 solvers um in our ecosystem fulfilling these intents on behalf of the users so at a high level uh what is this uh you know what is this architecture and system uh done so we've we've done over three billion $ 13 billion of volume um our average cost is under 4 cents and our medium fill time is under
3 seconds so this is uh a huge a huge Improvement to what we were seeing in the past few years with being able to transfer value across chains um you can now if you're adap uh you know building across chain user experience you can now have that value transferred uh in about 3 seconds for for pennies so up until this point a lot of our volume has come from aggregators uh or um even our own front end and so we've really focused uh these last six to 12 months on making it easier for D Builders to uh leverage uh across this infrastructure in their own
deps and this is not intentional but basically we kind of created three integration options one is just creating a separate Bridge UI uh in their dab um I think that this is an improvement over uh you know possibly forwarding users to uh a separate Bridge UI or a widget because you have a lot of flexibility in that onboarding experience if you're like a poly Market that only deals with usdc uh you don't have to have all the bridge asset options you can just make that onboarding experience super seamless we've also seen other adaps want to uh like charge fees or just have more control over the integration
experience the second bucket is just cross-chain actions um and we'll get to that in a second but it's basically allowing uh a bridge plus action um so whether that is a deposit a swap um and that's been a really appealing option for a lot of apps that want uh a really uh seamless um cross chain user experience and then the last one I put on here um I think it's worth mentioning is we also have of teams that um maybe are curious with uh you know how much transaction volume will come from like a bridge UI or crossing actions so they'll uh use like a linkout and we have custom URL parameters that pre-populate things
like the chains and the assets and then once they get more feedback on how much usage that's used a lot of uh teams that actually come back to us and said uh we want to invest more develop resources and and building building a Morey custom uh user experience so I'll just run through these real quick but this is kind of like just get a sense of what the what uh this is a team fa dab dab they build a a bridge UI um this is that cross chain actions experience um so as you can see like this is a team fold yeld Nest um all their contracts are on mainnet and they basically allow the user to select eth on any chain and do a bridge plus deposit I think like
if you go through this ux the big takeaway is um whether you're interacting with uh yield Nest contracts on mainnet or um arbitrum or base uh it's all the same user experience so I think a huge advantage of this is you no longer requiring users to know which chain the contracts are on and get their funds there you can all you can do all this in in the in the same UI and then this is just a linkout option that some teams have done uh just forwarding uh users to our bridgei so now let's get into more of uh this SDK we built and kind of the developer experience if you if you want to leverage uh across to in your own dab um basically we've we've had teams
integrate over the past 6 to 12 months we've and we've just taken all that feedback and incorporate it into this SDK um some of the features worth mentioning we've made sure that um the SDK is compatible with ethers or VM uh a lot of teams um don't want to manage like all these configurations for tokens and chains and routes so we've made that really easy to do um we include like you know logos for the chains and the tokens and all that stuff so it makes it really easy uh to add new chains we've made it seamless to uh include cross change transactions and I think another big one is just like uh you don't have to worry about approvals um or some of the uh manual stuff before um if if the you
know if the user doesn't have an allowance on the across contract uh approval is prompted before trans the actual Bridge transaction uh and then the the last thing um we've added tenderly simulations but also sometimes um status between like being able to identify um the status of transactions on different chains can be challenging so we've worked hard in making that very easy for Integrations to know when a deposit on blockchain a is made and uh being able to know when it's filled on on a different chain so here is um here is our
SDK it's a little small um yeah so here here's kind of like uh the repo that we've used uh for for teams wanting to integrate uh the across SDK um on the right we have basically this this example uh uh UI that like or front end that has an example Bridge uh transaction and then we also have this bridge plus action um and on the left we just kind of have like the documents like I just want to go through like the core components of like what an integration would deal with when uh you're going through to integ uh across in your front
end the setting up the across client uh it's pretty simp straightforward uh you're basically including all the chains that you want uh to integrate with uh I think it's a nice option you don't have to include all of the chains that across supports if you don't want to um but if you did you would include all those chains uh in this chains array and then this integration ID um this is an identifier that's appended to the transaction and call data I think for Integrations um looking to integrate across uh one thing that we do is we we have a large data team and we also have a lot of infrastructure for monitoring transactions
so um if something does look off like you're charging too high of fees or something um by having this identifier it's nice that um we can reach out to you and let you know before uh there's more issues involved so that's a nice uh little feature we have um and now kind of getting into the the meat of it like for doing a bridge transaction so the first step is basically just receiving a quote um so there's basically five parameters you need and in this bridge UI you can see these are I mean you need the chain ID from uh the source chain and the destination chain and then the uh input token and the output token so in the
example on the right we're using we're going from well I guess we'll do we do AR arbitrum to optimism to match this example and if we're transferring eth to eth this is basically all you would need to collect from the user um to be able to get a quote from across and then the last thing is just um the input amount so with these parameters uh you can get a quote and along with uh the actual uh transaction values that are used we also populate in the response a lot of things like the expected fill time the expected amount that you're receiving um on the destination chain so it makes it really
easy to show a lot of the the um on your front end a lot of the user information or the information that's important to users um so that they can be more informed before doing a transaction or you can pretty much abstract away the whole experience and you don't have to include much at all um it's really up to the integration and then after you get that quote it's really including it it's calling uh this exe execute quote function you just need to pass a wallet client um you use the deposit object from from the quote here and then we have this on progress callback which basically makes it really easy to uh to track the transactions
it'll give you information on the approved uh the approval uh the deposit and the fill and for like a simple Bridge transaction that's really all you need uh so this is very straightforward in terms of functionality um there are some some UI components where the SDK also helps but um from functionality it's about as straightforward as it gets and I think uh you know cross chain transactions can can seem a little bit more intimidating but I just want to highlight like how little work it's actually involved in uh doing an action after the bridge transaction so this is um a bridge that this is like our
example where we're uh we're bridging and then we're staking into this is about the simplest contract uh you'll ever see but it's you pretty much have two functions stake and unstake um so what we're doing here is we're we're bridging from arbitrum to optimism and then we're staking into this contract and yeah so kind of going through this you just really need to provide two values you have your fallback recipient and this is the address that's used if anything were to go wrong um like if if any of these transactions uh were to revert um our fallback scenario is
basically those funds that are received on the destination chain are just sent to the user uh this fallback mechanism has been used by all Integrations I think it's uh it's it's very easy to implement um and yeah we like for something like this it's very rare that these transaction transactions would revert it's it's more so if you're doing like a bridge plus swap um and when slippage is involved uh you might have some edge cases where um those transactions would revert and those funds would be forwarded to the user address and then the only other component of these cross chain transactions is just uh there's this actions array where you can include uh basically yeah transaction objects that
you want to be executed after the bridge transaction um without going through line by line I mean this is basically uh so you're receiving we and this is unwrapping that uh that we um and then uh staking the um so you're receiving you have then have eth and then you're uh you're staking that eth um in this contract so it's this is a very simple uh example but um you can really include as many transactions as you want in here and and and it's very flexible so a lot of times we get you know questions like that's you know what about my use case how can
I use this for something um like the DAP is more uh uh geared towards so like this is just an example of um if you were wanting to do a uh deposit into an eth pool what you would need to change um this is pretty much you would just need to Let's assume that like the address or the chains and the route information is the same the only thing you would really need to change here is uh this cross chain message and instead of doing like this unwrap and staking into uh this contract on optimism instead you would just do an approval on the a contract and then you would uh here I'll here's
like the function that basically generates the deposit call data um so you can see like in this stake function yeah it's it's just ask it's the only argument is this user address and it's calling stake um to adapt this to uh something with a I mean you would just uh include their supply function and the arguments that are are unique to that uh that function and so yeah I mean like I I use this a lot when teams are um interested in how this would work with their use case oftentimes it takes less than 15 minutes to kind of adjust this um and send a transaction to them um so if you are curious in terms of like how a cross can be used for your use case um
feel free to uh contact me or anyone on our team and we can kind of work through uh what an example would look like and we I'm part of the integration team we have a lot of uh other support and we we love to kind of work with teams and and uh help them as they go through the integration process so um feel free to reach out um or let me know if anyone has any questions