feat: string hooks

packages/website-ue/src/components/AvatarCard/index.css

@@ -20,5 +20,6 @@
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

packages/website-ue/src/components/AvatarCard/index.tsx

@@ -1,5 +1,5 @@
-import { api } from "../../core/api/dynamic";
-import { useAwait } from "../../hooks/useAwait";
+import { useGameStrings } from "../../hooks/useGameStrings";
+import { useLocale } from "../../hooks/useLocale";
 import type { Avatar } from "../../protos/avatar";
 import { Text } from "../Text";
 import "./index.css";
@@ -9,12 +9,8 @@ interface Props {
 }
 
 export function AvatarCard({ avatar }: Props) {
-  // const { locale } = useLocale();
-  const { locale } = { locale: "en" };
-  const profileAvatarEntityStrings = useAwait(
-    () => api.groupedGameStrings(locale, "ProfileAvatarEntity"),
-    "profile-avatar-entity-strings"
-  );
+  const { locale } = useLocale();
+  const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
 
   return (
     <div className="avatar-card">