From 319c865ef029fda6622e09a62973a73ddea7053b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:10:57 -0500
Subject: [PATCH] feat: include wg account name in logged in accounts sectionb

---
 .../components/WargamingAccountName.tsx       | 22 +++++++++++++++++++
 src/components/Navbar/index.tsx               | 12 ++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Navbar/components/WargamingAccountName.tsx

diff --git a/src/components/Navbar/components/WargamingAccountName.tsx b/src/components/Navbar/components/WargamingAccountName.tsx
new file mode 100644
index 000000000..d7cca7807
--- /dev/null
+++ b/src/components/Navbar/components/WargamingAccountName.tsx
@@ -0,0 +1,22 @@
+import { Text } from '@radix-ui/themes';
+import { use, useMemo } from 'react';
+import { getAccountInfo } from '../../../core/blitz/getAccountInfo';
+import { idToRegion } from '../../../core/blitz/idToRegion';
+import * as App from '../../../stores/app';
+
+export function WargamingAccountName() {
+  const wargaming = App.use((state) => state.logins.wargaming!);
+  const promise = useMemo(
+    () =>
+      getAccountInfo(idToRegion(wargaming.id), wargaming.id, [], {
+        access_token: wargaming.token,
+      }).then((data) => {
+        console.log(data);
+        return data?.nickname as string | undefined;
+      }),
+    [wargaming],
+  );
+  const nickname = use(promise);
+
+  return nickname ?? <Text color="gray">Unknown Account</Text>;
+}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index b881b87a1..16d65b591 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -18,10 +18,11 @@ import {
   Popover,
   ScrollArea,
   Separator,
+  Skeleton,
   Text,
 } from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
-import { Fragment, useState } from 'react';
+import { Fragment, Suspense, useState } from 'react';
 import { BRANCH_NAMES } from '../../app/components/Hero/constants';
 import { homeTool, TOOLS } from '../../constants/tools';
 import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
@@ -31,6 +32,7 @@ import { PatreonIcon } from '../../icons/Patreon';
 import { WargamingIcon } from '../../icons/Wargaming';
 import * as App from '../../stores/app';
 import { Link } from '../Link';
+import { WargamingAccountName } from './components/WargamingAccountName';
 import { WargamingLoginButton } from './components/WargamingLoginButton';
 import * as styles from './index.css';
 
@@ -194,7 +196,13 @@ export default function Navbar() {
                       {logins.wargaming && (
                         <Flex align="center" gap="2" justify="center">
                           <WargamingIcon width={15} height={15} />
-                          <Text>Wargaming</Text>
+                          <Text>
+                            <Suspense
+                              fallback={<Skeleton height="1em" width="5rem" />}
+                            >
+                              <WargamingAccountName />
+                            </Suspense>
+                          </Text>
                           <Button
                             color="red"
                             variant="ghost"