Bundlr Networkis in the Enterprise Storage Industry

Bundlr Network

In this article, I will be showing you how to create a Dapp that allows us to store data on the Arweave network, using bundlr on testnet. Before going forward, let’s see what are we going to build today. https://www.loom.com/share/808aff5aa5d84ead93c106cfb96ff05f?t=70 Here is the deployed link if you want to try it out: https://bundlr-arweave.netlify.app/ Tech Stack and Libraries I’ve Used: Nextjs Chakra UI RainbowKit Wagmi Bundlr Client Well, Well, Let’s Go Through What Is Arweave and Bundlr First (From the Doc). If you enjoy videos like me, here is a video for you: https://www.youtube.com/watch?v=DQbwiiXMtMo Arweave Arweave makes information permanence sustainable. Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever — for the very first time. Bundlr Bundlr makes web3 data storage on Arweave accessible by making it as fast, easy, and reliable as traditional data storage. Arweave is the only truly decentralized, permanent data storage solution. Bundlr increases the number of transactions conducted on Arweave by 4,000% without sacrificing security or usability and is around ~3,000x faster at uploading data. Bundlr currently accounts for over 90% of data uploaded to Arweave. It enables infinite scalability and enables instant and guaranteed transaction finality. It is a multichain solution and is compatible with leading blockchains including Ethereum, Solana, Avalanche, Polygon, and many more. Steps We Have to Follow to Upload to Arweave using Bundlr Connect wallet Initialize the Bundlr client Add funds ($BNDLR tokens) Upload the files we will be bulding this app on polygon mumbai testnet. Bundlr has a devnet which allows you to use devnet/testnet cryptocurrency networks to pay for storage. The devnet node behaves exactly as a mainnet node - other than data is never moved to Arweave and will be cleared from Bundlr after a week. Note: Let's Get Building Keep the completed code open on the side for a better understanding . Github 1. Setting up the project Setup a Nextjs project with tailwind CSS and Chakra UIYou can use package to get done with setup quickly or just clone this Also, install these two dependencies create-web3-frontend . project repo yarn add @bundlr-network/client bignumber.js 2. Connect wallet As we are using Rainbow kit this step is very easy in index.tsx const Home: NextPage = () => {
  const { data } = useAccount();
  if (!data) {
    return (
      <div className='justify-center items-center h-screen flex '>
        <VStack gap={8}>
          <Text className='text-4xl font-bold'>
            Connect your wallet first
          </Text>
          <ConnectButton />
        </VStack>
      </div>
    )
  }

  if (activeChain && activeChain.id !== chainId.polygonMumbai) {
    return (
      <div className='justify-center items-center h-screen flex '>
        <VStack gap={8}>
          <Text className='text-4xl font-bold'>
            Opps, wrong network!! Switch to Polygon Mumbai Testnet
          </Text>
          <ConnectButton />
        </VStack>
      </div>
    )
  }
} And with these 5–6 lines of code, we are done with connecting the wallet 🎉 We have also added a condition to check if a user is on the Mumbai test, as we will be using polygon Mumbai testnet for this article. In while configuring Rainbow kit we have configures it for using polygon Mumbai testnet _app.jsx const { chains, provider } = configureChains(
  [chain.polygonMumbai],
  [
    jsonRpcProvider({ rpc: () => ({ http: process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL }) }),
    publicProvider(),
  ]
); So, Rainbow kit will also take care of changing the network for us, this is how this warning will look like 3. Initializing the Bundlr Let’s create a context for bundlr, so we can maintain all bundlr related logic form there. Create . Inside this file let's create the context now, you can see the completed version of the file bundlr.context.tsx here import { WebBundlr } from '@bundlr-network/client';
import { useToast } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import { providers, utils } from 'ethers';
import React, { createContext, useContext, useEffect, useState } from 'react'

const BundlrContext = createContext<IBundlrHook>({
    initialiseBundlr: async () => { },
    fundWallet: (_: number) => { },
    balance: '',
    uploadFile: async (_file) => { },
    bundlrInstance: null
});

