Skip to content
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

Jump to bottom

Create translation files for bridge UI and sync them with Crowdin #132

Merged
merged 2 commits into from
Jun 14, 2024
Merged

Create translation files for bridge UI and sync them with Crowdin #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c201a08
Integrate react-i18n to bridge UI
nop33 Jun 13, 2024
9fdd562
Integrate bridge UI to Crowdin
nop33 Jun 14, 2024
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
36 changes: 36 additions & 0 deletions .github/workflows/translations-sync.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
name: Sync translations
Copy link
Member Author

Choose a reason for hiding this comment

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

This workflow will:

  1. Upload new translation strings to Crowdin
  2. Download any new approved translations from Crowdin


on:
workflow_dispatch:
push:
paths: ['bridge_ui/locales/**']
branches: [master]
Comment on lines +4 to +7
Copy link
Member Author

Choose a reason for hiding this comment

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

This workflow will run either when we manually run it, or when there is any change in the translation files when pushing to master.


permissions:
contents: write
pull-requests: write
Comment on lines +9 to +11
Copy link
Member Author

Choose a reason for hiding this comment

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

This is required so that Crowdin can open PRs in this repo. We need to make sure that GitHub Actions are allowed to do that. This can be toggled in the settings of this repo: https://github.com/alephium/wormhole-fork/settings/actions

It looks like this:

image


jobs:
sync-translations:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Sync sources and translations
uses: crowdin/github-action@v2
with:
config: 'crowdin.yml'
upload_sources: true
upload_translations: true
download_translations: true
export_only_approved: true
localization_branch_name: l10n_crowdin_translations
create_pull_request: true
pull_request_title: 'New Crowdin translations'
pull_request_body: 'New translations from Crowdin.'
pull_request_base_branch_name: 'master'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
Comment on lines +35 to +36
Copy link
Member Author

Choose a reason for hiding this comment

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

We need to set these 2 secrets up in this project. Hit me up to give you the secrets.

302 changes: 302 additions & 0 deletions bridge_ui/locales/en-US/translation.json
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

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

This is the source file of all translations. When updating the UI, new strings need to be added here so that they are synced with Crowdin at the next push on master.

Large diffs are not rendered by default.

117 changes: 112 additions & 5 deletions bridge_ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions bridge_ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"qrcode.react": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^14.1.2",
Copy link
Member Author

Choose a reason for hiding this comment

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

This library takes care of using the right translation file based on the choice of the user (language switcher component will be implemented later, once we have some translations, for now we only have the English source file).

"react-modal": "^3.15.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
Expand Down
28 changes: 14 additions & 14 deletions bridge_ui/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import { useWallet } from "@alephium/web3-react";
import { useEffect } from "react";
import { web3 } from "@alephium/web3";
import backgroundGradient from "./images/top-gradient.png";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles((theme) => ({
appBar: {
Expand Down Expand Up @@ -129,6 +130,7 @@ const useStyles = makeStyles((theme) => ({
}));

function App() {
const { t } = useTranslation();
const classes = useStyles();
const isBeta = useBetaContext();
const { push } = useHistory();
Expand All @@ -152,7 +154,7 @@ function App() {
{CLUSTER === "mainnet" ? null : (
<AppBar position="static" className={classes.betaBanner} elevation={0}>
<Typography style={{ textAlign: "center" }}>
Caution! You are using the {CLUSTER} build of this app.
{t("Caution! You are using the {{ networkName }} build of this app.", { networkName: CLUSTER })}
</Typography>
</AppBar>
)}
Expand All @@ -171,7 +173,7 @@ function App() {
>
<img
src={Alephium}
alt="Alephium"
alt={t("Alephium")}
className={classes.alephiumLogo}
/>
</Link>
Expand All @@ -184,7 +186,7 @@ function App() {
color="inherit"
className={classes.link}
>
Bridge
{t("Bridge")}
</Link>
<Link
href="https://explorer.bridge.alephium.org"
Expand All @@ -193,7 +195,7 @@ function App() {
color="inherit"
className={classes.link}
>
Explorer
{t("Explorer")}
</Link>
<Link
href="https://alephium.org"
Expand All @@ -202,12 +204,12 @@ function App() {
color="inherit"
className={classes.link}
>
Alephium
{t("Alephium")}
</Link>
</div>
</Hidden>
<Hidden implementation="css" smUp>
<Tooltip title="View the FAQ">
<Tooltip title={t("View the FAQ")}>
<IconButton
href="https://docs.wormholenetwork.com/wormhole/faqs"
target="_blank"
Expand All @@ -224,8 +226,7 @@ function App() {
{isBeta ? (
<AppBar position="static" className={classes.betaBanner} elevation={0}>
<Typography style={{ textAlign: "center" }}>
Caution! You have enabled the beta. Enter the secret code again to
disable.
{t("Caution! You have enabled the beta. Enter the secret code again to disable.")}
</Typography>
</AppBar>
) : null}
Expand All @@ -236,25 +237,24 @@ function App() {
subtitle={
<>
<Typography variant="h5">
A bridge that offers unlimited transfers across chains for
tokens.
{t("A bridge that offers unlimited transfers across chains for tokens.")}
</Typography>
</>
}
>
Token Bridge 🌉
{t("Token Bridge")} 🌉
</HeaderText>
<Tabs
value={pathname}
variant="fullWidth"
onChange={handleTabChange}
indicatorColor="primary"
>
<Tab label="Tokens" value="/transfer" disableRipple />
<Tab label={t("Tokens_other")} value="/transfer" disableRipple />
{/* <Tab label="NFTs" value="/nft" /> */}
<Tab label="Redeem" value="/redeem" to="/redeem" disableRipple />
<Tab label={t("Redeem")} value="/redeem" to="/redeem" disableRipple />
<Tab
label="Transactions"
label={t("Transactions")}
value="/transactions"
to="/transactions"
disableRipple
Expand Down
4 changes: 3 additions & 1 deletion bridge_ui/src/components/Attest/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { CHAIN_ID_TERRA } from "@alephium/wormhole-sdk";
import { CircularProgress, makeStyles } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import useFetchForeignAsset from "../../hooks/useFetchForeignAsset";
import { useHandleCreateWrapped } from "../../hooks/useHandleCreateWrapped";
Expand All @@ -26,6 +27,7 @@ const useStyles = makeStyles((theme) => ({
}));

function Create() {
const { t } = useTranslation();
const classes = useStyles();
const targetChain = useSelector(selectAttestTargetChain);
const originAsset = useSelector(selectAttestSourceAsset);
Expand Down Expand Up @@ -61,7 +63,7 @@ function Create() {
showLoader={showLoader}
error={error}
>
{shouldUpdate ? "Update" : "Create"}
{shouldUpdate ? t("Update") : t("Create")}
</ButtonWithLoader>
<WaitingForWalletMessage />
</>
Expand Down
Loading
Loading