RodrigoCSolari · RodrigoCSolari · Sep 6, 2022 · Sep 2, 2022
diff --git a/src/components/Navbar/components/ButtonConnectWallet.tsx b/src/components/Navbar/components/ButtonConnectWallet.tsx
@@ -1,10 +1,12 @@
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import { Button, Menu, MenuButton, MenuList } from "@chakra-ui/react";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
+import useScreenSize from "../../../hooks/useScreenSize";
 import { YellowButton } from "../../../shared/components/YellowButton";
 
 export function ButtonConnectWallet() {
   const walletSelector = useWalletSelector();
+  const { width } = useScreenSize();
 
   const handleOnClick = async () => {
     if (walletSelector.selector.isSignedIn() && walletSelector.wallet) {
@@ -25,7 +27,7 @@ export function ButtonConnectWallet() {
             borderRadius="full"
             rightIcon={<ChevronDownIcon />}
           >
-            {walletSelector.accountId}
+            {walletSelector.ticTacToeLogic?.getDisplayableAccountId(width)}
           </MenuButton>
           <MenuList
             minWidth="auto"

diff --git a/src/components/TicTacToe/components/ActiveGame.tsx b/src/components/TicTacToe/components/ActiveGame.tsx
@@ -22,6 +22,8 @@ import {
 } from "../containers/TicTacToe";
 import cheddarIcon from "../../../assets/cheddar-icon.svg";
 import TokenName from "./TokenName";
+import useScreenSize from "../../../hooks/useScreenSize";
+import { formatAccountId } from "../../../shared/helpers/formatAccountId";
 
 type Props = {
   data: GameParams | undefined;
@@ -37,6 +39,7 @@ export function ActiveGame({
   const [timeLeft, settimeLeft] = useState<number | undefined>();
   const [loadingFinalizedGame, setLoadingFinalizedGame] = useState(false);
   const walletSelector = useWalletSelector();
+  const { width } = useScreenSize();
 
   const handleGiveUp = () => {
     if (data?.active_game?.[0]) {
@@ -150,7 +153,11 @@ export function ActiveGame({
                     {activeGameParams.game_result.winner_id ===
                     walletSelector.accountId
                       ? "You Are The Winner!"
-                      : `The Winner is ${activeGameParams.game_result.winner_id}`}
+                      : `The Winner is 
+                      ${formatAccountId(
+                        activeGameParams.game_result.winner_id,
+                        width
+                      )}`}
                   </Text>
                   <Text>
                     Reward:{" "}
@@ -222,7 +229,10 @@ export function ActiveGame({
                 {data.active_game[1].current_player.account_id ===
                 walletSelector.accountId
                   ? "You"
-                  : data.active_game[1].current_player.account_id}
+                  : formatAccountId(
+                      data.active_game[1].current_player.account_id,
+                      width
+                    )}
               </Text>
             </Flex>
             <Text>

diff --git a/src/components/TicTacToe/components/WaiitingListElement.tsx b/src/components/TicTacToe/components/WaiitingListElement.tsx
@@ -1,15 +1,17 @@
-import { Button, Grid, Text } from "@chakra-ui/react";
+import { Button, Flex, Grid, Text } from "@chakra-ui/react";
 import { utils } from "near-api-js";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
 import { AvailablePlayerConfig } from "../../../near/contracts/TicTacToe";
 import { PurpleButton } from "../../../shared/components/PurpleButton";
+import { formatAccountId } from "../../../shared/helpers/formatAccountId";
 import TokenName from "./TokenName";
 
 type Props = {
   player: [string, AvailablePlayerConfig];
+  width: number;
 };
 
-export function WaiitingListElement({ player }: Props) {
+export function WaiitingListElement({ player, width }: Props) {
   const walletSelector = useWalletSelector();
 
   const handleAcceptButton = (
@@ -37,19 +39,33 @@ export function WaiitingListElement({ player }: Props) {
     walletSelector.ticTacToeLogic?.removeBet();
   };
 
+  const isSmallDesign = width < 480 || (width > 768 && width < 992);
   return (
     <Grid
       mb="5px"
       bg="#1111"
-      templateColumns="2.5fr 2fr 1fr"
+      templateColumns={isSmallDesign ? "2.5fr 1fr" : "2.2fr 2fr 1fr"}
       p="6px 12px"
       borderRadius="8px"
+      alignItems="center"
     >
-      <Text textAlign="initial">{player[0]}</Text>
-      <Text textAlign="initial">
-        {utils.format.formatNearAmount(player[1].deposit)}{" "}
-        {<TokenName tokenId={player[1].token_id} />}
-      </Text>
+      {isSmallDesign ? (
+        <Flex flexDirection="column" fontSize="0.9em">
+          <Text textAlign="initial">{formatAccountId(player[0], width)}</Text>
+          <Text textAlign="initial">
+            {utils.format.formatNearAmount(player[1].deposit)}&nbsp;
+            {<TokenName tokenId={player[1].token_id} />}
+          </Text>
+        </Flex>
+      ) : (
+        <>
+          <Text textAlign="initial">{formatAccountId(player[0], width)}</Text>
+          <Text textAlign="initial">
+            {utils.format.formatNearAmount(player[1].deposit)}&nbsp;
+            {<TokenName tokenId={player[1].token_id} />}
+          </Text>
+        </>
+      )}
       {player[0] !== walletSelector.accountId ? (
         <PurpleButton
           size="sm"

diff --git a/src/components/TicTacToe/components/WaitingList.tsx b/src/components/TicTacToe/components/WaitingList.tsx
@@ -10,6 +10,7 @@ import {
 } from "@chakra-ui/react";
 import { useWalletSelector } from "../../../contexts/WalletSelectorContext";
 import { useContractParams } from "../../../hooks/useContractParams";
+import useScreenSize from "../../../hooks/useScreenSize";
 import { WaiitingListElement } from "./WaiitingListElement";
 
 type Props = {
@@ -19,6 +20,7 @@ type Props = {
 export default function WaitingList({ showingActiveGame }: Props) {
   const { data } = useContractParams();
   const walletSelector = useWalletSelector();
+  const { width } = useScreenSize();
 
   return (
     <AccordionItem
@@ -52,7 +54,7 @@ export default function WaitingList({ showingActiveGame }: Props) {
                     My Challenge
                   </Text>
                 )}
-                <WaiitingListElement player={player} />
+                <WaiitingListElement player={player} width={width} />
                 <Spacer mb="30px" />
               </Box>
             ))}
@@ -71,7 +73,7 @@ export default function WaitingList({ showingActiveGame }: Props) {
                     Private Challenges
                   </Text>
                 )}
-                <WaiitingListElement player={player} />
+                <WaiitingListElement player={player} width={width} />
                 <Spacer mb="30px" />
               </Box>
             ))}
@@ -88,7 +90,7 @@ export default function WaitingList({ showingActiveGame }: Props) {
                     Public Challenges
                   </Text>
                 )}
-                <WaiitingListElement player={player} />
+                <WaiitingListElement player={player} width={width} />
               </Box>
             ))}
       </AccordionPanel>

diff --git a/src/near/contracts/TicTacToe.ts b/src/near/contracts/TicTacToe.ts
@@ -114,16 +114,8 @@ export class TicTacToeContract {
     };
   }
 
-  getDisplayableAccountId(
-    startLength?: number,
-    endLength?: number,
-    maxLength?: number
-  ): string {
-    return this.wallet.getDisplayableAccountId(
-      startLength,
-      endLength,
-      maxLength
-    );
+  getDisplayableAccountId(screenWidth: number): string {
+    return this.wallet.getDisplayableAccountId(screenWidth);
   }
 
   /**

diff --git a/src/near/logics/TicTacToeLogic.ts b/src/near/logics/TicTacToeLogic.ts
@@ -35,16 +35,8 @@ export class TicTacToeLogic {
     return this.ticTacToeContract.get_contract_params();
   }
 
-  getDisplayableAccountId(
-    startLength?: number,
-    endLength?: number,
-    maxLength?: number
-  ): string {
-    return this.ticTacToeContract.getDisplayableAccountId(
-      startLength,
-      endLength,
-      maxLength
-    );
+  getDisplayableAccountId(screenWidth: number): string {
+    return this.ticTacToeContract.getDisplayableAccountId(screenWidth);
   }
 
   getLastGames(): Promise<[number, FinalizedGame][]> {

diff --git a/src/near/wallet/wallet-interface.ts b/src/near/wallet/wallet-interface.ts
@@ -9,7 +9,7 @@ export type EventHandler = (this: Document, ev: any) => any;
 //-----------------------
 export interface WalletInterface {
   getAccountId(): string;
-  getDisplayableAccountId(): string;
+  getDisplayableAccountId(screenWidth: number): string;
 
   //getAccountBalance(accountId?:string):Promise<U128String>;
 

diff --git a/src/near/wallet/wallet-selector.ts b/src/near/wallet/wallet-selector.ts
@@ -28,17 +28,31 @@ export class SelectorWallet implements WalletInterface {
       ?.accountId!;
   }
 
-  getDisplayableAccountId(
-    startLength = 10,
-    endLength = 10,
-    maxLength = 22
-  ): string {
+  getDisplayableAccountId(screenWidth: number): string {
+    const { startLength, endLength, maxLength } =
+      this.getAccountLengths(screenWidth);
     const accountId = this.getAccountId();
     return accountId.length > maxLength
-      ? accountId.slice(0, startLength) + ".." + accountId.slice(0 - endLength)
+      ? accountId.slice(0, startLength) +
+          ".." +
+          (endLength === 0 ? "" : accountId.slice(0 - endLength))
       : accountId;
   }
 
+  private getAccountLengths(screenWidth: number): {
+    startLength: number;
+    endLength: number;
+    maxLength: number;
+  } {
+    if (screenWidth < 480) {
+      return { startLength: 7, endLength: 0, maxLength: 8 };
+    } else if (screenWidth < 768) {
+      return { startLength: 8, endLength: 8, maxLength: 18 };
+    } else {
+      return { startLength: 10, endLength: 10, maxLength: 22 };
+    }
+  }
+
   async getAccountBalance(accountId?: string | undefined): Promise<string> {
     if (!accountId) {
       accountId = this.walletState.accounts.find(

diff --git a/src/shared/helpers/formatAccountId.ts b/src/shared/helpers/formatAccountId.ts
@@ -0,0 +1,23 @@
+export function formatAccountId(
+  accountId: string,
+  screenWidth: number
+): string {
+  const { startLength, endLength, maxLength } = getAccountLengths(screenWidth);
+  return accountId.length > maxLength
+    ? accountId.slice(0, startLength) +
+        ".." +
+        (endLength === 0 ? "" : accountId.slice(0 - endLength))
+    : accountId;
+}
+
+function getAccountLengths(screenWidth: number): {
+  startLength: number;
+  endLength: number;
+  maxLength: number;
+} {
+  if (screenWidth < 1200) {
+    return { startLength: 7, endLength: 7, maxLength: 6 };
+  } else {
+    return { startLength: 9, endLength: 9, maxLength: 20 };
+  }
+}