const BundlrContextProvider = ({ children }: any): JSX.Element => {
    const toast = useToast()
    const [bundlrInstance, setBundlrInstance] = useState<WebBundlr>();
    const [balance, setBalance] = useState<string>('');

    useEffect(() => {
        if (bundlrInstance) {
            fetchBalance();
        }
    }, [bundlrInstance])

    const initialiseBundlr = async () => {
        const provider = new providers.Web3Provider(window.ethereum as any);
        await provider._ready();
        const bundlr = new WebBundlr(
            "https://devnet.bundlr.network",
            "matic",
            provider,
            {
                providerUrl:
                    process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
            }
        );
        await bundlr.ready();
        setBundlrInstance(bundlr);
    }

    async function fundWallet(amount: number) {
        try {
            if (bundlrInstance) {
                if (!amount) return
                const amountParsed = parseInput(amount)
                if (amountParsed) {
                    toast({
                        title: "Adding funds please wait",
                        status: "loading"
                    })
                    let response = await bundlrInstance.fund(amountParsed)
                    console.log('Wallet funded: ', response)
                    toast({
                        title: "Funds added",
                        status: "success"
                    })
                }
                fetchBalance()
            }
        } catch (error) {
            console.log("error", error);
            toast({
                title: error.message || "Something went wrong!",
                status: "error"
            })
        }
    }

    function parseInput(input: number) {
        const conv = new BigNumber(input).multipliedBy(bundlrInstance!.currencyConfig.base[1])
        if (conv.isLessThan(1)) {
            console.log('error: value too small')
            toast({
                title: "Error: value too small",
                status: "error"
            })
            return
        } else {
            return conv
        }
    }

    async function fetchBalance() {
        if (bundlrInstance) {
            const bal = await bundlrInstance.getLoadedBalance();
            console.log("bal: ", utils.formatEther(bal.toString()));
            setBalance(utils.formatEther(bal.toString()));
        }
    }

    async function uploadFile(file) {
        try {
            let tx = await bundlrInstance.uploader.upload(file, [{ name: "Content-Type", value: "image/png" }])
            return tx;
        } catch (error) {
            toast({
                title: error.message || "Something went wrong!",
                status: "error"
            })
        }
    }

    return (
        <BundlrContext.Provider value={{ initialiseBundlr, fundWallet, balance, uploadFile, bundlrInstance }}>
            {children}
        </BundlrContext.Provider>
    )
}

export default BundlrContextProvider;

export const useBundler = () => {
    return useContext(BundlrContext);
} For initializing the Bundlr we will be using the method from the code above initialiseBundlr and the code is also pretty straightforward const bundlr = new WebBundlr(
            "https://devnet.bundlr.network",
            "matic",
            provider,
            {
                providerUrl:
                    process.env.NEXT_PUBLIC_ALCHEMY_RPC_URL,
            }
        );
        await bundlr.ready();
        setBundlrInstance(bundlr); We are creating an instance of the Bundlr client and storing it in a state variable. Read more about For using Bundlr with testnet . bundlr client read here In order to use the devnet, you need to use as the node and set the provider url to a correct testnet/devnet RPC endpoint for the given chain. https://devnet.bundlr.network Our, RPC URL will look something like this, as we will be using polygon testnet NEXT_PUBLIC_ALCHEMY_RPC_URL=https://polygon-mumbai.g.alchemy.com/v2/{{alchemy_project_id}} Read, about all the supported . currencies/ networks by bundlr here 4. Add funds ($BNDLR tokens) 💸 We already have data about our in the bundlr context, and we also have a method which we will be using to add the funds. Adding funds is also pretty straightforward, just use the method on the bundlrInstance and pass the amount you want to fund the wallet with balance fundWallet fund let response = await bundlrInstance.fund(amountParsed) In , make these changes index.tsx const Home: NextPage = () => {
    const { initialiseBundlr, bundlrInstance, balance } = useBundler();
    ...

    // at last
    if (!balance || Number(balance) <= 0) {
        return (
          <div className='justify-center items-center h-screen flex '>
            <VStack gap={8}>
              <ConnectButton />
              <Text className='text-4xl font-bold'>
                Opps, out of funds!, let's add some
              </Text>
              <FundWallet />
            </VStack>
          </div>
        )
      }
} Now let’s create the component. Create <FundWallet /> components/FundWallet.tsx import React from 'react'
import { Button, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, Text, VStack } from '@chakra-ui/react'
import { useBundler } from '@/state/bundlr.context';

const FundWallet = () => {
    const { fundWallet, balance } = useBundler();
    const [value, setValue] = React.useState('0.02')

    return (
        <div className='mt-12'>
            <VStack gap={6}>
                <Text fontSize={'xl'}>
                    Your current balace is: {balance || 0} $BNDLR
                </Text>
                <NumberInput className='mx-auto' step={0.01} defaultValue={value}
                    onChange={(valueString) => setValue(valueString)}
                >
                    <NumberInputField />
                    <NumberInputStepper >
                        <NumberIncrementStepper />
                        <NumberDecrementStepper />
                    </NumberInputStepper>
                </NumberInput>

                <Button onClick={() => fundWallet(+value)}>💸 Add Fund</Button>
            </VStack>
        </div>
    )
}

