feat: init react

airgap-it · Sep 5, 2024 · c26de84 · c26de84
1 parent 8674705
commit c26de84
Show file tree

Hide file tree

Showing 22 changed files with 1,084 additions and 2,548 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/beacon-dapp/src/events.ts b/packages/beacon-dapp/src/events.ts
@@ -411,7 +411,7 @@ const showRateLimitReached = async (): Promise<void> => {
     body: 'Rate limit reached. Please slow down',
     buttons: [{ text: 'Done', style: 'outline' }],
     timer: 3000
-  }).catch((toastError) => console.error(toastError))
+  })
 }
 
 /**

diff --git a/packages/beacon-ui/package.json b/packages/beacon-ui/package.json
@@ -40,7 +40,8 @@
     "@airgap/beacon-utils": "4.3.0",
     "@walletconnect/utils": "2.14.0",
     "qrcode-svg": "^1.1.0",
-    "solid-js": "^1.7.11"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.4",
@@ -52,9 +53,14 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
-    "rollup-preset-solid": "^2.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@babel/preset-react": "^7.24.6",
     "typescript": "^5.2.2",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
     "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0"
+    "@vitejs/plugin-react": "^4.1.0"
   }
 }
diff --git a/packages/beacon-ui/rollup.config.mjs b/packages/beacon-ui/rollup.config.mjs
@@ -1,26 +1,76 @@
 import postcss from 'rollup-plugin-postcss'
-import css from "rollup-plugin-import-css";
+import css from 'rollup-plugin-import-css'
 import typescript from 'rollup-plugin-typescript2'
-import withSolid from 'rollup-preset-solid'
+import babel from '@rollup/plugin-babel'
+import terser from '@rollup/plugin-terser'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
 
-export default withSolid([
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+export default [
   {
     input: 'src/index.ts',
-    output: '.',
-    plugins: [css(), typescript()]
+    output: {
+      file: 'dist/bundle.js',
+      format: 'iife',
+      name: 'MyApp',
+      sourcemap: true
+    },
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   },
   {
     input: 'src/index.ts',
     output: [
       {
         file: 'dist/cjs/index.js',
-        format: 'cjs'
+        format: 'cjs',
+        sourcemap: true
       },
       {
         file: 'dist/esm/index.js',
-        format: 'esm'
+        format: 'esm',
+        sourcemap: true
       }
     ],
-    plugins: [css(), typescript()]
+    plugins: [
+      resolve({ extensions }),
+      commonjs(),
+      // postcss({
+      //   extract: true,
+      //   minimize: true,
+      //   sourceMap: true,
+      // }),
+      css(),
+      typescript({
+        tsconfig: 'tsconfig.json'
+      }),
+      babel({
+        extensions,
+        babelHelpers: 'bundled',
+        include: ['src/**/*'],
+        presets: [['@babel/preset-react', { runtime: 'automatic' }]]
+      }),
+      // terser()
+    ]
   }
-])
+]
diff --git a/packages/beacon-ui/scripts/server-fix.ts b/packages/beacon-ui/scripts/server-fix.ts
@@ -1,24 +1,24 @@
-const fs = require('fs')
+// const fs = require('fs')
 
-// Read the file into a string
-let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
+// // Read the file into a string
+// let fileData = fs.readFileSync('./dist/cjs/index.js', 'utf8')
 
-// Define the code you want to insert
-const codeToInsert = `if (web.isServer) {
-    web.template = () => {
-      return { cloneNode: () => {} }
-    }
-  }`
+// // Define the code you want to insert
+// const codeToInsert = `if (web.isServer) {
+//     web.template = () => {
+//       return { cloneNode: () => {} }
+//     }
+//   }`
 
-// Split the file into an array of lines
-let fileLines = fileData.split('\n')
+// // Split the file into an array of lines
+// let fileLines = fileData.split('\n')
 
-// Insert the code into the desired line (line number starting from 0)
-const lineToInsert = 5 
-fileLines.splice(lineToInsert, 0, codeToInsert)
+// // Insert the code into the desired line (line number starting from 0)
+// const lineToInsert = 5 
+// fileLines.splice(lineToInsert, 0, codeToInsert)
 
-// Join the modified lines into a string
-fileData = fileLines.join('\n')
+// // Join the modified lines into a string
+// fileData = fileLines.join('\n')
 
