> ## Documentation Index
> Fetch the complete documentation index at: https://docs.walletconnect.network/llms.txt
> Use this file to discover all available pages before exploring further.

# WalletConnect Documentation

> The Connectivity Layer for the Financial Internet

export const ProductCard = ({img, href, title, description, model, type}) => {
  return <a href={href} rel="noopener noreferrer" className="group mb-5">
      <div className="flex flex-col rounded-xl md:p-1">
        <div className="w-full h-32 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
          <img src={img} className="w-full h-[calc(100%+4px)] object-cover transition-transform duration-300 group-hover:scale-105 align-center -mt-1" alt={title} loading="lazy" noZoom />
        </div>
        <div className="flex flex-col gap-3 pb-2">
          <h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]">
            {title}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
            {description}
          </p>
          <div className="flex gap-2 mt-2 mb-1">
            <span className="bg-gray-100 dark:bg-[#181817] text-gray-600 dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{model}</span>
            <span className="bg-primary-light dark:bg-primary-dark text-white dark:text-white rounded-lg px-2 py-1 text-sm font-medium">{type}</span>
          </div>
        </div>
      </div>
    </a>;
};

export const appCategories = [{
  id: 'walletconnect-sdk',
  label: 'WalletConnect SDK',
  items: [{
    id: 'verify-api',
    title: 'Verify API',
    desc: 'Enable wallets to support users in better identifying the authenticity of a domain.',
    icon: '/images/warning.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: '/wallet-sdk/features/verify'
  }, {
    id: 'link-mode',
    title: 'Link Mode',
    desc: 'Transport One-Click Auth requests and session requests over Universal Links.',
    icon: '/images/link-mode.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: '/wallet-sdk/features/link-mode'
  }, {
    id: 'one-click-auth',
    title: 'One-Click Auth',
    desc: 'Enable users to connect to Web3 through a single tap with One-Click Auth.',
    icon: '/images/one-click-auth.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: '/wallet-sdk/features/one-click-auth'
  }, {
    id: 'chain-abstraction',
    title: 'Chain Abstraction',
    desc: 'Cross-chain functionality for users to spend stablecoins across different networks seamlessly.',
    icon: '/images/chain-abstraction.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: '/wallet-sdk/features/chain-abstraction'
  }]
}, {
  id: 'app-sdk',
  label: 'App SDK',
  items: [{
    id: 'wallet-connections',
    title: 'Wallet Connections & Authentication',
    desc: 'Enable developers to easily provide wallet connections and user authentication on their Web3 app using WalletConnect.',
    icon: '/images/app-sdk-home.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: '/app-sdk/overview'
  }]
}, {
  id: 'WalletConnect Network',
  label: 'WalletConnect Network',
  items: [{
    id: 'wallet-guide',
    title: 'WalletGuide',
    desc: 'The ultimate directory of onchain wallets for users and developers.',
    icon: '/images/walletguide-home.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: 'https://walletguide.walletconnect.network/'
  }]
}, {
  id: 'payments',
  label: 'Payments',
  items: [{
    id: 'walletconnect-pay',
    title: 'WalletConnect Pay',
    desc: 'A universal protocol that enables wallets and payment apps to initiate blockchain-based payment requests in a secure and chain-agnostic way.',
    icon: '/images/wc-pay-home.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: 'https://docs.walletconnect.com/payments/overview'
  }, {
    id: 'walletconnect-pos-sdk',
    title: 'Point of Sale (POS)',
    desc: 'A universal SDK for wallets, PSPs, and merchants to accept stablecoin payments at point-of-sale.',
    icon: '/images/pos-home.svg',
    image: {
      light: '/images/walletconnect-home.svg',
      dark: '/images/walletconnect-home.svg'
    },
    href: 'https://docs.walletconnect.com/payments/point-of-sale'
  }]
}];