export default FundWallet 5. Upload images 📷 Now, as we’ve already added the funds, now we can upload the images (or any other files), to the Arweave network. In , add the following code at the end of the file index.tsx return (
    <div className='justify-center items-center h-screen flex'>
      <Stack direction={['column', 'row']} justifyContent={'space-around'} width={'full'} alignItems={'center'}>
        <VStack gap={8}>
          <ConnectButton />
          <FundWallet />
        </VStack>
        <VStack gap={8}>
          <Text fontSize={'4xl'}>
            Select Image To Upload
          </Text>
          <UploadImage />
        </VStack>
      </Stack>
    </div>
  ); Now, let’s create the component <UploadImage /> import React from 'react'
import { Box, Button, Text } from '@chakra-ui/react';
import { useBundler } from '@/state/bundlr.context';
import { useRef, useState } from 'react';

const UploadImage = () => {
    const { uploadFile } = useBundler();
    const [URI, setURI] = useState('')
    const [file, setFile] = useState<Buffer>()
    const [image, setImage] = useState('')
    const hiddenFileInput = useRef(null);

    function onFileChange(e: any) {
        const file = e.target.files[0]
        if (file) {
            const image = URL.createObjectURL(file)
            setImage(image)
            let reader = new FileReader()
            reader.onload = function () {
                if (reader.result) {
                    setFile(Buffer.from(reader.result as any))
                }
            }
            reader.readAsArrayBuffer(file)
        }
    }

    const handleClick = event => {
        hiddenFileInput.current.click();
    };

    const handleUpload = async () => {
        const res = await uploadFile(file);
        setURI(`http://arweave.net/${res.data.id}`)
    }

    return (
        <div className='flex flex-col mt-20 justify-center items-center w-full'>
            <Button onClick={handleClick} className='mb-4'>
                {image ? 'Change Selection' : 'Select Image'}
            </Button>
            <input
                accept="image/png, image/gif, image/jpeg"
                type="file"
                ref={hiddenFileInput}
                onChange={onFileChange}
                style={{ display: 'none' }}
            />

            {
                image &&
                <Box
                    display='flex'
                    alignItems='center'
                    justifyContent='center'
                    width='100%'
                    py={40}
                    bgImage={`url('${image}')`}
                    bgPosition='center'
                    bgRepeat='no-repeat'
                    mb={2}
                >
                    <button className='bg-gray-200 rounded px-8 py-2 text-black hover:bg-gray-100' onClick={handleUpload}>Upload File</button>
                </Box>
            }

            {
                URI && <Text className='mt-4'>
                    <Text fontSize='xl'> Uploaded File:</Text> <a href={URI} target="_blank">{URI}</a>
                </Text>
            }
        </div>
    )
}

export default UploadImage And, with this in place, we can now upload the files to the Arweave network 🚀 Further Improvement: Right now we are only uploading images, we can add support for other formats as well (video, audio, anything) Store URLs of uploaded images with wallet address in Supabase and show the list of files previously uploaded by users when they connect their wallet Completed code: GitHub Also published . here

Permanent File Storage for Web3 Apps With Arweave, Bundlr, Next.js, RainbowKit, and Wagmi

231 Stories To Learn About Blockchain Writing Contest

129 Stories To Learn About Tatum_io

186 Stories To Learn About Web3.0

