►
From YouTube: Scatter Integration Walkthrough #1 (Blockchain Development Tools for EOSIO by Peter Keay)
Description
Advanced Blockchain Development Tools is an Everything EOS course sponsored by Cypherglass. Please vote for my sponsor! https://cypherglass.com
**Developer Series Playlist with all Videos**
https://www.youtube.com/playlist?list=PLRK9ZLYOWiXPJ2ThcTpn4e9Y6MyqqY49r
In this lesson, learn the basics of connecting to EOS wallets and complete a quick vanilla website integration with Scatter!
**IN THIS VIDEO**
00:00:55 Intro to EOS Wallets
00:04:12 Importing Scatter Scripts
00:08:04 Building a ScatterJS.Network
00:09:57 Using ScatterJS.Connect
00:10:34 Adding your Local Network to Scatter
00:19:15 Calling ScatterJS.Transact
**SUPPORT VIDEOS**
Setting up and working with EOS Studio (from course #1): https://youtu.be/4uu6AbTa5Hk
Speed-building the mailinglist smart contract: https://youtu.be/Y6QlyOyQNAg
Easily set up cleos and many other helpful tools using NPM with:
npm install -g @liquidapps/zeus-cmd
**CODE DOWNLOADS**
Mailinglist Smart Contract: http://bit.ly/abdt-lesson2
Completed Scatter-enabled Webpage: http://bit.ly/abdt-lesson3
**GETTING HELP**
Stay tuned for updates on this course's learning platform launch! For now, follow the playlist and reach out to the Everything EOS telegram or https://twitter.com/bitgensteinx with any issues or questions.
Sign up for occasional updates at https://everythingeos.io/dev
Take the first course, which teaches the basics of building a smart contract and dApp frontend in ReactJS+Redux+NodeJS and C++, at https://www.udemy.com/course/eos-blockchain-dapp-development-tutorial
A
Welcome
back
everyone
to
advance
blockchain
development
tools,
regardless
of
what
platform
you're
on
go
ahead
and
hit
subscribe,
activate
notifications,
whatever
you
need
to
do
to
make
sure
you
don't
miss
the
videos
coming
out
in
this
course
today,
we're
gonna
be
in
for
a
little
bit
of
a
long
haul.
Video
we're
gonna,
be
learning
how
to
integrate
scatter,
we'll
look
at
EOS
wallets
in
general.
First
of
all,
and
then
we'll
do
a
scatter
integration
for
the
contract.
A
We
wrote
in
the
last
mini
lesson
where
we
wrote
a
contract
really
quickly
a
mailing
list
contract
where
users
could
register
and
unregister
for
a
mailing
list.
Well,
we
don't
want
them
to
have
to
go
to
your
studio
or
Cleo
sore
blocks
or
whatever
in
order
to
do
that.
So
we're
gonna
build
a
simple
page
where
they
can
log
in
with
scatter,
and
they
can
click
register
or
unregister
in
order
to
interact
with
the
contract.
So
let's
talk
really
quickly
about
iOS
wallets.
A
There
are
many
EOS
wallets
which
users
use
to
manage
their
keys,
interact
with
taps
and
ultimately
use
websites
like
the
one
we're
gonna
build,
they're,
scattered
the
first
really
well-known
wallet
that
lets
you
interact
with
taps
scatter
lets
you
connect
to
a
variety
of
mobile
wallets,
not
just
token
pocket
and
meet
one,
but
there's
there's
a
whole
list
of
maybe
lesser-known
wallets
that
are
just
really
wraps
for
scatter.
Scatter
also
includes
a
plugin
for
the
popular
wallet,
iOS
links
and
scatter
will
let
you
connect
to
a
ledger
wallet.
A
Yes,
new
york
this
year
came
out
with
transit
API,
which
lets
you
connect
to
all
of
these
wallets
and
even
enables
more
options
that
scattered,
doesn't
and
then
block
one
dropped,
the
universal
Authenticator
library,
which
further
complicates
matters.
Now,
while
we're
going
to
talk
about
some
of
these
other
wallets
later.
A
We
already
wrote
one
and
we'll
be
using
that
we
need
to
import
es
js2
and
scatter
core
scripts,
then
build
our
network
object,
which
tells
scatter
what
kind
of
network
we
need
to
connect
to
and
what
endpoint
to
use
and
then
with
scatter
Jay
s.
Connect
will
tell
it
to
connect
to
the
local
desktop
scatter
that
the
users
using
will
use
login
to
work
with
the
actual
blockchain
accounts
and
then
we'll
use
scatter
Yost
transact
to
send
our
transactions
to
the
blockchain.
All
right.
So
I've
made
a
mailing
list
site
folder
somewhere
on
my
drive.
A
In
fact
it's
it's
in
my
EA
BDT
folder
I've,
basically
keeping
all
of
our
files
in
one
folder
here
and
the
mailing
list
site
project
folder
is
currently
completely
empty.
I'm
gonna
want
to
create
an
index.html
file
here.
This
is
where
our
page
will
be,
and
let's,
let's
build
it
out,
really
quick,
where
it's
gonna
be
an
HTML
file.
Obviously
we're
gonna
have
a
head
where
we
import
various
scripts
and
then
a
body
and
in
the
body
we're
gonna
want
some
buttons.
A
Let's
say
a
button
that
says
login
a
button
that
says
register
a
button
that
says
unregister
and
then
we'll
give
them
a
logout
button.
Not
all
of
this
will
be
implemented
immediately,
obviously,
but
we'll
get
it
all,
and
then
we
want
to
maybe
tell
them
what
their
current
status
as
a
scatter
user
is
like
whether
they
are
not
logged
in
whether
scatter
is
not
detected
their
account
name
whatever.
So,
let's
say
your
user
name
is
and
then
have
a
nice
big
heading,
we'll
give
it
the
ID
of
status.
A
A
We
need
to
bring
in
the
scatter
j/s
core.
We
need
to
bring
in
scatter
j/s
plug-in
you
SJS
and
we're
going
to
use
es
js2
and
we
need
to
bring
in
the
es
jsapi
and
the
json-rpc
in
order
to
get
everything
working
here.
That's
what
we're
gonna
have
to
bring
in
you
don't
have
to
type
that
all
out.
It's
just
a
comment.
A
Open
that
up
here
it
is
alright.
So
in
bundles,
we've
got
our
scatter
core
and
you
know
CAS
two
files.
Those
are
the
ones
we
need
to
drag
into.
Our
folder
I
want
to
keep
going
past
myself
here.
So
let's
get
rid
of
that
and
then
we
also
need
to
go
into.
Let's
go
into
mock
sites.
Esj
has
two
assets:
I'll
pull
out
the
API
and
our
PC
files,
and
also
plop
them
in.
We
want
to
put
them
in
a
folder,
though
called
assets
and
I.
Think
I.
Guess
we'll
put
everything
in
there
all
right.
A
So
we
have
this
assets
folder.
Now
we
can
refer
to
these
scripts
here
say:
script
source
is,
it
should
fill
it
out
for
us,
yep
assets,
esj,
I,
guess,
jsapi
and
then
we're
just
gonna
do
that
with
every
other
file,
so
copy
and
paste
paste
paste
assets,
yose,
j/s,
json-rpc
assets,
scatter,
core
and
assets
for
the
e
SJS
plugin.
Now
we've
already
brought
in
all
the
scripts
we
need
in
order
to
start
adding
scatter
to
our
website.
A
First,
we're
gonna
have
scatter
we're
gonna
set
up
our
scatter
Network,
then
we're
going
to
it's
actually
scatter
j/s
thought
Network.
Then
we're
going
to
run
scatter
j/s
connect
and
will
perpetually
update
that
status.
Id
thing
up
above
that
we'll
set
up
our
RPC
and
API,
and
then
we
will
and
then
we
will
create
the
actual
functions
here.
A
So
here
we
go
first
key
line
here
for
EOS
scatter,
J
s,
dot,
plugins,
new
scatter,
yose,
alright,
alright,
so
we're
setting
up
scattered
yose
and
the
first
thing
we
have
to
do
is
define
a
network.
Alright,
we
have
no
idea.
Otherwise
what
network
we're
trying
to
connect
to
it
could
be
any
eoseo
network.
A
So
what
we
use
is
network
from
json,
and
then
we
put
a
javascript
object
in
here.
That's
going
to
get
read
as
a
json
with
a
blockchain
item,
a
blockchain
key,
a
chain,
ID
key,
a
host
key,
a
port
key
and
a
protocol
key,
and
we
were
running
our
local
network
in
yo
studio,
which
I
don't
think
I
have
set
up.
So
let's
go
back
and
turn
on
the
local
network.
A
A
And
the
port
by
default
is
eight,
eight,
eight
eight
and
the
protocol
is
HTTP
if
you're
on
main
net,
this
will
probably
be
HTTP
and
port
443
and
the
host
will
be
whatever
API
endpoint
you're
using
and
the
chain
ID
will
be
a
very
specific
chain,
ID
for
maintenance
for
our
purposes.
We
need
a
chain
ID
from
our
local
net.
I'm
gonna
open
my
terminal
here
and
use
Cleo's
to
get
info
right
because
because
Cleo's
right
now
is
it
can
access
that
no
Dios,
that's
running
a
neo
studio.
A
It's
exposed
to
Cleo's,
so
I
actually
want
to
get
info
and
here's
the
chain
ID
right
here
of
my
local.
No
do
so.
Yours
should
be
exactly
the
same
and
copy
that
out
and
paste
it
right
in
here,
and
then
the
block
chain
is
yes,
so
I
kind
of
went
in
reverse
order
there.
But
now
our
network
object
is
is
forming
up
and
we
should
be
able
to
run
scatter
j
s.
Dot
connect
this.
A
This
will
just
connect
to
your
scatter
desktop.
That's
running
on
your
desktop,
so
make
sure
that
you
have
scattered
desktop
installed.
If
you
don't
go
to
get
scatter,
comm
and
download
scatter
desktop,
make
sure
you're
all
good.
Then
you
need
to
head
over
an
open,
scatter
desktop
yep,
it
crashed
it.
So
whenever
one
of
those
like
superuser
security
warnings
comes
up,
do
you
want
to
allow,
through
the
firewall
or
whatever
it
crashes,
my
my
video
software?
A
So
in
scatter
you
need
to
actually
add
the
local
network
head
down
to
networks
here,
and
you
see
there's
a
bunch
of
networks.
Some
of
them
are
turned
on.
Some
of
them
are
not
because
I
never
used
them.
You
want
to
add
a
custom
Network
and
here
type
in
those
very
same
details.
You
want
to
type
in
the
chain
ID.
A
You
can
call
this
whatever
you
want
local
test
EOS
network
or
something
and
your
HTTP
and
the
correct
port,
and
then
the
chain
ID,
is
that
same
chain
ID
from
here
CFO,
five,
seven,
whatever
paste
that
in
and
then
hit
save
new
network.
Okay
that'll
create
a
new
local
test,
Network
now
you're
going
to
also
need
to
import
the
private
key
from
the
public
private
key
pair
in
yo
studio.
A
So
if
you,
if
you
used
yo
studio
to
create
this
mailing
list
for
account,
then
go
up
to
manage
key
pairs
and
you
can
hit
show
private
keys
copy
out
your
private
key
from
here
that
you're
managing
in
your
studio,
because
you'll
need
that
in
order
to
have
scatter
signed
transactions
on
behalf
of
the
mailing
list
for
account.
Alright,
if
you
have
no
idea
what
I'm
talking
about,
then
you
in
order
to
actually
walk
through
this
tutorial
with
me.
You
do
need
to
have
a
the
contract
running
that
we
wrote
in
the
last
lesson.
A
So
let's
go
back
to
scatter
Jay
s,
connect
we're
going
to
call
our
application
mailing
list,
and
then
we
need
to
tell
it
that
we
want
this
network
alright.
So
the
two
parameters
for
Connect
are
the
name
of
the
the
application
you're
connecting
scatter.
We'll
see
this
name
when
the
little
scatter
window
pops
up
says:
do
you
want
to
connect
it'll?
Have
this
name
and
then
the
actual
network
object
that
we
created
up
here
once
that's
done,
then
we
want
to
pass
our
connected
status
to
an
arrow
function.
Here.
A
All
right
now,
if
that
didn't
actually
work,
alright,
if
we're
not
connected,
then
we
want
to
return
a
console
error
that
says
no
scatter
all
right.
We
failed
to
connect
to
scatter,
otherwise
we're
going
to
continue
to
log
in
and
after
that,
we'll
take
the
ID
the
identity
we
get
and
pass
it
into
another
era
function,
and
if
there's
no
idea
at
all,
then
we'll
also
throw
an
error
that
says
no
identity.
A
A
So,
let's
create
a
status
variable,
let's
just
just
so
that
we
don't
have
to
keep
typing
this
we'll
grab
that
document
element
and
stash
it
in
a
constant
called
status,
and
if
there's
no
scatter
j/s
whatsoever,
then
we
will
make
the
inner
text
of
status
say
no
scatter
that'll
just
change
the
text
of
that
heading.
The
inner
text,
which
is
this.
This
text
right
here,
change
it
from
not
logged
in
to
no
scatter.
A
So
if
you're
looking
for
examples,
you'll
find
multiple
ways
and
that's
complicated
by
the
fact
that
some
of
the
examples
you'll
find
are
for
the
old
SAS
version,
16
or
is
also
referred
to
as
one
and
the
most
recent
examples
are
for
the
new
ESS
version
20,
which
is
also
use
just
to
which,
as
you
have
seen
we're
using
here.
So
there
are
some
differences,
make
sure
you're
using
up-to-date
examples.
But
these
are
some
of
the
ways
you
can
do
it
with
USGS
20,
no
identity.
A
A
That'll
run
at
intervals.
Okay,
so
I
set
an
interval
to
just
run
set
status.
Recurringly,
let's
see
if
that
has
the
intended
effect.
Here
I
am
refresh
the
page,
hey
Wow.
It
immediately
connected
me
because
I've
already
connected
before
so
I'm
gonna
go
ahead
and
disconnect
all
right.
So,
let's
refresh
the
page
and
hey
there,
it
worked
it
pulled
up
scatter
and
it
asks
me
which
key
I
want
to
use.
I'm
gonna
use
an
active
key
I.
A
Don't
know
why
there's
doubles
here,
but
all
right,
so
I'm
using
mailing
list
4,
which
is
the
account
that
I
have
imported
with
this
key
on
the
local
test
network.
I
will
allow
it
to
link,
and
it
says
your
username
is
my
first
identity.
That's
the
name
of
my
scatter
identity.
Scatter
has
this
identity
system,
but
maybe
you
wanted
to
actually
display
the
account
name
here.
The
EOS
account
name,
that's
kind
of
more
traditional.
It's
what's
done
on
more
sites.
A
In
that
case,
all
we
have
to
do
is
come
in
and
in
that
identity
we
want
to
grab
the
first
account
and
display
its
name.
Instead,
all
right,
I'll
save
that.
Now
we
see
our
Yost
account
name,
ok,
so
you
can
support
either
one.
Let's
make
a
logout
function
now.
I
know
that
we
have
our
RPC
API
stuff,
we'll
do
that
in
a
little
bit,
I'm
gonna
make
a
window
function.
A
Log
out
arrows,
which
kind
of
get
really
old
I
should
be
better
at
typing
them
than
I
am
we'll
just
tell
scatter
just
to
log
out.
That's
it
right,
so
I'm
going
to
save
that
and
make
sure
that
works.
Logout
yeah.
It
worked
no
identity,
I'm
logged
down
now
alright,
so
it
should
be
a
a
trivial
matter
to
also
do
login
in
the
same
way,
scatter
JSL
login
save
alright
it
logs
in
on
page
load,
which
we've
already
done
right.
We
can
get
rid
of
that
later.
A
If
we
want
okay,
so
I
log
out
and
I
log
in
yep
log
out
log
in
great
we've
implemented
log
in
and
log
out.
We
are
cruising
along
here
now.
We
just
have
two
more
functions
to
implement
register
user
and
unregister
user.
Of
course,
these
are
going
to
be
more
complicated
because
we
have
to
actually
pass
some
information.
The
blockchain
we
haven't
done
any
of
that,
yet
we've
been
logging
in
with
scatter
identity.
A
We
haven't
done
anything
related
to
the
us
blockchain
itself,
but
let's
keep
these
functions
equally
simple,
because
they
do
basically
the
same
thing.
So
we
don't
want
to
repeat
a
huge
amount
of
code
in
each
function,
we'll
create
a
new
function
that
we'll
just
call
transact
right
now
and
we'll
pass
in
the
action
name
into
that
function.
A
Alright,
so
we're
sending
the
action
name
into
this
transact
function
and
what
we
need
to
do
here
is
make
sure
we're
logged
in
then
we'll
do
the
same
protections
we
had
up
here,
where
we
throw
an
error
if
there's
no
identity,
because
we
can't
do
anything
on
the
blockchain.
If
we
don't
have
scatter
connected
if
there's
no
identity
connected
and
then
we're
gonna
grab
our
scatter
j/s
we're
gonna
grab
the
account
from
scatter
Yost
account
with
that
identity
and
throw
it
in
a
constant
here
so
that
we
can
access
it
easily.
A
We're
gonna
need
a
couple
of
things.
First,
that
I
do
want
to
keep
available
outside,
even
though
they'll
only
be
used
in
transact.
We
might
have
other
functions
in
the
future,
so
we
need
to
be
able
to
do
a
remote
procedure.
Call
and
esj
s
allows
us
to
do
that,
so
we're
just
going
to
use
the
default.
A
A
That
should
do
it,
alright,
that
should
that
should
be
enough
for
RPC
API,
I'm,
gonna,
save
it
and
actually
reload
the
page.
Okay,
we're
good!
This
is
actually.
This
is
actually
pretty
normal
stuff
when
you're
when
you're
developing
locally.
So
we
can
ignore
that
now
we
actually
need
to
take
our
action.
We
have
this
transact
function
that
we're
passing
in
an
action
name
to
we.
Log
in
we've
got
our
RPC
and
our
API
ready
to
go
so
after
logging
in
we
do
want
our
API
to
transact.
A
A
So
we're
all
set
up
to
build
our
transaction
in
here.
All
we
have
to
do
is
give
it
an
actions,
object,
that's
it
and
then
the
actions
object.
We
can
pass
several
actions
in
fact,
but
we're
just
going
to
be
passing
one.
We
tell
it
an
account
first,
and
this
is
actually
the
account
of
the
contract,
not
the
user
account.
A
So
we
have
our
contract
running
on
mailing
list,
for
here,
I'm
also
going
to
be
using
it
to
register,
but
if
you're
using
a
different
name
whatever,
but
the
contract
account
name
will
go
here
and
then
the
actual
action
name
which
again
we
passed
in
up
here,
we'll
go
next
and
then
we
have
to
send
an
authorization.
In
now.
The
reason
I
did
square
brackets
we
didn't
have
to
is
because
there
can
be
multiple
authorizers,
especially
with
the
new
EOS
updates.
A
In
fact,
I'm
going
to
put
this
here,
the
user
paying
for
resources
must
go
first.
If
you
do
have
multiple
authorizations
and
you're
paying
for
things
for
your
users,
the
user,
that's
paying
for
the
resources
has
to
go
first,
but
all
we
need
is
an
actor
and
that's
the
account
name
up
here.
We
have
our
account
that
we've
grabbed
from
scatter
and
the
permission
which
it's
whatever
permission
we
signed,
we
selected
when
we
logged
in
so
the
authority
object
of
that
scatter
account
all
right
now.
Something
is
wrong
here,
oh
yeah.
A
Okay,
now
we're
not
actually
sending
in
any
data
right.
Now,
though,
we
do
need
to
also
send
in
data
a
to
do
would
be
to
pass
in
a
data
object
here,
along
with
an
action
object
for
more
flexibility
in
this
transact
function,
but
since
we're
only
doing
one
kind
of
action
right
now
we're
just
passing
in
user
name
regard
of
which
action
we're
doing.
A
We'll
just
put
that
in
right
here,
the
username
again
in
our
contract
in
our
smart
contract,
we
need
a
username
variable
to
be
coming
in
whether
we're
registering
or
unregistering
a
user,
so
we'll
pass
in
the
username
here
account
dot,
name,
alright,
and
let's
give
it
a
go
all
right,
so
we
just
did
what
you're
not
supposed
to
do.
We
built
kind
of
the
whole
thing
not
in
pieces.
Let's
make
sure
our
logout
and
login
still
work.
They
do
now.
I'm
gonna
go
over
to
my
contract
table
viewer
Ennio
studio,
there's
nothing
in
the
table.
A
A
If
all
goes
well,
register
should
register
me,
there's
absolutely
no
feedback
here,
but
we
can
open
our
javascript
console
and
look
past
the
the
typical
errors.
Oh,
we
have
an
unhandled
promise.
Rejection
and
mailing
list
for
is
not
present.
Unhandled
promised
rejection.
Undefined
is
not
a
function
near
API
transact.
Oh
I
can't
have
this
hang
on.
A
All
right
yeah,
it
didn't
need
that
okay,
so
now
we
should
now
it
should
work.
Let's
go
over,
looks
good
logs
out
logs
in
successfully
let's
hit
register
AHA.
It
asks
me
to
sign
now
allow
alright.
So
we
go
all
the
way
back
to
yo
studio
and
refresh
our
table
and
there
it
is.
We've
got
mailing
list
for
username
in
our
contract
table.
A
So
let's
unregister
now
will
allow
that
looks
good
transaction
sense
and
we're
gone.
Alright,
we've
got
a
full.
Ok,
it's
basic
and
it
looks
pretty.
You
know
early
world-wide-web,
but
it's
fine.
It
works
and
we
styled
this
up
and
added
a
helpful
message.
Maybe
that
said,
you've
registered,
that's
not
just
logged
to
the
console
but
actually
displayed
here.
This
would
be
a
pretty
decent
mailing
list.
Collection
form,
that's
a
quick
scatter
integration
and
that's
what
you
need
to
know
in
order
to
use
scatter.
There
are
some
other
features
we'll
be
covering
them
in
future
lessons.
A
But
this
is
enough
to
do
any
scatter
action,
any
action
you
need
to
pass
to
your
contract
and
you
need
to
have
the
user
sign
it
with
scatter.
You
know
how
to
have
them
log
in
now
to
have
them
log
out
how
to
have
them
push
an
action
check
out
more
examples
in
the
scatter
documentation.
Be
wary
that
sometimes
it
does
say,
don't
do
this
and
you
know
there's
code
examples
just
for
instructive
purposes
that
show
you
how
to
do
something,
but
they
don't
have
like
safe
key
management,
for
example.
A
But
with
that
in
mind
you
can
go
and
look
at
the
examples.
Hopefully
this
cleared
up
a
lot
of
things
for
you.
You
now
know
how
to
add
scatter
integration
to
your
applications.
Of
course,
this
was
still
on
local
net.
It
was
still
on
a
local
test.
Net
will
talk
about
deployment
later
to
khylin
and
even
to
Maine
net,
but
for
that
you'll
have
to
wait
for
another
video.