export const ProductTiles = ({categories, hideButtons = false}) => {
  const [activeCategory, setActiveCategory] = useState(categories[0].id);
  const [activeSubTab, setActiveSubTab] = useState(categories[0].items[0]?.id ?? null);
  const currentCategory = categories.find(cat => cat.id === activeCategory);
  const currentSub = currentCategory?.items.find(item => item.id === activeSubTab);
  return <div className="not-prose space-y-6">
    {!hideButtons && <div className="flex flex-wrap gap-2">
        {categories.map(cat => <button key={cat.id} onClick={() => {
    setActiveCategory(cat.id);
    setActiveSubTab(cat.items[0]?.id ?? null);
  }} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === cat.id ? 'bg-[#0A0B0D] text-white dark:bg-white dark:text-[#0A0B0D] border-black' : 'bg-gray-100 dark:bg-white/10 text-black dark:text-white'}`}>
            {cat.label}
          </button>)}
      </div>}

      <div>
        {currentCategory?.items?.length ? <div className="flex flex-col lg:flex-row gap-6 bg-gray-100 dark:bg-[#141414] rounded-2xl">
            <div className="flex flex-col w-full lg:w-1/2 space-y-2 p-4">
              {currentCategory.items.map(item => <a key={item.id} href={item.href} onMouseOver={() => setActiveSubTab(item.id)} className={`flex items-start gap-1.5 text-left px-5 py-3 rounded-2xl transition-all ${activeSubTab === item.id ? 'bg-white dark:bg-white/5' : ''}`}>
                  <div className="text-xl mr-3 mt-1"><img src={item.icon} alt={item.title} className="w-8 h-8" /></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-base text-black dark:text-white">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.desc}</p>
                  </div>
                  <div className={`flex items-center justify-center min-w-[24px] self-center ${activeSubTab === item.id ? 'opacity-100' : 'opacity-0'}`}>
                    <div className="hidden dark:block">
                      <Icon icon="chevron-right" size="14" color="#FFF" />
                    </div>
                    <div className="block dark:hidden">
                      <Icon icon="chevron-right" size="14" color="#0A0B0D" />
                    </div>
                  </div>
                </a>)}
            </div>
            <div className="group w-full h-fit lg:w-1/2 rounded-2xl flex items-center justify-center  overflow-hidden min-h-[320px] p-4">
              {currentSub?.image ? <>
                <img src={currentSub.image.light} alt={currentSub.title} className="block dark:hidden w-full h-full object-cover rounded-xl" />
                <img src={currentSub.image.dark} alt={currentSub.title} className="hidden dark:block w-full h-full object-cover rounded-xl" />
              </> : <p className="text-gray-400 dark:text-gray-500 p-8">No preview available</p>}
            </div>
          </div> : <p className="text-sm text-gray-500 dark:text-gray-400">
            No features available for this category.
          </p>}
      </div>
    </div>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="px-4 lg:px-10 py-14">
      {children}
    </div>;
};

<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
  <Container>
    <div className="w-full flex flex-col">
      <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
        <div className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight">
          WalletConnect
        </div>

        <p className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4">
          The Connectivity Layer for the Financial Internet
        </p>

        <div className="flex flex-row gap-4 mt-5">
          <a href="/wallet-sdk/overview">
            <button type="button" className="px-5 flex items-center font-medium text-sm rounded-full py-2 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center">
              Get started

              <svg
                className="size-3 ml-2 bg-white dark:bg-gray-900"
                style={{
            maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
            maskRepeat: 'no-repeat',
            maskPosition: 'center center'
          }}
              />
            </button>
          </a>
        </div>
      </div>
    </div>
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-8">
      <div className="flex items-center justify-between w-full">
        <Title>
          Build with WalletConnect
        </Title>
      </div>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        WalletConnect powers thousands of onchain projects, driving one of the most active, open ecosystems in crypto.
      </p>

      <p>
        <br />

        **Check out our quickstart and other resources to get started!**
      </p>
    </div>

    <div className="dark:hidden block">
      <CardGroup cols={3}>
        <ProductCard title="Wallet SDK" description="Enable your wallets users to securely connect to any app, powered by the WalletConnect Network." href="/wallet-sdk/overview" img="https://mintcdn.com/test-walletconnect/-YEAKP2uZZCkwR9f/images/wallet.svg?fit=max&auto=format&n=-YEAKP2uZZCkwR9f&q=85&s=ed63080c5bb0598e27aa3f6a1a16b56e" model="For Wallets" type="Wallet SDK" width="280" height="146" data-path="images/wallet.svg" />

        <ProductCard title="App SDK" description="Provide wallet connections and user authentication on your Web3 app using WalletConnect." href="/app-sdk/overview" img="https://mintcdn.com/test-walletconnect/NyOLFBv4Asqwb_QB/images/app.svg?fit=max&auto=format&n=NyOLFBv4Asqwb_QB&q=85&s=e33d5177331860fdbd56cf5676cf557a" model="For Apps" type="App SDK" width="280" height="146" data-path="images/app.svg" />

        <ProductCard title="Network" description="The onchain UX ecosystem that makes Web3 work by facilitating users' use of any wallet across any app & platform." href="/overview" img="https://mintcdn.com/test-walletconnect/NyOLFBv4Asqwb_QB/images/network.svg?fit=max&auto=format&n=NyOLFBv4Asqwb_QB&q=85&s=28a823e9496a9fdd9aea2be915629b5f" model="Ecosystem" type="Network" width="280" height="146" data-path="images/network.svg" />

        <ProductCard title="Payments" description="Accept stablecoin payments at point-of-sale with a universal SDK for wallets, PSPs, and merchants." href="https://docs.walletconnect.com/" img="https://mintcdn.com/test-walletconnect/FFyJYedTA7jskmAT/images/credit-card.svg?fit=max&auto=format&n=FFyJYedTA7jskmAT&q=85&s=dbbb74c6c120597e521fcc0412c39d98" model="For Merchants" type="Payments" width="280" height="146" data-path="images/credit-card.svg" />
      </CardGroup>
    </div>

    <div className="dark:block hidden">
      <CardGroup cols={3}>
        <ProductCard title="Wallet SDK" description="Enable your wallets users to securely connect to any app, powered by the WalletConnect Network." href="/wallet-sdk/overview" img="https://mintcdn.com/test-walletconnect/-YEAKP2uZZCkwR9f/images/wallet-dark.svg?fit=max&auto=format&n=-YEAKP2uZZCkwR9f&q=85&s=2e87a730a26e02280be990be295991c7" model="For Wallets" type="Wallet SDK" width="280" height="146" data-path="images/wallet-dark.svg" />

        <ProductCard title="App SDK" description="Provide wallet connections and user authentication on your Web3 app using WalletConnect." href="/app-sdk/overview" img="https://mintcdn.com/test-walletconnect/NyOLFBv4Asqwb_QB/images/app-dark.svg?fit=max&auto=format&n=NyOLFBv4Asqwb_QB&q=85&s=df3d9f17389500ce488073d91f5dc3b1" model="For Apps" type="App SDK" width="280" height="146" data-path="images/app-dark.svg" />

        <ProductCard title="Network" description="The onchain UX ecosystem that makes Web3 work by facilitating users' use of any wallet across any app & platform." href="/overview" img="https://mintcdn.com/test-walletconnect/NyOLFBv4Asqwb_QB/images/network-dark.svg?fit=max&auto=format&n=NyOLFBv4Asqwb_QB&q=85&s=b29beba3b065c9ff3f398501fb38b284" model="Ecosystem" type="Network" width="280" height="146" data-path="images/network-dark.svg" />

        <ProductCard title="Payments" description="Accept stablecoin payments at point-of-sale with a universal SDK for wallets, PSPs, and merchants." href="https://docs.walletconnect.com/" img="https://mintcdn.com/test-walletconnect/FFyJYedTA7jskmAT/images/credit-card-dark.svg?fit=max&auto=format&n=FFyJYedTA7jskmAT&q=85&s=40e336c078f2795a33548bafcff86d69" model="For Merchants" type="Payments" width="280" height="146" data-path="images/credit-card-dark.svg" />
      </CardGroup>
    </div>

    <ul class="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-8">
      <div className="flex items-center justify-between w-full">
        <Title>
          Explore the SDKs
        </Title>
      </div>

      <p className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3">
        Use WalletConnect's SDKs to integrate WalletConnect into your Web3 apps and to make your wallet WalletConnect-compatible.
      </p>
    </div>

    <ProductTiles categories={appCategories} />

    <ul class="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
  </Container>

  <Container>
    <div className="flex flex-col w-full mb-5">
      <Title>
        Resources
      </Title>
    </div>

    <Columns cols={3}>
      <Card title="WalletConnect Blog" icon="newspaper" href="https://mintlify.com/careers#open-roles">
        Read the latest news and updates from the WalletConnect team
      </Card>

      <Card title="Join the WalletConnect Community" icon="discord" href="https://discord.walletconnect.network/">
        Discord community for WalletConnect Network and WCT Token
      </Card>

      <Card title="Twitter" icon="twitter" href="https://x.com/WalletConnect">
        Follow WalletConnect on X (Twitter) to stay updated on the announcements
      </Card>
    </Columns>
  </Container>
</div>