Merge pull request #10 from commons-stack/wallet-connect-button-ui-im…

…provements implemented UI styles for connect button
commons-stack · Sep 29, 2023 · c2ac8f4 · c2ac8f4
2 parents 8bb411f + ea2c6e8
commit c2ac8f4
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 35 deletions.
diff --git a/apps/web/src/presentation/components/shared/ConnectButton.css b/apps/web/src/presentation/components/shared/ConnectButton.css
@@ -1,6 +1,32 @@
+:root {
+    --chain-icon-margin: 8px;
+}
+
 .connect-button {
-    background-color: var(--chakra-colors-brand-900);
-    color: var(--chakra-colors-brand-500);
     padding: 8px 20px;
     border-radius: 30px;
+}
+
+.connect-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top:0px!important;
+    width: fit-content!important;
+}
+
+.connect-button-wrapper.connected {
+
+}
+
+.connect-button-wrapper.unsupported {
+    background-color: var(--chakra-colors-brand-1200);
+    color: white;
+    outline-color: var(--chakra-colors-brand-1200);
+    outline-offset: 0px;
+}
+
+.connect-button-wrapper.unsupported:hover {
+    background-color: white;
+    color: var(--chakra-colors-brand-1200);
 }
diff --git a/apps/web/src/presentation/components/shared/ConnectButton.tsx b/apps/web/src/presentation/components/shared/ConnectButton.tsx
@@ -5,19 +5,12 @@ export const CustomConnectButton = () => {
     return (
         <ConnectButton.Custom>
             {({
-                account,
-                chain,
-                openAccountModal,
-                openChainModal,
-                openConnectModal,
-                authenticationStatus,
-                mounted,
+                account, chain, openAccountModal, openChainModal, openConnectModal, authenticationStatus, mounted,
             }) => {
                 // Note: If your app doesn't use authentication, you
                 // can remove all 'authenticationStatus' checks
                 const ready = mounted && authenticationStatus !== 'loading';
-                const connected =
-                    ready &&
+                const connected = ready &&
                     account &&
                     chain &&
                     (!authenticationStatus ||
@@ -32,6 +25,7 @@ export const CustomConnectButton = () => {
                                 userSelect: 'none',
                             },
                         })}
+                        className={'css-hpbuxn connect-button-wrapper ' + (connected ? 'connected ' : 'disconnected ') + (chain?.unsupported ? 'unsupported ' : '')}
                     >
                         {(() => {
                             if (!connected) {
@@ -55,40 +49,57 @@ export const CustomConnectButton = () => {
                                         style={{ display: 'flex', alignItems: 'center' }}
                                         type="button"
                                     >
-                                        {chain.hasIcon && (
-                                            <div
-                                                style={{
-                                                    background: chain.iconBackground,
-                                                    width: 12,
-                                                    height: 12,
-                                                    borderRadius: 999,
-                                                    overflow: 'hidden',
-                                                    marginRight: 4,
-                                                }}
-                                            >
-                                                {chain.iconUrl && (
-                                                    <img
-                                                        alt={chain.name ?? 'Chain icon'}
-                                                        src={chain.iconUrl}
-                                                        style={{ width: 12, height: 12 }}
-                                                    />
-                                                )}
-                                            </div>
-                                        )}
-                                        {chain.name}
+                                        <div
+                                            style={{
+                                                background: chain.iconBackground,
+                                                width: "calc(var(--chakra-sizes-10) - var(--chain-icon-margin))",
+                                                height: "calc(var(--chakra-sizes-10) - var(--chain-icon-margin))",
+                                                borderRadius: "calc( (var(--chakra-sizes-10))/2)",
+                                                overflow: 'hidden',
+                                                marginRight: 4,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                backgroundColor: 'var(--chakra-colors-brand-500)',
+                                                color:'var(--chakra-colors-brand-900)',
+                                                margin: "var(--chain-icon-margin) 0px",
+                                                border: "1px solid var(--chakra-colors-brand-900)",
+                                            }}
+                                        >
+                                            {
+                                                chain.hasIcon ? 
+                                                (
+                                                    chain.iconUrl ? 
+                                                    (
+                                                        <img
+                                                            alt={chain.name ?? 'Chain icon'}
+                                                            src={chain.iconUrl}
+                                                            style={{ width: "calc(var(--chakra-sizes-10) - var(--chain-icon-margin))", height: "calc(var(--chakra-sizes-10) -var(--chain-icon-margin))" }} />
+                                                        ) :
+                                                        (
+                                                            <></>
+                                                        )
+                                                ):
+                                                (
+                                                    <>
+                                                        {((chain?.name?.length ?? 0) > 0) ? chain!.name![0] : ""}
+                                                    </>
+                                                )
+                                            }
+                                        </div>
                                     </button>
                                     <button onClick={openAccountModal} type="button">
                                         {account.displayName}
-                                        {account.displayBalance
+                                        {/* {account.displayBalance
                                             ? ` (${account.displayBalance})`
-                                            : ''}
+                                            : ''} */}
                                     </button>
                                 </div>
                             );
                         })()}
                     </div>
                 );
-            }}
+            } }
         </ConnectButton.Custom>
     );
 };