Full Stack Arweave Workshop

Building a decentralized video sharing app with Arweave, Bundlr, GraphQL, and Next.js.

Prerequisites

1. Node.js installed on your machine

I recommend using either NVM or FNM for Node.js installation

2. Matic, Arbitrum, or Avalanche tokens

3. Metamask installed as a browser extension

4. Fund your Bundlr wallet here with around $1.00 of your preferred currency.

Getting started

To get started, create a new Next.js application

npx create-next-app arweave-app

Next, change into the directory and install the dependencies using either NPM, Yarn, PNPM, or your favoriate package manager:

cd arweave-app

npm install @bundlr-network/client arweave @emotion/css ethers react-select

Overview of some of the dependencies

@emotion/css - CSS in JavaScript library for styling

react-select - select input control library for React

@bundlr-network/client - JavaScript client for interacting with Bundlr network

arweave - The Arweave JavaScript library

Base setup

Now that the dependencies are installed, create a new file named context.js in the root directory. We will use this file to initialize some React context that we'll be using to provide global state between routes.

// context.js
import { createContext } from 'react'

export const MainContext = createContext()

Next, let's create a new page in the pages directory called _app.js.

Here, we want to get started by enabling the user to sign in to bundlr using their MetaMask wallet.

We'll pass this functionality and some state into other pages so that we can use it there.

Add the following code to pages/app.js:

// pages/_app.js
import '../styles/globals.css'
import { WebBundlr } from "@bundlr-network/client"
import { MainContext } from '../context'
import { useState, useRef } from 'react'
import { providers, utils } from 'ethers'
import { css } from '@emotion/css'
import Link from 'next/link'

function MyApp({ Component, pageProps }) {
  const [bundlrInstance, setBundlrInstance] = useState()
  const [balance, setBalance] = useState(0)

  // set the base currency as matic (this can be changed later in the app)
  const [currency, setCurrency] = useState('matic')
  const bundlrRef = useRef()

  // create a function to connect to bundlr network
  async function initialiseBundlr() {
    await window.ethereum.enable()

    const provider = new providers.Web3Provider(window.ethereum);
    await provider._ready()

    const bundlr = new WebBundlr("https://node1.bundlr.network", currency, provider)
    await bundlr.ready()

    setBundlrInstance(bundlr)
    bundlrRef.current = bundlr
    fetchBalance()
  }

  // get the user's bundlr balance
  async function fetchBalance() {
    const bal = await bundlrRef.current.getLoadedBalance()
    console.log('bal: ', utils.formatEther(bal.toString()))
    setBalance(utils.formatEther(bal.toString()))
  }

  return (
    

      
      

          
        
      
      
    
  )
}

const navHeight = 80
const footerHeight = 70

const navStyle = css`
  height: ${navHeight}px;
  padding: 40px 100px;
  border-bottom: 1px solid #ededed;
  display: flex;
  align-items: center;
`

const homeLinkStyle = css`
  display: flex;
  flex-direction: row;
  align-items: center;
`

const homeLinkTextStyle = css`
  font-weight: 200;
  font-size: 28;
  letter-spacing: 7px;
`

const footerStyle = css`
  border-top: 1px solid #ededed;
  height: ${footerHeight}px;
  padding: 0px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 200;
  letter-spacing: 1px;
  font-size: 14px;
`

const containerStyle = css`
  min-height: calc(100vh - ${navHeight + footerHeight}px);
  width: 900px;
  margin: 0 auto;
  padding: 40px;
`

export default MyApp

What have we done here?

1. Imported the dependencies
2. Created some component state, one to hold the instance of Bundlr, the other to hold the user's wallet balance.
3. Created a function to connect to bundlr - initialiseBundlr
4. Created a function to fetch the user's balance - fetchBalance
5. Added some basic styling using emotion
6. Added some navigation, a footer, and a link in the footer to the profile page that has not yet been created.

Next, let's run the app:

npm run dev

You should see the app load and have a header and a footer! 🎉🎉🎉

Connecting to Bundlr

Next, let's create the UI that will allow the user to choose the currency they'd like to use and connect to Bundlr.

To do so, create a new file in the pages directory named profile.js. Here, add the following code:

import { useState, useContext } from 'react'
import { MainContext } from '../context'
import { css } from '@emotion/css'
import Select from 'react-select'

// list of supported currencies: https://docs.bundlr.network/docs/currencies
const supportedCurrencies = {
  matic: 'matic',
  ethereum: 'ethereum',
  avalanche: 'avalanche',
  bnb: 'bnb',
  arbitrum: 'arbitrum'
}

