// Location: suite/intl/src/messages.ts

export const messages = {
  TR_ADDRESS: {
    id: 'TR_ADDRESS',
    defaultMessage: 'Address',
    description: 'Used as label for receive/send address input',
  },
  
  TR_ENTERED_PIN_NOT_CORRECT: {
    id: 'TR_ENTERED_PIN_NOT_CORRECT',
    defaultMessage: 'Entered PIN for "{deviceLabel}" is not correct',
  },
  
  TR_TRANSACTIONS_COUNT: {
    id: 'TR_TRANSACTIONS_COUNT',
    defaultMessage: '{count, plural, one {# transaction} other {# transactions}}',
  },
};

import { Translation } from '@suite-components';

// Simple message
<Translation id="TR_CONTINUE" />

// With variables
<Translation 
  id="TR_ENTERED_PIN_NOT_CORRECT" 
  values={{ deviceLabel: device.label }} 
/>

// Rich text formatting
<Translation
  id="TR_TRANSACTIONS_SEARCH_TIP_2"
  values={{
    strong: chunks => <strong>{chunks}</strong>
  }}
/>

import { useTranslation } from '@suite-hooks';

const MyComponent = () => {
  const { translationString } = useTranslation();
  
  // Simple string
  const placeholder = translationString('TR_ENTER_ADDRESS');
  
  // With variables
  const errorMsg = translationString(
    'TR_ENTERED_PIN_NOT_CORRECT',
    { deviceLabel: device.label }
  );
  
  return <input placeholder={placeholder} />;
};

// Definition
TR_ACCOUNT_BALANCE: {
  id: 'TR_ACCOUNT_BALANCE',
  defaultMessage: 'Balance: {amount} {symbol}',
}

// Usage
<Translation
  id="TR_ACCOUNT_BALANCE"
  values={{
    amount: '1.23456789',
    symbol: 'BTC'
  }}
/>
// Renders: "Balance: 1.23456789 BTC"

// Definition
TR_CONFIRMATIONS: {
  id: 'TR_CONFIRMATIONS',
  defaultMessage: `{count, plural,
    =0 {No confirmations}
    one {# confirmation}
    other {# confirmations}
  }`,
}

// Usage  
<Translation
  id="TR_CONFIRMATIONS"
  values={{ count: 0 }}
/>
// Renders: "No confirmations"

<Translation
  id="TR_CONFIRMATIONS"
  values={{ count: 1 }}
/>
// Renders: "1 confirmation"

<Translation
  id="TR_CONFIRMATIONS"
  values={{ count: 5 }}
/>
// Renders: "5 confirmations"

// Definition
TR_PRIVACY_TIP: {
  id: 'TR_PRIVACY_TIP',
  defaultMessage: 'Enable <tor>Tor</tor> for enhanced privacy',
}

// Usage
<Translation
  id="TR_PRIVACY_TIP"
  values={{
    tor: chunks => (
      <Link to="/settings/general">
        <strong>{chunks}</strong>
      </Link>
    )
  }}
/>

import { FormattedNumber, FormattedDate } from 'react-intl';

// Numbers with locale-specific separators
<FormattedNumber value={1234567.89} />
// US: "1,234,567.89"
// CZ: "1 234 567,89"

// Dates in local format
<FormattedDate 
  value={new Date()} 
  year="numeric"
  month="long"
  day="numeric"
/>
// US: "December 25, 2024"
// CZ: "25. prosince 2024"

// Relative time
<FormattedRelativeTime
  value={-3}
  unit="day"
  numeric="auto"
/>
// "3 days ago"

# ~/.crowdin.yml
api_token: xxxx

yarn workspace @suite/intl translations:download --token xxxx

// Location: packages/suite-data/files/translations/

// Structure
translations/
  en.json         // English (source)
  cs.json         // Czech
  de.json         // German
  es.json         // Spanish
  ...

{
  "TR_ADDRESS": "Address",
  "TR_ENTERED_PIN_NOT_CORRECT": "Entered PIN for \"{deviceLabel}\" is not correct",
  "TR_CONFIRMATIONS": "{count, plural, =0 {No confirmations} one {# confirmation} other {# confirmations}}"
}

// Suite initialization
import { IntlProvider } from 'react-intl';
import translations from '@suite-data/translations';

const App = () => {
  const locale = useSelector(state => state.suite.settings.language);
  const messages = translations[locale] || translations.en;
  
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Suite />
    </IntlProvider>
  );
};

// Enable in development
const messages = {
  TR_ADDRESS: '[!!! Àḋḋṛḗṡṡ !!!]',
  // Longer text exposes layout issues
};

// Default message shown if translation missing
<Translation id="TR_NEW_FEATURE" />
// Shows defaultMessage until translated

// Only load selected language
const loadTranslations = async (locale: string) => {
  const messages = await import(
    `@suite-data/translations/${locale}.json`
  );
  return messages.default;
};