InfiniteMirror | # 1 | Welcome, Mission, Biconomy Spotlight

M I S S I O N

Thank you for signing up to the InfiniteMirror, an pen-to-paper transmission of the InfiniteTeams network. We are here to provide you kernels of bias-towards-action information to learn and map modernity with technology and tools that get lost in the haze of water-cooler talk, misaligned understanding, and hype. Feel free to use the Table of Contents to navigate through the newsletter on what interests you and what verbs in our speech assist you in participating in this exciting world.

Winter has come but that is where the bravest make their mark. Perhaps it is also where the truest fires can be seen. We bring to you not ICO's or Tokens but companies and organizations who brave the hype-cycle lulls with fierce innovation and true-north spirit.

B I C O N O M Y S P O T L I G H T

There's so much banter about making web3 usable, more user-friendly, less inclined for the power-user. Truth is there are several strokes before this technology becomes magic, akin to the Carl Sagan's quote:

Any sufficiently advanced technology is indistinguishable from magic. For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.

Albeit, in order for sufficiently advanced tech to become magic, it must become invisible and before that stable/functional. Biconomy is a project towards a path of invisibility.

From an engineering perspective, the friction to move denizens of the web to a web3 ethos requires resolution in:

account abstraction
meta-transactions
gasless transactions
batched transactions
multi-chain relayers
smart-contract wallets

If you do not know what this means that is precisely the notion. These pain-points make up the aggregate of 'knowledge payload' one must be inclined to know using crypto-wallets and web3 logins over the past 6 years or so, with limited iterations along the way and usually additional knowledge with security and risk-management.

The Biconomy Team's efforts to cloak this complexity and bring blockchain settlement, security, and privacy to payments and data is remarkable.

B U I L D

Prerequisites: Basic understanding of Git and Github, IDEs, and using them to push/pull/create/update a repo.
Fast = follow the steps to create new next file and follow steps accordingly.
Fastest = clone repo https://github.com/HollyNode/biconomy-next-ui followed by
npm run dev

**The end goal of this tutorial is to empower developer/product knowledge to potential projects with better UX/UI, gas, and smart-contract settlement features.

npx create-next app biconomy-app
Change into directory

Add dependencies

yarn add @emotion/css @biconomy/core-types @biconomy/smart-account @biconomy/web3-auth

Update the next.config.js file to look like this

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        "fs": false,
        "net": false,
        "tls": false
      }
    }
    return config
  }
}

module.exports = nextConfig

Go to Pages folder under _app.tsx file and add this import
```
import "@biconomy/web3-auth/dist/src/style.css"
```

Go to the index.tsx file, delete it and replace with

import dynamic from "next/dynamic";
import { Suspense } from "react";

const Index = () => {
  const SocialLoginDynamic = dynamic(
    () => import("../components/Auth").then((res) => res.default),
    {
      ssr: false,
    }
  );

  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <SocialLoginDynamic />
      </Suspense>
    </>
  );
};

export default Index;

Create a new folder in root called 'Components' and a file in that folder called Auth.tsx and use this code which manages the smart address, renders, auth, ui, etc.

import { useState, useEffect, useRef } from 'react'
import SocialLogin from '@biconomy/web3-auth'
import { ChainId } from '@biconomy/core-types'
import { ethers } from 'ethers'
import SmartAccount from '@biconomy/smart-account'
import { css } from '@emotion/css'