Flashbots can be real lifesavers sometimes. Let’s look at a real-life event One of our wallets had been hacked some time back, and all the Ether in that wallet was taken out. It was an issue but the bigger issue was that this wallet was the owner of a contract we deployed and it still had the ownership, but it didn’t have any Ether left, so we couldn’t transfer the Ownership to another wallet as we couldn’t pay for gas fees. Well, just load the wallet with some Ether and transfer the tokens. It’s so easy, right? Well not really! There was a high probability that the person who hacked the wallet had set up a bot that would immediately take out all the assets transferred to the wallet. So, if we transfered any Ether to the wallet, there was a high probability that it would be taken out immediately. What’s the solution then? It’s simple. We needed to transfer some Ether to the wallet and transfer the ownership of the contract before the bot that was set up by the hacker could perform any action. It had to be fast and  this meant it had to be done in a single block Could we do it manually? , that’s when the Flashbots come to rescue Noooo Let’s understand some terms first Maximal Extractable Value (MEV) Maximal Extractable Value (MEV) represents excess value captured by miners (or validators) from users in a cryptocurrency network. This excess value often comes from reordering user'’ transactions to maximize fees or inserting new transactions that allow a miner to front-run users’ transactions. More: Maximal extractable value (MEV) | ethereum.org Flashbots Flash boats refer to automated programs that use high-speed communication and data processing technologies to execute trades on decentralized exchanges (DEXs) or other types of blockchain-based trading platforms. Like traditional flash bots, these programs use algorithms to analyze market data and identify trading opportunities in real-time. They can make trades based on a wide range of factors, such as changes in the prices of various cryptocurrencies or tokens, news events, and changes in market liquidity. Back to the problem For this article, I’ve tried to replicate a similar scenario to the one described earlier. We have a wallet that has been hacked, the hacker has taken out all the Eth from that wallet, but that wallet still has some ERC20 tokens left inside it, we want to take these tokens out and transfer them to another wallet. Let’s see the code You can clone the starter code from this . First of all, set the environment variables Repo TOKENS=Address of ERC20 token which we need to takeout of that wallet  
RESCUER=Private key of wallet in which we want to transfer those tokens
HACKED_WALLET=Private key of wallet that has been hacked Let’s define some constants first const provider = new providers.JsonRpcProvider('<https://rpc.ankr.com/eth_goerli>')
const authSigner = Wallet.createRandom()
const flashbotProvider = await FlashbotsBundleProvider.create(
        provider,
        authSigner,
        FLASHBOTS_URL
    )
const rescuer = new Wallet(RESCUER).connect(provider)
const hackedWallet = new Wallet(HACKED_WALLET).connect(provider) We have created all the signers we need, and we are using Ankr as the RPC providers. We will be using a method from called . flashbotProvider sendBundle This method takes an array of Transactions that we want to perform in a single block, and as a second argument, it takes the number of blocks in which we want to include the transactions. Cool? Alright. Let’s get the current block number first. provider.on('block', async (blockNo) => {
	const targetBlock = blockNo + 1;
}) Out target block is the next block that is to be produced. And now let’s use the method sendBundle const resp = await flashbotProvider.sendBundle([
            {
                signer: rescuer,
                transaction: {
                    chainId: 5,
                    type: 2,
                    to: hackedWallet.address,
                    value: utils.parseEther('0.01'),
                    maxFeePerGas: utils.parseUnits('20', 'gwei'),
                    maxPriorityFeePerGas: utils.parseUnits('13', 'gwei')
                }
            },
            {
                signer: hackedWallet,
                transaction: {
                    chainId: 5,
                    type: 2,
                    to: TOKENS,
                    gasLimit: '70000',
                    data: iface.encodeFunctionData("transfer", [
                        rescuer.address,
                        utils.parseEther('200')
                    ]),
                    maxFeePerGas: utils.parseUnits('20', 'gwei'),
                    maxPriorityFeePerGas: utils.parseUnits('13', 'gwei')
                }
            }
        ], targetBlock) Basically, we will be performing two transactions We need to transfer some Ether to the wallet that has been hacked to provide it with the gas fees that will be used to transfer the ERC20 tokens to the rescuer wallet. We now call the transfer function from the ERC20 contract using the signer of the hacked wallet and transfer all the tokens to the rescuer wallet. These transactions can be anything Like transfer, an NFT, Transfer Ownership of a contract, call any contract method. And that’s it. Also published here. Want to connect? DM me on twitter @ or pateldeep_eth Linkedin Want to explore more examples? https://github.com/flashbots/searcher-sponsored-tx Also, Read How to Find Length of String in Solidity — From the Smart Contract of “ens” Permanent File Storage for Web3 Apps With Arweave, Bundlr, Next.js, RainbowKit, and Wagmi How to develop and deploy smart contracts with Foundry & Openzeppelin

Using Flash Bots to Rescue Assets from a Compromised Wallet

