►
From YouTube: NEAR + Bundlr + Arweave dApp Integrating Arweave JS
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
Okay,
so
now
that
we
have
successfully
created
our
graphql
query
for
r
weave,
we
need
to
install
the
r-weave
javascript
sdk
so
that
we
can
actually
execute
that
graphql
query
onto
the
r-weave
network
using
a
gateway
to
run
the
graphql
and
return
back
our
results
in
our
app
so
that
we
can
display
them
in
our
list.
So
the
first
thing
we
need
to
do
is
install
r-weave
via
npm,
so
I'm
going
to
bounce
over
to
my
visual
studio
environment
and
I'm
in
the
public
square
app.
A
So
now
that
we
have
that
we're
going
to
do
all
of
our
r
weave
calls
in
the
api
js
file.
So
if
we
open
up
api
dot
js
in
the
source,
lib
directory,
we're
going
to
import
our
weave
from
r
weave
and
then
what
we
need
to
do
is
initialize
it
and
then
export
it
out
so
that
it
can
be
imported
by
our
react
application.
A
Cool
so
to
query
the
gateway
in
our
code
editor
we're
going
to
open
up
the
source,
app
dot,
js
file,
which
is
kind
of
our
main
react,
app
entry
point
and
we're
going
to
import.
A
A
And
we'll
throw
the
same
error
back
so
that
it
will
continue
to
error
out
now
that
we
have
our
post
to
the
r
weave
gateway,
let's
go
ahead
and
grab
what
comes
back
and
what's
kind
of
confusing.
But
when
we
return
a
response,
it's
going
to
come
back
as.
A
A
A
A
So
that's
something
to
remember
and
now
we're
just
going
to
console
log
our
edges,
which
we
should
be
getting
back
an
array
of
nodes
based
on
our
query.
So
I'm
going
to
save
that
and
I'm
going
to
save
the
import
of
our
weave
here
in
the
export
and
we
are
running
our
app.
So
let's
go
ahead
and
open.
A
A
A
We
just
installed
it.
So
let's
go
ahead
and
re-run
our
app
here
since
we
did
npm
install
because
that
that
could
be
a
problem
and
then,
let's
refresh
that
and
let's
see
okay,
so
we
still
get
the
same
error.
A
A
Because
when
I
call
build
query,
it's
probably
given
me
an
an
object
or
a
body
and
let's
refresh
there,
we
go
so
I'm
printing
that
out
see
it's
already
giving
me
the
query,
object
or
the
body
that
I
should
call.
A
So
the
first
step
to
doing
that
is
we'll
want
to
go
back
into
source
lib,
api,
js
and
we'll
look
at
this
create
post
info
function.
This
create
post
info
function
basically
takes
a
node
and
then
it
extracts
all
the
metadata
from
the
node
and
creates
this
post
info
object
and
returns
that
so
this
is
going
to
be
our
kind
of
transform,
so
we're
going
to
get
all
our
data
from
the
graphql
endpoint
and
then
we're
going
to
map
over
this
function
and
transform
it
into
some
objects
that
make
sense.
A
A
A
A
A
Our
app
component
right,
so
our
app
component,
here's
use
effect
and
it's
calling
get
post
infos.
What
we
want
to
do
is
set
up
a
flag
to
kind
of
show
that
the
the
process
is
making
a
call
out.
So
we
show
kind
of
a
is
searching
kind
of
animation
and
we
need
to
do
that
and
we
also
need
to
kind
of
store
our
post
info.
So
we
need
to
create.
A
Set
is
searching
to
true
set,
is
searching
to
true
and
then
we're
going
to
call
get
post
infos
and
then
we're
going
to
use
dot.
Then,
because
we
can't
do
in
a
sync
here,
so
we're
going
to
use
dot
then
and
we'll
get
our
post
and
then
we're
going
to
call
set
post
infos
with
the
post
and
then
we're
going
to
say
set
is
searching
defaults
to
toggle
off
the
spinner.
A
If
you
will
all
right
and
now
use
effect
is
a
hook
that
you
can
use
several
different
ways
in
this
way,
we're
using
it
to
essentially
fire
on
the
on
mount
or
the
on
component
mount,
and
by
doing
that,
we
give
it
an
empty
array
of
as
a
second
argument.
A
So
the
first
argument
takes
the
function
to
execute
and
there's
certain
rules
that
have
to
be
applied
with
that,
like
it
can't
be
in
a
sync
function
and
other
things,
and
then
the
second
function
or
argument
is
to
add
a
list
of
variables
essentially
to
watch
on
the
component.
If
those
change
then
trigger
this
during
a
re-render,
if
they
don't,
then
don't
by
adding
an
empty
array
means
it'll
just
trigger
on
the
component
mount.
If
you
didn't
supply
a
second
argument,
it
would
trigger
every
time
state
is
re-rendering.
A
So
in
our
app
component
as
we
return,
we
want
to
pass
these
attributes
to
our
home
component,
so
it
can
use
them
so
we'll
say,
is
searching
equal
to
is
searching
and
post
infos
equal
to
post
infos
like
so
so
that
way,
we
can
kind
of
pass
this
data
down
to
a
child
component
and
then
that
child
component
can
do
something
with
it
and
we'll
head
down
to
our
child
component
called
home,
which
is
down
below
here
and
right
now.
Home
is
just
returning
the
header
home.
A
A
And
if
it's
false,
it'll
hide
that
progress,
spinner
and
the
progress
banner
is
just
a
little
line
that
goes
across.
That
indicates
that
something's
happening
in
the
background
and
then
the
second
thing
is
is
we
want
to
include
our
posts
component
and
we're
going
to
pass
down
further
our
infos
they're
from
props
post
infos.
A
So
these
two
lines
in
the
home
should
actually
now
have
us
actually
show
some
data
on
our
react.
App,
I'm
pretty
sure
the
post
infos
is
is
wired
up,
but
it,
but
it
may
not
be,
but
let's,
let's
check
it
out.
Let's
go
ahead
and
run
our
browser
app
and
let's
see
up
there,
we
go.
We,
we
are
getting
some
data,
pretty
cool.
A
So
by
you
know,
setting
up
this
get
post
infos
function
where
we
call
the
build
query,
we
actually
execute
the
request
on
the
graphql
server
and
then
in
our
component
we
add
some
state
to
manage
that
and
then
in
the
react,
use
effect
on
mount.
We
actually
set
the
flag
to
show
some
animation.
A
So
if
we
look
up
here
and
we
refresh-
we
should
see
some
animation
super
fast,
just
nice,
it's
nice
to
be
fast,
then
we
get
our
post
infos
and
then,
when
we
get
them,
we
turn
off
the
animation
and
we
pass
all
of
that
down
from
our
home
component
into
our
post
component
to
display
those.
Now
you
may
notice
that
we're
not
showing
any
actual
content-
and
I
believe
I
mentioned
before
we're
just
getting
the
header,
so
we
actually
have
to
make
a
call
to
get
the
content.
A
You
know
for
each
item
in
the
list
each
post
info
and
to
do
that
we're
going
to
essentially
in
our
api
file.
So
if
we
head
back
to
our
api
file
in
this,
create
post
info
function
after
the
post
info
object,
we're
going
to
make
a
call,
and
the
first
thing
we're
going
to
do-
is
just
set
up
a
request
as
null
as
part
of
that
object
to
default.
A
A
We
we
don't
want
to
read
that
so
we're
we're
going
to
just
look
for
posts
that
have
a
size
of
less
than
1048
characters
and
then
we're
going
to
go
post
info
dot
request
and
we're
going
to
set
it
to,
and
this
is
where
we're
going
to
make
a
call
to
the
gateway
to
return
the
data
of
that
transaction.
So
we're
going
to
call
rweave
dot
api
dot
get
and
we're
going
to
get
our.
A
And
then,
in
this
else
we
want
to
say
post
info
dot
error
data
is
too
large.
Okay,.
A
A
A
Let's
take
a
look
at
that
how
we're
binding
it,
let's
go
to
our
components,
folder
and
go
to
post,
and
you
see
we
have
the
post
and
then
we
map
all
the
post
infos
that
we
got
from
our
home
component
and
we
essentially
call
this
post
item
component
and
we're
setting
the
key,
because
when
you
do
a
collection
and
react,
you
want
to
set
a
unique
key
so
that
it
can
properly,
you
know,
render
or
optimize
the
rendering
of
the
items
or
children.
A
So
if
one
of
them
changes,
it
doesn't
re-render
the
whole
list
again,
so
that
key
element
is
pretty
important
and
the
nice
thing
is
is
we've
got
a
unique
id
with
our
transaction
id
for
that
and
let
me
go
back
really
quick,
so
yeah
we
have
txid
doing
node,
I
okay
just
making
sure,
and
then
we
have
our
post
info.
So
we
pop
our
post
info
into
this
post
item
component
and
we've
got
some
state
here.
A
Then
we
also
are,
you
know,
grabbing
the
message.
So
here's
this
get
post
message,
which
is
a
sync
and
we're
doing
an
await
to
our
post
info
request,
node
and
then
we
get
the
response
and
we
check
the
response
to
see
that
it's
not
an
error
and
if
it
isn't
we're
basically
calling
props.postinfo.message
equals
response
data
to
string
and
showing
that
message,
and
that
shows
our
text
here
for
our
public
square
app,
which
is
pretty
cool.
A
Another
interesting
note
is
up
here:
line
16
we're
using
a
little
optimization
trick
where
we're
getting
the
length
and
we're
adding
a
bunch
of
s's
to
the
link
and
length
and
as
it
paints
each
item
since
it's
lazily
loading
the
content.
This
can
kind
of
pre-fill
the
height
of
the
content.
So
you
don't
get.
You
know
kind
of
a
lot
of
kind
of
janky
view
when
it's
like
showing
the
list
of
items
and
then
showing
the
content.
A
So
that's
that's
kind
of
neat
and
there's
one
more
optimization
that
we
can
do
what
if
we
kind
of
delayed
the
request
so
that
we
can,
you
know,
give
it
a
little
bit
more
time
to
kind
of
pull
all
those
contents
out.
A
A
Okay,
so
so
we
want
to
go
back
to
our
app
library
and
in
our
get
post
infos
we
can
actually
use
this
utility
function,
delay
results
and
we
can
say
for
100
milliseconds.
A
A
A
Okay,
so
if,
if
you're
new
to
react
and
you're
looking
at
this
use
effect
function
here,
you
can
see
that
it's
probably
one
of
the
most
complicated
ones
in
the
app,
and
maybe
we
can
walk
through
it,
really
quickly.
Try
to
give
you
an
idea
of
what's
going
on
so
we've
got.
You
know,
use
state
up
here
for
post
message
and
status
message,
and
then
we
have
this
use
effect
and
as
before
we
said
we.
The
second
argument
contains
the
items
that
we
want
to
re-render.
A
So
we're
going
to
call
a
wait
on
that
and
we're
going
to
make
sure
we
get
a
response.
If
we
don't
we're
going
to
send
the
error
right.
So
if
there's
no
response,
then
we're
going
to
send
the
post
info
error
or
apply
that
as
our
status
right
and
if
there
is
a
response,
we're
going
to
check
and
see
if
it's
a
200
or
a
202
and
then
we're
going
to
show
the
message
clear.
The
new
status
message
on
the
screen.
A
We're
going
to
check
if
it's
cancelled
and
then
we're
going
to
set
if
it's
canceled,
we
return.
So
we
don't
set
the
status
message
or
the
post
message.
Otherwise
we
set
them,
and
then
we
call
a
git
post
message
here
to
initiate
all
of
that
functionality
and
on
a
return.
We're
returning
a
function
and
that
function
will
say
is
canceled
equal
to
true
when
invoked.