fix: qa localisation (#489)

* feat: added locale utils * feat: localisation for jsx components * chore: lint * chore: tests fix for localisation and lint * feat: added french translation * chore: lint + prettier * chore: handle comments * chore: lint + prettier * chore: fix tests * chore: lint + prettier * chore: fix comment and added RULES.md * chore: fix comments * chore: qa fix * chore: updated language file * chore: lint
Consensys · Jan 20, 2025 · d1bdd22 · d1bdd22
1 parent 4e76a73
commit d1bdd22
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/packages/starknet-snap/locales/en.json b/packages/starknet-snap/locales/en.json
@@ -28,6 +28,9 @@
     "amountWithSymbol": {
       "message": "Amount ({1})"
     },
+    "autoSwitchToFundedToken": {
+      "message": "If the chosen token has no funds, the system will automatically switch to a funded token."
+    },
     "balance": {
       "message": "Balance"
     },
@@ -73,6 +76,9 @@
     "explorerUrl": {
       "message": "Explorer URL"
     },
+    "feeToken": {
+      "message": "Fee Token"
+    },
     "message": {
       "message": "Message"
     },
@@ -97,6 +103,9 @@
     "rpcUrl": {
       "message": "RPC URL"
     },
+    "selectFeeToken": {
+      "message": "Select Fee Token"
+    },
     "senderAddress": {
       "message": "Sender Address"
     },

diff --git a/packages/starknet-snap/locales/fr.json b/packages/starknet-snap/locales/fr.json
@@ -28,6 +28,9 @@
     "amountWithSymbol": {
       "message": "Montant ({1})"
     },
+    "autoSwitchToFundedToken": {
+      "message": "Si le jeton choisi n'a pas de solde, le système passera automatiquement à un jeton avec solde."
+    },
     "balance": {
       "message": "Solde"
     },
@@ -73,6 +76,9 @@
     "explorerUrl": {
       "message": "URL de l'explorateur"
     },
+    "feeToken": {
+      "message": "Jeton de frais"
+    },
     "message": {
       "message": "Message"
     },
@@ -97,6 +103,9 @@
     "rpcUrl": {
       "message": "URL RPC"
     },
+    "selectFeeToken": {
+      "message": "Sélectionner le jeton de frais"
+    },
     "senderAddress": {
       "message": "Adresse de l'expéditeur"
     },

diff --git a/packages/starknet-snap/src/ui/fragments/FeeTokenSelector.tsx b/packages/starknet-snap/src/ui/fragments/FeeTokenSelector.tsx
@@ -9,6 +9,7 @@ import {
 } from '@metamask/snaps-sdk/jsx';
 
 import { FeeToken, FeeTokenUnit } from '../../types/snapApi';
+import { getTranslator } from '../../utils/locale';
 
 /**
  * The props for the {@link FeeTokenSelector} component.
@@ -32,12 +33,13 @@ export const FeeTokenSelector: SnapComponent<FeeTokenSelectorProps> = ({
   selectedToken,
   error,
 }) => {
+  const translate = getTranslator();
   return (
     <Form name="form-fee-token-selection">
-      <Field label="Fee Token" error={error}>
+      <Field label={translate('feeToken')} error={error}>
         <Selector
           name="feeTokenSelector"
-          title="Select Fee Token"
+          title={translate('selectFeeToken')}
           value={selectedToken}
         >
           <SelectorOption value={FeeToken.ETH}>
@@ -48,10 +50,7 @@ export const FeeTokenSelector: SnapComponent<FeeTokenSelectorProps> = ({
           </SelectorOption>
         </Selector>
       </Field>
-      <Text color="muted">
-        If the chosen token has no funds, the system will automatically switch
-        to a funded token.
-      </Text>
+      <Text color="muted">{translate('autoSwitchToFundedToken')}</Text>
     </Form>
   );
 };
diff --git a/packages/starknet-snap/src/ui/fragments/NetworkUI.tsx b/packages/starknet-snap/src/ui/fragments/NetworkUI.tsx
@@ -1,6 +1,8 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import { Row, Text } from '@metamask/snaps-sdk/jsx';
 
+import { getTranslator } from '../../utils/locale';
+
 export type NetworkUIProps = {
   networkName: string;
 };
@@ -14,8 +16,11 @@ export type NetworkUIProps = {
  */
 export const NetworkUI: SnapComponent<NetworkUIProps> = ({
   networkName,
-}: NetworkUIProps) => (
-  <Row label="Network">
-    <Text>{networkName}</Text>
-  </Row>
-);
+}: NetworkUIProps) => {
+  const translate = getTranslator();
+  return (
+    <Row label={translate('network')}>
+      <Text>{networkName}</Text>
+    </Row>
+  );
+};
diff --git a/packages/starknet-snap/src/ui/fragments/SignerUI.tsx b/packages/starknet-snap/src/ui/fragments/SignerUI.tsx
@@ -1,5 +1,6 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 
+import { getTranslator } from '../../utils/locale';
 import { AddressUI } from './AddressUI';
 
 export type SignerUIProps = {
@@ -18,11 +19,14 @@ export type SignerUIProps = {
 export const SignerUI: SnapComponent<SignerUIProps> = ({
   address,
   chainId,
-}: SignerUIProps) => (
-  <AddressUI
-    label="Signer Address"
-    address={address}
-    chainId={chainId}
-    shortern={true}
-  />
-);
+}: SignerUIProps) => {
+  const translate = getTranslator();
+  return (
+    <AddressUI
+      label={translate('signerAddress')}
+      address={address}
+      chainId={chainId}
+      shortern={true}
+    />
+  );
+};