generalise modal provider, fix login buttons, bridge fixes

BibliothecaDAO · Aug 31, 2023 · f440a7f · f440a7f
1 parent 56e3e75
commit f440a7f
Show file tree

Hide file tree

Showing 18 changed files with 127 additions and 175 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -48,7 +48,7 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-three/drei": "^9.80.9",
     "@react-three/fiber": "^8.13.7",
-    "@reservoir0x/reservoir-kit-ui": "^1.7.0",
+    "@reservoir0x/reservoir-kit-ui": "^1.8.0",
     "@starknet-react/core": "^1.0.4",
     "@starkware-industries/commons-js-enums": "^1.2.0",
     "@starkware-industries/commons-js-utils": "^1.2.2",
@@ -65,7 +65,7 @@
     "cross-env": "^7.0.3",
     "embla-carousel-autoplay": "^8.0.0-rc12",
     "embla-carousel-react": "^8.0.0-rc12",
-    "framer-motion": "^10.16.1",
+    "framer-motion": "^10.16.2",
     "get-starknet-core": "3.2.0",
     "graphql": "^16.8.0",
     "lucide-react": "^0.270.0",
@@ -83,7 +83,7 @@
     "three": "^0.155.0",
     "typescript": "5.1.6",
     "use-deep-compare-effect": "^1.8.1",
-    "viem": "~1.9.0",
+    "viem": "~1.9.2",
     "wagmi": "~1.3.10"
   },
   "devDependencies": {

diff --git a/ui/src/app/bridge/BridgeModalWrapper.tsx → ui/src/app/bridge/ModalWrapper.tsx b/ui/src/app/bridge/BridgeModalWrapper.tsx → ui/src/app/bridge/ModalWrapper.tsx
@@ -7,24 +7,24 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../components/ui/dialog";
-import { useBridgeModal, useHideModal } from "../providers/BridgeModalProvider";
+import { useModal, useHideModal } from "../providers/ModalProvider";
 import Loading from "../loading";
 
 export type Component = {
   component: LazyExoticComponent<ComponentType<any>>;
   props: any;
 };
-export const BridgeModalWrapper = () => {
-  const { show, withHeader, header, body, footer } = useBridgeModal();
+export const ModalWrapper = () => {
+  const { show, withHeader, header, body, footer } = useModal();
 
   const hideModal = useHideModal();
 
   const getComponents = (components: string[]) => {
     return components
       ? components.map((c: any) => ({
-        component: lazy(() => import(`../components/${c.path}`)),
-        props: c.props,
-      }))
+          component: lazy(() => import(`../components/${c.path}`)),
+          props: c.props,
+        }))
       : [];
   };
 

diff --git a/ui/src/app/bridge/Transfer.tsx b/ui/src/app/bridge/Transfer.tsx
@@ -16,8 +16,8 @@ import { useTransferToL1 } from "@/hooks/useTransferToL1";
 import LordsIcon from "@/icons/lords.svg";
 import { Toast, ToastDescription, ToastTitle } from "../components/ui/toast";
 import { useWalletsProviderContext } from "../providers/WalletsProvider";
-import { BridgeModalProvider } from "../providers/BridgeModalProvider";
-import { BridgeModalWrapper } from "./BridgeModalWrapper";
+import { StarknetLoginButton } from "@/app/components/wallet/StarknetLoginButton";
+import { EthereumLoginButton } from "@/app/components/wallet/EthereumLoginButton";
 
 const network =
   process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "GOERLI" : "MAIN";
@@ -40,56 +40,52 @@ export const Transfer = ({ action }: { action: string }) => {
     }
   };
 
