feat: localize game assets

packages/website/src/components/Tankopedia/MetaSection/components/Votes/components/VoteCaster.tsx

@@ -9,6 +9,7 @@ import {
   Text,
 } from '@radix-ui/themes';
 import { useState } from 'react';
+import { useLocale } from '../../../../../../hooks/useLocale';
 import { App } from '../../../../../../stores/app';
 import { Duel } from '../../../../../../stores/duel';
 import { Stars } from '../../Stars';
@@ -24,6 +25,7 @@ export function VoteCaster() {
   const [postVote, setPostVote] = useState<boolean | null>(null);
   // true = open, false = closed, null = casting
   const [showDialogue, setShowDialogue] = useState<boolean | null>(false);
+  const { unwrap } = useLocale();
 
   return (
     <>
@@ -35,7 +37,7 @@ export function VoteCaster() {
         </Dialog.Trigger>
 
         <Dialog.Content maxWidth="23rem">
-          <Dialog.Title>Voting for {tank.name}</Dialog.Title>
+          <Dialog.Title>Voting for {unwrap(tank.name)}</Dialog.Title>
 
           <Flex direction="column" mt="4">
             <Flex align="center" justify="between">

packages/website/src/components/Tankopedia/MetaSection/components/Votes/index.tsx

@@ -1,6 +1,7 @@
 import { formatCompact } from '@blitzkit/core';
 import { Flex, Heading, Skeleton, Text } from '@radix-ui/themes';
 import { memo } from 'react';
+import { useLocale } from '../../../../../hooks/useLocale';
 import { useTankVotes } from '../../../../../hooks/useTankVotes';
 import { App } from '../../../../../stores/app';
 import { Duel } from '../../../../../stores/duel';
@@ -13,13 +14,14 @@ export const Votes = memo(
     const id = Duel.use((state) => state.protagonist.tank.id);
     const votes = useTankVotes(id);
     const wargaming = App.use((state) => state.logins.wargaming);
+    const { locale } = useLocale();
 
     return (
       <Flex direction="column" gap="3">
         <Flex justify="between" align="center">
           <Heading size="4">
             {!votes && <Skeleton height="1em" width="4rem" />}
-            {votes && formatCompact(votes.votes)}{' '}
+            {votes && formatCompact(locale, votes.votes)}{' '}
             {votes && (votes.votes > 1 ? 'votes' : 'vote')}
           </Heading>
 

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -38,7 +38,7 @@ export function MetaSection() {
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const [showSwapDialog, setShowSwapDialog] = useState(false);
-  const { locale, strings } = useLocale();
+  const { locale, strings, unwrap } = useLocale();
 
   return (
     <Flex justify="center" align="center">
@@ -124,7 +124,7 @@ export function MetaSection() {
           <Flex direction="column" width="100%">
             {protagonist.name_full && (
               <Listing label={strings.website.tools.tankopedia.meta.full_name}>
-                {protagonist.name_full}
+                {unwrap(protagonist.name_full)}
               </Listing>
             )}
             <Listing label={strings.website.tools.tankopedia.meta.nation}>