Ecosystem wallets (#462)

* initial ecosystem commit

* added nav and to landing page

* updated ecosystem image

* updated overview

* bumped scalar

docs/components/Landing/SolutionsSection.tsx

@@ -28,10 +28,10 @@ export const SolutionsSection = () => (
             link: '/solutions/wallets/sequence-kit/overview',
           },
           {
-            icon: 'AirdropperIcon',
-            title: 'Wallet Linking',
-            body: 'Enable users to link their embedded wallet in your game with an external wallet - allowing you to query assets, balances, and allow easy flow of liquidity to your game.',
-            link: '/solutions/wallets/link-wallets/overview',
+            icon: 'CollectiblesIcon',
+            title: 'Ecosystem',
+            body: 'Create ecosystem wallets for your entire ecosystem through Sequence as well as enable external applications to connect to your embedded ecosystem wallet - all with the same address across chains & apps.',
+            link: '/solutions/wallets/ecosystem/overview',
           },
           {
             icon: 'WalletIcon',

docs/pages/solutions/wallets/ecosystem/configuration.mdx

@@ -0,0 +1,25 @@
+---
+title: Sequence Ecosystem Wallets - Non-Custodial EVM Compatible Wallets for Seamless Gaming Experiences
+description: Sequence Ecosystem Wallets allows for the creation of a unified wallet for users across your ecosystem.
+---
+
+# Configuring your Ecosystem Wallet
+
+Setting up and configuring your ecosystem wallet for your brand via Sequence Builder is extremely simple.
+
+
+::::steps
+
+## Configure your Embedded Wallet
+Setup your embedded wallet configuration through [Sequence Builder](https://sequence.build/project/default/embedded-wallet) via your project. For more details on each configuration, please check out our configuration [docs](/solutions/builder/embedded-wallet) for embedded wallet.
+
+## Setup Sequence Kit with your Brand
+[Customize your login experience](https://sequence.build/project/default/embedded-wallet/edit) for your ecosystem brand in Sequence Kit.
+
+## Share keys with your partners
+To enable your ecosystem partners, simply share your Embedded Wallet keys (WaaS and Project Access Key) with your trusted partners as well as the design for Sequence Kit. All they have to do is integrate [Sequence Kit](/solutions/wallets/sequence-kit/getting-started) into their application with the provided keys.
+::::
+
+:::warning
+Please note that we only recommend sharing keys with trusted partners to ensure the security of your users.
+:::

docs/pages/solutions/wallets/ecosystem/cross-app.mdx

@@ -0,0 +1,97 @@
+---
+title: Sequence Ecosystem Wallets - Non-Custodial EVM Compatible Wallets for Seamless Gaming Experiences
+description: Sequence Ecosystem Wallets allows for the creation of a unified wallet for users across your ecosystem.
+---
+
+# Cross-App Ecosystem Wallets
+
+Sequence's cross-app solution enables your users to leverage your ecosystem embedded wallets in any app with the same wallet address - regardless of whether they are external to your ecosystem or integrated with Sequence using common wallet connectors like wagmi. This includes:
+
+- External Marketplaces
+- External DEX's
+- External Applications
+
+![Cross App Architecture](docs/public/img/ecosystem/cross-app.png "Sequence Cross-App Architecture")
+
+:::info
+You can see a demo of our cross-app embedded wallet connector [here](https://cross-app-demo-dapp.pages.dev/).
+:::
+
+The cross-app embedded wallet implements a communication flow between the external application and the wallet application:
+
+- The external app communicates with the wallet through the cross-app embedded wallet connector for Wagmi
+- The connector uses a ProviderTransport to handle communication
+- Messages are sent between the ProviderTransport and WalletTransport
+- The Wallet component handles three main functionalities:
+  - User Authentication
+  - Transaction Signing
+  - Message Signing
+
+The wallet can be opened and send messages back to the external application through the transport layer, enabling secure cross-application communication. Notably, for a cross-app integration, users will have to confirm all interactions.
+
+::::steps
+
+## Clone our Cross App Embedded Wallet App & connector
+
+```bash
+git clone https://github.com/0xsequence/cross-app-embedded-wallet/tree/master && cd cross-app-embedded-Wallet/wallet
+cp .env.example .env
+```
+
+## Update Wallet Transport with your configuration
+
+Pass in your ecosystem embedded wallet variables to the `.env` file. Then simply build the wallet application with `pnpm build` and deploy to your preferred such as Cloudflare Pages with a publicly accessible URL.
+
+## Example External Application Configuration
+Now, we'll configure an example external application where we pass in the wallet connector URL to wagmi. 
+
+Navigate to the example application and install dependencies, specifically the sequence cross-app connector package `@sequence-wallet/cross-app-connector`:
+
+```bash
+cd ../dapp && pnpm install
+```
+
+Then update the environment variables with our project access key and the hosted wallet URL you deployed previously:
+```bash
+cp .env.example .env
+```
+
+Lastly, you can edit the wagmi connector configuration located in `src/wagmiConfig.ts` for your specific wallet. Here's an example configuration that can be provided to the external application:
+
+```
+import { sequenceCrossAppEmbeddedWallet } from '@0xsequence/cross-app-embedded-wallet-connector'
+import { createConfig, http } from 'wagmi'
+import { arbitrumNova, arbitrumSepolia } from 'wagmi/chains'
+
+const urlParams = new URLSearchParams(window.location.search)
+const walletAppUrl = urlParams.get('walletAppUrl') ?? import.meta.env.VITE_WALLET_URL
+
+const connector = sequenceCrossAppEmbeddedWallet(
+  {
+    id: "sequenceDemo",
+    name: "Sequence Cross App Connector",
+    icon: "https://iconic.dynamic-static-assets.com/icons/sprite.svg#edenonline",
+  },
+  {
+    projectAccessKey: import.meta.env.VITE_PROJECT_ACCESS_KEY,
+    walletUrl: walletAppUrl,
+    initialChainId: arbitrumNova.id, // Change this to your desired chain
+  }
+);
+
+export const config = createConfig({
+  chains: [arbitrumNova, arbitrumSepolia],
+  connectors: [connector],
+  transports: {
+    [arbitrumNova.id]: http(), // add Chain ID Transport
+    [arbitrumSepolia.id]: http()
+  }
+})
+```
+
+:::
+
+
+
+
+

docs/pages/solutions/wallets/ecosystem/overview.mdx

@@ -0,0 +1,22 @@
+---
+title: Sequence Ecosystem Wallets - Non-Custodial EVM Compatible Wallets for Seamless Gaming Experiences
+description: Sequence Ecosystem Wallets allows for the creation of a unified wallet for users across your ecosystem.
+---
+
+# Sequence Ecosystem
+
+Sequence Ecosystem embedded wallets & cross-app solutions enables you to support your entire ecosystem through branded ecosystem wallets as well as enabling users to seamlessly connect their wallets to third-party applications.
+
+## Key Features
+
+![Ecosystem](/img/ecosystem/ecosystem-overview.png)
+
+### Share Wallets with partners in your ecosystem
+Unify your ecosystem by allowing partner applications to create embedded wallets with your brand. This feature ensures that your brand remains at the forefront while fostering interoperability and collaboration across your ecosystem with a single wallet address & configuration.
+
+### Cohesive, Branded Wallet
+Elevate your ecosystem with a fully customizable wallet interface through Sequence Kit that reflects your brand identity.
+
+### Expand your ecosystem cross-app
+Enable users to securely authenticate and transact across third-party applications with their same ecosystem wallet address using Sequence Cross-App wallet connectors.
+

nav.ts

@@ -113,6 +113,15 @@ export const sidebar = {
       text: 'Onboard',
       items: [
         { text: 'Overview', link: '/solutions/wallets/overview' },
+        {
+          text: 'Ecosystem Wallets',
+          collapsed: false,
+          items: [
+            { text: 'Overview', link: '/solutions/wallets/ecosystem/overview' },
+            { text: 'Configuration', link: '/solutions/wallets/ecosystem/configuration' },
+            { text: 'Cross-App Integration', link: '/solutions/wallets/ecosystem/cross-app' },
+          ],
+        },
         {
           text: 'Embedded Wallet',
           collapsed: false,

package.json

@@ -21,7 +21,7 @@
     "@docsearch/react": "3",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@scalar/api-reference-react": "^0.3.145",
+    "@scalar/api-reference-react": "^0.3.154",
     "@types/react": "latest",
     "add": "^2.0.6",
     "clsx": "^2.1.0",