ltfschoen · ltfschoen · Jun 27, 2023 · Jun 27, 2023 · Jun 27, 2023
diff --git a/dapps/evm2/.env.example b/dapps/evm2/.env.example
@@ -0,0 +1,2 @@
+VITE_BICONOMY_API_KEY=xxxx
+VITE_COUNTER_CONTRACT_ADDRESS=xxxx
diff --git a/dapps/evm2/.gitignore b/dapps/evm2/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
diff --git a/dapps/evm2/README.md b/dapps/evm2/README.md
@@ -0,0 +1,43 @@
+
+# Flipper DApp + Biconomy SDK Social Login + Gasless Transactions
+
+This uses the Biconomy starter kit that implements the Biconomy SDK into a basic React application built with Vite. This Kit comes with everything you need for social login and for making gasless transactions to a contract with the Biconomy SDK. It has been used to implement Flipper with a random number generator.
+
+## Deploy Smart Contracts
+
+See the smart contract setup [README](./flipper/README.md)
+
+## Biconomy Dashboard Registration
+
+Now head over to the [Biconomy SDK Dashboard](https://dashboard.biconomy.io/)
+
+Follow the instruction on the docs [here](https://docs.biconomy.io/guides/biconomy-dashboard) to register your contract, load your gas tank, and grab your api key.
+
+* Add Paymaster (e.g. flipper / Ethereum)
+* Copy API key to dapps/evm2/.env
+
+## Frontend Configuration
+
+Install Vite
+```
+apt-get install -y vite
+```
+
+Install dependencies
+```bash
+yarn
+```
+
+```bash
+cp .env.example .env;
+```
+
+Add your Biconomy API Key and your contract address in the .env file
+
+Build and run:
+```bash
+yarn build
+yarn dev
+```
+
+Go to http://localhost:5000
diff --git a/dapps/evm2/flipper/README.md b/dapps/evm2/flipper/README.md
@@ -112,6 +112,31 @@ shasum -a 256 moonkey
     * Migrate full `truffle migrate --reset --compile-all --network moonbase`
 * Test
     * `truffle test --verbose-rpc --network moonbase`
+
+* Verify Contract
+
+```
+# truffle run verify Flipper --network moonbase
+Verifying contracts on moonscan
+   Verifying Flipper
+   Pass - Verified: https://moonbase.moonscan.io/address/0x1c440D264DcCBe9b7AC84edCEC99De926Db98753#code
+   Successfully verified 1 contract(s).
+Verifying contracts on sourcify
+   Failed to connect to Sourcify API at url https://sourcify.dev/server/chains
+root@ink:/app/dapps/evm2/flipper# truffle run verify RandomNumber --network moonbase
+Verifying contracts on moonscan
+   Verifying RandomNumber
+   Pass - Verified: https://moonbase.moonscan.io/address/0x4027755C05514421fe00f4Fde0bD3F8475ce8A6b#code
+   Successfully verified 1 contract(s).
+Verifying contracts on sourcify
+   Failed to connect to Sourcify API at url https://sourcify.dev/server/chains
+```
+
+* Chainlink VRF https://docs.chain.link/getting-started/intermediates-tutorial
+    * View token balance https://sepolia.etherscan.io/address/0x1dd907abb024e17d196de0d7fe8eb507b6ccaae7
+    * Create and fund a subscription https://docs.chain.link/vrf/v2/subscription/examples/get-a-random-number/#create-and-fund-a-subscription
+    * Prepay Subscription https://vrf.chain.link/
+
 * Troubleshooting
     * `Client network socket disconnected before secure TLS connection was established`
         * Try fixing by running `unset https_proxy && unset http_proxy`, but this didn't actually work for me

diff --git a/dapps/evm2/index.html b/dapps/evm2/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/bico.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Social Login + Gasless Starter</title>
+    <!-- https://github.com/vitejs/vite/issues/3817#issuecomment-864450199 -->
+    <script>window.global = window;</script>
+    <script type="module">
+        import process from "process";
+        import { Buffer } from "buffer";
+        import EventEmitter from "events";
+
+        window.Buffer = Buffer;
+        window.process = process;
+        window.EventEmitter = EventEmitter;
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/dapps/evm2/package.json b/dapps/evm2/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "biconomy-sdk-social-gasless-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@biconomy/core-types": "^2.0.1",
+    "@biconomy/smart-account": "^2.0.1",
+    "@biconomy/web3-auth": "^2.0.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "browserify-zlib": "^0.2.0",
+    "ethers": "5.7.2",
+    "events": "^3.3.0",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-toastify": "^9.1.3",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/dapps/evm2/public/bico.svg b/dapps/evm2/public/bico.svg
diff --git a/dapps/evm2/public/vite.svg b/dapps/evm2/public/vite.svg
diff --git a/dapps/evm2/src/App.css b/dapps/evm2/src/App.css
@@ -0,0 +1,47 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.buttonWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/dapps/evm2/src/App.tsx b/dapps/evm2/src/App.tsx
@@ -0,0 +1,120 @@
+import './App.css'
+// import "@biconomy-sdk-dev/web3-auth/dist/src/style.css"
+import './style.css'
+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 Counter from './Components/Counter';
+
+
+export default function App() {
+  const [smartAccount, setSmartAccount] = useState<SmartAccount | null>(null)
+  const [interval, enableInterval] = useState(false)
+  const sdkRef = useRef<SocialLogin | null>(null)
+  const [loading, setLoading] = useState<boolean>(false)
+  const [provider, setProvider] = useState<any>(null);
+
+  useEffect(() => {
+    let configureLogin:any
+    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('http://127.0.0.1:5173/')
+      await socialLoginSDK.init({
+        chainId: ethers.utils.hexValue(ChainId.POLYGON_MUMBAI).toString(),
+        network: "testnet",
+        whitelistUrls: {
+          'http://127.0.0.1:5173/': signature1,
+        }
+      })
+      sdkRef.current = socialLoginSDK
+    }
+    if (!sdkRef.current.provider) {
+      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
+    )
+    setProvider(web3Provider)
+    try {
+      const smartAccount = new SmartAccount(web3Provider, {
+        activeNetworkId: ChainId.POLYGON_MUMBAI,
+        supportedNetworksIds: [ChainId.POLYGON_MUMBAI],
+        networkConfig: [
+          {
+            chainId: ChainId.POLYGON_MUMBAI,
+            dappAPIKey: import.meta.env.VITE_BICONOMY_API_KEY,
+          },
+        ],
+      })
+      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>
+      <h1>Biconomy SDK Auth + Gasless Transactions</h1>
+      {
+        !smartAccount && !loading && <button onClick={login}>Login</button>
+      }
+      {
+        loading && <p>Loading account details...</p>
+      }
+      {
+        !!smartAccount && (
+          <div className="buttonWrapper">
+            <h3>Smart account address:</h3>
+            <p>{smartAccount.address}</p>
+            <Counter smartAccount={smartAccount} provider={provider} />
+            <button onClick={logout}>Logout</button>
+          </div>
+        )
+      }
+      <p>
+      Edit <code>src/App.tsx</code> and save to test
+      </p>
+      <a href="https://biconomy.gitbook.io/sdk/introduction/overview" target="_blank" className="read-the-docs">
+  Click here to check out the docs
+      </a>
+    </div>
+  )
+}
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_BICONOMY_API_KEY=xxxx
		VITE_COUNTER_CONTRACT_ADDRESS=xxxx