https://youtu.be/WqxQT_5kVck Gone are the days when big tech companies like Meta decide when and how to monetize your personal information. Or are they? With the advent of blockchain and web3, the technical capabilities may be out there – but how exactly do we onboard a critical mass of everyday users? How do we speed up the journey towards a truly “DeData” world? From permissionless social media platforms to decentralized, self-sovereign  identity (DID), web3 technology has the potential to completely transform the way data is owned and used. Users finally have the opportunity to take back control of their data. We sat down with Dylan Dewdney, co-founder and CEO of DeData Studios to talk about his vision and inspiration for the project, as well as his highlights from the inaugural event that was hosted during Berlin Blockchain Week in September this year. DeData Salon What is DeData? DeData, which stands for “Decentralized Data”, is a concept describing an ideal world, where individuals enjoy full control over who can access their personal information. In order to on-board the masses to web3, the same virtual goods and services – from e-commerce to social media – need to be provided by web3. Speaking to the Oracle Summit team, Dylan said that DeData Studios is working towards accelerating the transition into the ideal self-sovereign data world, by providing a full suite of easy-to-use Web3 middleware infrastructure. “Think of it like the AWS of Web3,” he said. The projects that make up the consortium include , , and , with two more projects in the pipeline –  Glacier and Canyon. Kylin Network, a data L1 and oracle network on Polkadot, was an Oracle Partner at the Blockchain Oracle Summit: Berlin. NFT3 Kylin Ruby Vinci Inspiration for a “DeData World” Dylan’s inspiration for DeData came from more than a decade of experience in the blockchain space. He first discovered Bitcoin in late 2011, and then got into mining by late 2012. Living in Toronto, he was able to be close to the Ethereum founding team, and was part of the Ethereum ICO. By 2017, he started building. Dylan’s first project was Harbour DAO, alongside his co-founder at the time, Dean Eigenmann. He was then part of the GTM strategy for Beam and later Head of Growth for Ambire (formerly AdEx) before co-founding both Kylin Network and NFT3. Kylin is a Layer-1 data blockchain, built on Polkadot that features an innovative, configurable data oracle. While many oracles focus on transmitting price data, Dylan’s work at Kylin involves verifying non-price data from the outside world on the blockchain. Through this work studying the movement of real-word data on-chain, Dylan noticed that while there were many needs in the decentralized data economy that were not yet met – even the basic tools developers need to meet these needs are not readily available or easy to use. Enabling a Decentralized Future for All And this is where DeData Studios comes in, providing developers with the tools and middleware needed to on-board the masses to web3. While it might feel, at times, that every web2 company has to interface with web3 in some way to stay relevant, it is still no easy feat. Most of these organizations are constrained by limited business models and convoluted bureaucracy. Training departments of thousands of developers to become Web3 native could take a generation. Replacing entire technical teams with full-stack developers would cost a bomb. So, the products developed by DeData Studios have been built with the needs of non-Web3 native organizations in mind. Each project in the DeData consortium features plug-and-play software development kits (SDKs), that can be leveraged in a modular fashion based on specific use cases. As big businesses start adopting Web3 technology, so will their users. This is how DeData Studious plans to contribute to a more decentralized future. A Salon for Intellectuals Beyond tools and infrastructure, the DeData movement also involves education and collaboration. In September this year, DeData produced the first ever DeData Salon during Berlin Blockchain Week. The idea behind the event was to recreate the 18th Century Salon with a modern twist. The main aim was to gather leading minds in the industry to discuss their work and share new ideas in a relaxed setting. Anyone working on decentralized data in any way or form was invited to participate, including projects that could be seen as DeData’s ‘competitors’. Asked about why potential competitors were included, Dylan said that, collaboration is far more productive than competition. “The Web3 data sovereignty narrative is still brewing, so it’s important to convene together, share resources and work together towards this common goal and I’m happy to commit our resources to building this new future together”, he said. The DeData Salon @ Berlin Blockchain Week Dylan’s vision came to life during Berlin Blockchain Week this year with the DeData Salon attracting almost 200 builders and professionals working at the forefront of decentralised data technology. Among protocols in attendance were DeFi heavyweights, and . The inaugural Salon also attracted the likes of , and multimedia giants . The speaker list was even more impressive with presentations from over 20 subject matter experts from around the world, including , and . Curve Balancer Affinidi Polygon Tencent iExec Kleros IPFS An obvious personal highlight for Dylan at the salon was with whistleblower Edward Snowden. The hour-long discussion centered around the architecture of the internet today, and how it could be improved to benefit and protect everyday people and their data. Members of the audience got the chance to pose questions directly to Edward Snowden after the session, which was moderated by Mindaugas Savickas, GM of Ruby Protocol. his virtual fireside chat With such a stacked program, however, it was difficult for Dylan to identify just one highlight. Below is a list of his favorite moments from the rest of the day. The General Manager of Ruby Protocol, Mindaugas, kicked things off with his talk on the importance of data sovereignty and how Ruby is improving the efficiency of on-chain data management. : Ruby Protocol’s Presentation : Co-founder and CEO of , Evin McMullen sat down with the co-founder of , David Phelps, to talk about her experience building decentralized data applications for real-world use cases. This philosophical discussion covered the potential of DeData technology and the challenges faced in generating mass adoption. Evin is also an Advisor to DeData Studios. Fireside chat with Evin McMullen Disco XYZ JokeDAO : Founder, Bruce Pon, presented key lessons learnt from Ocean’s work powering the decentralized data economy over the past decade, and what the team hopes to achieve moving forward. Ocean’s Presentation Ocean Protocol : Former Diem executive and current COO at , Kurt Hemecker, provided insights into Mina Protocol’s use of Zero-Knowledge Proofs (ZKPs) and the unique use-cases that can benefit from the privacy that the layer-1 protocol provides. Mina Foundation’s Presentation Mina Foundation : Lukas Bresser, head of ecosystem growth at shared his perspective on the role of IPFS and in shaping the future of the data economy. He presented on the different use-cases of IPFS and how the decentralized storage system was designed to completely replace the HTTP protocol. IPFS Presentation IPFS Filecoin : Both panel discussions from the day rounded up Dylan’s list of highlights. featured an interesting balance of philosophical and technical insights. The session touched on the true meaning of data ownership, as well as the potential and risks associated with decentralizing the control of data. The panel featured Amelia Guertin, COO of , Garry Krugljakow, Founder & CEO of and LDF, Head of Partnerships at . The discussion was moderated by Bianca Buzea, Developer Relations Engineer at . Panel Discussions Panel 1 Bundlr Network 0VIX Disco XYZ Balancer , moderated by Editor-in-Chief, Kristina Lucrezia Cornèr, was a lively discussion about the key socioeconomic differences brought about by Web3 and the advantages and disadvantages of decentralized technology. The panel featured Paul Claudius, Co-founder of , CTO of , Hoon Kim, Matt Gubriel, Growth Manager from and Riccardo Lamanna , Founder of . Highlights from this panel were also featured in . Panel 2 Cointelegraph DIA Astar Network Redstone Finance OpenQ this article by Cointelegraph The inaugural DeData Salon is just the first of a series of Salons that DeData Studios plans to host as part of their commitment to accelerating our journey towards a fairer future for all.  Look out for the next Salon taking place in a city near you! Finally, how can one participate in the burgeoning “DeData” world? According to Dylan, it isn’t daunting or difficult at all. Anyone interested in decentralisation in any way or form can start by educating themselves on the different projects and ideas that are out there. that took place during the DeData Salon could be a good start. Then get to know the different communities a little better by following your favorite projects on Twitter and participating in their Discord channels. Watching the different conversations Asked how everyday people can participate in the DeData movement, Dylan said nothing is more valuable than participating in and stress-testing the latest products. “Take your first steps into the world of decentralized identity (DID) by creating your very own NFT3,” Dylan said. Find out more about the . NFT3 Pass here Keep up to date with all the latest from DeData Studios, including new products, salons and more: DeData Website DeData Twitter DeData Youtube Dylan Dewdney Twitter

