From d57716dc39fca2c741db5d632c78520425457074 Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Tue, 20 Dec 2022 21:31:08 +0900
Subject: [PATCH] Add text overflow about account name in before you start
 modal

---
 components/before-you-start-modal/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/before-you-start-modal/index.tsx b/components/before-you-start-modal/index.tsx
index ed3f3ef..a117d81 100644
--- a/components/before-you-start-modal/index.tsx
+++ b/components/before-you-start-modal/index.tsx
@@ -85,7 +85,7 @@ export const BeforeYouStartModal: FunctionComponent<Props> = (props) => {
             {selectedWalletItem && (
               <selectedWalletItem.IconComponent width={16} height={16} />
             )}
-            {walletKeyName}
+            <WalletAccountName>{walletKeyName}</WalletAccountName>
           </WalletAccountValue>
         </WalletAccountContainer>
         <ClaimWithTwitterButton onClick={handleClickButton}>
@@ -186,6 +186,13 @@ const WalletAccountValue = styled.div`
   color: ${color.grey["100"]};
 `;
 
+const WalletAccountName = styled.div`
+  max-width: 11rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const ClaimWithTwitterButton = styled.button`
   display: flex;
   align-items: center;