const currencyOptions = Object.keys(supportedCurrencies).map(v => {
  return {
    value: v, label: v
  }
})

export default function Profile() {
  // use context to get data and functions passed from _app.js
  const { balance, bundlrInstance, initialiseBundlr, currency, setCurrency } = useContext(MainContext)

  // if the user has not initialized bundlr, allow them to
  if (!bundlrInstance) {
    return  (
      

        

           setCurrency(value)}
            options            defaultValue={{ value: currency, label: currency }}
            classNamePrefix="select"
            instanceId="currency"
          />
          
Currency:/p>
        
        

        
      
    )
  }

  // once the user has initialized Bundlr, show them their balance
  return (
    

      
💰 Balance {Math.round(balance * 100) / 100}
    
  )
}

const selectContainerStyle = css`
  margin: 10px 0px 20px;
`

const containerStyle = css`
  padding: 10px 20px;
  display: flex;
  justify-content: center;
`

const buttonStyle = css`
  background-color: black;
  color: white;
  padding: 12px 40px;
  border-radius: 50px;
  font-weight: 700;
  width: 180;
  transition: all .35s;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 0, .75);
  }
`

const wideButtonStyle = css`
  ${buttonStyle};
  width: 380px;
`

const balanceStyle = css`
  padding: 10px 25px;
  background-color: rgba(0, 0, 0, .08);
  border-radius: 30px;
  display: inline-block;
  width: 200px;
  text-align: center;
`

In this file we've:

Defined the array of currencies we'd like to support (full list here)
Used useContext to get the functions and state variables defined in pages/app.js 
Created a drop-down menu to enable the user to select the currency they'd like to use
Created a button that allows the user to connect to Bundlr network.

Next let's test it out:
npm run dev

You should see a dropdown menu and be able to connect to Bundlr with your wallet! 🎉🎉🎉
Saving a video
Next, let's add the code that will allow user's to upload and save a video to Arweave with Bundlr.
Create a new file named utils.js in the root directory and add the following code:
import Arweave from 'arweave'

export const arweave = Arweave.init({})

export const APP_NAME = 'SOME_UNIQUE_APP_NAME'

Next, update pages/profile.js with the following code (new code is commented):
import { useState, useContext } from 'react'
import { MainContext } from '../context'
import { css } from '@emotion/css'
import Select from 'react-select'

// New imports
import { APP_NAME } from '../utils'
import { useRouter } from 'next/router'
import { utils } from 'ethers'

const supportedCurrencies = {
  matic: 'matic',
  ethereum: 'ethereum',
  avalanche: 'avalanche',
  bnb: 'bnb',
  arbitrum: 'arbitrum'
}

const currencyOptions = Object.keys(supportedCurrencies).map(v => {
  return {
    value: v, label: v
  }
})

export default function Profile() {
  const { balance, bundlrInstance, initialiseBundlr, currency, setCurrency } = useContext(MainContext)

  // New local state variables
  const [file, setFile] = useState()
  const [localVideo, setLocalVideo] = useState()
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [fileCost, setFileCost] = useState()
  const [URI, setURI] = useState()

  // router will allow us to programatically route after file upload
  const router = useRouter()

  // when the file is uploaded, save to local state and calculate cost
  function onFileChange(e) {
    const file = e.target.files[0]
    if (!file) return
    checkUploadCost(file.size)
    if (file) {
      const video = URL.createObjectURL(file)
      setLocalVideo(video)
      let reader = new FileReader()
      reader.onload = function (e) {
        if (reader.result) {
          setFile(Buffer.from(reader.result))
        }
      }
      reader.readAsArrayBuffer(file)
    }
  }

  // save the video to Arweave
  async function uploadFile() {
    if (!file) return
    const tags = [{ name: 'Content-Type', value: 'video/mp4' }]
    try {
      let tx = await bundlrInstance.uploader.upload(file, tags)
      setURI(`http://arweave.net/)
    } catch (err) {
      console.log('Error uploading video: ', err)
    }
  }

  async function checkUploadCost(bytes) {
    if (bytes) {
      const cost = await bundlrInstance.getPrice(bytes)
      setFileCost(utils.formatEther(cost.toString()))
    }
  }

  // save the video and metadata to Arweave
  async function saveVideo() {
    if (!file || !title || !description) return
    const tags = [
      { name: 'Content-Type', value: 'text/plain' },
      { name: 'App-Name', value: APP_NAME }
    ]

    const video = {
      title,
      description,
      URI,
      createdAt: new Date(),
      createdBy: bundlrInstance.address,
    }

    try {
      let tx = await bundlrInstance.createTransaction(JSON.stringify(video), { tags })
      await tx.sign()
      const { data } = await tx.upload()

      console.log(`http://arweave.net/${data.id}`)
      setTimeout(() => {
        router.push('/')
      }, 2000)
    } catch (err) {
      console.log('error uploading video with metadata: ', err)
    }
  }

  if (!bundlrInstance) {
   return  (
     

       

          setCurrency(value)}
           options           defaultValue={{ value: currency, label: currency }}
           classNamePrefix="select"
           instanceId="currency"
         />
         
Currency:/p>
       

     

     
     

    )
  }

  {/* most of this UI is also new */}
  return (
    

      
💰 Balance {Math.round(balance * 100) / 100}
      

        

        

        
        { /* if there is a video save to local state, display it */}
        {
          localVideo && (
            
          )
        }
        {/* display calculated upload cast */}
        {
          fileCost && 
Cost to upload: {Math.round((fileCost) * 1000) / 1000} MATIC
        }
        
        {/* if there is a URI, then show the form to upload it */}
        {
          URI && (
            

               

                {URI}
               
               

                 

                 
                 

                                  <button classNameonClickSave Video</button>
               </div>
            </div>
          )
        }
      </div>
    </div>
  )
}

