foreign
[Music]
I'm Eric marks I am the lead engineer of
metamask snaps at this Workshop is
called getting started with metamask
snaps I realize we have some Wi-Fi ishma
since 2018 uh snaps was first announced
as a concept uh three years ago at
Devcon in Osaka so I know we have we
have some returning guests with us today
in the room and uh you know since then
lots of things happened covet happened
2020 happened but since uh 2021 we've
been working on snaps full-time uh at
metamask and since the beginning of this
year we have been in a developer release
via our Canary version of the metamask
extension called metamask flask uh and
um this Workshop is basically like the
sort of snaps 101 how do you get started
like developing a snap at using one of
the newer apis that we developed
um if you read the instructions there's
a custom build of metamask to download
because we haven't shipped this API in
production yet it's coming in the next
few weeks
um but uh before continuing uh we need
to talk a little bit about what is
metamask Maps uh and we're gonna and
we're gonna start from the very ground
level and build up from there and so
metamask uh as uh all of you probably
know uh is a non-custodial
cryptocurrency wallet for ethereum uh
you enter your secret recovery phrase
into metamask you can derive your at
your keys and your externally owned
accounts and uh it will manage those
keys for you encrypt them with a
password
uh metamask allows you to interact with
ethereum via an RPC uh endpoint by
default we use our friends at inferior
but you can add whichever ones that you
want
and that allows you to do stuff like you
know send transactions from account one
to account two
uh the really powerful thing about
metamask is that it enables you to
interact with ethereum dapps and so that
is through our window.ethereum uh
provider object that we inject into the
web page and that is what all the apps
use in order to submit Json RPC requests
that are either handled directly by
metamask or art contract accounts
um what about uh you know zero knowledge
applications and non-etherium
cryptography so like things that use
curves other than SEC p256k1 uh and
that's just like a a sample of the
things that's being built in ethereum
that we don't support out of the box and
that you know doesn't even get into
Cosmos polka dots Avalanche Solana
whatever
um in addition to uh to those things and
so uh it is uh
uh we believe basically impossible and I
think you know practically uh like
empiric like I observe this I don't
predict it it is impossible for any
single organization to
uh add support to develop the domain
expertise to understand all of these
different protocols and Primitives and
then also to develop the code and
maintain the you know unimaginably large
code base that it would take to actually
create user experience for all of the
things that are being built in web 3.
and metamask snaps is our answer to this
problem
and snaps are simply sandbox programs
that are run by metamask and their
purpose is to create new user
experiences in the wallet and that is to
say that the purpose is for them to
modify the wallet in some useful way
and uh the user adds snaps to the wallet
at runtime and they have access to
special permissions that are not
available to dapps including things like
key management and that makes them
uniquely powerful building blocks for
web 3 Developers
and so using this simple model just in
the past week over the course of eth
Bogota and some and a hacker house that
uh we co-sponsored uh with uh bit Dao in
game seven hackers have developed a CK
nullifier snap uh transaction Securities
map an account account activity
notifications and a smart contract
account wallet uh or a smart contract
Account Support uh all in metamask all
using snaps and uh and snaps currently
in developer releases include uh
starknet filecoin at Bitcoin R weave and
many more and so and here I'll just
briefly stop to say that like we're all
uh like this isn't a developer release
so the reason we keep it in the channel
is because we don't it's not quite ready
to be pushed for it to be pushed to uh
you know the tens of millions of people
that use metamask on a daily basis uh
but that is our goal in the upcoming
year and we'll get to that in a bit
uh and so uh we and so we believe that
this illustrates that snaps is the
gateway to all of web 3. by turning the
wallet itself into an application
platform only then can we invite the
entire community in in order to bring
their domain expertise and their passion
for uh the specific features and
functionality that they're interested in
in order to add that functionality to
the wallet and make it available to all
of their users
and uh with that uh we're gonna get
started uh so so again uh there's the
hack MD link uh for those of you who are
able to access that
and we're going to start here
and we're actually going to
I was I was too busy trying to get my
Wi-Fi to work uh to clear out all of
this stuff
but we'll get started here in a second
and so
uh so as I mentioned the first thing
that we need to do
is add a custom build of uh metamask
flask to the browser
and uh my visibility is is the size of
like the editor and the text and
everything good so far okay yeah please
please holler at me if not
and
um uh the way you add a custom build uh
to Chrome uh is you simply uh get your
build from wherever uh from wherever
that lives and you just drag and drop it
in uh your browser needs to be in
developer mode
uh in order for uh that to work uh so
and be advised that developer mode like
exposes your extensions to certain kinds
of malware so you know don't put your uh
don't put Main in developer mode and
we're just going to go through
onboarding here super quickly
foreign
for that
and Wi-Fi permitting we should be good
to go okay yes
all right so now I've set up a version
of flask and so the only thing uh you'll
notice that's like immediately different
with flask is that the onboarding is
slightly different and we have a purple
Fox to distinguish it from the uh
regular Orange Box
and uh the next thing we're gonna do is
I've already done this but uh the next
step is to create a new GitHub
repository using the template snap mono
repo
so this uh monorepo is as a template
that contains two things a uh two or two
sub-repositories or packages a website
and the actual snap itself
and things are yeah they're kind of
loading
um but um once you've pulled that down
uh and run yarn install
we can see here
that should still be good that we have
in our packages
we have the website and the snap
and I'm just going to make sure that
we've installed and everything with that
is good
and then we're gonna kick things off by
running yarn start
which should hopefully not need too much
network access great
thank you
and so this is the uh template snap
interface and so you see we have it we
have everything hosted on localhost and
the first thing we need to do is uh
connect to our snap
and so first uh when you install a snap
you get a permission request uh from the
website that that made the request and
it's basically saying hey I have the
website at this URL wants to talk to at
this particular snap and during local
development Snaps are just identified by
the localhost URL where they're hosted
uh just out of uh convenience
and once we've accepted that permission
request then metamask will go and fetch
the snap source code and it's manifest
and then ask for its permissions and so
here we see that this snap again
identified by its localhost URL that
wants to display confirmations inside of
metamask and we're going to say okay to
that
and to try out this functionality
oops
excellent
that's it that's it folks a snap a snap
everyone get a look get a look it's
showing a confirmation oh goodness yes
yes yes
okay it's real yeah yeah so so what
happened here uh is I was gonna do a
little I was going to mess around with
this notification a little bit but uh or
confirmation rather but we're not gonna
do that so this is just a dummy
notification for display purposes and
we're gonna skip right to the source
code and look at like what is going on
and what is the anatomy of these things
and we're going to reject that and
that's totally fine
uh uh and so if we go in back here
uh and if we look at uh see we have
packages snap we have you see we have
like in the snap package uh there's like
some regular like npm stuff going
JavaScript stuff going on uh but you
also see that we have a snap config and
a snap manifest and then a source file
and then the source file is just
index.ts
and so looking at the Manifest here
uh you're gonna see that there's a
version which you may have noticed
matched what we saw in the application
and then we have some information about
the source so a sha sum of the bundle uh
and uh some other like metadata if we
were to publish uh the snap to npm which
is our currently supported uh like
distribution mechanism and we have plans
for others and then finally you have the
permissions here and snap confirm is the
actual RPC method uh that gets called by
the snap in order to display a
confirmation inside of metamask
and if we actually look at the snap
source code you see here that it exports
a this on RPC request uh Handler
function
uh and uh basically the way that looks
the way that looks from inside of the
website so this is a file from inside of
the website
uh you will call this it's an RPC method
inside of an RPC method uh so you have a
wallet invoke snap and then you pass it
the ID of the snap and then the request
that you want to pass to it and you see
that the method is hello
if we go back to the snap that is the
only method that we support and that
just causes this uh confirmation to be
displayed
now if things uh like continue working a
little bit better than they were doing
some minutes ago uh we're going to take
this uh snap and turn it into a
transaction Insight snap
and if we
briefly return
here so we've basically we've
demonstrated like we've gotten a snap
running and now it's time to like
replace its confirmation permission with
this uh transaction Insight permission
and all that this permission does is it
tells metamask uh that like oh this snap
wants to provide uh transaction insights
uh and in order to uh do so
we're just gonna nuke the contents of
this file
and then we're going to go ahead and
import some other stuff
namely on transaction Handler
we are going to
uh add
a package called uh utils
and we're going to import some stuff
from that
and then we have
this Handler that we need to specify on
transaction
and that is going to be
foreign
that looks something like this
and right now it's a sad function
because it's not returning at what it
needs to return
to satisfy its type
and we're just going to return some like
dummy
uh a dummy Trend a
um
a dummy insight for now
and I think we also need it to be async
yes
okay
and we're also just going to add a
little bit of validation to make sure
that the transaction is of a type that
we can understand because like you know
we're writing a specific Insight snap
that that uses our particular domain
knowledge and so we need the transaction
to look at a particular way
uh so if it's not an object or
if it doesn't have
the property data
or if
the data is not a string
then we're going to say oh actually
we're going to do this first
oh wait no
foreign
and then we're gonna say
we're going to import this
a little warning for sanity in case I
make any typos here
foreign
[Music]
and we're gonna hide that and then we
need to make some modifications on the
front end as well
uh and on the front end as the front end
is just a react application written in
typescript nothing fancy going on there
uh although it certainly looks fancy
um and I'm going to snag
a little snippet here with some useful
constants
that we are going to
use because right now
our problem is that uh let's see where
do we have send flow when we click on
the
um
on this button here uh it is going to
call this Handler which is going to call
Santa hello which calls this hello
method and we don't even have an RPC
Handler anymore so that's not going to
work
so we need to delete that
delete this
and then at rather
than doing that we're first going to
grab some accounts because we need
access to the user's accounts in order
to send a transaction
I do need an await thank you sir
foreign
we're just going to throw an error
thing fail to get accounts
actually that should even request if it
rejects but you know never hurts to be
defensive
uh and then once we have done that we
are going to then we have an account and
then we're going to just send a
transaction
uh and we're gonna do again
method East
send transaction
we're going to have some params
that should be recognizable to many of
the fine folks in this room
so we have a from address
the to address
is
going to be
uh the address of a contract that is in
fact deployed to mainnet but that will
reject any transaction that we
accidentally sent to it I just happen to
know this to be the case
uh we're not sending it anything
in terms of value
and then the data that we're going to
send it to start with is just going to
be some dummy
uh like 0x1
and that is basically all right and now
we're going to have
now I'm gonna have a little fight with
prettier
for some reason the eslint prettier
plugin does not work as advertised
We're not gonna let that stop us
ha ha
excellent
okay now I'm going to try to reconnect
and it's not going to fail to install
and so we can see that like the
permissions that we're requesting have
changed uh because we're now fetching
and displaying transaction insights
that's the purpose of the snap now
and we're going to improve and install
and I'm going to
anxiously look at the background console
I think it worked
yes it did
uh so now it's asking for accounts uh
that should be familiar and here
where metamask is trying to estimate
some stuff and look Fubar okay we're
using the API correctly we're slowly
inching towards our goal uh
you're too kind you're too kind
um all right and so we rejected that and
there's an error here that's totally
fine that's expected we love our
expected errors
um okay uh so the next thing so the
front end now for like this uh
demonstration is basically uh is
basically done
uh and we're gonna go back and look at
our
um uh snap because the next thing is
okay so we managed to like interact with
the API we've demonstrated that we can
do transaction insights but now let's
actually go get some like useful
information uh and see if we can
um like decode uh more of this
transaction than we're currently doing
uh and in order to do that
we're going to add a second at
permission because we are going to call
the four byte registry API and snaps do
not get uh network access by default uh
so they cannot just like call out to the
network unless they are granted the
permission to do so explicitly and that
permission is simply called endowment
network access
and uh we are going to call as I said
the four byte API
and we have some and we have some useful
Snippets here uh in order to do that
and so here the this API endpoint that's
simply just like the um uh the four byte
API endpoint that we're going to call it
has a single query parameter which is
the hexadecimal like four byte signature
of the uh of the contract call the call
data and then we have just a useful type
that we will use when we parse the
results once once we get them uh this
network permitting
uh and so uh actually before I forget to
do this
I'm going to swap out this dummy value
into something real
uh let's see transaction constants Dot
update withdrawal account so these are
just some these are just like some
encoded contract calls
um that uh we to save time we encoded
before this Workshop
and so next we want to
fetch data from four bytes
and that is going to start with a fetch
call
uh await fetch
all right are we done no we're not done
because we need to
uh parse the transaction
data first
and we are going to do
uh let's see
function signature
is going to be equal to
all right first we're going to do
transaction data actually
equals remove 0x so we're gonna it's
zero X prefixed and we're going to strip
that
excellent
and then the function signature is going
to be at the first eight bytes of the
transaction data or sorry the first four
bytes uh which will
uh let's see
transaction data dot slice
there we go
uh and now we have the function
signature as well
and
in order to uh
fetch
uh from four byte we need to do
the API endpoints
followed by
the
function signature with a 0x prefix
and then we have some parameters to give
this which is going to be
uh get
and we have just some basic headers
I would already knew what I was going to
do
boom
sweet
and then uh if
we failed to do that we are going to
throw
and we're going to say
failed to fetch from four bite
registry
but otherwise
uh we should be good to start working
with this data
and uh
the result
is going to look something like this
where we get the Json
uh oops
and that's going to be a four byte
signature an array of four byte
signature results
and uh
then once we have that result so the
thing there's one thing we have to deal
with we're going to extract the actual
text signature of the uh of the function
call uh and uh because four bytes is not
a very big space there are a lot of
collisions so it might return multiple
results anyone who's dealt with this
with four byte in practice uh is
probably familiar with this problem and
we're just going to pick the oldest one
uh because we need to pick something
and so we're gonna see
function text signature
is going to be
uh let's see result
uh and then we're going to sort
create an ad Locale compare B dot
created
and then we're just gonna map that
to
value dot pick signature
and so and if there is no function tick
signature
then uh there is no signature for this
uh and so we're going to say
um no function signature
or
uh no function
no results in registry for function
signature
and then we're going to do an early
return
but in the happy case
we are going to have
our insights Dot
type
and we are going to give that uh a try
next
and we're actually gonna
link as well just to ensure we have no
problems with that
okay
so going back we're going to need to
reconnect because we modified the snap
the live reload unfortunately doesn't go
all the way into the extension uh
someday we're going to be able to do
that but now we see that the permissions
are different we have access to the
internet as one of the uh permissions
now and we're going to go ahead and
approve and install
so far so good
and then let's see what happens now
[Music]
um
this may be a lot to ask uh of the of
the network at the moment
yeah
the console does get very the console
there is we probably have a bug where
there is too much looping happening in
the background
but we if we were actually if I reject
this
I might get a useful
aha okay yeah so I messed it up
uh and let's see what I messed up
um
yeah no the thing that was result is the
thing that was undefined
uh and that hasn't happened before
I shouldn't no
all right I'm gonna cheat
let's see
oh
ah
thank you
thank you eagle-eyed stranger
yeah if I were
um if I if I had if I'd done my types
better this wouldn't have been a problem
would that be a lesson to everyone
okay now we're gonna try that again
hey there it is there it is the function
signature the function signature
uh and uh for for our final trick we're
going to get a little bit fancier we're
also going to decode the actual
parameters that are encoded in the call
data as well just because we can
um
and in order to do that
we are going to add a
another package
called Abi utils
uh
to our snap
[Music]
spooky Workshop
and that's too much yeah yeah well will
it someone someone will no doubt figure
out the right level
uh and we have another snippet uh hey
if we increase the frequency there a
little bit like we can really create
Magic in here
uh and so this uh
and so uh this uh this ABI utils package
has an encode and a decode function
which allows you to decode and encode uh
call data and it has
uh it returns values that are not Json
serializable and that doesn't work
because the transaction insights need to
be Json serializable so this is just a
function that handles that uh and we're
not going to worry about what it does in
detail
at the code
parameters
and so we are going to import
encode from
metamask API utils
stupendous
and for this one
we need to now we need to do some
slicing
because first we need to extract the
actual parameter types from the function
text signature and we're going to do
that by some good old-fashioned uh
a string parsing
and so we are going to do function tick
signature
and it's going to be a slice and it's
going to be an index of the first
parenthesis plus one uh
my ID is leaking that I've already done
this earlier today
and then we are going to split
uh
right because if you uh you'll recall
that this looks something like a
function name type one comma type
so we're just going to extract this
substring split on the commas and then
we're going to have the parameter types
and the reason we need that is because
that is an input to the um
decode function
so then we are going to decode
[Music]
uh the let's see parameter types
let's see
const decoded equals
and let's see the next thing I want is
yes now I want the transaction data
without
uh
the function signature
and why wouldn't that work
no
foreign
okay and so that's going to give us the
decoded stuff
and
the we're going to decode the parameter
types out of the transaction uh call
data and just to make sure I'm going to
cheat again really quickly
uh normally I would have my notes off to
the side uh so you wouldn't know that
I'm cheating
uh but but life is not fair sometimes
and then we're gonna sit
insights.params to decoded
we're going to map that with our value
normalizer
and then we should be
now we should be in good shape
foreign
I just want decode
all right
now we're going to reconnect again so
that metamask alerts our changes
we're going to send a message
we're going to open this up
hey parameters
uh address and Boolean just as we would
expect from the function type and so now
and so this is so obviously like we're
not going super deep and like just
seeing the parameters here is not super
useful but the but the point that that
uh we're illustrating here is that like
you know this snap is pretty much aside
from hitting four byte like it's a it's
self-contained it uses like very basic
like Utilities in order to like tell
useful information and obviously we
could dig deeper into the call data it's
like yeah like if we wanted to or like
fetch you know the compiled contract
code and try to like say something about
that and so I mentioned one of the uh
one of the snaps that got built at the
hackathon recently and we've had a
couple of these built so far is by the
community which is just like snaps that
do they know something about contract
security or have like a list of accounts
or addresses that are unsafe uh and will
display some information to the user
when they're like hey like this isn't
going to work and you could just as
easily uh imagine like you could even
run ganache inside of a snap in order to
simulate the transaction or like hit a
tenderly endpoint or whatever like
service that you imagine in order to add
like useful data that you know about and
that metamask does not know about uh for
any given contract interaction
and that is a wrap for the workshop and
I am happy to take uh questions for the
remaining time that we have
[Applause]
[Music]
and you were you were fast
so I really like it and I can definitely
see a lot of use cases where I would use
it my only concern is that I often have
to support other wallets so for instance
if one base wallet which to be honest I
don't like as much because it's not open
source
um so would it be possible or do you see
other while it's implementing anything
like this or do you see any support from
like other tooling you know the
community uses like ethers or wasps
support this or maybe in a way that if
I'm in metamask I have a snap but in
other places it's not broken right right
and so the uh so we are trying to create
uh specifications for like the Manifest
and the apis that we ship and so on uh
we have a lot of work that I won't have
time in progress that I won't have time
to talk about
um but like using something like wallet
connect V2 to like
um you know are just like the the dapple
just ask for the network that it wants
and then metamask will go and find the
snap that supports it and add it as part
of like the connection flow uh so you
don't have to like call a specific snap
in order to interact with it and so
we're trying to create specifications
for those things and I can't talk like
really about concrete plans at this
point but uh personally like my I would
love to see snaps become like an open
standard and like for there to be like
an open source like wallet kernel uh or
something that like others can build on
uh in the future yeah
sure and I think I saw you next time
[Music]
yes yes correct
uh so uh there is so there is no
Marketplace as yet if anyone wants to
build their Marketplace we would love to
see that being built because we don't
want to be we don't want to have an app
store we want it to be like a full and
open open permissionless ecosystem uh
and so at when right now uh the way it
works is like when a snap is published
to npm like if you have metamask flask
you can install and run that snap and
any website that like knows how to talk
to it it can just can talk to it uh and
so and once we get to stable uh they're
like they're you know we're gonna we're
gonna have like a essentially like a
block list if like there are known
malicious snaps and things of that
nature but really in order for this to
scale there is going to need to be like
a Yelp for snaps essentially uh in order
for people to like be able to establish
trust uh in them uh because uh we do not
want to be in the business of running an
app store because it's antithetical to
the values of web3 and also it sucks as
a job
um uh does that answer your question
Splendid and I I think you were next
also
[Music]
yes so uh so that's like uh so
recently if you uh follow uh like news
about app stores and stuff
uh there was an instance where uh like
there are essentially two philosophy
philosophies that you can use to
approach it like the sort of wild garden
App Store approach that exists right now
and what we want to do which is a
permissionless web of trust model and
and so in the App Store model it
basically relies on like executive
oversight and like review of the tenders
of the wild garden like for scams to not
be presented but like just the other uh
week I think Facebook reported to Google
a list of like hundreds of malicious
Android apps whose only purpose was to
steal Facebook credentials uh and so
even like with executive and oversight
like it's it's impossible to uh to fully
prevent scams and I think the best way
that even in an app store model that you
actually establish trust in something as
you look who recommends this how many
reviews does it have how many how long
has it existed and so uh we so that's
like why we want and need a market place
to exist in order for it to scale to
users without them getting scammed and
until we get to that point our first
release is probably going to have like a
finite set of snaps that like at least
uh you know we can uh we're confident
you know our uh you know we're
implemented rigorously if they're
managing keys they they were perhaps
audited and like we know they're not
like outright trying to steal your stuff
uh but like but preventing scams in a
like permissionless application
ecosystem is not a fully solvable
problem uh but we think by building but
I but but by investing in the community
and then like a Marketplace uh we can
get there foreign
next question
uh so uh mobile uh so we've mobile is a
TBD it's it's going we're uh we're
working on it at no timelines to
announce as of yet
no they so so they are uh like the
execution environment is the same the
goal is for a snap to be unable to tell
if it's executing in the browser uh in
the server on a mobile device on an
abacus uh like shouldn't matter
yeah that's the that's the guarantee yes
yeah so so they are publicly released
right now on a developer channel so like
you can uh download metamask flask and
just like get started with the ones that
exist in terms of release to stable
we're targeting early next year
uh yes
that is a a great question kind stranger
uh and so we have like in the uh in the
hack MD
um there are some links at the top that
lead you probably
yeah no yeah it's locked whatever no
it's on the hack MD which is on the
slides which are accessible through the
schedule like on on Devcon but uh that
metamask has a repository called snaps
monorepo that snaps Dash mono repo uh
and the discussions in there are a great
place to get started uh we also have a
landing page on our website uh called
um
metamask.io snaps that will also get you
to a lot of the resources but the GitHub
discussions is a great place to get
started uh yes
congratulations
[Music]
yes we are uh we are in touch with
Google and are working with them to
ensure that uh everybody is happy and we
and we don't get banned from the Chrome
Store
um how how much all right I I'm being
asked to stop so I'm gonna stop but
thank you thank you everyone so much for
attending
[Applause]