I don't know if people know are we gonna
have used it before so I thought I
thought I'd do a live demo of what it
looks like today so in the next 20
minutes we're going to claim your do
name on Eragon maynot you can actually
do this yourself you can follow and just
pick your name if you want I'm gonna do
one for something called lorikeets which
is something I'm going to give you guys
a sneak peek about this is I guess like
a component toolkit and a design system
that we've been working on for Eragon
specifically but we are open sourcing it
and more broadly want other people to be
able to use it as well so really briefly
just wants to introduce myself and my
collaborator and friend Pierre so my
name is yoni and we've been working on a
couple of different open-source spreads
over the last few years so worked on
ubuntu we've been to fun mobile for
about four years and then recent
redesign for Rio metrics and most
recently I guess last year so we've been
working very hard in Aragon trying to
make organizations on blockchain be very
easy to use so yeah let's get into it
let's claim your do name so if you want
to try and follow it you can you can do
it yourself it takes about two minutes
you'll get the issue your own token you
get to claim your name so it's pretty
cool throwdown let's go to the website
so for those of you who haven't seen nor
heard from Aragon before Aragon is is a
kind of a platform for das I guess so
it's very very very extensible very
broad you can do a lot of things with it
but in this instance I'm going to create
a do from managing Laura cane which is
the design system so in the future we
might want to be able to vote on
different choices that we the
participants in the open-source project
once you go ahead with so I think a doll
would be great great setup for that so
I'm gonna do this a minute because we
are live on maintenance as of this week
after quite a lot of hard work and I'm
gonna create a new organization so you
can you can open existing once if you're
just trying this out maybe try the demo
first to see how the app looks like by
I'm gonna create a new one so we'll
create a new org and for this one we
want that democracy talking project we
have a lot of people potentially on on
who on this bridge here wants to decide
on things and we're gonna call it
Laurie kit which is great nobody has
squatted it next I'm gonna just kind of
brace through this is kind of the
settings for your voting that I'll just
use the defaults for now but you can
change this and I'll call it so when you
create thing dear with Oregon today you
also get a token a RC 20 token so I'm
gonna create what could we call it it's
call it Laurie coin and give it a ticker
and then yeah you just confirm the
transactions and get a cup of coffee I
guess and then you've got your DA ready
so to save some time I'm just gonna jump
into a demo work to show you guys what
happens next what what do you get when
when you finish with the transactions
and it looks like something like this so
this is basically the arrogant main UI
so what you got here on the left is a
list of apps you have in your
organization so by default you get apps
like token managers manage your tokens
to add people to your organization
voting you can vote embarrass things you
can just do random verse or anything you
want or you can do voting relating to
finance if you want to make any kind of
transactions from your doubt to have to
pass the reverting first before they
accepted then that's a good use case
actually I'll show you really quickly
how this work so in this demo now we
have two token holder so you can just
add more people by just adding the
adding theory theorem to address an
athlean s name very soon big fans of
unis voting looks like this so yeah
you'll see what the current both sigh
what's being rejected what's being
approved you can view the details of
that votes if there's an open vote I
don't think there's any on this demo
dial you can you can vote on it if you
hold tokens in the organization in the
finance up you hold different tokens on
your organization so you you can do
various things with it you can pay for
things you know normal stuff but all
this stuff can be linked to the voting
app so whenever you want to make a
decision so you can make sure that token
holes approve those first so yeah making
new transfers I can make a deposit so if
I wanted to deposit some ether and then
into this org I could just do it through
here I can also send either directly but
for different tokens better to do it
through the app and you can if you want
to withdraw let's say I wanted to pay
for I don't know
flights to zhuge I just put in there
maybe they don't like airline they
accept see through him I just put the
contract address here and and then click
this and depending how you got your
permission set up it goes through it
goes through a vote or if your account
has the peppermint permissions to do
this things directly then you can also
do that we have an app story that's
coming up which is going to be really
cool so people can create their own
Eragon apps and so just let me give some
examples for now but hoping to have have
a lots of and it's really quick to
create this up as well so hoping you
have lots more in future so yeah that's
kind of a sneak peak of Eragon 0.6 Alba
and yeah try it out is very quick to use
very easy on main net so you can do rid
of things now which is cool so the next
thing I wanted to show you guys
sarong presentation is lorikeet so
lorikeets is something we've been
thinking for about for a long time I
guess they started off as just kind of
an extension of we built something for
ourselves will be thought it would be
really cool if we could just expand this
thing to something that anybody couldn't
go with people can contribute it it and
basically it'll just enable you to
create production really beautiful apps
much quicker because you have these good
base line components and really you can
use these for throwaway prototypes if
you and B these are reusing all the
components on Eragon itself so these are
production ready so it's not really
something that you have to worry about
like it's just good fro prototype and I
have to redo the whole thing
once I go to prod you can actually use
this in production we do we've been
working on these components for probably
about a year now this quite a pull
requests mostly thanks to peer over
there and we have the 11 contributors
now but we're really hoping to to get
more people building a stuff and on top
of this and that's just kind of
benefiting from the from the work we
already done and being part of the
community so this is a sneak peak there
is a website coming pretty soon but just
to give you more of an idea of what
we're hoping to achieve with this so
first and foremost and I guess this is
where we are kind of right now on on on
on the project is we have a very modular
component library of react components we
also have some specific UX patterns and
components to decentralized web a lot of
these components are pretty generic like
you'd imagine with a kind of react to
your tool kit to find like buttons and
cards and so on but we also have some
specific components to to bukchon which
I'm going to show you guys a few of
those in a minute
and these components are pretty
so we've done a lot of optimization for
this so especially a mobile use civil
difference this should really feel like
I can native components and then
animations is one thing that doesn't get
used by a lot of projects because maybe
it's a bit daunting or people don't
really know what library to use or what
to do so we're hoping to help with that
as well
we have some preset motion design done
here and and and we're gonna have a lot
more kind of a user guidance on that
it's easily extendable so you can build
your own like you don't you don't find
the component you need you can just
build your own and add it add it to
hopefully submit a pull request first
and we've tried to go for a kind of a
clean clean UI design which you can you
can use for your nap without every up
looking like Eragon basically you can
theme also thing these things pretty
easily so if you want to do something
looks very different that's that's
totally doable and yeah I want to
highlight the fact that we really want
to do this as a community efforts
because yeah it's Lola
ecosystem will benefit if we have good
kind of baseline components and we're
hoping you're going to build your own
and it's not just for developers really
I'd love to see more designers getting
involved so we're actually gonna submit
a bunch of bounties both but Devon
design pretty soon so if there's any
designers in a room as well who want to
weave find it's interesting and want to
find out more and maybe work with us on
these boundaries come and talk to me
after that after the talk and I'll I do
you guys see the bunny lists I'm product
people as well anybody basically who's
interested in working on good
experiences so a couple of more things
about them a react component specific so
I think I've gone through most of these
already but just to reiterate this is U
style components which is a way of
styling a theme your react components
and they're very simple so you can
really go to town on changing the look
if you like we target in 60 frames per
second
native feel and performance so really
one optimize how well the stuff promised
we have that documentation section on
coming on the website so you'll see like
API Doc's
- basically all these components you'll
also have like items on on principles
for design designer for dessert designer
our systems dealing with latency
informing users all that kind of stuff
I'm going to show you a quick sneak peek
of the of the dev Docs we've got it on
you I'd Oregon dog for now but it will
it'll be very soon moved to the
lorikeets site so I just wanted to give
you oh there we go
a quick look into what what these some
or the documentation looks like so you
got code examples here how you use it
you have like obvious when you have a
code example we have had will have the
rendered react component so you can mess
around with it just see how it performs
you can scale lately you can see how
most of these components I think I
actually all of them are responsive now
so I'll show you in a little bit and a
demo on mobile but yeah you can just see
how everything works so yeah we're
really hoping to make these
documentation really thorough so people
can really easily start using this and
yeah they'll just you'll see you can
pick like oh I like this control yes I
use it and just just go either straight
away so yeah you'll see that there's a
bunch of the basic controls already
built we'll probably need some more so
and the bounces and if you have your own
ideas yeah
please get in touch with to go to go do
a pull request if you if you build
anything or just file an issue would you
start from there cool so I want to talk
a little bit more about mobile I think
Mobile is super-important like I was
really curious to find like beltram
mentioned in the talk yesterday that
everyone kind of notice in the back of
their mind that yeah actually
most of our users probably are using
mobile as well but
maybe having bill free yet so I think
this is this is nice for you guys as
well if you use locket you get mobile
bro straight out of the box because
these components are responsive and
really well optimized for performance
I'll just show a quick demo of what that
looks like so this is our voting up and
you can see like the desktop version
where you have each row as a card and we
just stack them and you'll see how like
it just weed yeah we've spent a lot of
time trying to think what's the best
user experience for mobile as well going
from like a wide screen to a small
screen and just making sure that you can
use all of this stuff for mobile too and
I think Mobile is going to be really
important for a blockchain in general I
think we need better mobile voice and
etc but I think we're trying to do our
part so focusing in the components
making sure that they really usable in
mobile too and layouts so I want to talk
a little bit about some design
guidelines and what we're hoping to
achieve here so we are actually here
we're hoping to we saw the talk
yesterday which she was really great
we're hoping to collaborate with more
more projects are working on this type
of guidelines to just have a better
documentation on what best practices are
for designing designing in general and
then also designing for for a theorem or
decentralized systems so we'll have
things like dos and don'ts on the
website of what you should do what you
shouldn't do I think material design
guidelines that are amazing so I think
so have something like that but more
focused towards design sure I see use
cases and yeah obviously templates and
tools as well I think is super important
for designers who are jumping into this
space to be able to just go in and
download like source files for these
things and start messing around and I
think it just opens up so much more for
contribution so we have the components
built-ins
designer sketch right now but we have
started
putting some of this over to figma and
framer expert like interactive agency so
this is one area we'd be super keen on
any designers in the crowd or watching
is if if you'd like to kind of get
involved in in putting this stuff over
to fig more frameworks get in touch so
yeah a couple of examples of the more
blocks then sorry block change specific
components one big thing obviously is
dealing with latency because the
transactions take a very long time to
mine right now even I think a year or
two from now they still take a while to
mine so we need to somehow make sure
that users are aware of what's going on
they have they can anticipate how long
it's going to take so they can they can
do something else in meanwhile or you
know they're not blocked and just
waiting for things are wondering I what
just happened and where did this thing
go I'll just show you a quick quick
example this is is our finance up so
just skipping food through a couple of
bits of signing it with me to muscular
stuff but when you submit a transfer for
instance we think it would be really
nice to like just show kind of an
optimistic US state straight away of
okay we know it's not signed yet but we
still want to show you where you are
right now so kind of show pending state
of right your transactions been mined
right now you can roughly see how long
you'll take we get from the gas price
you sent we'll be able to estimate a
rough time because you can it will just
save you time like you don't have to try
and and Scrabble around for the contract
right so you can just see drag laser
scanners as well if you like and then
once it's mined and we'll just whoops
we'll just add it to add it to the page
and and yeah it'll just update straight
away so trying to keep users in ended up
and then just keep them informed of
progress all the time so that they don't
have to kind of switch around different
apps wondering what what just happened
and you know where we are basically and
similarly to to that we just we just
think there's a there's a lot of things
we could do for helping users feel more
secure and more informed so so for
instance things like toasts a we could
use for quick confirmations and
notifications for more on chain activity
so I'll show an example of the toast
component that we're just building right
now when you have like quick
interactions you usually want to confirm
to the user that okay what you just did
has actually you know something's
happened with it so this is probably
more we could use this for unchanged
stuff as well but I think anything where
you just need a quick confirmation of it
okay we got it then we have something
I'll show you a quick video of like our
transactions or notifications panel so
all the on chanax easier you do would go
to kind of a place where you can always
see like this is this is stuff I've been
interacted with on chain I can see in
one place it'll notify me if the state
of of the transaction changes when I get
men mind button they fail so we have
different states for failure for
instance so it's very clear that you can
always go to one place and just see
what's been going on with your Unchained
transactions another thing we've been
working on I'm done too much working but
I think it's worth plugging I think it's
really cool it's more of a developer
thing but I'm human readable transaction
so so right now I'll show you what that
looks like
you probably familiar with this kind of
scenario where the where you have your
meter mask message and it just does make
sense so we we propose this new thing
called rad spec where you can basically
make the transaction human readable so
and we working with me to my screen I
think and to get this implemented there
so right now this works in Aragon we can
basically tell the users where they are
with so what the actions they're going
to do are going to do in in plain
English
I think this is this is really going to
help another thing for decentralized
components is theorem addresses the kind
of this really long ugly strings right
now so we're build this address budget
component where you have like a
clickable thing where we can show the
whole address we can show a smaller
version of it especially in mobile
you'll see the C the identifier block
Ian and and then you'll just be able to
click on it and copy this straight lead
which is very common use case would just
thought we save you a couple of clicks
though see you on a task and same with
DNS names and so on so yeah another kind
of block chain specific component motion
we use this library called the react
spring a lot so I'm running out of time
but basically motion I think is a really
important thing of of the user
experience that I'm people don't use
enough so we're hoping to help you with
this should be quick and should be used
for helping you focus attention certain
things not just for flash but yeah
I've got a quick video of what this
could look like for instance um for
transitions I think it really helps to
show the user where things are coming
from where you should focus on your your
guys and so on yeah I think we almost
got into the answer when can I use this
we're hoping for an early Christmas so
late November ish I think depending on
how busy pair is but yeah it's nearly
nearly done most of the components are
ready to go we just need to work a bit
more on the website and we're good so
yeah last plug if you're interested in
Eragon or governess on the blockchain
you should come to Berlin in January we
have this amazing conference there
called Eric on can go to Eric under one
to find out more and that's it thank you
much
you