const selectContainerStyle = css`
  margin: 10px 0px 20px;
`

const containerStyle = css`
  padding: 10px 20px;
  display: flex;
  justify-content: center;
`

const buttonStyle = css`
  background-color: black;
  color: white;
  padding: 12px 40px;
  border-radius: 50px;
  font-weight: 700;
  width: 180;
  transition: all .35s;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 0, .75);
  }
`

const wideButtonStyle = css`
  ${buttonStyle};
  width: 380px;
`

const balanceStyle = css`
  padding: 10px 25px;
  background-color: rgba(0, 0, 0, .08);
  border-radius: 30px;
  display: inline-block;
  width: 200px;
  text-align: center;
`

// New Styles
const linkStyle = css`
  margin: 15px 0px;
`

const inputContainerStyle = css`
  margin: 0px 0px 15px;
`

const videoStyle = css`
  margin-bottom: 20px;
`

const formStyle = css`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0px 0px;
`

const labelStyle = css`
  margin: 0px 0px 5px;
`

const inputStyle = css`
  padding: 12px 20px;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, .08);
  margin-bottom: 15px;
`

const textAreaStyle = css`
  
  width: 350px;
  height: 90px;
`

const saveVideoButtonStyle = css`
  ${buttonStyle};
  margin-top: 15px;
`
</code></pre>
<p>In this file we've done quite a bit!</p>
<ol>
<li>Created local state variable for user input, like the video as well as video title and description</li>
<li>Created a function that allows a user to upload a video and save it to the local state</li>
<li>Created a function that allows the user to check the price of an upload using the <code>getPrice</code> API from Bundlr</li>
<li>Created functions that allow the user to upload their video and metadata to Arweave</li>
<li>Added form inputs, UI, and styling for enabling the above functionality</li>
</ol>
<p>Next, let's try it out!</p>
<pre><code class="sh language-sh">npm run dev
</code></pre>
<p>You should now be able to successfully upload a video to the permaweb! 🚀🚀🚀</p>
<h3 id="queryingforvideos">Querying for videos</h3>
<p>Now that we've uploaded a video, how can we view it?</p>
<p>We'll be using GraphQL to query for the video data from Arweave. Since we passed in a tag for <code>APP_NAME</code>, we can use that tag to retrieve only the videos for our app.</p>
<p>Let's define the GraphQL query that we'll be using in <strong>utils.js</strong>:</p>
<pre><code class="javascript language-javascript">export const query = { query: `{
  transactions(
    first: 50,
    tags: [
      {
        name: "App-Name",
        values: ["${APP_NAME}"]
      },
      {
        name: "Content-Type",
        values: ["text/plain"]
      }
    ]
  ) {
      edges {
        node {
          id
          owner {
            address
          }
          data {
            size
          }
          block {
            height
            timestamp
          }
          tags {
            name,
            value
          }
        }
      }
    }
  }`
}
</code></pre>
<p>We'll also need a function to fetch the video metadata itself from Arweave for each item returned from the GraphQL query. Add the following function to <code>utils.js</code>:</p>
<pre><code class="javascript language-javascript">export const createVideoMeta = async (node) => {
  const ownerAddress = node.owner.address;
  const height = node.block ? node.block.height : -1;
  const timestamp = node.block ? parseInt(node.block.timestamp, 10) * 1000 : -1;
  const postInfo = {
    txid: node.id,
    owner: ownerAddress,
    height: height,
    length: node.data.size,
    timestamp: timestamp,
  }

  postInfo.request = await arweave.api.get(`/${node.id}`, { timeout: 10000 })
  return postInfo;
}
</code></pre>
<p>Next, update <strong>pages/index.js</strong> with the following code:</p>
<pre><code class="javascript language-javascript">import { query, arweave, createVideoMeta } from '../utils'
import { useEffect, useState } from 'react'
import { css } from '@emotion/css'

