latest code changes (to be merged)

.github/workflows/dev.yaml

@@ -0,0 +1,46 @@
+name: Sdk Dev Deployment
+
+on:
+  push:
+    branches:
+      - dev
+permissions:
+      id-token: write
+      contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.16.0]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Generate build
+        run: |
+          yarn install
+          yarn run build
+        env:
+          CI: false
+          NODE_OPTIONS: --max_old_space_size=4096
+          REACT_APP_PKEY: ${{ secrets.REACT_APP_PKEY }}
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          role-to-assume: ${{ secrets.AWS_DEV_ROLE_ARN }}
+          role-session-name: dev-deploy
+          aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+
+      # publish to dev environment
+      - name: Deploy to S3
+        run: |
+          aws s3 sync build s3://${{ secrets.DEV_S3_BUCKET_NAME }}
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_CF_ID }} --paths /

.github/workflows/staging.yaml

@@ -1,4 +1,4 @@
-name: Staging Sdk Deployment
+name: staging Sdk Deployment
 
 on:
   push:
@@ -36,7 +36,7 @@ jobs:
         uses: aws-actions/configure-aws-credentials@v1
         with:
           role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
-          role-session-name: staging-deploy
+          role-session-name: dev-deploy
           aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
 
       # publish to staging environment

README.md

@@ -2,15 +2,13 @@
 
 Example codes for integrating biconomy sdk in your repo.
 
+- [https://sdk-dev.biconomy.io](https://sdk-dev.biconomy.io)
+
 #### Run locally
 
 ```bash
 git clone https://github.com/bcnmy/sdk-demo.git
 cd sdk-demo
 yarn install
-cd node_modules/@uniswap/v3-periphery
-yarn
-npx hardhat compile
-cd -
 yarn start
 ```

config-overrides.js

@@ -13,6 +13,7 @@ module.exports = function override(config) {
         "url": require.resolve("url"),
         "zlib": require.resolve("browserify-zlib"),
         "path": require.resolve("path-browserify"),
+        "c-kzg": require.resolve("c-kzg"),
         "process/browser": require.resolve("process/browser"),
     })
     config.resolve.fallback = fallback;

package.json

@@ -1,36 +1,31 @@
 {
-  "name": "demo",
-  "version": "0.1.0",
+  "name": "biconomy-sdk-demo",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@biconomy/core-types": "1.0.0",
-    "@biconomy/relayer": "1.0.0",
-    "@biconomy/smart-account": "1.0.0",
-    "@biconomy/transactions": "1.0.0",
-    "@biconomy/web3-auth": "1.0.0",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@alchemy/aa-core": "1.2.2",
+    "@biconomy/account": "4.0.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "@mui/styles": "^5.11.12",
+    "@rainbow-me/rainbowkit": "^2.0.0",
+    "@tanstack/react-query": "^5.22.2",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@walletconnect/web3-provider": "^1.8.0",
-    "@web3auth/base": "^2.1.2",
-    "@web3auth/coinbase-adapter": "^2.1.2",
-    "@web3auth/web3auth": "^2.1.2",
+    "buffer": "^6.0.3",
     "ethers": "^5.6.9",
-    "net": "^1.0.2",
-    "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
-    "tls": "^0.0.1",
-    "typescript": "^4.4.2",
-    "walletlink": "^2.5.0",
-    "web-vitals": "^2.1.0",
-    "web3": "^1.7.5",
-    "web3modal": "^1.9.8"
+    "typescript": "5.2.0",
+    "viem": "^2.7.3",
+    "wagmi": "^2.5.5",
+    "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -59,17 +54,18 @@
     ]
   },
   "devDependencies": {
-    "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.8.2",
-    "@uniswap/v3-sdk": "^3.9.0",
     "assert": "^2.0.0",
     "browserify-zlib": "^0.2.0",
+    "c-kzg": "^1.0.9",
     "crypto-browserify": "^3.12.0",
     "https-browserify": "^1.0.0",
+    "net": "^1.0.2",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
+    "tls": "^0.0.1",
     "url": "^0.11.0"
   }
-}
+}

public/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
+  <meta name="description" content="A playground to test some use casees of the SDK." />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   <link rel="preconnect" href="https://fonts.gstatic.com">