-// Write the modified file back to disk
-fs.writeFileSync('./dist/cjs/index.js', fileData)
+// // Write the modified file back to disk
+// fs.writeFileSync('./dist/cjs/index.js', fileData)
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -1,96 +1,104 @@
-import { Component, onCleanup, onMount } from 'solid-js'
-import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
-import Loader from '../loader'
+import React, { useEffect } from "react";
+import { CloseIcon, LeftIcon, LogoIcon } from "../icons";
+import Loader from "../loader";
 
 export interface AlertProps {
-  content: any
-  open: boolean
-  showMore?: boolean
-  extraContent?: any
-  loading?: boolean
-  onCloseClick: () => void
-  onClickShowMore?: () => void
-  onBackClick?: () => void
+  content: any;
+  open: boolean;
+  showMore?: boolean;
+  extraContent?: any;
+  loading?: boolean;
+  onCloseClick: () => void;
+  onClickShowMore?: () => void;
+  onBackClick?: () => void;
 }
 
-const Alert: Component<AlertProps> = (props: AlertProps) => {
-  let prevBodyOverflow: any = null
-  onMount(() => {
-    prevBodyOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  })
+const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+  useEffect(() => {
+    const prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
 
-  onCleanup(() => {
-    document.body.style.overflow = prevBodyOverflow
-  })
+    return () => {
+      document.body.style.overflow = prevBodyOverflow;
+    };
+  }, []);
 
-  const isMobile = window.innerWidth <= 800
+  const isMobile = window.innerWidth <= 800;
 
   return (
     <div
-      class={props.open ? 'alert-wrapper-show' : 'alert-wrapper-hide'}
-      onClick={() => {
-        props.onCloseClick()
-      }}
+      className={props.open ? "alert-wrapper-show" : "alert-wrapper-hide"}
+      onClick={props.onCloseClick}
     >
       <div
-        class={props.open ? 'alert-modal-show' : 'alert-modal-hide'}
-        onClick={(e: any) => {
-          e.stopPropagation()
+        className={props.open ? "alert-modal-show" : "alert-modal-hide"}
+        onClick={(e) => {
+          e.stopPropagation();
         }}
       >
-        <div class="alert-header">
-          {props.onBackClick && (
-            <div class="alert-button-icon" onClick={props.onBackClick}>
+        <div className="alert-header">
+          {props.onBackClick ? (
+            <div className="alert-button-icon" onClick={props.onBackClick}>
               <LeftIcon />
             </div>
+          ) : (
+            <div className="alert-button-icon-empty"></div>
           )}
-          {!props.onBackClick && <div class="alert-button-icon-empty"></div>}
-          <div class="alert-logo">
+          <div className="alert-logo">
             <LogoIcon />
           </div>
-          <div class="alert-button-icon" onClick={props.onCloseClick}>
+          <div className="alert-button-icon" onClick={props.onCloseClick}>
             <CloseIcon />
           </div>
         </div>
         <div
-          class="alert-modal-loading-wrapper"
+          className="alert-modal-loading-wrapper"
           style={
             props.loading
               ? {
                   opacity: 1,
-                  transition: 'all ease 0.3s',
-                  height: '14px',
-                  overflow: 'unset',
-                  width: 'unset'
+                  transition: "all ease 0.3s",
+                  height: "14px",
+                  overflow: "unset",
+                  width: "unset",
+                }
+              : {
+                  opacity: 0,
+                  transition: "all ease 0.3s",
+                  height: 0,
+                  overflow: "hidden",
+                  width: 0,
                 }
-              : { opacity: 0, transition: 'all ease 0.3s', height: 0, overflow: 'hidden', width: 0 }
           }
         >
           <Loader />
         </div>
-        <div class="alert-body" style={{ 'margin-bottom': props.extraContent ? '' : '1.8em' }}>
+        <div
+          className="alert-body"
+          style={{ marginBottom: props.extraContent ? "" : "1.8em" }}
+        >
           {props.content}
           {!isMobile && (
-            <div class={props.showMore ? 'alert-body-extra-show' : 'alert-body-extra-hide'}>
-              {props.extraContent && <div class="alert-divider"></div>}
+            <div
+              className={
+                props.showMore
+                  ? "alert-body-extra-show"
+                  : "alert-body-extra-hide"
+              }
+            >
+              {props.extraContent && <div className="alert-divider"></div>}
               {props.extraContent}
             </div>
           )}
         </div>
         {!isMobile && props.extraContent && (
-          <div
-            class="alert-footer"
-            onClick={() => {
-              if (props.onClickShowMore) props.onClickShowMore()
-            }}
-          >
-            {props.showMore ? 'Show less' : 'Show more'}
+          <div className="alert-footer" onClick={props.onClickShowMore}>
+            {props.showMore ? "Show less" : "Show more"}
           </div>
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Alert
+export default Alert;