feat: more headers,

feat: added homescreen tabs,
feat: added modal border

Author: andrewlee348

packages/connect/src/index.ts

@@ -44,7 +44,15 @@ export {
 
 // Utils
 export { getConnectWallets } from './utils/getConnectWallets.js'
-export { capitalize, compareAddress, formatAddress, formatDisplay, isEmailValid, truncateAtMiddle } from './utils/helpers.js'
+export {
+  capitalize,
+  compareAddress,
+  formatAddress,
+  formatDisplay,
+  isEmailValid,
+  truncateAtIndex,
+  truncateAtMiddle
+} from './utils/helpers.js'
 export { createNativeTokenBalance, getNativeTokenInfoByChainId } from './utils/tokens.js'
 export { getModalPositionCss } from './utils/styling.js'
 export { getNetwork, getNetworkBackgroundColor, getNetworkColor } from './utils/networks.js'

packages/connect/src/styles.ts

@@ -241,6 +241,9 @@ export const styles = String.raw`
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
+  .left-\[-16px\] {
+    left: -16px;
+  }
   .z-1 {
     z-index: 1;
   }
@@ -433,6 +436,9 @@ export const styles = String.raw`
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[2px\] {
+    height: 2px;
+  }
   .h-\[52px\] {
     height: 52px;
   }

packages/connect/src/utils/helpers.ts

@@ -107,6 +107,16 @@ export const truncateAtMiddle = (text: string, truncateAt: number) => {
   return finalText
 }
 
+export const truncateAtIndex = (text: string, truncateIndex: number) => {
+  let finalText = text
+
+  if (text.length >= truncateIndex) {
+    finalText = text.slice(0, truncateIndex) + '...' + text.slice(text.length - 4, text.length)
+  }
+
+  return finalText
+}
+
 export const formatAddress = (text: string) => {
   return `0x${truncateAtMiddle(text?.substring(2) || '', 8)}`
 }

packages/wallet-widget/src/components/Filter/WalletsFilter.tsx

@@ -50,7 +50,7 @@ export const WalletsFilter = () => {
           }
           onClick={() => setSelectedWallets([wallet])}
         >
-          <WalletAccountGradient accountAddress={wallet.address} size={'small'} />
+          <WalletAccountGradient accountAddress={wallet.address} />
           <Text className="flex flex-row gap-1 items-center" nowrap color="primary" fontWeight="medium" variant="normal">
             {formatAddress(wallet.address)}
             <CopyButton text={wallet.address} buttonVariant="icon" onClick={e => e.stopPropagation()} />

packages/wallet-widget/src/components/NavigationHeader/content/Collectible.tsx

@@ -0,0 +1,23 @@
+import { Image, Text } from '@0xsequence/design-system'
+
+export const Collectible = ({ imgSrc, imgLabel }: { imgSrc?: string; imgLabel?: string }) => {
+  return (
+    <div className="flex flex-row items-center h-full w-full">
+      <div className="px-3">
+        <Image
+          className="w-9 h-9"
+          src={imgSrc}
+          alt={imgLabel}
+          style={{
+            objectFit: 'cover'
+          }}
+        />
+      </div>
+      <div className="flex flex-col">
+        <Text variant="medium" color="text100">
+          {imgLabel}
+        </Text>
+      </div>
+    </div>
+  )
+}

packages/wallet-widget/src/components/NavigationHeader/content/Collection.tsx

@@ -0,0 +1,23 @@
+import { Image, Text } from '@0xsequence/design-system'
+
+export const Collection = ({ imgSrc, imgLabel }: { imgSrc?: string; imgLabel?: string }) => {
+  return (
+    <div className="flex flex-row items-center h-full w-full">
+      <div className="px-3">
+        <Image
+          className="w-9 h-9"
+          src={imgSrc}
+          alt={imgLabel}
+          style={{
+            objectFit: 'cover'
+          }}
+        />
+      </div>
+      <div className="flex flex-col">
+        <Text variant="medium" color="text100">
+          {imgLabel}
+        </Text>
+      </div>
+    </div>
+  )
+}

packages/wallet-widget/src/components/NavigationHeader/content/home.tsx renamed to packages/wallet-widget/src/components/NavigationHeader/content/Home.tsx

@@ -9,7 +9,7 @@ export const Home = () => {
         <IconButton className="bg-background-secondary" icon={SearchIcon} size="sm" />
         <IconButton className="bg-background-secondary" icon={SettingsIcon} size="sm" />
       </div>
-      <Divider className="my-0 w-full" />
+      <Divider className="my-0 w-full" style={{ position: 'absolute', bottom: 0 }} />
     </div>
   )
 }

packages/wallet-widget/src/components/NavigationHeader/content/Search.tsx

@@ -0,0 +1,9 @@
+import { TextInput } from '@0xsequence/design-system'
+
+export const Search = () => {
+  return (
+    <div className="grow px-4">
+      <TextInput autoFocus placeholder="Search" name={'Search Wallet'} />
+    </div>
+  )
+}

packages/wallet-widget/src/components/NavigationHeader/content/Settings.tsx

@@ -0,0 +1,22 @@
+// import { Text } from '@0xsequence/design-system'
+
+// export const Settings = () => {
+//   return (
+//     <div className="flex flex-row justify-center items-center p-4 gap-3 w-full">
+//       <Text variant="medium" color="text100">
+//         Settings
+//       </Text>
+//     </div>
+//   )
+// }
+import { Text } from '@0xsequence/design-system'
+
+export const Settings = () => {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <Text variant="medium" color="text100">
+        Settings
+      </Text>
+    </div>
+  )
+}

packages/wallet-widget/src/components/NavigationHeader/content/Token.tsx

