Skip to content

upgrade react scripts #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jun 6, 2023
Merged

upgrade react scripts #507

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fbb2db2
upgrade react scripts
vipineth Jun 2, 2023
6e2ba27
add index.d.ts
vipineth Jun 2, 2023
303b0e2
add po files loader
vipineth Jun 2, 2023
0e85897
update module loader logic
vipineth Jun 2, 2023
d4b338c
add .env file
vipineth Jun 2, 2023
26be7bf
add i18n loader
vipineth Jun 2, 2023
7b05911
remove language list
vipineth Jun 2, 2023
798033e
remove unused variables
vipineth Jun 2, 2023
a5da2e8
upgrade lingui/loader
vipineth Jun 3, 2023
e05030e
change config
vipineth Jun 3, 2023
a594482
fix i18n warning
vipineth Jun 4, 2023
b8b6047
add buffer
vipineth Jun 5, 2023
19c65c5
refactor lazy translation
vipineth Jun 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
GENERATE_SOURCEMAP=false
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does it mean local server and/or test stands won't have source maps?

Copy link
Contributor Author

@vipineth vipineth Jun 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is set for production.

From docs:

When set to false, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.

https://create-react-app.dev/docs/advanced-configuration/

Active PR for the issue: facebook/create-react-app#11752

29 changes: 29 additions & 0 deletions config-overrides.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const webpack = require("webpack");