DeData Studios: Helping Users Take Back Control of Their Data

Decent Land Labs proudly presents the Molecular Execution Machine (MEM), a revolutionary serverless functions platform engineered for web3 applications. Based on the SmartWeave framework, MEM is a culmination of advanced technologies like , and . By simplifying intricate cryptographic elements, MEM empowers developers to concentrate on crafting groundbreaking applications without the hassle of infrastructure management or specialized development. molecule.sh Arweave 3EM The Genesis of MEM Our journey with MEM began as an evolution of EXM, our previous serverless functions platform that was sunset by Community Labs. Over the past year, Decent Land Labs has deployed numerous projects on EXM. Recognizing the need for a more robust and open-source solution, we invested months in R&D and are thrilled to announce MEM's official launch. MEM's Feature Spectrum Molecular Execution Machine is not just a platform; it's a comprehensive ecosystem offering: : MEM supports an array of programming languages for smart contract development, including but not limited to JavaScript, TypeScript, Rust, C++, and Solidity. Multi-Language Compatibility : Utilizing the library, MEM smart contracts can authenticate callers across multiple blockchain networks like Ethereum, Solana, and Polkadot. Cross-Chain Authentication molecule.sh : MEM eliminates the need for in-depth blockchain knowledge, allowing developers to get started effortlessly with its SDK or CLI. Crypto-Agnostic Environment : MEM ensures a secure runtime for smart contract execution, safeguarding against potential vulnerabilities. Robust Security : MEM offers gasless and walletless interactions, providing a seamless user experience. Flexible Payment Options Technical Architecture At its core, MEM leverages 3EM for smart contract runtime, while Bundlr & Arweave act as the data availability layer, ensuring secure and permanent storage. MEM uses ’s ‘Storage Based Consensus Paradigm’ integration further extends its capabilities, enabling financial dApps with gassless and near-instant payment options. everPay Real-World Applications MEM's versatility makes it ideal for a range of applications: : Enable self-sovereign identities across multiple chains. Decentralized Identity Management : Create a censorship-resistant platform for content creators. Content Publishing : Deploy cost-effective, gasless API applications. Serverless API Gateway : Ensure document integrity and authenticity. Immutable Document Signing What's Next? In 2023, MEM aims to introduce: Full EVM support Data encryption and decryption Integration with fiat payment processors like Stripe and NoRamp Get Started MEM is currently in the private beta testing phase. Connect with us on or for access, or sign up at . Twitter Discord mem.tech Additional Resources Documentation Twitter Discord Stay tuned and to Decent Land Labs' for the latest updates. SUBSCRIBE Hackernoon Happy building! Also published . here

