WIP: userop

front/src/app/globals.css

@@ -11,18 +11,18 @@ html {
 
 body {
   position: relative;
-  max-width: 390px;
   min-height: 100svh;
   margin: 0 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-@media (min-width: 391px) {
+@media (min-width: 600px) {
   body {
     margin: 2rem auto;
     border-radius: 20px;
+    max-width: 390px;
     min-height: calc(100svh - 4rem);
     overflow: hidden;
   }

front/src/app/layout.tsx

@@ -40,7 +40,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <SmartWalletProvider>
                 <WalletConnectProvider>
                   <ThemeProvider attribute="class">
-                    <Theme style={css} radius={"full"} accentColor={"teal"}>
+                    <Theme style={css} radius={"full"} accentColor={"red"}>
                       <ModalProvider>{children}</ModalProvider>
                     </Theme>
                   </ThemeProvider>

front/src/components/QrReaderModal/index.tsx

@@ -10,15 +10,19 @@ export default function QrReaderModal() {
   const [input, setInput] = useState<string>("");
   const [success, setSuccess] = useState<boolean>(false);
   const { close } = useModal();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [pairingTopic, setPairingTopic] = useState<string | null>("");
 
   const { pairSession, pairingState, sessions } = useWalletConnect();
   function handleScan(data: string | null) {
     if (data) {
       if (data.startsWith("wc:")) {
+        setIsLoading(true);
         pairSession({
           uri: data,
           onSuccess: (pairingTopic) => {
-            setSuccess(true);
+            // setSuccess(true);
+            setPairingTopic(pairingTopic);
             setTimeout(() => {
               close();
             }, 3000);
@@ -32,7 +36,9 @@ export default function QrReaderModal() {
     }
   }
 
-  const isLoading = Object.values(pairingState).some((element) => element.isLoading);
+  // useEffect(() => {}, [pairingState]);
+
+  // const isLoading = Object.values(pairingState).some((element) => element.isLoading);
 
   if (success) {
     return (

front/src/libs/smart-wallet/config/index.tsx

@@ -1,7 +1,7 @@
 import { fallback, http } from "viem";
 
-const publicRpc = http("https://goerli.base.org");
-const localhost = http("http://localhost:8545");
+// const publicRpc = http("https://goerli.base.org");
+// const localhost = http("http://localhost:8545");
 const stackUpBundlerRpcUrl = http(
   `https://api.stackup.sh/v1/node/${process.env.NEXT_PUBLIC_STACKUP_BUNDLER_API_KEY}`,
 );

front/src/libs/wallet-connect/hook/useWalletConnectHook.tsx

@@ -208,16 +208,16 @@ export function useWalletConnectHook() {
       }));
 
       await walletConnect.pair(uri);
-      setTimeout(() => {
-        setPairingState((prev) => ({
-          ...prev,
-          [pairingTopic]: {
-            pairingTopic,
-            isLoading: false,
-            error: null,
-          },
-        }));
-      }, 5000);
+      // setTimeout(() => {
+      //   setPairingState((prev) => ({
+      //     ...prev,
+      //     [pairingTopic]: {
+      //       pairingTopic,
+      //       isLoading: false,
+      //       error: null,
+      //     },
+      //   }));
+      // }, 5000);
       onSuccess && onSuccess(pairingTopic);
     } catch (error: any) {
       setPairingState((prev) => ({

front/src/libs/wallet-connect/index.ts

@@ -1,5 +1,2 @@
-export {
-  useWalletConnect,
-  WalletConnectProvider,
-} from "./WalletConnectProvider";
+export { useWalletConnect, WalletConnectProvider } from "./WalletConnectProvider";
 export type { IWCReactSession } from "./hook/useWalletConnectHook";

front/src/providers/ModalProvider/index.tsx

@@ -5,16 +5,16 @@ import { Portal, Box } from "@radix-ui/themes";
 import styled from "@emotion/styled";
 import { useTheme } from "next-themes";
 
-const PortalContainer = styled(Portal)<{ $isOpen: Boolean }>`
+const PortalContainer = styled(Portal)<{ isopen: Boolean | undefined }>`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100svh;
-  @media (min-width: 391px) {
+  @media (min-width: 600px) {
     height: calc(100vh - 4rem);
   }
-  pointer-events: ${({ $isOpen }) => ($isOpen ? "auto" : "none")};
+  pointer-events: ${({ isopen }) => (isopen ? "auto" : "none")};
 `;
 
 const Modal = styled.div<{ $isOpen: Boolean }>`
@@ -42,8 +42,8 @@ const Overlay = styled.div<{ $isOpen: Boolean }>`
   backdrop-filter: blur(4px);
   width: 100%;
   height: 100svh;
-  @media (min-width: 391px) {
-    height: calc(100vh - 40px);
+  @media (min-width: 600px) {
+    height: calc(100vh - 4rem);
   }
   visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
   transition: opacity 0.3s ease-in-out;
@@ -58,8 +58,8 @@ const Overlay = styled.div<{ $isOpen: Boolean }>`
     left: 0;
     width: 100%;
     height: 100svh;
-    @media (min-width: 391px) {
-      height: calc(100vh - 40px);
+    @media (min-width: 600px) {
+      height: calc(100vh - 4rem);
     }
   }
 `;
@@ -129,7 +129,10 @@ export function ModalProvider({ children }: { children: React.ReactNode }) {
     <ModalContext.Provider value={modalValue}>
       {children}
       {isPortalMounted && radixElement && (
-        <PortalContainer $isOpen={modalValue.isOpen} container={radixElement as HTMLElement}>
+        <PortalContainer
+          isopen={modalValue.isOpen ? true : undefined}
+          container={radixElement as HTMLElement}
+        >
           <Overlay $isOpen={modalValue.isBackdrop} onClick={() => modalValue.close()} />
           <Modal
             $isOpen={modalValue.isOpen}