feat: ukrainian locale (uk-UA) (#1676)

* feat: ukrainian language support

* ukrainian strings

* fix: site ua locale naming

* chore: changeset

* chore: update sitemap

* chore: i18n updates

* Revert "chore: i18n updates"

This reverts commit 5571e14.

* chore: ua string updates

.changeset/lazy-pumpkins-relax.md

@@ -0,0 +1,7 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Added `uk-UA` and `ua` locale support for the Ukranian language. 
+
+Reference [our guide](https://www.rainbowkit.com/docs/localization) to learn more about Localization.

packages/example/next.config.js

@@ -15,6 +15,7 @@ module.exports = {
       'ru-RU',
       'th-TH',
       'tr-TR',
+      'uk-UA',
       'zh-CN',
     ],
   },

packages/rainbowkit/src/locales/index.ts

@@ -27,6 +27,8 @@ export type Locale =
   | 'th-TH'
   | 'tr'
   | 'tr-TR'
+  | 'ua'
+  | 'uk-UA'
   | 'zh'
   | 'zh-CN';
 
@@ -77,6 +79,9 @@ const fetchLocale = async (locale: Locale): Promise<any> => {
     case 'tr':
     case 'tr-TR':
       return (await import('./tr_TR.json')).default;
+    case 'ua':
+    case 'uk-UA':
+      return (await import('./uk_UA.json')).default;
     case 'zh':
     case 'zh-CN':
       return (await import('./zh_CN.json')).default;

site/data/en-US/docs/localization.mdx

@@ -85,6 +85,7 @@ We provide full support for the following `locale` regions:
     ['Türkçe', 'Turkey 🇹🇷', 'tr-TR', 'tr'],
     ['한국어', 'South Korea 🇰🇷', 'ko-KR', 'ko'],
     ['ภาษาไทย', 'Thailand 🇹🇭', 'th-TH', 'th'],
+    ['українська', 'Ukraine 🇺🇦', 'uk-UA', 'ua'],
   ]}
 />
 

site/data/ua/docs/authentication.mdx