Introducing Flexible, Scalable Computation With Decent Land Labs Molecular Execution Machine

Presentamos la computación flexible y escalable con la máquina de ejecución molecular de Decent Land Labs

Présentation du calcul flexible et évolutif avec la machine d'exécution moléculaire de Decent Land Labs

डिसेंट लैंड लैब्स की आणविक निष्पादन मशीन के साथ लचीली, स्केलेबल गणना का परिचय

Decent Land Labs の分子実行マシンによる柔軟でスケーラブルな計算の導入

Apresentando computação flexível e escalável com a máquina de execução molecular da Decent Land Labs

Giới thiệu khả năng tính toán linh hoạt, có thể mở rộng với Máy thực thi phân tử của Decent Land Labs

通过 Decent Land Labs 的分子执行机引入灵活、可扩展的计算

React Server Components are a new feature that lets you build apps that span the server and client, combining the interactivity of client-side apps with the performance of server rendering. In this tutorial, you’ll learn what React Server Components are, how they work, and how to use them in a Next.js app. What are React Server Components? are React components that run on the server and stream their output to the client. They can access data directly from the backend, without sending it to the client or bundling it into the JavaScript code. This reduces the network and bundle size, resulting in faster loading and rendering. React Server Components React Server Components have a special file extension: . They can only use modules or other server components as dependencies, and they cannot use any browser APIs or client-side features. They can render other server components, client components, or shared components. .server.js Node.js Client components are regular React components that run on the browser and have a file extension. They can use any browser APIs or client-side features, and they can render other client components or shared components. .client.js Shared components are React components that can run on both the server and the client and have a file extension. They can use any features that are available on both environments, such as hooks, context, or custom components. They can render other shared components. .js React Server Components can pass data to client components using props. The data passed from server to client is serialized and deserialized using a custom format that preserves references and supports streaming. This means that data can be sent incrementally as it becomes available, and circular or repeated data structures can be handled efficiently. How do React Server Components work? React Server Components work by using a special renderer that streams the output of server components to the client as a -like format. The client then parses the stream and renders the corresponding client components using . The server and the client communicate using a protocol that supports streaming, such as . JSON ReactDOM HTTP/2 The rendering process of React Server Components has three phases: The server renders the server components and sends their output to the client as a stream of data. The output includes information about which client components need to be rendered on the browser, along with their props. Server rendering: The client receives the stream of data from the server and renders the client components using . The client also keeps track of which server components have been rendered and which ones are still pending. Client rendering: ReactDOM The client compares the rendered output of the server components with the expected output based on their props. If there is any mismatch, the client requests a re-render of those server components from the server. Reconciliation: The reconciliation phase ensures that the server and the client are always in sync and that any changes in data or props are reflected correctly on both sides. How to use React Server Components in Next.js? is a popular framework for building React apps that supports both static and dynamic rendering. Next.js also supports as an experimental feature since . Next.js React Server Components version 13 To use React Server Components in Next.js, we need to enable them in our file: next.config.js module.exports = { 
  experimental: {
    appDirectory: true,
  },
}; This will enable the directory feature, which allows us to create an directory in our project root where we can place our components, components, and components. Next.js will automatically handle the file extensions and the rendering logic for us. app/ app/ server client shared Next, we need to that are for React Server Components: install some dependencies required npm install react@experimental react-dom@experimental
npm install @react-server/components @react-server/transport-webpack These packages provide the React Server Components , the , and the for bundling our code. renderer streaming protocol webpack plugin Next, we need to create an file that will be our entry point for our server-side rendering: app/pages/_app.server.js import { pipeToNodeWritable } from "react-dom/server";
import { createFromFetch } from "@react-server/components"; 

