refactor: Update account details in ConnectOverlay

softstack · May 13, 2024 · 85091c5 · 85091c5
1 parent a65faff
commit 85091c5
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -228,6 +228,7 @@ function App() {
                             slideAnimation={slideAnimation}
                             close={closeConnectOverlay}
                             onConnect={handleConnect}
+                            account={account}
                         />
                     )}
                 </div>

diff --git a/src/assets/account_placeholder.svg b/src/assets/account_placeholder.svg
diff --git a/src/assets/copy_icon.svg b/src/assets/copy_icon.svg
diff --git a/src/assets/document_icon.svg b/src/assets/document_icon.svg
diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -14,19 +14,25 @@ import tezosLogo from '../../assets/tezos_logo.png';
 import metamaskLogo from '../../assets/metamask_logo.svg';
 import trustWalletLogo from '../../assets/trust_wallet.svg';
 import templeLogo from '../../assets/temple_logo.svg';
+import accountIconPlaceholder from '../../assets/account_placeholder.svg';
+import copyIcon from '../../assets/copy_icon.svg';
+import documentIcon from '../../assets/document_icon.svg';
+
+import { truncateText } from '../../utils/truncateText';
 
 import './ConnectOverlay.css';
 
 type Props = {
     slideAnimation: string;
+    account?: string | null;
     close: () => void;
     onConnect: () => void;
 };
 
 enum ConnectionState {
     DISCONNECTED = 'disconnected',
     CONNECTING = 'connecting',
-    CONNECTED = 'disconnected',
+    CONNECTED = 'connected',
     ERROR = 'error',
     RETRYING = 'retrying',
 }
@@ -35,6 +41,7 @@ const BRIDGE_URL = import.meta.env.VITE_BRIDGE_URL || '';
 
 const ConnectOverlay: React.FC<Props> = ({
     slideAnimation,
+    account,
     close,
     onConnect,
 }) => {
@@ -52,7 +59,7 @@ const ConnectOverlay: React.FC<Props> = ({
     // };
 
     const [connectionState, setConnectionState] = useState<string>(
-        ConnectionState.DISCONNECTED
+        ConnectionState.CONNECTED
     );
 
     const [metaMaskSelected, setMetaMaskSelected] = useState<boolean>(false);
@@ -128,6 +135,7 @@ const ConnectOverlay: React.FC<Props> = ({
             checkConnection();
         } catch (error) {
             console.error('Error during initial connection:', error);
+            setConnectionState(ConnectionState.ERROR);
         }
     };
 
@@ -151,6 +159,19 @@ const ConnectOverlay: React.FC<Props> = ({
         }
     };
 
+    // Copy Account to Clipboard
+    const copyAccountToClipboard = () => {
+        if (!account) return;
+        navigator.clipboard.writeText(account);
+        WebApp.showAlert('Address copied to clipboard');
+    };
+
+    // View on Explorer
+    const viewOnExplorer = () => {
+        if (!account) return;
+        WebApp.openLink(`https://etherscan.io/address/${account}`);
+    };
+
     return (
         <div className={`connect-overlay ${slideAnimation}`}>
             <div className="flex justify-between text-left py-3 px-4">
@@ -164,6 +185,21 @@ const ConnectOverlay: React.FC<Props> = ({
                         Connect Wallet
                     </p>
                 )}
+                {connectionState === ConnectionState.CONNECTED && (
+                    <p className="m-0 text-lg font-bold text-customBlackText">
+                        Account Details
+                    </p>
+                )}
+                {connectionState === ConnectionState.ERROR && (
+                    <p className="m-0 text-lg font-bold text-customBlackText">
+                        Connection Error
+                    </p>
+                )}
+                {connectionState === ConnectionState.RETRYING && (
+                    <p className="m-0 text-lg font-bold text-customBlackText">
+                        Retrying
+                    </p>
+                )}
                 <div
                     onClick={close}
                     className="flex items-center cursor-pointer"
@@ -266,6 +302,47 @@ const ConnectOverlay: React.FC<Props> = ({
                     )}
                 </>
             )}
+            {connectionState === ConnectionState.CONNECTED && (
+                <div className="my-5 mx-7 border-solid border border-gray-200 rounded-lg">
+                    <div className="flex align-middle justify-start items-center my-2 mx-1 p-2 gap-4">
+                        <div className="w-8 h-8 object-contain">
+                            <img
+                                className="w-full h-full"
+                                src={accountIconPlaceholder}
+                                alt=""
+                            />
+                        </div>
+                        {/* <p>{truncateText(account, 8, 8)}</p> */}
+                        <p className="font-medium text-sm">
+                            {truncateText(
+                                '0xCc383E6f51E06e8eA3F39AF32Bbe48BD74A70BF5',
+                                8,
+                                8
+                            )}
+                        </p>
+                    </div>
+                    <div className="flex justify-between my-2 mx-1 p-2 mr-4 gap-4">
+                        <div
+                            className="flex align-middle justify-start items-center gap-2"
+                            onClick={copyAccountToClipboard}
+                        >
+                            <img src={copyIcon} alt="" />
+                            <p className="text-xs text-customGrayAccountDetails font-normal">
+                                Copy Address
+                            </p>
+                        </div>
+                        <div
+                            className="flex align-middle justify-start items-center gap-2"
+                            onClick={viewOnExplorer}
+                        >
+                            <img src={documentIcon} alt="" />
+                            <p className="text-xs text-customGrayAccountDetails font-normal">
+                                View on explorer
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

diff --git a/src/utils/truncateText.ts b/src/utils/truncateText.ts
@@ -0,0 +1,17 @@
+/**
+ * Truncates a given string to a specified length by replacing the middle portion with ellipses.
+ * @param str - The string to truncate.
+ * @param startIndex - The starting index of the middle portion to replace with ellipses.
+ * @param endIndex - The ending index of the middle portion to replace with ellipses.
+ * @returns The truncated string.
+ */
+export const truncateText = (
+    str: string | null,
+    startIndex: number,
+    endIndex: number
+) => {
+    const text = String(str);
+    const firstHalf = text.slice(0, startIndex);
+    const secondHalf = text.slice(text.length - endIndex);
+    return `${firstHalf}...${secondHalf}`;
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,6 +17,7 @@ export default {
                 customBlackText: '#212121',
                 customBlueSelected: '#B9C1F4',
                 customGrayLine: '#c6c6c6',
+                customGrayAccountDetails: '#616161',
             },
             gridTemplateColumns: {
                 'custom-1-3-1': '1fr 3fr 1fr',