export default function Auth() {
    const [smartAccount, setSmartAccount] = useState<SmartAccount | null>(null)
    const [interval, enableInterval] = useState(false)
    const sdkRef = useRef<SocialLogin | null>(null)
    const [loading, setLoading] = useState<boolean>(false)

    useEffect(() => {
        let configureLogin
        if (interval) {
          configureLogin = setInterval(() => {
            if (!!sdkRef.current?.provider) {
              setupSmartAccount()
              clearInterval(configureLogin)
            }
          }, 1000)
        }
      }, [interval])

    async function login() {
        if (!sdkRef.current) {
          const socialLoginSDK = new SocialLogin()
          const signature1 = await socialLoginSDK.whitelistUrl('https://biconomy-social-auth.vercel.app')
          await socialLoginSDK.init({
            chainId: ethers.utils.hexValue(ChainId.POLYGON_MUMBAI),
            whitelistUrls: {
              'https://biconomy-social-auth.vercel.app': signature1,
            }
          })
          sdkRef.current = socialLoginSDK
        }
        if (!sdkRef.current.provider) {
          // sdkRef.current.showConnectModal()
          sdkRef.current.showWallet()
          enableInterval(true)
        } else {
          setupSmartAccount()
        }
      }

      async function setupSmartAccount() {
        if (!sdkRef?.current?.provider) return
        sdkRef.current.hideWallet()
        setLoading(true)
        const web3Provider = new ethers.providers.Web3Provider(
          sdkRef.current.provider
        )
        try {
          const smartAccount = new SmartAccount(web3Provider, {
            activeNetworkId: ChainId.POLYGON_MUMBAI,
            supportedNetworksIds: [ChainId.POLYGON_MUMBAI],
          })
          await smartAccount.init()
          setSmartAccount(smartAccount)
          setLoading(false)
        } catch (err) {
          console.log('error setting up smart account... ', err)
        }
      }
      
      const logout = async () => {
        if (!sdkRef.current) {
          console.error('Web3Modal not initialized.')
          return
        }
        await sdkRef.current.logout()
        sdkRef.current.hideWallet()
        setSmartAccount(null)
        enableInterval(false)
      }


    return (
        <div className={containerStyle}>
      <h1 className={headerStyle}>BICONOMY AUTH</h1>
      {
        !smartAccount && !loading && <button className={buttonStyle} onClick={login}>Login</button>
      }
      {
        loading && <p>Loading account details...</p>
      }
      {
        !!smartAccount && (
          <div className={detailsContainerStyle}>
            <h3>Smart account address:</h3>
            <p>{smartAccount.address}</p>
            <button className={buttonStyle} onClick={logout}>Logout</button>
          </div>
        )
      }
    </div>
  )
}

const detailsContainerStyle = css`
  margin-top: 10px;
`

const buttonStyle = css`
  padding: 14px;
  width: 300px;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  margin-top: 20px;
  transition: all .25s;
  &:hover {
    background-color: rgba(0, 0, 0, .2); 
  }
`

const headerStyle = css`
  font-size: 44px;
`

const containerStyle = css`
  width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
`

Run in terminal
```
npm run dev
```
If all is operational, you should see something familiar in your localhost:

A successful login creates a smart contract address for you.

If you go to the polygon scan website, you can then look up your contract address and see that it is indeed on-chain.

B O O K S

The Nature of Technology: What it Is and How it Evolves by W. Brian Arthur

The Man from the Future: The Visionary Life of John von Neumann by Ananyo Bhattacharya

A Graduate Course in Applied Cryptography by Dan Boneh and Victor Shoup

Proof of Stake: The making of ethereum and the philosophy of blockchains by Vitalik Buterin

Algorithms to Live By: The Computer Science of Human Decisions by Brian Christian and Tom Griffiths

Designing an Internet by David Clark

The Beginning of Infinity: Explanations That Transform the World by David Deutsch

Selected Short Stories by Philip Dick

B U S I N E S S

'Twould seem absurd to not start with Paragraph.xyz as an indelible alternative to Mailchimp (hacked again today), Substack, or Medium. Coming from a big fan and user of Mirror (which I will continue to support, i.e. Nash Equilibrium)Paragraph is additionally loaded with SEO optimization and a suite of NFT integration to start.

Sign up for free (if you want a bespoke domain, that'll cost you $50 once. Similar to purchasing an ENS or Unstoppable Domain).

In an age of meta, I cannot sustain the gag any better than showing in action with this very post!

An additional jewel of a feature is their collaboration with Highlight that empowers accounts to help creators drop NFT collections and create token-gated experiences.

Image, video or audio NFTs
Fixed or open editions
Time-limited or gated drops
Customizable royalties
And much more.

For purposes of cost, security, perhaps identity (as journalism possesses a rich history of protecting the witnesses) give Paragraph or even Mirror a try.

Upcoming...

In the next issue we will cover Block Survey - a web3 survey tool, How to seamlessly mint NFTs with some really cool additional features for community and business growth, new book recommendations and more.

Thank you for reading. Have a great week!

- ♾️🕸️🕸️🕸️

Footer

Contact for information or potential advisement, instruction, or development reach out to us at info.infiniteteams@skiff.com visit us at infiniteteams.io or check out our web3 tools and services directory at graphenegulch.com!

🏕️🔥🔥

# 1 | Welcome, Mission, Biconomy Spotlight

Winters are not created equal

Matt

Table of Contents