export default function handleRequest(req, res) {
  const manifest = require("../../.next/server-components-manifest.json"); 
  const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;

  const stream = createFromFetch( 
    fetch(url, {
      headers: req.headers, 
      method: req.method, 
      body: req,
    }),
    manifest
  );

  pipeToNodeWritable(stream, res, () => {});
} This file uses the function from to create a stream of data from the server components based on the request URL and the manifest file generated by Next.js. It then uses the function from to send the stream to the response object. createFromFetch @react-server/components pipeToNodeWritable react-dom/server Next, we need to create an file that will be our entry point for our client-side rendering: app/pages/_app.client.js import { hydrateRoot } from "react-dom";
import { createFromFetch } from "@react-server/components"; 
import App from "./_app";

hydrateRoot(
  document.getElementById("_next"),
  <App
    pageProps={{}} 
    Component={createFromFetch(
      new Response(document.getElementById("_next_data_").textContent, { 
        headers: { "Content-Type": "application/json" },
      })
    )}
  />
); This file uses the function from to render the client components into the existing DOM tree. It also uses the function from to create a stream of data from the server components based on the script tag that contains the initial data sent by the server. hydrateRoot react-dom createFromFetch @react-server/components Finally, we need to create an file that will be our shared component for wrapping our pages: app/pages/_app.js import React from "react";

export default function App({ Component, pageProps }) { 
  return <Component {...pageProps} />;
} This file simply renders the component that corresponds to the current page, along with any props that are passed to it. Now we can create our pages using . React Server Components For example, we can create an file that will be our home page: app/pages/index.server.js import React from "react";
import { useFetch } from "@react-server/components";
import Header from "../components/Header"; // shared component 
import Footer from "../components/Footer"; // shared component
import PostList from "../components/PostList.server"; // server component

export default function Home() {
  const posts = useFetch("/api/posts"); // fetch data from the backend

  return (
    <div>
      <Header /> {/* render a shared component */}
      <h1>Welcome to React Server Components</h1>
      <PostList posts={posts} /> {/* render a server component */}
      <Footer /> {/* render a shared component */}
    </div>
  );
} This file uses the hook from to fetch data from the backend using a relative URL. It then renders a shared component ( ), a server component ( ), and another shared component ( ). The component can render other server components or client components as needed. useFetch @react-server/components <Header /> <PostList /> <Footer /> PostList We can also create an file that will be our dynamic page for displaying a single post: app/pages/[id].server.js import React from "react";
import { useFetch } from "@react-server/components";
import Header from "../components/Header"; // shared component 
import Footer from "../components/Footer"; // shared component
import PostDetails from "../components/PostDetails.server"; // server component

export default function Post({ id }) {
  const post = useFetch(`/api/posts/${id}`); // fetch data from the backend

  return (
    <div>
      <Header /> {/* render a shared component */}
      <PostDetails post={post} /> {/* render a server component */}
      <Footer /> {/* render a shared component */}
    </div>
  );
} This file uses the hook from to fetch data from the backend using a dynamic URL based on the page parameter. It then renders a shared component ( ), a server component ( ), and another shared component ( ). The component can render other server components or client components as needed. useFetch @react-server/components <Header /> <PostDetails /> <Footer /> <PostDetails /> Conclusion React Server Components are a new feature that lets you build apps that span the server and client, combining the interactivity of client-side apps with the performance of server rendering. In this tutorial, you learned how to use React Server Components in a Next.js app, how they work, and what are the benefits and limitations of using them. React Server Components are still an experimental feature and may change in the future. However, they offer a promising way of building modern web apps with React. Sources https://nextjs.org/docs/advanced-features/react-18/server-components https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html https://zhuanlan.zhihu.com/p/340816128 https://www.freecodecamp.org/news/what-are-react-server-components/ https://www.plasmic.app/blog/how-react-server-components-work

BUNDLR NETWORK

bundlr.network

-- employees

Since n.d.

COMPANY RANKING

BUNDLR NETWORK

EVERGREEN INDEX #2354

Representing this company? Click here to claim and customize this page!

Bundlr Network WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

BUNDLR NETWORK

bundlr.network

-- employees

Since n.d.

COMPANY RANKING

BUNDLR NETWORK

EVERGREEN INDEX #2354

RELATED COMPANIESRANK

STORIES ABOUT BUNDLR NETWORK

Representing this company? Click here to claim and customize this page!

Bundlr Network WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!