►
From YouTube: NEAR + Bundlr + Arweave dApp posting transactions
Description
Hey Nearians,
This workshop walks you through using NEAR to upload data on Arweave, in this workshop, we will build a public square app using React a NEAR Wallet, the bundler network, and Arweave. The tutorial is broken down into several bite-size videos, that are 20 - 30 minutes long on average.
Tutorial Repository: https://github.com/twilson63/public-square-app
Arweave Dev Discord: https://discord.gg/928jQzsA
About Presenter: Tom Wilson - twilson632 on Discord
A
A
Then,
once
we
have
it
connected
to
a
near
wallet,
what
we
want
to
do
is
actually
create
a
transaction
using
the
bundler
library
and
rweve
and
we'll
post
that
transaction
by
using
this
layer,
2
technology
called
bundler
that
will
allow
us
to
sign
in
assign
a
transaction
for
r
weave
using
near
so.
The
first
thing
we
want
to
do
is
go
into
our
app.
A
A
Use
state
and
we're
going
to
default
it
to
false,
because
our
wallet's
not
connected
okay
and
then
we're
going
to
add
this
component
just
below
navigation
for
the
wallet
selected
button.
So
we're
going
to
say
wallet
selected
button
and
we
want
to
include
a
prop
on
there
for
on
wallet
connect,
and
this
prop
will
be
a
function
and
when
it's
invoked
then
we
can
set.
Our
state
is
wallet
connected
to
true
and
that'll.
A
Just
let
our
components
know
that
the
the
wallet
is
connected,
so
it'll
give
our
components
in
the
app
the
ability
to
know
that
the
wallet
is
connected
which
will
make
sense
later
on.
But
with
these
two
changes,
let's
check
our
app
and
we
should
now
have
our
select
wallet
button
and
the
select
wallet
button
will
pop
up
a
modal
and
allow
us
to
select
a
near
wallet.
But
we
have
to
do
some
work
to
get
this
functionality
working
next
and
that's
the
connecting
to
a
wallet.
A
So
you
will
need
a
near
wallet
set
up
at
wallet.near.org
to
get
this
functionality
working
and
what
we
need
to
do
next
is
go
into
our
lib
folder
under
source
source.
Live
and
open
up
our
near
js
folder,
but
before
we
start
to
add
code
there,
we
need
to
install
a
couple
of
dependencies
so
we'll
npm
install
near
api,
js
and
we'll
install
at
bundler
network,
slash
client.
So
we
just
need
to
install
these
two
dependencies.
A
A
The
first
thing
we
need
to
do
is,
after
we've
imported
near
api.
We've
got
two
functions
of
connect
and
key
stores.
We
need
to
set
up
these
near
options.
These
options
will
go
into
our
connect
function
for
near
to
let
it
know
that
we
want
to
essentially
connect
to
the
main
net
and
we
want
to
set
up
a
key
store
and
the
key
store
is
a
local
storage.
A
A
So
these
options
will
tell
our
connection
as
we
create
a
connection
to
the
wallet
where
to
go.
So
the
next
method
we
need
to
implement
is
git
wallet
and
get
wallet
is
going
to
be
a
reusable
method
that
will
set
up
the
connection
and
set
up
a
new
wallet
connection.
So
it's
just
a
couple
lines:
const
near
equals
await
connect
and
we
pass
in
our
near
options
and
then
the
second
line
is
the
new
wallet
connection
and
we'll
pass
in
near
and
then
we'll
give
it
a
app
key
prefix
of
bundler.
A
Let's
know
we're
using
bundler
now
to
check
if
the
user
is
signed
in
we're
going
to
get
a
wallet
by
calling
await,
get
wallet,
the
method
above
and
then
we're
just
going
to
return
wallet.
Dot
is
signed
in
same
thing
for
a
git
account
id
it's
kind
of
the
same
method.
We
just
say
dot,
get
account
id
and
for
sign
in
very
similar.
We
get
the
wallet,
but
this
time
we
want
to
say,
wallet.request
sign
in
and
then
sign
out
same
kind
of
pattern,
you're
going
to
just
say,
wallet,
dot,
sign
out
cool.
A
A
A
So
that
case
is
like
when
the
user
comes
in
and
the
wallet's
already
signed
in
instead
of
the
button
saying,
select
wallet,
it's
going
to
say
the
wallet
that
the
near
wallet
address
is,
and
you
know,
kind
of
the
near
icon
and
then
the
second
thing
we
need
to
do
is
add
a
use
effect.
A
hook
use
effect
hook.
That
will
run
when
the
component
is
mounted.
So
we're
going
to
do
it
in
the
wallet
select
button.
A
Now,
when
we
click
the
select
button,
we
have
this
modal
that
pops
up.
We
want
to
handle
that.
So
what
we
need
to
do
is
in
the
wallet
modal
component.
Here
we
need
to
handle
a
case.
So
when
the
user
selects
the
near
case,
which
is
the
only
option
we
want
to
call
await
sign
in
and
then
we
just
want
to
break
on
this
case
here,
so
where
we
don't
go
through
the
default
criteria.
A
So
with
that
we're,
we
should
have
our
wallet
select
component
ready
and
we
should
be
able
to
connect
to
a
wallet.
So
let's
give
it
a
try,
let's
refresh
this
page
and
then
we'll
click
select
wallet,
we'll
select
near
wallet,
it
goes
to
our
wallet.near.org
and
we've
got
a
wallet
set
up,
we'll
just
hit
next
and
we'll
hit
connect.
A
And
we
are
connected
yay
awesome,
so
we
are
connected
to
a
near
wallet.
The
next
thing
we
need
to
do
is
create
a
new
post,
so
we
need
to
create
a
area.
We
can
post
a
new
message
and
then
we
need
to
actually
implement
the
code
that
will
actually
use
the
near
wallet
to
post
a
message
to
are
we
now
we've
got
a
component
set
up.
A
New
post
like
that,
and
then
we
should
place
that
in
our
home
component.
A
Right
and
we
want
to
place
it
between
the
the
header.
A
A
A
So
the
first
thing
we
need
to
do
in
our
new
co
post
component
is:
we
can
go
over
some
of
our
hooks.
These
use
state
hooks
one
is
post
value,
so
that's
the
data
that
we'll
be
posting
and
then
a
flag
that'll
trigger
if
we're
posting
or
not,
and
this
flag
will
allow
us
to
disable
input
elements.
So
if
it's
in
the
process
of
posting,
you
can't
hit
the
post
button
again
can't
make
a
change
to
the
text.
A
Okay,
so
that's
all
set
up
so
now
what
we
need
to
do
is
go
through
the
process
of
submitting
a
transaction
to.
Are
we
and
there's
four
key
steps
to
this
process,
so
we
can
go
and
take
a
look
at
that
in
our
documentation
here
so
submitting
the
transaction
to.
Are
we
when
using
other
layer
ones
to
submit
to
rweave
through
the
layer,
two
technology
of
bundler?
A
A
So
we've
got
those
things
and
now
what
we
want
to
do
is
create
a
helper
function.
That's
basically
going
to
allow
us
in
any
function
that
we
need
to
get
the
the
bundler
component,
our
our
library.
It's
not
a
component
react
test
component,
so
this
is
just
a
a
connection
library,
so
we'll
call
it
git
bundler
and
it's
a
sync
and
we
need
the
wallet
from
our
helper
library
for
near
get
wallet.
A
So
since
we're
already
signed
in,
we
can
call
get
wallet
and
we'll
get
the
wallet
and
we
can
use
that
for
our
bundler
connection,
which
will
be
new
web
bundler,
and
we
need
to
give
it
the
node
that
we
want
to
use
on
the
network
and
that's
node
one,
and
we
need
to
tell
it
the
currency
we're
using
in
this
case
it's
near.
A
A
Return
our
bundler
like
that
nice.
So
that's
just
a
helper
function
that
we'll
use
as
we
build
the
rest
of
the
functions
that
that
we're
talking
about.
So
we
need
to
deal
with
creating
a
transaction
signing
a
transaction
uploading,
a
transaction
and
funding
the
transaction,
but
we'll
start
with
creating
a
transaction.
So
as
we're
pulling
back
those
transactions
from
our
weave,
you
notice
they
have
headers,
and
then
they
have
data.
So
now
we're
going
to
create
a
transaction
and
actually
push
it
on
our
weave.
A
So
with
that,
we're
going
to
say,
export
cons,
create
and
just
use
tx
for
abbreviation
of
transactions,
so
don't
have
to
type
too
much
and
don't
risk
misspelling
transaction,
because
sometimes
I
just
misspell
that
word
well
all
the
time
I
misspell
it
when
typing.
I
don't
know
why,
but
I
do
so
we're
going
to
get
bundler
and
that's
going
to
give
us.
Our
bundler
object
this
helper
up
here
and
now
we're
going
to
create
a
transaction
so
we're
going
to
say
a
weight,
bundler
dot,
create
transaction.
A
The
word
on
the
spell
all
the
time
and
we're
going
to
give
it
our
data,
which
in
this
case,
will
be
the
text
of
our
post
and
then
we're
going
to
give
it
tags
and
tags
are
an
array
of
objects
that
are
name
and
value
paired.
So
you
would
have
name
colon
app
name,
value,
colon
public
square
or
whatever,
so
we'll
see
that
in
more
details,
but
those
are
kind
of
the
two
main
components
in
this
use
case
that
we
need
to
create
a
transaction.
A
A
A
So,
let's
look
at
how
that
function
looks:
let's
look
how
that
function
looks
right,
but
yeah,
so
we
need
to
basically
take
in
a
size
which
would
be
the
the
length
of
the
text
that
we're
wanting
to
post
and
we're
going
to
get
our
bundler
library.
So
we're
going
to
say,
wait,
get
bundler
with
everything
connected
to
the
wallet
and
everything
and
we're
going
to
calculate
the
the
total
atomic
units.
A
We're
going
to
need
we're
going
to
calculate
the
total
size
and
what
what
we
want
to
do
here
is
just
basically
add
like
10
just
to
make
sure
we
you
know,
because
the
price
could
change
between
the
time.
We
get
an
estimate
and
the
time
we
submit.
So
we
just
want
to
kind
of
handle
any
kind
of
variables
there.
A
And
since
we
set
the
units
to
near
then
when
we
call
bundler
getprice
and
we
give
it
a
size,
it's
going
to
return
a
big
number
object
and
in
order
to
get
that
atomic
units
of
near
our
yakuto
near
yaakov
near
I'm
saying
that
right.
We
need
to
do
two
string
and
that
should
return
the
amount
of
near
we
need
to
fund
in
order
to
post
or
upload
our
transaction.
So
we're
going
to
do
bundler,
dot,
fun
and
amount.
A
A
A
Okay,
so
I
think
we've
got
all
the
components
for
our
little
bundler
library,
and
now
we
can
kind
of
shift
gears
into
the
new
post
component
and
in
the
new
post
component,
we're
going
to
want
to
import
in
our
functions
right.
So
we're
going
to
want
to
import
in
the.
A
A
We
need
to
set
our
flag,
so
we're
going
to
say
set
is
posting
to
true
and
then
we're
going
to
check
and
see
about
funding.
So
we're
going
to
fund
bundler
we're
going
to
send
our
post
value
dot,
link
as
our
size
and
then
we're
going
to
check
and
see
if
it's
funded.
So
if
it's
funded,
then
we're
going
to
create
a
transaction,
so
we're
going
to
say,
wait,
dot,
create
tx,
post
value,
our
text
and
then
we're
going
to
add
some
tags
and
I'm
just
going
to
paste
these
tags
in.
A
So
we
don't
have
to
make
a
lot
of
typing,
but
basically
they're
objects
with
a
name
and
a
value
prop.
So
the
name
is
the
tag
name
that
we
want
to
appear
on
the
transaction
headers
and
then
the
value
is
the
value
that
we
want
to
appear
there.
So
app
name
is
public
square
content
type
text,
plane
version
is
1.0.1,
the
type
is
a
post
and
then
the
wallet
we're
using
is
near
so
we're
just
setting
those
in
our
transaction
as
we
create
it.
A
And
now
that
we've
created
our
transaction,
we
can
actually
try
to
sign
and
upload
it.
And
that
looks
like
this
so
we'll
say
away,
tx
sign
and
await
tx
dot,
upload,
all
right,
cool
and
then
there's
a
couple
other
things
we
want
to
do
so
it's
going
to
upload
and
come
back
and
then
we're
going
to
want
to
set
our
post
value
to
empty
and
we're
going
to
say,
if
props
dot
on
post
message,
which
will
be
a
notification
function
that
we
can
call
to.
Let
our
parent
know
that
we
created
a
new
message.
A
Otherwise,
if
things
don't
go
so
well,
we'll
create
an
error
and
we'll
just
console
log
that
error
for
now
and
then,
if
it's
not
funded,
we
need
to
handle
the
case
of
it
not
being
funded.
So
we
want
to
say,
alert
could
not
run
bundler
like
that
and
then
finally,
we
want
to
set
our
is
posting
attempt
to
false
to
reset
the
flags
and
that
will
just
read
enable
the
input
and
the
button,
so
things
can
be
set
up.
A
Okay,
so
with
all
that
fingers
crossed,
we
should
be
able
to
post
a
message
on.
Are
we
so,
let's
give
it
a
shot?
I'm
gonna
refresh
our
app.
A
Function
delay:
it's
already
been
there.
We
go
cool
yeah.
We
could
use
the
delay
from
that.
That
was
a
visual
studio,
just
helping
us
out
a
little
bit,
okay
cool.
So
we
are
connected
to
our
wallet.
It's
loading,
some
posts,
we've
got
our
post
form
and
when
we
start
typing
it
should
enable
our
post
button.
So,
let's
see
what
do
we
want
to
say
hello
from
the
near.
A
A
So
I
think
this
is
a
case
that
we've
got
to
handle,
so
it
asked
us
to
approve
it
which
did
a
redirect
and
it
came
back-
and
I
don't
think
I've
handled
that
case
yet
so
what
what
we
need
to
do
now,
since
I've
improved
that
transaction
and
try
this
again
hello
from
near
network.
A
So
we
did
put
a
weight
on
a
thousand
to
get
funded.
That's
a
good
sign.
It
came
back
to
an
existing
state
and
what
we
need
to
do
next
is
kind
of
handle
the
communication
back
to
the
parent,
that
it
was
successful
and
actually
show
it
in
the
list.
But
let's
see,
if
I
refresh
now
see
if
we
get
a
new
transaction
loaded,
look
at
there
cool,
so
it's
pending,
but
we
do
have
a
transaction
on.
Are
we.
A
In
the
next
section,
we'll
work
on
connecting,
you
know
the
feedback
back
from
from
the
network
to
kind
of
show
the
message
in
the
in
the
feed
and
just
handling
the
polling
for
updates
and
just
really
polishing
up
the
app
a
little
bit.
We
need
to
handle
that
initial
criteria
when
it
goes
to
near
wallet
and
ask
for
funds
or
ask
to
sign
a
transaction,
we
need
to
handle
that
and
then
the
last
thing
we
need
to
do
is
deploy
to
the
perma
web,
which
is
a
lot
of
fun.