fix(ui): npwd components to fix input focus

npwd-community · Aug 30, 2022 · e60eb0b · e60eb0b
1 parent c5cb195
commit e60eb0b
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 77 deletions.
diff --git a/globals.d.ts b/globals.d.ts
@@ -2,3 +2,7 @@ declare module '*.png' {
   const value: any;
   export = value;
 }
+
+declare module 'layout/ui' {
+  export const TextField: any;
+}
diff --git a/src/components/Dialogue.tsx b/src/components/Dialogue.tsx
@@ -12,6 +12,7 @@ import {state} from '../atoms/app-atoms'
 import fetchNui from "../utils/fetchNui";
 import {ServerPromiseResp} from "../types/common";
 import {useSnackbar} from "./snackbar/useSnackbar";
+import {TextField} from 'layout/ui'
 
 interface Dialogue {
   close: () => void;
@@ -63,13 +64,15 @@ export const BuyDialogue: React.FC<Dialogue> = ({close}) => {
             You will receive {(parseFloat(amount) / currentRate).toFixed(2)} bits
           </Typography>
         }
-        <Input
+        <TextField
           value={amount}
           onChange={handleChange}
           placeholder="Amount"
           type="number"
           error={error}
-          startAdornment={<InputAdornment position="start" variant="standard">$</InputAdornment>}
+          InputProps={{
+            startAdornment: <InputAdornment position="start" variant="standard">$</InputAdornment>
+          }}
         />
       </DialogContent>
       <DialogActions>
@@ -130,7 +133,7 @@ export const SellDialogue: React.FC<Dialogue> = ({close}) => {
                 You will receive ${parseFloat(amount) * currentRate}
             </Typography>
         }
-        <Input
+        <TextField
           value={amount}
           onChange={handleChange}
           placeholder="Amount"
@@ -204,14 +207,14 @@ export const TradeDialogue: React.FC<Dialogue> = ({close}) => {
             </Typography>
         }
         <FormGroup>
-          <Input
+          <TextField
             value={amount}
             onChange={handleAmountChange}
             placeholder="Amount"
             type="number"
             error={error}
           />
-          <Input
+          <TextField
             value={source}
             onChange={handleSourceChange}
             placeholder="Player ID"

diff --git a/webpack.config.js b/webpack.config.js
@@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const ReactRefreshTypeScript = require('react-refresh-typescript');
 const isDevelopment = process.env.NODE_ENV === 'development';
+const isIngame = process.env.REACT_APP_IN_GAME === '1';
 
 /* TODO: Fix for real */
 /* Probably bad way of fixing this */
@@ -17,80 +18,83 @@ delete deps['@mui/material'];
 delete deps['@mui/styles'];
 
 module.exports = {
-  entry: './src/bootstrap.ts',
-  mode: isDevelopment ? 'development' : 'production',
-  devtool: 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.[jt]sx?$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: require.resolve('ts-loader'),
-            options: {
-              getCustomTransformers: () => ({
-                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
-              }),
-              transpileOnly: isDevelopment,
+    entry: './src/bootstrap.ts',
+    mode: isDevelopment ? 'development' : 'production',
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            {
+                test: /\.[jt]sx?$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: require.resolve('ts-loader'),
+                        options: {
+                            getCustomTransformers: () => ({
+                                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
+                            }),
+                            transpileOnly: isDevelopment,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                    },
+                ],
             },
-          },
-        ],
-      },
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'file-loader',
-          },
         ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    path: path.resolve(__dirname, 'web/dist'),
-    publicPath: 'auto',
-    clean: true,
-  },
-  plugins: [
-    new ModuleFederationPlugin({
-      name: 'npwd_crypto',
-      filename: 'remoteEntry.js',
-      exposes: {
-        './config': './npwd.config',
-      },
-      shared: {
-        ...deps,
-        react: {
-          singleton: true,
-          requiredVersion: deps.react,
-        },
-        'react-dom': {
-          singleton: true,
-          requiredVersion: deps['react-dom'],
-        }
-      },
-    }),
-    new HtmlWebpackPlugin({
-      cache: false,
-      template: './src/index.html',
-    }),
-    new webpack.DefinePlugin({
-      process: { env: { REACT_APP_IN_GAME: process.env.REACT_APP_IN_GAME } },
-    }),
-    isDevelopment && new ReactRefreshWebpackPlugin(),
-  ].filter(Boolean),
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        path: path.resolve(__dirname, 'web/dist'),
+        publicPath: 'auto',
+        clean: true,
+    },
+    plugins: [
+        new ModuleFederationPlugin({
+            name: 'npwd_crypto',
+            filename: 'remoteEntry.js',
+            exposes: {
+                './config': './npwd.config',
+            },
+            remotes: {
+                layout: "layout@http://localhost:3000/remoteEntry.js"
+            },
+            shared: {
+                ...deps,
+                react: {
+                    singleton: true,
+                    requiredVersion: deps.react,
+                },
+                'react-dom': {
+                    singleton: true,
+                    requiredVersion: deps['react-dom'],
+                }
+            },
+        }),
+        new HtmlWebpackPlugin({
+            cache: false,
+            template: './src/index.html',
+        }),
+        new webpack.DefinePlugin({
+            process: {env: {REACT_APP_IN_GAME: process.env.REACT_APP_IN_GAME}},
+        }),
+        isDevelopment && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
 
-  devServer: {
-    port: 3002,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+    devServer: {
+        port: 3002,
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+            'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+        },
     },
-  },
 };