@@ -0,0 +1,141 @@
+---
+title: Аутентифікація
+description: Аутентифікація користувачів
+---
+
+# Аутентифікація
+
+## Надання аутентифікованого доступу до вашого застосунку
+
+Ви можете необов'язково вимагати, щоб користувачі підписували повідомлення за допомогою свого гаманця під час процесу підключення, доводячи, що вони володіють підключеним обліковим записом, і дозволяючи вам створити аутентифікований користувацький сеанс з привілейованим доступом до вашого застосунку.
+
+Хоча можливо [інтегруватися з власними бекендами та форматами повідомлень,](/docs/custom-authentication) RainbowKit надає першокласну підтримку для [Входу за допомогою Ethereum](https://login.xyz) та [NextAuth.js.](https://next-auth.js.org)
+
+### Налаштування Входу за допомогою Ethereum та NextAuth.js
+
+Якщо ви ще цього не зробили, спершу налаштуйте свій проект [Next.js](https://nextjs.org) за допомогою [офіційного шаблону Sign-In with Ethereum для NextAuth.js.](https://docs.login.xyz/integrations/nextauth.js)
+
+#### Встановлення
+
+Встановіть пакет `@rainbow-me/rainbowkit-siwe-next-auth` та його пір-залежність, [ethers](https://docs.ethers.org/v5/).
+
+```bash
+npm install @rainbow-me/rainbowkit-siwe-next-auth siwe@^2 ethers@^5
+```
+
+> Примітка: `siwe` вимагає пір-залежність [ethers](https://docs.ethers.org/v5/), у той час як [wagmi](https://wagmi.sh/) тепер покладається на альтернативу [viem](https://viem.sh).
+
+#### Налаштуйте провайдера
+
+У вашому компоненті `App`, імпортуйте `RainbowKitSiweNextAuthProvider`.
+
+```tsx
+import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
+```
+
+Обгорніть `RainbowKitProvider` за допомогою `RainbowKitSiweNextAuthProvider`, переконавшись, що він знаходиться всередині `SessionProvider` від NextAuth, щоб мати доступ до сесії.
+
+```tsx
+import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { SessionProvider } from 'next-auth/react';
+import type { Session } from 'next-auth';
+import { AppProps } from 'next/app';
+import { WagmiConfig } from 'wagmi';
+
+export default function App({
+  Component,
+  pageProps,
+}: AppProps<{
+  session: Session;
+}>) {
+  return (
+    <WagmiConfig {...etc}>
+      <SessionProvider refetchInterval={0} session={pageProps.session}>
+        <RainbowKitSiweNextAuthProvider>
+          <RainbowKitProvider {...etc}>
+            <Component {...pageProps} />
+          </RainbowKitProvider>
+        </RainbowKitSiweNextAuthProvider>
+      </SessionProvider>
+    </WagmiConfig>
+  );
+}
+```
+
+З `RainbowKitSiweNextAuthProvider` на місці, тепер ваших користувачів буде запрошено аутентифікуватися, підписавши повідомлення після підключення їхнього гаманця.
+
+#### Налаштуйте опції повідомлення SIWE
+
+Ви можете налаштувати [опції повідомлення SIWE](https://github.com/spruceid/siwe/blob/v1.1.6/packages/siwe/lib/client.ts#L29), передавши функцію до пропу `getSiweMessageOptions` на `RainbowKitSiweNextAuthProvider`.
+
+Ця функція буде викликана кожного разу, коли створюється нове повідомлення. Опції, що повертаються з цієї функції, будуть об'єднані з параметрами за замовчуванням.
+
+```tsx
+import {
+  RainbowKitSiweNextAuthProvider,
+  GetSiweMessageOptions,
+} from '@rainbow-me/rainbowkit-siwe-next-auth';
+
+const getSiweMessageOptions: GetSiweMessageOptions = () => ({
+  statement: 'Sign in to my RainbowKit app',
+});
+
+<RainbowKitSiweNextAuthProvider
+  getSiweMessageOptions={getSiweMessageOptions}
+>
+  ...
+</RainbowKitSiweNextAuthProvider>;
+```
+
+#### Доступ до сесії на серверній стороні
+
+Ви можете отримати доступ до токену сесії за допомогою функції `getToken` від NextAuth, імпортованої з `next-auth/jwt`. Якщо користувач успішно пройшов аутентифікацію, властивість `sub` токена сесії ("суб'єкт" токена, тобто користувач) буде адресою користувача.
+
+Ви також можете передати об'єкт сесії, який був розгорнутий на сервері, через `getServerSideProps`, щоб NextAuth не потребував його повторного розгортання на клієнті.
+
+Наприклад:
+
+```tsx
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
+import { getSession } from 'next-auth/react';
+import { getToken } from 'next-auth/jwt';
+import React from 'react';
+
+export const getServerSideProps: GetServerSideProps = async context => {
+  const session = await getSession(context);
+  const token = await getToken({ req: context.req });
+
+  const address = token?.sub ?? null;
+  // If you have a value for "address" here, your
+  // server knows the user is authenticated.
+
+  // You can then pass any data you want
+  // to the page component here.
+  return {
+    props: {
+      address,
+      session,
+    },
+  };
+};
+
+type AuthenticatedPageProps = InferGetServerSidePropsType<
+  typeof getServerSideProps
+>;
+
+export default function AuthenticatedPage({
+  address,
+}: AuthenticatedPageProps) {
+  return address ? (
+    <h1>Authenticated as {address}</h1>
+  ) : (
+    <h1>Unauthenticated</h1>
+  );
+}
+```
+
+Для отримання додаткової інформації про управління сесією ви можете звернутися до наступної документації:
+
+-   [Посібник з аутентифікації Next.js](https://nextjs.org/docs/authentication)
+-   [Документація NextAuth.js](https://next-auth.js.org)

site/data/ua/docs/chains.mdx

@@ -0,0 +1,80 @@
+---
+title: Ланцюги
+description: Налаштування ланцюгів
+---
+
+# Ланцюги
+
+## Налаштування ланцюгів
+
+Властивість `chains` в `RainbowKitProvider` визначає, які ланцюги доступні для вибору користувачем.
+
+RainbowKit розроблений для інтеграції з [об’єктом `chain` від wagmi](https://wagmi.sh/react/chains). Перегляньте список підтримуваних ланцюгів [тут](https://wagmi.sh/react/chains#supported-chains).
+
+> Для отримання додаткової інформації про об’єкт `chain`, або щоб побачити приклади створення власного визначення ланцюга, перегляньте [вихідний код об’єкта `chain` від wagmi](https://github.com/wagmi-dev/references/blob/main/packages/chains/src/types.ts).
+
+Ваше налаштування ланцюга може бути визначене в одному масиві, наданому [`configureChains`](https://wagmi.sh/react/providers/configuring-chains).
+
+```tsx
+import { RainbowKitProvider, Chain } from '@rainbow-me/rainbowkit';
+import { configureChains } from 'wagmi';
+import { mainnet, optimism, zora } from 'wagmi/chains';
+import { alchemyProvider } from 'wagmi/providers/alchemy';
+import { publicProvider } from 'wagmi/providers/public';
+
+const { chains } = configureChains(
+  [mainnet, optimism, zora],
+  [
+    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);
+
+const App = () => {
+  return (
+    <RainbowKitProvider chains={chains} {...etc}>
+      {/* ... */}
+    </RainbowKitProvider>
+  );
+};
+```
+
+### Налаштування початкового ланцюга
+
+За замовчуванням, RainbowKit підключиться до першого ланцюга у вашому масиві `chains`, щоб користувачі не стикалися відразу зі станом "Неправильна мережа". Цю поведінку можна налаштувати через властивість `initialChain`.
+
+Початковий ланцюг можна налаштувати, використовуючи ідентифікатор ланцюга.
+
+```tsx
+<RainbowKitProvider chains={chains} initialChain={1}>
+```
+
+Для зручності, ви також можете передати об'єкт ланцюга.
+
+```tsx
+<RainbowKitProvider chains={chains} initialChain={mainnet}>
+```
+
+### Іконки користувацьких ланцюгів
+
+Кілька іконок ланцюгів надаються за замовчуванням, але ви можете налаштувати іконку для кожного ланцюга, використовуючи властивість iconUrl.
+
+```tsx
+import { Chain, mainnet, optimism } from 'wagmi/chains';
+
+const defaultChains: Chain[] = [
+  {
+    ...mainnet,
+    iconUrl: 'https://example.com/icons/ethereum.png',
+  },
+  {
+    ...optimism,
+    iconUrl: 'https://example.com/icons/optimism.png',
+  },
+];
+
+const { chains } = configureChains(defaultChains, [
+  alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
+  publicProvider(),
+]);
+```