@@ -0,0 +1,3 @@
+export const Token = () => {
+  return <div></div>
+}

packages/wallet-widget/src/components/NavigationHeader/content/collectible.tsx

@@ -4,7 +4,12 @@ import { HEADER_HEIGHT } from '../../constants/index.js'
 import { useNavigationContext } from '../../contexts/Navigation.js'
 import { useNavigation } from '../../hooks/index.js'
 
-import { Home } from './content/home.js'
+import { Collectible } from './content/Collectible.js'
+import { Collection } from './content/Collection.js'
+import { Home } from './content/Home.js'
+import { Search } from './content/Search.js'
+import { Settings } from './content/Settings.js'
+import { Token } from './content/Token.js'
 
 interface NavigationHeaderProps {
   type: 'home' | 'search' | 'settings' | 'token' | 'collectible' | 'collection'
@@ -17,15 +22,15 @@ const getHeaderContent = (type: NavigationHeaderProps['type'], imgSrc?: string,
     case 'home':
       return <Home />
     case 'search':
-      return <div />
+      return <Search />
     case 'settings':
-      return <div />
+      return <Settings />
     case 'token':
-      return <div />
+      return <Token /> // TODO: add imgSrc and imgLabel?
     case 'collectible':
-      return <div />
+      return <Collectible imgSrc={imgSrc} imgLabel={imgLabel} />
     case 'collection':
-      return <div />
+      return <Collection imgSrc={imgSrc} imgLabel={imgLabel} />
   }
 }
 
@@ -46,17 +51,17 @@ export const NavigationHeader = ({ type, imgSrc, imgLabel }: NavigationHeaderPro
         <IconButton
           onClick={onClickBack}
           icon={ChevronLeftIcon}
-          size="xs"
+          size="sm"
           disabled={!isBackButtonEnabled}
-          style={{ opacity: isBackButtonEnabled ? 1 : 0.5 }}
+          style={{ opacity: isBackButtonEnabled ? 1 : 0.5, marginLeft: '16px' }}
         />
       ) : (
         <div />
       )}
 
       {getHeaderContent(type, imgSrc, imgLabel)}
 
-      {/* <div style={{ width: '28px' }} /> */}
+      {type !== 'search' && history.length > 0 ? <div style={{ width: '52px' }} /> : <div />}
     </div>
   )
 }

packages/wallet-widget/src/components/NavigationHeader/content/collection.tsx

@@ -38,7 +38,7 @@ export const SelectWalletRow = ({
       onClick={onSelectWallet}
       isSelected={wallet.isActive || isSelected}
     >
-      <WalletAccountGradient accountAddress={wallet.address} size={'small'} />
+      <WalletAccountGradient accountAddress={wallet.address} />
       <div className="flex flex-col">
         <Text className="flex flex-row gap-1 items-center" nowrap color="primary" fontWeight="medium" variant="normal">
           {formatAddress(wallet.address)}

packages/wallet-widget/src/components/NavigationHeader/content/search.tsx

@@ -96,6 +96,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
                   {openWalletModal && !isAddFundsModalOpen && !isConnectModalOpen && (
                     <Modal
                       contentProps={{
+                        className: 'border border-border-normal',
                         style: {
                           maxWidth: WALLET_WIDTH,
                           height: 'fit-content',
@@ -107,14 +108,10 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
                       scroll={false}
                       onClose={() => setOpenWalletModal(false)}
                     >
-                      <div id="sequence-kit-wallet-content" ref={walletContentRef}>
+                      <div id="sequence-kit-wallet-content" ref={walletContentRef} style={{ height: WALLET_HEIGHT }}>
                         {getHeader(navigation)}
 
-                        {displayScrollbar ? (
-                          <Scroll style={{ height: WALLET_HEIGHT }}>{getContent(navigation)}</Scroll>
-                        ) : (
-                          getContent(navigation)
-                        )}
+                        {displayScrollbar ? <Scroll>{getContent(navigation)}</Scroll> : getContent(navigation)}
                       </div>
                     </Modal>
                   )}

packages/wallet-widget/src/components/NavigationHeader/content/settings.tsx

@@ -3,37 +3,30 @@ import { GradientAvatar } from '@0xsequence/design-system'
 
 import { getConnectorLogo } from './ConnectorLogos/getConnectorLogos.js'
 
-export const WalletAccountGradient = ({
-  accountAddress,
-  size = 'large'
-}: {
-  accountAddress: string
-  size?: 'small' | 'large'
-}) => {
+export const WalletAccountGradient = ({ accountAddress }: { accountAddress: string }) => {
   const { wallets } = useWallets()
-  const remSize = size === 'small' ? 8 : 16
 
   const LoginIcon = getConnectorLogo(wallets.find(wallet => wallet.address === accountAddress)?.signInMethod || '')
 
   return (
     <div className="flex relative">
       <div className="relative inline-block">
-        <GradientAvatar className={`w-${remSize} h-${remSize}`} size="xl" address={accountAddress || ''} />
+        <GradientAvatar className="w-11 h-11" size="xl" address={accountAddress || ''} />
         <div
           style={{
             position: 'absolute',
-            bottom: `-${remSize / 4}px`,
-            right: `-${remSize / 4}px`,
-            border: `${remSize / 8}px solid black`,
-            backgroundColor: 'lightgrey',
+            bottom: 0,
+            right: 0,
+            backgroundColor: 'black',
             borderRadius: '50%',
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            padding: `${remSize / 4}px`
+            height: '20px',
+            width: '20px'
           }}
         >
-          <div style={{ width: remSize, height: remSize }}>{LoginIcon}</div>
+          <div style={{ width: '14px', height: '14px' }}>{LoginIcon}</div>
         </div>
       </div>
     </div>