// basic exponential backoff in case of gateway timeout / error
const wait = (ms) => new Promise((res) => setTimeout(res, ms))

export default function Home() {
  const [videos, setVideos] = useState([])

  // when app loads, fetch videos
  useEffect(() => {
    getVidoes()
  }, [])

  // fetch data from Arweave
  // map over data and fetch metadata for each video then save to local state
  async function getVidoes(topicFilter = null, depth = 0) {
    try {
      const results = await arweave.api.post('/graphql', query)
        .catch(err => {
          console.error('GraphQL query failed')
          throw new Error(err);
        });
      const edges = results.data.data.transactions.edges
      const videos = await Promise.all(
        edges.map(async edge => await createVideoMeta(edge.node))
      )
      let sorted = videos.sort((a, b) => new Date(b.request.data.createdAt) - new Date(a.request.data.createdAt))
      sorted = sorted.map(s => s.request.data)
      setVideos(sorted)
    } catch (err) {
      await wait(2 ** depth * 10)
      getPostInfo(topicFilter, depth + 1)
      console.log('error: ', err)
    }
  }

  return (
    <div className
      {/* map over videos and display them in the UI */}
      {
        videos.map(video => (
          <div className={videoContainerStyle} key={video.URI}>
            <video key={video.URI} width="720px" height="405" controls className={videoStyle}>
              <source src={video.URI} type="video/mp4"/>
            </video>
            <div className
              <h3 className{video.title}</h3>
            </div>
            <p className={descriptionStyle}>{video.description}</p>
          </div>
        ))
      }
    </div>
  )
}

const videoStyle = css`
  background-color: rgba(0, 0, 0, .05);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  `

const containerStyle = css`
  width: 720px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
`

const titleContainerStyle = css`
  display: flex;
  justify-content: flex-start;
  margin: 19px 0px 8px;
`

const videoContainerStyle = css`
  display: flex;
  flex-direction: column;
  margin: 20px 0px 40px;
`

const titleStyle = css`
  margin:  0;
  fontSize: 30px;
`