src/App.tsx

@@ -1,108 +1,77 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import { ToastContainer } from "react-toastify";
-import Navbar from "./components/Navbar";
+import { useAccount } from 'wagmi'
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 import TabsBody from "./components/TabsBody";
 import { useSmartAccountContext } from "./contexts/SmartAccountContext";
-import { useWeb3AuthContext } from "./contexts/SocialLoginContext";
-import Button from "./components/Button";
 
 const App: React.FC = () => {
   const classes = useStyles();
-  const { connect, address, loading: eoaWalletLoading } = useWeb3AuthContext();
+  const { address } = useAccount()
   const { loading } = useSmartAccountContext();
 
   if (!address) {
     return (
-      <div
-        className={classes.bgCover}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          paddingTop: "30vh",
-        }}
-      >
-        <h1 className={classes.title}>Biconomy SDK Demo</h1>
-        <Button
-          title="Get Started"
-          onClickFunc={connect}
-          isLoading={eoaWalletLoading}
-          style={{
-            fontSize: 20,
-            padding: "30px 20px",
-            border: 0,
-            background:
-              "linear-gradient(90deg, #0063FF -2.21%, #9100FF 89.35%)",
-          }}
-        />
-        <ToastContainer />
+      <div className={classes.bgCover}>
+        <div className={classes.container}>
+          <h1 className={classes.title}>
+          <img width={35} style={
+            {
+              marginRight: 20,
+            }
+          } src="/logo.svg" alt="" />
+            Biconomy SDK</h1>
+          <p className={classes.subTitle}>
+            Solve complex UX challenges with customisable SDK modules in
+            minutes.
+          </p>
+          <ConnectButton />
+        </div>
       </div>
     );
   }
 
   return (
     <div className={classes.bgCover}>
-      <Navbar />
-      {loading ? (
-        <div className={classes.container}>
-          <img src="/logo.svg" className={classes.animateBlink} alt="" />
-        </div>
-      ) : (
-        <TabsBody />
-      )}
-      <ToastContainer />
+      <TabsBody loading={loading} />
+      <ToastContainer position="bottom-left" newestOnTop theme="dark" />
     </div>
   );
 };
 
 const useStyles = makeStyles(() => ({
   bgCover: {
-    backgroundColor: "#1a1e23",
-    // backgroundImage: `url(/img/northern-lights-bg.png)`,
-    backgroundSize: "cover",
-    width: "100%",
-    minHeight: "100vh",
-    color: "#fff",
-    fontStyle: "italic",
+    width: "100vw",
+    height: "100vh",
+    background: "linear-gradient(120.85deg, #3F2E27 23.78%, #0E1117 68.7%)",
+    display: "flex",
+    color: "#e6e6e6",
+    justifyContent: "start",
+    alignItems: "center",
+    padding: "0px 20px",
   },
   container: {
+    width: "60vw",
+    height: "60vh",
+    backgroundColor: "#151520",
+    border: "1px solid #5B3320",
+    padding: "32px",
+    borderRadius: 20,
     display: "flex",
     flexDirection: "column",
-    width: "100%",
-    height: "80vh",
+    alignItems: "start",
     justifyContent: "center",
-    alignItems: "center",
+    gap: 20,
   },
   title: {
-    marginBottom: 50,
-    fontSize: 60,
-    background: "linear-gradient(90deg, #12ECB8 -2.21%, #00B4ED 92.02%)",
-    "-webkit-background-clip": "text",
-    "-webkit-text-fill-color": "transparent",
-  },
-  animateBlink: {
-    animation: "$bottom_up 2s linear infinite",
-    "&:hover": {
-      transform: "scale(1.2)",
-    },
+    margin: 0,
+    fontSize: 50,
+    color: "#ffb999",
   },
-  "@keyframes bottom_up": {
-    "0%": {
-      transform: "translateY(0px)",
-    },
-    "25%": {
-      transform: "translateY(20px)",
-    },
-    "50%": {
-      transform: "translateY(0px)",
-    },
-    "75%": {
-      transform: "translateY(-20px)",
-    },
-    "100%": {
-      transform: "translateY(0px)",
-    },
+  subTitle: {
+    fontSize: 22,
+    margin: 0,
   },
 }));