widget-v2

README.md

@@ -63,6 +63,8 @@ interface CreateConfigOptions {
         projectId: string
       }
 
+  guest?: boolean
+
   google?:
     | false
     | {
@@ -96,6 +98,8 @@ const config = createConfig('waas', {
   appName: 'Demo Dapp',
   waasConfigKey: '<your-waas-config-key>',
 
+  guest: true,
+
   google: {
     clientId: '<your-google-client-id>'
   },
@@ -107,7 +111,9 @@ const config = createConfig('waas', {
 
   walletConnect: {
     projectId: '<your-wallet-connect-id>'
-  }
+  },
+
+  email: true
 })
 
 function App() {
@@ -161,6 +167,8 @@ const connectors = getDefaultConnectors('universal', {
 
     waasConfigKey: '<your-waas-config-key>',
 
+    guest: true
+
     google: {
       clientId
     },
@@ -173,6 +181,8 @@ const connectors = getDefaultConnectors('universal', {
     walletConnect: {
       projectId: '<your-wallet-connect-id>'
     }
+
+    email: true
   })
   */
 

examples/components/src/Footer.tsx

@@ -1,4 +1,4 @@
-import { Button, Image, Text, useTheme } from '@0xsequence/design-system'
+import { Button, Image, Text } from '@0xsequence/design-system'
 
 interface BottomPageLink {
   label: string

packages/connect/README.md

@@ -64,6 +64,8 @@ interface CreateConfigOptions {
         projectId: string
       }
 
+  guest?: boolean
+
   google?:
     | boolean
     | {
@@ -97,6 +99,8 @@ const config = createConfig('waas', {
   appName: 'Demo Dapp',
   waasConfigKey: '<your-waas-config-key>',
 
+  guest: true,
+
   google: {
     clientId: '<your-google-client-id>'
   },
@@ -108,7 +112,9 @@ const config = createConfig('waas', {
 
   walletConnect: {
     projectId: '<your-wallet-connect-id>'
-  }
+  },
+
+  email: true
 })
 
 function App() {

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

@@ -8,7 +8,6 @@ export const styles = String.raw`
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-violet-600: oklch(54.1% 0.281 293.009);
-    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -212,6 +211,9 @@ export const styles = String.raw`
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -290,9 +292,6 @@ export const styles = String.raw`
   .-m-\[1px\] {
     margin: calc(1px * -1);
   }
-  .m-0 {
-    margin: calc(var(--spacing) * 0);
-  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -449,6 +448,9 @@ export const styles = String.raw`
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[2px\] {
+    height: 2px;
+  }
   .h-\[17px\] {
     height: 17px;
   }
@@ -766,6 +768,11 @@ export const styles = String.raw`
   .justify-self-center {
     justify-self: center;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -793,6 +800,9 @@ export const styles = String.raw`
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -818,22 +828,10 @@ export const styles = String.raw`
     border-top-left-radius: var(--radius-2xl);
     border-top-right-radius: var(--radius-2xl);
   }
-  .rounded-t-none {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  .rounded-t-xl {
-    border-top-left-radius: var(--radius-xl);
-    border-top-right-radius: var(--radius-xl);
-  }
   .rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .rounded-b-xl {
-    border-bottom-right-radius: var(--radius-xl);
-    border-bottom-left-radius: var(--radius-xl);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -975,6 +973,9 @@ export const styles = String.raw`
   .fill-background-raised {
     fill: var(--seq-color-background-raised);
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -1065,9 +1066,6 @@ export const styles = String.raw`
   .pt-5 {
     padding-top: calc(var(--spacing) * 5);
   }
-  .pt-6 {
-    padding-top: calc(var(--spacing) * 6);
-  }
   .pt-\[60px\] {
     padding-top: 60px;
   }
@@ -1252,9 +1250,6 @@ export const styles = String.raw`
   .text-black {
     color: var(--color-black);
   }
-  .text-gray-500 {
-    color: var(--color-gray-500);
-  }
   .text-info {
     color: var(--seq-color-info);
   }
@@ -1317,6 +1312,9 @@ export const styles = String.raw`
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-75 {
+    opacity: 75%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1328,6 +1326,10 @@ export const styles = String.raw`
     --tw-shadow: 0 0 10px 0 var(--tw-shadow-color, rgba(0,0,0,0.5));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

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/hooks/src/hooks/IndexerGateway/useGetSingleTokenBalance.ts

@@ -1,4 +1,4 @@
-import type { SequenceIndexerGateway } from '@0xsequence/indexer'
+import { ContractVerificationStatus, type SequenceIndexerGateway } from '@0xsequence/indexer'
 import { useQuery } from '@tanstack/react-query'
 
 import { QUERY_KEYS, time, ZERO_ADDRESS } from '../../constants.js'
@@ -12,6 +12,7 @@ export interface GetSingleTokenBalanceArgs {
   accountAddress: string
   contractAddress: string
   tokenId?: string
+  hideUnlistedTokens?: boolean
 }
 
 const getSingleTokenBalance = async (args: GetSingleTokenBalanceArgs, indexerGatewayClient: SequenceIndexerGateway) => {
@@ -20,7 +21,8 @@ const getSingleTokenBalance = async (args: GetSingleTokenBalanceArgs, indexerGat
     filter: {
       accountAddresses: [args.accountAddress],
       contractWhitelist: [args.contractAddress],
-      omitNativeBalances: false
+      omitNativeBalances: false,
+      contractStatus: args.hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL
     }
   })
 

packages/wallet-widget/src/components/ConnectorLogos/getConnectorLogos.tsx

@@ -40,6 +40,6 @@ export const getConnectorLogo = (connectorId: string, isDarkMode = false): React
     case 'wallet-connect':
       return <WalletConnectLogo />
     default:
-      return <></>
+      return null
   }
 }

packages/wallet-widget/src/components/CopyButton.tsx

@@ -1,28 +1,37 @@
-import { Button, CheckmarkIcon, CopyIcon } from '@0xsequence/design-system'
+import { Button, CheckmarkIcon, CopyIcon, Text } from '@0xsequence/design-system'
 import { useClipboard } from '@0xsequence/hooks'
 import type { ComponentProps } from 'react'
 
 type ButtonProps = ComponentProps<typeof Button>
 
 interface CopyButtonProps extends ButtonProps {
   text: string
-  buttonVariant: 'icon' | 'with-label'
+  includeLabel?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
 
 export const CopyButton = (props: CopyButtonProps) => {
-  const { buttonVariant = 'icon', text, size = 'xs', ...rest } = props
+  const { includeLabel = false, text, size = 'xs' } = props
   const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
   const label = isCopied ? 'Copied!' : 'Copy'
 
   return (
-    <Button
-      size={size!}
-      leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
-      label={buttonVariant === 'with-label' ? label : undefined}
-      variant={buttonVariant === 'icon' ? 'ghost' : 'glass'}
-      onClick={() => setCopied(text)}
-      {...rest}
-    />
+    <div className="flex flex-row gap-1 items-center hover:opacity-80 cursor-pointer" onClick={() => setCopied(text)}>
+      {isCopied ? <CheckmarkIcon color="white" size={size} /> : <CopyIcon color="white" size={size} />}
+      {includeLabel && (
+        <Text color="primary" fontWeight="medium" variant="normal">
+          {label}
+        </Text>
+      )}
+    </div>
+    // <Button
+    //   size={size!}
+    //   leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
+    //   label={buttonVariant === 'with-label' ? label : undefined}
+    //   variant={buttonVariant === 'icon' ? 'ghost' : buttonVariant === 'text' ? 'text' : 'glass'}
+    //   onClick={() => setCopied(text)}
+    //   {...rest}
+    // />
   )
 }