# # 1 | Welcome, Mission, Biconomy Spotlight
*Winters are not created equal*
By [InfiniteMirror](https://paragraph.com/@infinite-mirror) · 2023-01-18
web3, developer, product, business, tech
---
### Table of Contents
* **Mission**
* **Biconomy Spotligh**t
* **Build**
* **Books**
* **Business**
* **Upcoming**
* Footer
* * *
Yes, these crows are an [NFT](https://opensea.io/assets/matic/0x03e055692e77e56abf7f5570d9c64c194ba15616/234698)
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](https://www.biconomy.io/) 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:
1. account abstraction
2. meta-transactions
3. gasless transactions
4. batched transactions
5. multi-chain relayers
6. 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_](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.
1. npx create-next app biconomy-app
2. Change into directory
3. Add dependencies
yarn add @emotion/css @biconomy/core-types @biconomy/smart-account @biconomy/web3-auth
4. 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
5. Go to Pages folder under \_app.tsx file and add this import
import "@biconomy/web3-auth/dist/src/style.css"
6. 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 (
<>
Loading...}>
);
};
export default Index;
7. 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(null)
const [interval, enableInterval] = useState(false)
const sdkRef = useRef(null)
const [loading, setLoading] = useState(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 (
BICONOMY AUTH
{
!smartAccount && !loading &&
}
{
loading &&
Loading account details...
}
{
!!smartAccount && (
Smart account address:
{smartAccount.address}
)
}
)
}
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;
`
8. Run in terminal
npm run dev
9. If all is operational, you should see something familiar in your localhost:
Login w/ Wallet or Legacy
A successful login creates a smart contract address for you.
If you go to the [polygon scan](https://polygonscan.com/address/0xF6CB9dEF79606b1651DC706F3D9c1056334f5228) 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](http://Paragraph.xyz) as an indelible alternative to Mailchimp (hacked again [today](https://techcrunch.com/2023/01/18/mailchimp-hacked/)), 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](http://Highlight.xyz) that empowers accounts to _help creators drop NFT collections and create token-gated experiences._
1. Image, video or audio NFTs
2. Fixed or open editions
3. Time-limited or gated drops
4. Customizable royalties
5. 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!
\- [♾️](https://emojipedia.org/infinity/)🕸️🕸️🕸️
* * *
### _Footer_
_Contact for information or potential advisement, instruction, or development reach out to us at_ [_info.infiniteteams@skiff.com_](mailto:info.infiniteteams@skiff.com) _visit us at_ [_infiniteteams.io_](http://infiniteteams.io) _or check out our web3 tools and services directory at_ [_graphenegulch.com_](http://graphenegulch.com)_!_
🏕️[🔥🔥](https://emojipedia.org/fire/)
[Subscribe](https://paragraph.xyz/@infinite-mirror/ZI5m4wBzurbx1mh0QKYj)
---
*Originally published on [InfiniteMirror](https://paragraph.com/@infinite-mirror/infinite-mirror)*