Update React demo

Web3Auth · Nov 3, 2024 · 516715c · 516715c
1 parent 0cbbb1d
commit 516715c
Show file tree

Hide file tree

Showing 11 changed files with 1,451 additions and 772 deletions.
diff --git a/demo/react-app-new/package-lock.json b/demo/react-app-new/package-lock.json
diff --git a/demo/react-app-new/package.json b/demo/react-app-new/package.json
@@ -14,8 +14,8 @@
     "@toruslabs/constants": "^14.0.0",
     "@toruslabs/eslint-config-react": "^3.4.3",
     "@toruslabs/ethereum-controllers": "^6.1.3",
-    "@toruslabs/vue-components": "^7.8.3",
-    "@toruslabs/vue-icons": "^7.6.2",
+    "@toruslabs/react-components": "file:toruslabs-react-components-1.0.0.tgz",
+    "@web3auth/account-abstraction-provider": "file:../../packages/providers/account-abstraction-provider",
     "@web3auth/auth": "^9.4.0",
     "@web3auth/auth-adapter": "file:../../packages/adapters/auth-adapter",
     "@web3auth/base": "file:../../packages/base",
@@ -41,7 +41,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
-    "usehooks-ts": "^3.1.0",
     "web3": "^4.13.0"
   },
   "devDependencies": {

diff --git a/demo/react-app-new/src/MainView.tsx b/demo/react-app-new/src/MainView.tsx
@@ -6,9 +6,9 @@ import AppDashboard from "./components/AppDashboard";
 
 function Main() {
 
-  const { web3authContextConfig } = useAppContext();
+  const { web3authConfig } = useAppContext();
   return (
-    <Web3AuthProvider config={web3authContextConfig}>
+    <Web3AuthProvider config={web3authConfig}>
       <AppHeader />
       <main className="flex-1 p-1">
         <div className="relative">

diff --git a/demo/react-app-new/src/components/AppDashboard.tsx b/demo/react-app-new/src/components/AppDashboard.tsx
@@ -23,7 +23,7 @@ const AppDashboard: React.FC = () => {
     const ethServices = chainNamespace === CHAIN_NAMESPACES.EIP155;
     const solServices = chainNamespace === CHAIN_NAMESPACES.SOLANA;
     const walletServices =
-      chainNamespace === CHAIN_NAMESPACES.EIP155 && walletPlugin.enable && web3Auth?.connectedAdapterName === WALLET_ADAPTERS.AUTH;
+      chainNamespace === CHAIN_NAMESPACES.EIP155 && walletPlugin?.enable && web3Auth?.connectedAdapterName === WALLET_ADAPTERS.AUTH;
     return {
       dashboard,
       ethServices,

diff --git a/demo/react-app-new/src/components/AppHeader.tsx b/demo/react-app-new/src/components/AppHeader.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useWeb3Auth } from "@web3auth/modal-react-hooks";
 import { useTranslation } from 'react-i18next';
-import { useAppContext } from '../context';
-import { Button } from './CommonUI';
+import { Button } from '@toruslabs/react-components';
 
 const AppHeader: React.FC = () => {
-  const { network } = useAppContext();
   const { t } = useTranslation();
   const { status, logout, isConnected } = useWeb3Auth();
 
@@ -31,18 +29,18 @@ const AppHeader: React.FC = () => {
         <a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
           <img src="/web3auth.svg" className="h-8" alt="W3A Logo" />
         </a>
-        <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+        <div className="flex space-x-3 rtl:space-x-reverse">
           {isDisplay.btnLogout ? (
-            <Button onClick={onLogout}>
+            <Button onClick={onLogout} pill size="sm">
               {t('app.btnLogout')}
             </Button>
           ) : (
-            <Button onClick={()=>{}}>
+            <Button onClick={()=>{}} pill block size="sm" variant="secondary">
               {t('app.documentation')}
             </Button>
           )}
         </div>
-        <div id="navbar-sticky" className="items-center justify-between w-full md:flex md:w-auto md:order-1">
+        <div id="navbar-sticky" className="items-center justify-between w-full">
           {isDisplay.appHeading && (
             <div className="max-sm:w-full">
               <h1 className="leading-tight text-3xl font-extrabold">{t('app.title')}</h1>