module.exports = function override(config) {
// https://github.com/lingui/js-lingui/issues/1195
// Adding loader to use for .po files to webpack
const loaders = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
loaders.oneOf.splice(loaders.length - 1, 0, {
test: /\.po/,
use: [
{
loader: "@lingui/loader",
},
],
});

config.resolve.fallback = {
os: false,
http: false,
https: false,
stream: false,
crypto: false,
};
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
]);
return config;
};
33 changes: 18 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@types/react-dom": "18.0.6",
"@types/react-router-dom": "5.3.3",
"@uniswap/sdk-core": "3.0.1",
"@uniswap/v3-sdk": "3.7.1",
"@uniswap/v3-sdk": "3.9.0",
"@web3-react/core": "6.1.9",
"@web3-react/injected-connector": "6.0.7",
"@web3-react/walletconnect-connector": "6.2.8",
Expand All @@ -44,7 +44,7 @@
"react-icons": "4.3.1",
"react-remove-scroll": "2.5.5",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-scripts": "5.0.1",
"react-select": "5.2.1",
"react-tabs": "3.2.3",
"react-toastify": "6.0.9",
Expand All @@ -59,15 +59,15 @@
"react-error-overlay": "6.0.9"
},
"scripts": {
"start": "PORT=3010 react-scripts start",
"start-home": "yarn lingui:prepare && PORT=3010 env-cmd -e development-home react-scripts start",
"start-app": "yarn lingui:prepare && PORT=3011 env-cmd -e development-app react-scripts start",
"start-win": "set PORT=3010&react-scripts start",
"build": "INLINE_RUNTIME_CHUNK=false yarn test:ci && react-scripts build",
"build-home": "INLINE_RUNTIME_CHUNK=false env-cmd -e production-home react-scripts build",
"build-app": "INLINE_RUNTIME_CHUNK=false env-cmd -e production-app yarn test:ci && react-scripts build",
"test": "react-scripts test",
"test:ci": "react-scripts test --watchAll=false",
"start": "PORT=3010 react-app-rewired start",
"start-home": "yarn lingui:prepare && PORT=3010 env-cmd -e development-home react-app-rewired start",
"start-app": "yarn lingui:prepare && PORT=3011 env-cmd -e development-app react-app-rewired start",
"start-win": "set PORT=3010&react-app-rewired start",
"build": "INLINE_RUNTIME_CHUNK=false yarn test:ci && react-app-rewired build",
"build-home": "INLINE_RUNTIME_CHUNK=false env-cmd -e production-home react-app-rewired build",
"build-app": "INLINE_RUNTIME_CHUNK=false env-cmd -e production-app yarn test:ci && react-app-rewired build",
"test": "react-app-rewired test",
"test:ci": "react-app-rewired test --watchAll=false",
"eject": "react-scripts eject",
"lint": "node node_modules/.bin/eslint src",
"pre-commit": "npm run test -- --watchAll=false && npm run lint",
Expand Down Expand Up @@ -100,13 +100,16 @@
]
},
"devDependencies": {
"@lingui/cli": "^3.13.3",
"@lingui/loader": "3.14.0",
"@lingui/cli": "3.13.3",
"@lingui/loader": "3.13.3",
"@lingui/macro": "3.13.3",
"eslint": "7.32.0",
"buffer": "6.0.3",
"eslint": "^8.41.0",
"eslint-config-react-app": "^7.0.1",
"husky": "7.0.4",
"lint-staged": "12.3.4",
"prettier": "2.5.1"
"prettier": "2.5.1",
"react-app-rewired": "2.2.1"
},
"lint-staged": {
"src/**/*.{js,ts,jsx,tsx}": [
Expand Down
3 changes: 1 addition & 2 deletions src/components/Exchange/FeesTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ function getFeeLabel(type: FeeType) {
deposit: t`Deposit Fee`,
execution: t`Execution Fee`,
};

return i18n._(labels[type]);
return i18n._(/*i18n*/ labels[type]);
Copy link
Contributor

@divhead divhead Jun 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mm, is /i18n/ some kind of magic comment for lingui? Or can it be deleted?

Btw, probably this syntax is not needed as getFeeLabel is called inside component during render so language should update correctly with simple return?

return labels[type]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I tested it and works well. I have removed it now.

}

function getExecutionFeeStr(chainId, executionFee, executionFeeUsd) {
Expand Down
14 changes: 7 additions & 7 deletions src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,34 +32,34 @@ export default function Footer({ showRedirectModal, redirectPopupTimestamp }: Pr
{getFooterLinks(isHome).map(({ external, text, link, isAppLink }) => {
if (external) {
return (
<ExternalLink key={i18n._(text)} href={link} className="Footer-link">
{i18n._(text)}
<ExternalLink key={text} href={link} className="Footer-link">
{i18n._(/*i18n*/ text)}
</ExternalLink>
);
}
if (isAppLink) {
if (shouldShowRedirectModal(redirectPopupTimestamp)) {
return (
<div
key={i18n._(text)}
key={text}
className="Footer-link a"
onClick={() => showRedirectModal && showRedirectModal(link)}
>
{i18n._(text)}
{i18n._(/*i18n*/ text)}
</div>
);
} else {
const baseUrl = getAppBaseUrl();
return (
<a key={i18n._(text)} href={baseUrl + link} className="Footer-link">
{i18n._(text)}
<a key={text} href={baseUrl + link} className="Footer-link">
{i18n._(/*i18n*/ text)}
</a>
);
}
}
return (
<NavLink key={link} to={link} className="Footer-link" activeClassName="active">
{i18n._(text)}
{i18n._(/*i18n*/ text)}
</NavLink>
);
})}
Expand Down
13 changes: 6 additions & 7 deletions src/components/Footer/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { defineMessage } from "@lingui/macro";
import { t } from "@lingui/macro";
import "./Footer.css";
import twitterIcon from "img/ic_twitter.svg";
import discordIcon from "img/ic_discord.svg";
import telegramIcon from "img/ic_telegram.svg";
import githubIcon from "img/ic_github.svg";
import substackIcon from "img/ic_substack.svg";
import { MessageDescriptor } from "@lingui/core";

type Link = {
text: MessageDescriptor;
text: string;
link: string;
external?: boolean;
isAppLink?: boolean;
Expand All @@ -22,13 +21,13 @@ type SocialLink = {

export const FOOTER_LINKS: { home: Link[]; app: Link[] } = {
home: [
{ text: defineMessage({ message: "Terms and Conditions" }), link: "/terms-and-conditions" },
{ text: defineMessage({ message: "Referral Terms" }), link: "/referral-terms" },
{ text: defineMessage({ message: "Media Kit" }), link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
{ text: t`Terms and Conditions`, link: "/terms-and-conditions" },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but here FOOTER_LINKS should be inside getFooterLinks function?
Otherwise they are only initialized once?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved it. Thanks for noticing.

{ text: t`Referral Terms`, link: "/referral-terms" },
{ text: t`Media Kit`, link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
// { text: "Jobs", link: "/jobs", isAppLink: true },
],
app: [
{ text: defineMessage({ message: "Media Kit" }), link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
{ text: t`Media Kit`, link: "https://gmxio.gitbook.io/gmx/media-kit", external: true },
// { text: "Jobs", link: "/jobs" },
],
};
Expand Down
4 changes: 2 additions & 2 deletions src/lib/legacy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1457,7 +1457,7 @@ export function getTradePageUrl() {
}

export function importImage(name) {
let tokenImage: { default: string } | null = null;
let tokenImage = "";

try {
tokenImage = require("img/" + name);
Expand All @@ -1466,7 +1466,7 @@ export function importImage(name) {
console.error(error);
}

return tokenImage?.default;
return tokenImage;
}

export function getTwitterIntentURL(text, url = "", hashtag = "") {
Expand Down
Loading