diff --git a/package.json b/package.json index 55e7fa40a..15e20640c 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ }, "scripts": { "generate-manifest": "node ./source/config/generateManifest.js", - "dev:chrome": "yarn generate-manifest && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack/webpack.dev.js --watch", - "build:chrome": "yarn generate-manifest && cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack/webpack.prod.js", + "dev:chrome": "yarn generate-manifest && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack.dev.js --watch", + "build:chrome": "yarn generate-manifest && cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack.prod.js", "dev-watch-requests:chrome": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end | .environment = {\"WATCH_REQUESTS\": \"active\"}' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch", "dev:firefox": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch", "dev:opera": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=opera webpack --watch", @@ -49,7 +49,7 @@ "@babel/runtime": "^7.21.5", "@headlessui/react": "^1.6.0", "@heroicons/react": "^1.0.5", - "@pollum-io/sysweb3-keyring": "/Users/lucaslovato/Documents/sysweb3/packages/sysweb3-keyring/dist", + "@pollum-io/sysweb3-keyring": "^1.0.479", "@pollum-io/sysweb3-network": "^1.0.95", "@pollum-io/sysweb3-utils": "^1.1.232", "@reduxjs/toolkit": "^1.4.0", diff --git a/source/components/Header/Menus/NetworkMenu.tsx b/source/components/Header/Menus/NetworkMenu.tsx index b435b21a8..335e45b77 100644 --- a/source/components/Header/Menus/NetworkMenu.tsx +++ b/source/components/Header/Menus/NetworkMenu.tsx @@ -12,7 +12,10 @@ import btcIcon from 'assets/images/btcIcon.svg'; import ethIcon from 'assets/images/ethIcon.svg'; import { Icon } from 'components/index'; import { useUtils } from 'hooks/index'; -import { getController } from 'scripts/Background'; +import { + dispatchChangeNetworkBgEvent, + getController, +} from 'scripts/Background'; import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; import { RootState } from 'state/store'; import { NetworkType } from 'utils/types'; @@ -95,6 +98,7 @@ export const NetworkMenu: React.FC = ( return; } await wallet.setActiveNetwork(network, chain); + dispatchChangeNetworkBgEvent(network, !!network?.slip44); } catch (networkError) { navigate('/home'); } diff --git a/source/config/webpack.common.js b/source/config/webpack.common.js new file mode 100644 index 000000000..7ea45b53d --- /dev/null +++ b/source/config/webpack.common.js @@ -0,0 +1,201 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ + +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const NodePolyfillPlugin = require('node-polyfill-webpack-plugin'); +const { join, resolve } = require('path'); +const TerserPlugin = require('terser-webpack-plugin'); +const { DefinePlugin } = require('webpack'); + +const viewsPath = join(__dirname, '../../views'); +const sourcePath = join(__dirname, '../../source'); +const destPath = join(__dirname, '../../build'); +const targetBrowser = process.env.TARGET_BROWSER || 'chrome'; + +module.exports = { + entry: { + manifest: join(__dirname, '../../manifest.json'), + background: join(sourcePath, 'scripts/Background', 'index.ts'), + inpage: join(sourcePath, 'scripts/ContentScript', 'inject/inpage.ts'), + pali: join(sourcePath, 'scripts/ContentScript', 'inject/pali.ts'), + handleWindowProperties: join( + sourcePath, + 'scripts/ContentScript', + 'inject/handleWindowProperties.ts' + ), + contentScript: join(sourcePath, 'scripts/ContentScript', 'index.ts'), + app: join(sourcePath, 'pages/App', 'index.tsx'), + external: join(sourcePath, 'pages/External', 'index.tsx'), + trezorScript: join( + sourcePath, + 'scripts/ContentScript/trezor', + 'trezor-content-script.ts' + ), + trezorUSB: join( + sourcePath, + 'scripts/ContentScript/trezor', + 'trezor-usb-permissions.ts' + ), + offscreenScript: join( + sourcePath, + 'scripts/ContentScript/offscreen', + 'index.ts' + ), + }, + output: { + path: join(destPath, targetBrowser), + filename: 'js/[name].bundle.js', + clean: true, + }, + resolve: { + extensions: ['.ts', '.tsx', '.js', '.json'], + alias: { + assets: resolve(__dirname, '../../source/assets'), + components: resolve(__dirname, '../../source/components'), + scripts: resolve(__dirname, '../../source/scripts'), + containers: resolve(__dirname, '../../source/containers'), + pages: resolve(__dirname, '../../source/pages'), + routers: resolve(__dirname, '../../source/routers'), + state: resolve(__dirname, '../../source/state'), + constants: resolve(__dirname, '../../source/constants'), + services: resolve(__dirname, '../../source/services'), + hooks: resolve(__dirname, '../../source/hooks'), + utils: resolve(__dirname, '../../source/utils'), + helpers: resolve(__dirname, '../../source/helpers'), + }, + fallback: { + fs: false, + }, + }, + module: { + rules: [ + { + test: /\.(jpg|png|xlsx|xls|csv)$/i, + type: 'asset/resource', + generator: { + filename: '[path][name][ext]', + }, + exclude: /node_modules/, + }, + { + test: /\.(svg)$/i, + type: 'asset/inline', + exclude: /node_modules/, + }, + { + test: /\.(js|ts)x?$/, + loader: 'babel-loader', + exclude: /node_modules/, + }, + { + test: /\.less$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'less-loader', + options: { + lessOptions: { + modifyVars: { + 'primary-color': '#1DA57A', + 'link-color': '#1DA57A', + 'border-radius-base': '2rem', + }, + javascriptEnabled: true, + }, + }, + }, + ], + }, + { + test: /\.(ttf)$/, + type: 'asset/resource', + generator: { + filename: '[path][name][ext]', + }, + }, + { + test: /\.(sa|sc|c)ss$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + 'resolve-url-loader', + 'sass-loader', + ], + }, + ], + }, + plugins: [ + new ForkTsCheckerWebpackPlugin(), + new DefinePlugin({ + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + TARGET_BROWSER: JSON.stringify(targetBrowser), + }), + new HtmlWebpackPlugin({ + template: join(viewsPath, 'app.html'), + inject: 'body', + chunks: ['app'], + hash: true, + filename: 'app.html', + }), + new HtmlWebpackPlugin({ + template: join(viewsPath, 'external.html'), + inject: 'body', + chunks: ['external'], + hash: true, + filename: 'external.html', + }), + new HtmlWebpackPlugin({ + template: join(viewsPath, 'trezor-usb-permissions.html'), + filename: 'trezor-usb-permissions.html', + inject: 'body', + chunks: ['trezorUSB'], + }), + new HtmlWebpackPlugin({ + template: join(viewsPath, 'offscreen.html'), + filename: 'offscreen.html', + inject: 'body', + chunks: ['offscreenScript'], + }), + new MiniCssExtractPlugin({ filename: 'css/[name].css' }), + new CopyWebpackPlugin({ + patterns: [{ from: 'source/assets', to: 'assets' }], + }), + new CopyWebpackPlugin({ + patterns: [ + { + from: './manifest.json', + to: join(__dirname, '../../build/chrome'), + force: true, + transform: function (content) { + return Buffer.from( + JSON.stringify({ ...JSON.parse(content.toString()) }) + ); + }, + }, + ], + }), + new NodePolyfillPlugin(), + ], + optimization: { + minimizer: [ + new CssMinimizerPlugin(), + new TerserPlugin({ + parallel: true, + terserOptions: { + compress: { + drop_console: true, + }, + output: { + comments: false, + }, + }, + extractComments: false, + }), + ], + }, +}; diff --git a/source/config/webpack/webpack.dev.js b/source/config/webpack.dev.js similarity index 82% rename from source/config/webpack/webpack.dev.js rename to source/config/webpack.dev.js index 12a8f8c17..f1379ae4c 100644 --- a/source/config/webpack/webpack.dev.js +++ b/source/config/webpack.dev.js @@ -1,4 +1,7 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ + const { merge } = require('webpack-merge'); + const common = require('./webpack.common'); module.exports = merge(common, { diff --git a/source/config/webpack/webpack.prod.js b/source/config/webpack.prod.js similarity index 77% rename from source/config/webpack/webpack.prod.js rename to source/config/webpack.prod.js index 75860666a..27149c16b 100644 --- a/source/config/webpack/webpack.prod.js +++ b/source/config/webpack.prod.js @@ -1,9 +1,13 @@ -const { merge } = require('webpack-merge'); +/* eslint-disable @typescript-eslint/no-var-requires */ + const path = require('path'); -const ZipPlugin = require('zip-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const { merge } = require('webpack-merge'); +const ZipPlugin = require('zip-webpack-plugin'); + const common = require('./webpack.common'); -const version = require('../../../package.json').version; + +const version = require('../../package.json').version; const targetBrowser = process.env.TARGET_BROWSER || 'chrome'; @@ -13,9 +17,7 @@ module.exports = merge(common, { plugins: [ new ZipPlugin({ filename: `pali-wallet-${targetBrowser}-${version}`, - path: path.resolve(__dirname, '../../../build'), - pathPrefix: `${targetBrowser}`, - include: [/\.js$/, /\.css$/, /\.html$/, /manifest\.json$/], + path: path.join(__dirname, '../../build'), extension: `${ targetBrowser === 'opera' ? 'crx' @@ -29,7 +31,7 @@ module.exports = merge(common, { openAnalyzer: false, reportFilename: path.join( __dirname, - '../../../build', + '../../build', `${targetBrowser}-report.html` ), }), diff --git a/source/config/webpack/alias.js b/source/config/webpack/alias.js deleted file mode 100644 index 73f2b55a8..000000000 --- a/source/config/webpack/alias.js +++ /dev/null @@ -1,18 +0,0 @@ -const { resolve } = require('path'); - -const alias = { - assets: resolve(__dirname, '../../../source/assets'), - components: resolve(__dirname, '../../../source/components'), - scripts: resolve(__dirname, '../../../source/scripts'), - containers: resolve(__dirname, '../../../source/containers'), - pages: resolve(__dirname, '../../../source/pages'), - routers: resolve(__dirname, '../../../source/routers'), - state: resolve(__dirname, '../../../source/state'), - constants: resolve(__dirname, '../../../source/constants'), - services: resolve(__dirname, '../../../source/services'), - hooks: resolve(__dirname, '../../../source/hooks'), - utils: resolve(__dirname, '../../../source/utils'), - helpers: resolve(__dirname, '../../../source/helpers'), -}; - -module.exports = alias; diff --git a/source/config/webpack/entry.js b/source/config/webpack/entry.js deleted file mode 100644 index a48bc666c..000000000 --- a/source/config/webpack/entry.js +++ /dev/null @@ -1,34 +0,0 @@ -const { join } = require('path'); -const paths = require('./paths'); - -const entry = { - manifest: join(__dirname, '../../../manifest.json'), - background: join(paths.sourcePath, 'scripts/Background', 'index.ts'), - inpage: join(paths.sourcePath, 'scripts/ContentScript', 'inject/inpage.ts'), - pali: join(paths.sourcePath, 'scripts/ContentScript', 'inject/pali.ts'), - handleWindowProperties: join( - paths.sourcePath, - 'scripts/ContentScript', - 'inject/handleWindowProperties.ts' - ), - contentScript: join(paths.sourcePath, 'scripts/ContentScript', 'index.ts'), - app: join(paths.sourcePath, 'pages/App', 'index.tsx'), - external: join(paths.sourcePath, 'pages/External', 'index.tsx'), - trezorScript: join( - paths.sourcePath, - 'scripts/ContentScript/trezor', - 'trezor-content-script.ts' - ), - trezorUSB: join( - paths.sourcePath, - 'scripts/ContentScript/trezor', - 'trezor-usb-permissions.ts' - ), - offscreenScript: join( - paths.sourcePath, - 'scripts/ContentScript/offscreen', - 'index.ts' - ), -}; - -module.exports = entry; diff --git a/source/config/webpack/optimization.js b/source/config/webpack/optimization.js deleted file mode 100644 index 70746e2c0..000000000 --- a/source/config/webpack/optimization.js +++ /dev/null @@ -1,22 +0,0 @@ -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); - -const optimization = { - minimizer: [ - new CssMinimizerPlugin(), - new TerserPlugin({ - parallel: true, - terserOptions: { - compress: { - drop_console: true, - }, - output: { - comments: false, - }, - }, - extractComments: false, - }), - ], -}; - -module.exports = optimization; diff --git a/source/config/webpack/paths.js b/source/config/webpack/paths.js deleted file mode 100644 index 69871bace..000000000 --- a/source/config/webpack/paths.js +++ /dev/null @@ -1,9 +0,0 @@ -const { join } = require('path'); - -const paths = { - viewsPath: join(__dirname, '../../../views'), - sourcePath: join(__dirname, '../../../source'), - destPath: join(__dirname, '../../../build'), -}; - -module.exports = paths; diff --git a/source/config/webpack/plugins.js b/source/config/webpack/plugins.js deleted file mode 100644 index 0cd18fc03..000000000 --- a/source/config/webpack/plugins.js +++ /dev/null @@ -1,57 +0,0 @@ -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const NodePolyfillPlugin = require('node-polyfill-webpack-plugin'); -const { DefinePlugin } = require('webpack'); -const paths = require('./paths'); -const { join } = require('path'); - -const targetBrowser = process.env.TARGET_BROWSER || 'chrome'; - -const plugins = [ - new ForkTsCheckerWebpackPlugin(), - new DefinePlugin({ - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - TARGET_BROWSER: JSON.stringify(targetBrowser), - }), - new HtmlWebpackPlugin({ - template: join(paths.viewsPath, 'app.html'), - inject: 'body', - chunks: ['app'], - hash: true, - filename: 'app.html', - }), - new HtmlWebpackPlugin({ - template: join(paths.viewsPath, 'external.html'), - inject: 'body', - chunks: ['external'], - hash: true, - filename: 'external.html', - }), - new HtmlWebpackPlugin({ - template: join(paths.viewsPath, 'trezor-usb-permissions.html'), - filename: 'trezor-usb-permissions.html', - inject: 'body', - chunks: ['trezorUSB'], - }), - new HtmlWebpackPlugin({ - template: join(paths.viewsPath, 'offscreen.html'), - filename: 'offscreen.html', - inject: 'body', - chunks: ['offscreenScript'], - }), - new MiniCssExtractPlugin({ filename: 'css/[name].css' }), - new CopyWebpackPlugin({ - patterns: [ - { from: 'source/assets', to: 'assets' }, - { - from: 'manifest.json', - to: join(__dirname, '../../../build', targetBrowser, 'manifest.json'), - }, - ], - }), - new NodePolyfillPlugin(), -]; - -module.exports = plugins; diff --git a/source/config/webpack/rules.js b/source/config/webpack/rules.js deleted file mode 100644 index c2d24a476..000000000 --- a/source/config/webpack/rules.js +++ /dev/null @@ -1,61 +0,0 @@ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -const rules = [ - { - test: /\.(jpg|png|xlsx|xls|csv)$/i, - type: 'asset/resource', - generator: { - filename: '[path][name][ext]', - }, - exclude: /node_modules/, - }, - { - test: /\.(svg)$/i, - type: 'asset/inline', - exclude: /node_modules/, - }, - { - test: /\.(js|ts)x?$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - { - test: /\.less$/, - use: [ - 'style-loader', - 'css-loader', - { - loader: 'less-loader', - options: { - lessOptions: { - modifyVars: { - 'primary-color': '#1DA57A', - 'link-color': '#1DA57A', - 'border-radius-base': '2rem', - }, - javascriptEnabled: true, - }, - }, - }, - ], - }, - { - test: /\.(ttf)$/, - type: 'asset/resource', - generator: { - filename: '[path][name][ext]', - }, - }, - { - test: /\.(sa|sc|c)ss$/, - use: [ - MiniCssExtractPlugin.loader, - 'css-loader', - 'postcss-loader', - 'resolve-url-loader', - 'sass-loader', - ], - }, -]; - -module.exports = rules; diff --git a/source/config/webpack/webpack.common.js b/source/config/webpack/webpack.common.js deleted file mode 100644 index a27a07d3c..000000000 --- a/source/config/webpack/webpack.common.js +++ /dev/null @@ -1,30 +0,0 @@ -const { join } = require('path'); -const paths = require('./paths'); -const rules = require('./rules'); -const plugins = require('./plugins'); -const optimization = require('./optimization'); -const entry = require('./entry'); -const alias = require('./alias'); - -const targetBrowser = process.env.TARGET_BROWSER || 'chrome'; - -module.exports = { - entry, - output: { - path: join(paths.destPath, targetBrowser), - filename: 'js/[name].bundle.js', - clean: true, - }, - resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'], - alias, - fallback: { - fs: false, - }, - }, - module: { - rules, - }, - plugins, - optimization, -}; diff --git a/source/pages/Import/ImportPhrase.tsx b/source/pages/Import/ImportPhrase.tsx index ba86bd668..59ec75a65 100755 --- a/source/pages/Import/ImportPhrase.tsx +++ b/source/pages/Import/ImportPhrase.tsx @@ -20,7 +20,6 @@ const eyeStyle = 'w-[18px] max-w-none cursor-pointer hover:cursor-pointer z-20'; const ImportPhrase: React.FC = () => { const { TextArea } = Input; const controller = getController(); - console.log({ controller }); const [form] = useForm(); const navigate = useNavigate(); const { t } = useTranslation(); diff --git a/source/scripts/Background/controllers/MainController.ts b/source/scripts/Background/controllers/MainController.ts index f3718783a..7454a93b8 100644 --- a/source/scripts/Background/controllers/MainController.ts +++ b/source/scripts/Background/controllers/MainController.ts @@ -173,9 +173,6 @@ class MainController extends KeyringManager { const chainId = network.chainId.toString(16); const networkVersion = network.chainId; if (sucess) { - console.log({ - provider: this.keyringManager.ethereumTransaction.web3Provider, - }); this.web3Provider = this.keyringManager.ethereumTransaction.web3Provider; this.transactionsManager = TransactionsManager( this.keyringManager.ethereumTransaction.web3Provider diff --git a/source/scripts/Background/controllers/index.ts b/source/scripts/Background/controllers/index.ts index d6aa5e372..dc74e5aca 100755 --- a/source/scripts/Background/controllers/index.ts +++ b/source/scripts/Background/controllers/index.ts @@ -306,10 +306,8 @@ const MasterController = ( }); } const walletState = vaultToWalletState(externalStore.getState().vault); - console.log({ walletState }); dapp = Object.freeze(DAppController()); wallet = new MainController(walletState); - console.log({ wallet }); utils = Object.freeze(ControllerUtils()); wallet.setStorage(chrome.storage.local); // readyCallback({ diff --git a/source/scripts/Background/index.ts b/source/scripts/Background/index.ts index f12d4ee19..b203c602d 100755 --- a/source/scripts/Background/index.ts +++ b/source/scripts/Background/index.ts @@ -1,6 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ import 'emoji-log'; +import { INetwork } from '@pollum-io/sysweb3-network'; + import { rehydrate as dappRehydrate } from 'state/dapp'; import { loadState } from 'state/paliStorage'; import { rehydrate as priceRehydrate } from 'state/price'; @@ -35,7 +37,6 @@ let walletMethods = {} as any; let MasterControllerInstance = {} as IMasterController; (async () => { const storageState = await loadState(); - console.log({ storageState }); if (storageState) { store.dispatch(vaultRehydrate(storageState.vault)); store.dispatch(dappRehydrate(storageState.dapp)); @@ -109,13 +110,6 @@ const handleLogout = () => { } }; -chrome.storage.onChanged.addListener((changes) => { - console.log({ changes }); - console.log({ - formatted: parseJsonRecursively(changes?.['persist:root']?.newValue), - }); -}); - let requestCount = 0; const requestsPerSecond = {}; const requestCallback = (details: any) => { @@ -168,7 +162,7 @@ const updateRequestsPerSecond = () => { // Interval to perform the information update and display the requests per second every second. setInterval(updateRequestsPerSecond, 1000); -chrome.runtime.onMessage.addListener(async ({ type, target }) => { +chrome.runtime.onMessage.addListener(async ({ type, target, data }) => { switch (type) { case 'ping': if (target === 'background') @@ -177,6 +171,14 @@ chrome.runtime.onMessage.addListener(async ({ type, target }) => { case 'reset_autolock': // if (target === 'background') restartLockTimeout(); break; + case 'changeNetwork': + if (walletMethods?.setActiveNetwork && data) { + walletMethods?.setActiveNetwork( + data?.network, + data?.isBitcoinBased ? 'syscoin' : 'ethereum' + ); + } + break; case 'verifyPaliRequests': if (target === 'background' && process.env.NODE_ENV === 'development') verifyAllPaliRequests(); @@ -468,6 +470,17 @@ export const resetPaliRequestsCount = () => { }); }; +export const dispatchChangeNetworkBgEvent = ( + network: INetwork, + isBitcoinBased: boolean +) => { + chrome.runtime.sendMessage({ + type: 'changeNetwork', + target: 'background', + data: { network, isBitcoinBased }, + }); +}; + export const setLanguageInLocalStorage = (lang: PaliLanguages) => { chrome.storage.local.set({ language: lang }); }; diff --git a/source/state/rehydrate.ts b/source/state/rehydrate.ts index fa4642f88..8b3f01b64 100644 --- a/source/state/rehydrate.ts +++ b/source/state/rehydrate.ts @@ -8,7 +8,6 @@ import { loadState } from './paliStorage'; export const rehydrateStore = async (store: Store) => { try { const storageState = await loadState(); - console.log({ storageState }); if (storageState) { store.dispatch(vaultRehydrate(storageState.vault)); store.dispatch(dappRehydrate(storageState.dapp));