-  const renderL1Network = () => {
+  const renderNetwork = (
+    networkName: string,
+    networkLogo: JSX.Element,
+    isWithdraw: boolean
+  ) => {
     return (
       <>
         <div className="relative flex items-center justify-between">
           <div className="flex-col">
             <span className="px-2 text-xs tracking-wide text-white/50 font-bold uppercase rounded bg-white/40 border border-white/20">
-              {action != "withdraw" ? "from" : "to"}
+              {isWithdraw ? "from" : "to"}
             </span>
             <div className="flex text-lg my-1 ">
               <div className="mr-2 bg-white rounded-full h-[32px] w-[32px] self-center">
-                <div className="w-4 h-4 m-auto mt-0.5">
-                  <EthereumLogo />
-                </div>
+                {networkLogo}
               </div>
-              <h5 className="self-center">Ethereum</h5>
+              <h5 className="self-center">{networkName}</h5>
             </div>
           </div>
           <TokenBalance
-            balance={balances.l1?.lords || BigInt(0)}
+            balance={
+              isWithdraw
+                ? balances.l2?.lords || BigInt(0)
+                : balances.l1?.lords || BigInt(0)
+            }
             symbol="Lords"
+            isLoading={isWithdraw ? l2loading : false}
           />
         </div>
       </>
     );
   };
-  const renderL2Network = () => {
-    return (
-      <>
-        <div className="relative flex items-center justify-between">
-          <div className="flex-col">
-            <span className="px-2 text-xs tracking-wide text-white/50 font-bold uppercase rounded bg-white/40 border border-white/20">
-              {action == "withdraw" ? "from" : "to"}
-            </span>
-            <div className="flex text-lg my-1">
-              <div className="mr-2 bg-white rounded-full h-[32px] w-[32px] self-center">
-                <div className="w-6 h-6 m-auto mt-1">
-                  <StarknetLogo />
-                </div>
-              </div>
-              <h5 className="self-center">Starknet</h5>
-            </div>
-          </div>
 
-          <TokenBalance
-            balance={balances.l2?.lords || BigInt(0)}
-            symbol="Lords"
-            isLoading={l2loading}
-          />
-        </div>
-      </>
+  const renderL1Network = () => {
+    return renderNetwork(
+      "Ethereum",
+      <EthereumLogo className="w-6 h-6 m-auto mt-1" />,
+      action != "withdraw"
+    );
+  };
+
+  const renderL2Network = () => {
+    return renderNetwork(
+      "Starknet",
+      <StarknetLogo className="w-6 h-6 m-auto mt-1" />,
+      action == "withdraw"
     );
   };
   const renderTokenInput = () => {
@@ -139,18 +135,8 @@ export const Transfer = ({ action }: { action: string }) => {
           {action == "withdraw" ? renderL1Network() : renderL2Network()}
         </div>
 
-        {!l1Account && (
-          <ConnectKitButton.Custom>
-            {({ isConnected, show, address }) => {
-              return (
-                <Button className="w-full mb-2" onClick={show}>
-                  {isConnected ? address : "Connect L1 Wallet"}
-                </Button>
-              );
-            }}
-          </ConnectKitButton.Custom>
-        )}
-        {!l2Account && <StarkLogin />}
+        {!l1Account && <EthereumLoginButton />}
+        {!l2Account && <StarknetLoginButton />}
         {l1Account && l2Account && (
           <Button
             className="w-full mt-2"
@@ -167,7 +153,6 @@ export const Transfer = ({ action }: { action: string }) => {
           </Button>
         )}
       </div>
-      <BridgeModalWrapper />
     </>
   );
 };
diff --git a/ui/src/app/bridge/layout.tsx b/ui/src/app/bridge/layout.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { motion } from "framer-motion";
+import { ModalWrapper } from "./ModalWrapper";
 
 export default function RootLayout({
   children,
@@ -30,6 +31,7 @@ export default function RootLayout({
       >
         {children}
       </motion.div>
+      <ModalWrapper />
     </div>
   );
 }
diff --git a/ui/src/app/bridge/page.tsx b/ui/src/app/bridge/page.tsx
@@ -1,5 +1,4 @@
 import { cn } from "../lib/utils";
-import { BridgeModalProvider } from "../providers/BridgeModalProvider";
 import { Transfer } from "./Transfer";
 import { NavLink } from "@/app/components/ui/nav-link";
 import type { Metadata } from "next";
@@ -26,7 +25,7 @@ export default async function Page({
   ];
 
   return (
-    <BridgeModalProvider>
+    <>
       <h2 className="mx-auto mb-6 text-center">The Lords Bridge</h2>
       <div className="mx-auto bg-white/5 w-full rounded-lg container flex-col md:w-[500px] p-2 border border-white/5">
         <div className="flex w-full text-xl mb-2 justify-center  rounded space-x-2">
@@ -48,6 +47,6 @@ export default async function Page({
         </div>
         <Transfer action={action} />
       </div>
-    </BridgeModalProvider>
+    </>
   );
 }
diff --git a/ui/src/app/components/ui/sheet.tsx b/ui/src/app/components/ui/sheet.tsx
@@ -34,11 +34,9 @@ const SheetPortal = ({
   children,
   ...props
 }: SheetPortalProps) => (
-  <AnimatePresence>
-    <SheetPrimitive.Portal className={cn(className)} {...props}>
-      <div className={portalVariants({ position })}>{children}</div>
-    </SheetPrimitive.Portal>
-  </AnimatePresence>
+  <SheetPrimitive.Portal className={cn(className)} {...props}>
+    <div className={portalVariants({ position })}>{children}</div>
+  </SheetPrimitive.Portal>
 );
 SheetPortal.displayName = SheetPrimitive.Portal.displayName;
 
@@ -161,24 +159,28 @@ const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   DialogContentProps
 >(({ position, size, className, children, ...props }, ref) => (
-  <SheetPortal position={position}>
-    <SheetOverlay />
-    <motion.div
-      initial={{ x: "100%" }}
-      animate={{ x: 0 }}
-      exit={{ x: "100%" }}
-      transition={{ duration: 0.4, ease: "easeInOut" }}
-      className={cn(sheetVariants({ position, size }), className)}
-    >
-      <SheetPrimitive.Content ref={ref} {...props}>
-        {children}
-        <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </motion.div>
-  </SheetPortal>
+  <AnimatePresence>
+    <SheetPortal position={position}>
+      <SheetOverlay />
+      <AnimatePresence>
+        <motion.div
+          initial={{ x: "100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "100%" }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
+          className={cn(sheetVariants({ position, size }), className)}
+        >
+          <SheetPrimitive.Content ref={ref} {...props}>
+            {children}
+            <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+          </SheetPrimitive.Content>
+        </motion.div>
+      </AnimatePresence>
+    </SheetPortal>
+  </AnimatePresence>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 

diff --git a/ui/src/app/components/wallet/EthereumLoginButton.tsx b/ui/src/app/components/wallet/EthereumLoginButton.tsx
@@ -32,7 +32,7 @@ export const EthereumLoginButton = ({
           onClick={() => (isConnected ? toggleAccount() : show?.())}
         >
           <span className="normal-case font-sans flex items-center">
-            <EthereumLogo className="w-8 mr-2 -ml-1" />
+            <EthereumLogo className="w-6 mr-2 -ml-1" />
             {isConnected ? (
               ensName ?? truncatedAddress
             ) : (

diff --git a/ui/src/app/components/wallet/StarknetLoginButton.tsx b/ui/src/app/components/wallet/StarknetLoginButton.tsx
@@ -6,7 +6,6 @@ import { shortenHex } from "@/functions/utils";
 import {
   useConnectors,
   useAccount as useL2Account,
-  useNetwork,
 } from "@starknet-react/core";
 
 export const StarknetLoginButton = ({

diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { UIContextProvider } from "./providers/UIProvider";
 import { WalletsProvider } from "./providers/WalletsProvider/WalletsProvider";
 import { ToastProvider, ToastViewport } from "./components/ui/toast";
 import { TransferLogProvider } from "@/app/providers/TransferLogProvider";
+import { ModalProvider } from "@/app/providers/ModalProvider";
 
 const inconsolata = Space_Grotesk({
   subsets: ["latin"],
@@ -34,20 +35,22 @@ export default function RootLayout({
       >
         <UIContextProvider>
           <Provider>
-            <WalletsProvider>
-              <ToastProvider>
-                <TransferLogProvider>
-                  <main className="flex flex-wrap min-h-screen">
-                    <Sidebar />
-                    <div className="z-10 flex flex-col flex-grow">
-                      <TopNav />
-                      <div className="flex-grow">{children}</div>
-                    </div>
-                  </main>
-                </TransferLogProvider>
-                <ToastViewport />
-              </ToastProvider>
-            </WalletsProvider>
+            <ModalProvider>
+              <WalletsProvider>
+                <ToastProvider>
+                  <TransferLogProvider>
+                    <main className="flex flex-wrap min-h-screen">
+                      <Sidebar />
+                      <div className="z-10 flex flex-col flex-grow">
+                        <TopNav />
+                        <div className="flex-grow">{children}</div>
+                      </div>
+                    </main>
+                  </TransferLogProvider>
+                  <ToastViewport />
+                </ToastProvider>
+              </WalletsProvider>
+            </ModalProvider>
           </Provider>
         </UIContextProvider>
 

diff --git a/ui/src/app/providers/BridgeModalProvider/index.ts b/ui/src/app/providers/BridgeModalProvider/index.ts
diff --git a/...idgeModalProvider/BridgeModalProvider.tsx → ...providers/ModalProvider/ModalProvider.tsx b/...idgeModalProvider/BridgeModalProvider.tsx → ...providers/ModalProvider/ModalProvider.tsx
@@ -1,16 +1,14 @@
 "use client";
 
 import React, { ReactNode, useReducer } from "react";
-import { actions, initialState, reducer } from "./bridge-modal-reducer";
-import { BridgeModalContext } from "./bridge-modal-context";
+import { actions, initialState, reducer } from "./modal-reducer";
+import { ModalContext } from "./modal-context";
 
-interface BridgeModalProviderProps {
+interface ModalProviderProps {
   children: ReactNode;
 }
 
-export const BridgeModalProvider: React.FC<BridgeModalProviderProps> = ({
-  children,
-}) => {
+export const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const showModal = (payload: any) => {
@@ -34,8 +32,6 @@ export const BridgeModalProvider: React.FC<BridgeModalProviderProps> = ({
   };
 
   return (
-    <BridgeModalContext.Provider value={value}>
-      {children}
-    </BridgeModalContext.Provider>
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
   );
 };
diff --git a/ui/src/app/providers/ModalProvider/index.ts b/ui/src/app/providers/ModalProvider/index.ts
@@ -0,0 +1,3 @@
+export * from './modal-context';
+export * from './modal-hooks';
+export * from './ModalProvider';