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>
+  )
+}

…onents/NavigationHeader/content/home.tsx …onents/NavigationHeader/content/Home.tsxpackages/wallet-widget/src/components/NavigationHeader/content/home.tsx renamed to packages/wallet-widget/src/components/NavigationHeader/content/Home.tsx 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>
+}