const descriptionStyle = css`
  margin: 0;
`
</code></pre>
<p>In this file we've:</p>
<ol>
<li>Created a function named <code>getVidoes</code> that calls the GraphQL API and returns the video data</li>
<li>With the data ID, we can query the Arweave gateway to retrieve the metadata, like the video name, description, and URI.</li>
<li>We display the videos and their metadata in the UI</li>
</ol>
<p>Congratulations, you've just built a full stack decentralized video app! 🚀🚀🚀</p>
<h3 id="exporting">Exporting</h3>
<p>To deploy your application to the permaweb, you need to export it as HTML / a single page app.</p>
<p>To do this, add the following to your <code>scripts</code> in <strong>package.json</strong>:</p>
<pre><code class="json language-json">"export": "next build && next export"
</code></pre>
<p>Next, run the export command to export your app:</p>
<pre><code class="sh language-sh">npm run export
</code></pre>
<h3 id="nextsteps">Next steps</h3>
<p>💡 Consider deploying your entire app to Arweave. You can do this manually with <a href="https://github.com/textury/arkb">arkb</a>, or use tools like <a href="https://spheron.network/">SpheronHQ</a> to make it easier with things like DNS support.</p>
<p>You can deploy with <code>arkb</code> by using the <code>use-bundler</code> flag:</p>
<pre><code class="sh language-sh">arkb deploy . --wallet ../wallet --use-bundler http://bundler.arweave.net:10000
</code></pre>
<p>💡 Consider adding filtering by tags, enabling users to add tags and then filter them based on a topic or tag. See <a href="https://github.com/dabit3/perma">this repo</a> for a reference</p>
<p>💡 Consider implementing a social graph with <a href="https://lens.xyz/">Lens Protocol</a></p><div class='ms-display-block'><a href='https://github.com/dabit3/arweave-workshop'>View Github <br><img src='https://opengraph.githubassets.com/GEh9V3/dabit3/arweave-workshop'></a></div>				</div>

				<!-- Load Bludit Plugins: Page End -->
								</div>
			</div>
						<div class="sidebar-column col-xl-3 col-lg-4 hidden-xs hidden-sm hidden-md">
  <div class="ms-card ms-border ms-fill">
    <a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/apps">Apps <div class="ms-label ms-border ms-secondary" style="float:right;">32</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/blog">Blog <div class="ms-label ms-border ms-secondary" style="float:right;">12</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/boilerplate">Boilerplate <div class="ms-label ms-border ms-secondary" style="float:right;">38</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/chatgpt">ChatGPT <div class="ms-label ms-border ms-secondary" style="float:right;">10</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/dapp">dApp <div class="ms-label ms-border ms-secondary" style="float:right;">14</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/ecommerce">Ecommerce <div class="ms-label ms-border ms-secondary" style="float:right;">11</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/ethereum">Ethereum <div class="ms-label ms-border ms-secondary" style="float:right;">11</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/nextjs">Nextjs <div class="ms-label ms-border ms-secondary" style="float:right;">258</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/nft">NFT <div class="ms-label ms-border ms-secondary" style="float:right;">12</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/portfolio-page">Portfolio Page <div class="ms-label ms-border ms-secondary" style="float:right;">13</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/starter">Starter <div class="ms-label ms-border ms-secondary" style="float:right;">51</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/tailwind-css">Tailwind CSS <div class="ms-label ms-border ms-secondary" style="float:right;">64</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/templates">Templates <div class="ms-label ms-border ms-secondary" style="float:right;">18</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/typescript">TypeScript <div class="ms-label ms-border ms-secondary" style="float:right;">60</div></a><a class="ms-text-secondary ms-display-block" style="padding:5px !important;" href="https://aestheticode.net/tag/website">WebSite <div class="ms-label ms-border ms-secondary" style="float:right;">11</div></a>
  </div>
  <footer class="">
      <div class="container">
          <p style="font-size:12px !important;"><a href="https://aestheticode.net/privacy-policy" class="ms-text-light">Privacy Policy</a></p>
      </div>
  </footer>
</div>
					</div>
	</div>
</section>

	<!-- Footer -->
	

	<!-- Include Jquery file from Bludit Core -->
	<script src="https://aestheticode.net/bl-kernel/js/jquery.min.js?version=3.15.0"></script>

	<!-- Include javascript Bootstrap file from Bludit Core -->
	<script  src="https://aestheticode.net/bl-kernel/js/bootstrap.bundle.min.js?version=3.15.0"></script>

	<!-- Execute Bludit plugins for the hook "Site body end" -->
	
	<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/javascript.min.js"></script>

	
	<script>
	$(document).ready(function() {
			hljs.highlightAll();
						var loadedposts = [];
	    let $container = $('#scollcontainer').infiniteScroll({
				path: '.page-link',
				append: '.postxxf',
	        // path: function() {
	        //     return `https://aestheticode.net/getpage.php?page=${this.pageIndex + 1}`;
	        // },
	        // responseBody: 'json',
	        status: '.scroll-status',
	        history: true,
	    });

	    // $container.on('load.infiniteScroll', function(event, body) {
	    //     // Compile body data into HTML
			// 		if (body.data.length <= 0) {
      //       // Set Infinite Scroll status to "end"
      //       $container.infiniteScroll('option', 'status', 'end');
      //       return;
      //   }
	    //     let itemsHTML = body.data.map(getItemHTML).join('');
	    //     // Convert HTML string into elements
	    //     let $items = $(itemsHTML);
	    //     // Append item elements
	    //     $container.infiniteScroll('appendItems', $items);
	    // });

	    // Load initial page
	    $container.infiniteScroll('loadNextPage');

	    //------------------//

	    function getItemHTML(data) {
	        return `<div class="postxxf ms-card ms-border ms-inline ms-fill">
	            <div class="row">
	                <a href="${data.permalink}" class="row">
	                    <div class="ms-card-pic col-md-3">
	                        <img src="${data.coverImage}" alt="${data.title}" />
	                    </div>
	                    <div class="col-md-9">
	                        <div class="ms-card-title">
	                            <h4 style="font-size: 24px !important;">${data.title}</h4>
	                        </div>
	                        <div class="ms-card-content">
	                            <p>
	                                ${data.description ? data.description : ''}
	                            </p>
	                        </div>
	                    </div>
	                </a>
	            </div>
	        </div>`;
	    }
	});
	</script>
</body>

</html>