Merge pull request #5 from 0xsequence/solutionMigration

initial content migration for solutions

docs/pages/index.mdx

@@ -44,7 +44,7 @@ import { HomePage } from "vocs/components";
               </h3>
             </a>
             <p class="text-gray-500 font-bold dark:text-gray-400">
-              Easily onboard web3-native players with Embedded Wallet.
+              Easily onboard web3-native players with a complete Universal Wallet.
             </p>
           </li>
           <li class="mb-4">
@@ -54,8 +54,8 @@ import { HomePage } from "vocs/components";
               </h3>
             </a>
             <p class="text-gray-500 font-bold dark:text-gray-400">
-              Acquire both web2 and web3 players with Sequence
-              Wallet-as-a-Service.
+              Gasless Transactions. No popups. Deliver a seamless experience for both web2 and web3 players with Sequence
+              Wallet-as-a-Service embedded into your game or app.
             </p>
           </li>
           <li class="mb-4">
@@ -350,4 +350,4 @@ import { HomePage } from "vocs/components";
                 </div>
             </div>
         </div>
-      </section>
+      </section>

docs/pages/sdk/sequence-kit/02-getting-started.mdx

@@ -0,0 +1,211 @@
+---
+sidebar_label: Getting Started
+---
+
+# Getting Started with Sequence Kit
+
+In this guide, we will walk you through installing Sequence Kit, triggering the connection modal, and displaying the embedded wallet in your application.
+
+## Installing Sequence Kit Packages
+
+Sequence Kit is modular, allowing you to install only the necessary packages. To get started, install the `kit` core package, the `connectors` package for interfacing with various wallet providers, and the `wallet` for the embedded wallet. Additionally, install other dependencies such as wagmi, viem, and 0xsequence.
+
+```bash
+npm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
+# or
+pnpm install @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
+# or
+yarn add @0xsequence/kit @0xsequence/kit-connectors wagmi [email protected] viem 0xsequence @tanstack/react-query
+```
+
+# Setting Up the Kit Wrapper
+To utilize the core kit wrapper for connecting web3 wallets to your application, follow these steps:
+
+1. Configure wagmi for your app. Below is a basic wagmi configuration. For advanced configurations, please refer to the [wagmi documentation](https://wagmi.sh/react/WagmiConfig).
+
+
+```jsx
+import MyPage from './components/MyPage'
+import { KitProvider } from '@0xsequence/kit'
+import { getDefaultConnectors } from '@0xsequence/kit-connectors'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createConfig, http, WagmiProvider } from 'wagmi'
+import { mainnet, polygon, Chain } from 'wagmi/chains'
+
+const queryClient = new QueryClient() 
+
+function App() {
+  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+
+  const projectAccessKey = '<access-key>'
+
+  const connectors = getDefaultConnectors({
+    walletConnectProjectId: 'wallet-connect-id',
+    defaultChainId: 137,
+    appName: 'demo app',
+    projectAccessKey
+  })
+
+  const transports = {}
+
+  chains.forEach(chain => {
+    transports[chain.id] = http()
+  })
+
+  const config = createConfig({
+    transports,
+    connectors,
+    chains
+  })
+
+  return (
+    <WagmiConfig config={config}>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <MyPage />
+        </KitProvider>
+      </QueryClientProvider>
+    </WagmiConfig>
+  );
+}
+```
+
+2. Wrap your app with the `KitProvider` within the `WagmiConfig` wrapper.
+
+
+# Setting Up the Embedded Wallet Wrapper
+To install the optional embedded wallet, add the `KitWalletProvider` below the `KitProvider` wrapper.
+
+```jsx
+import { KitWalletProvider } from '@0xsequence/kit-wallet'
+
+// ...
+
+const App = () => {
+  return (
+    <WagmiConfig config={config}>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider config={kitConfig}>
+          <KitWalletProvider>
+            <Page />
+          </KitWalletProvider>
+        </KitProvider>
+      </QueryClientProvider>
+    </WagmiConfig>
+  )
+}
+```
+
+The complete code will then look like this:
+
+```jsx
+import MyPage from './components/MyPage'
+import { KitProvider } from '@0xsequence/kit'
+import { getDefaultConnectors } from '@0xsequence/kit-connectors'
+import { KitWalletProvider } from '@0xsequence/kit-wallet'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createConfig, http, WagmiProvider } from 'wagmi'
+import { mainnet, polygon, Chain } from 'wagmi/chains'
+
+const queryClient = new QueryClient() 
+
+function App() {
+  const chains = [mainnet, polygon] as [Chain, ...Chain[]]
+
+  const projectAccessKey = '<access-key>'
+
+  const connectors = getDefaultConnectors({
+    walletConnectProjectId: 'wallet-connect-id',
+    defaultChainId: 137,
+    appName: 'demo app',
+    projectAccessKey
+  })
+
+  const transports = {}
+
+  chains.forEach(chain => {
+    transports[chain.id] = http()
+  })
+
+  const config = createConfig({
+    transports,
+    connectors,
+    chains
+  })
+
+  return (
+    <WagmiConfig config={config}>
+      <QueryClientProvider client={queryClient}> 
+        <KitProvider>
+          <KitWalletProvider>
+            <MyPage />
+          </KitWalletProvider>
+        </KitProvider>
+      </QueryClientProvider>
+    </WagmiConfig>
+  );
+}
+```
+
+# Triggering the Connect Modal
+
+<div class="text--center">
+  <img src="/img/kit/sign-in-modal.png" />
+</div>
+
+Invoke the connect modal using the `useOpenConnectModal` hook.
+
+```jsx
+import { useOpenConnectModal } from '@0xsequence/kit'
+import { useDisconnect, useAccount } from 'wagmi'
+
+
+const MyReactComponent = () => {
+  const { setOpenConnectModal } = useOpenConnectModal()
+
+  const { isConnected } = useAccount()
+
+  const onClick = () => {
+    setOpenConnectModal(true)
+  }
+
+  return (
+    <>
+      {!isConnected && (
+        <button onClick={onClick}>
+          Sign in
+        </button>
+      )}
+    </>
+  )
+}
+```
+
+The modal will automatically close once the user signs in. You can utilize the `useAccount` hook from wagmi to detect the user's connection status.
+
+# Invoking the embedded wallet modal
+
+<div class="text--center">
+  <img src="/img/kit/embedded-wallet.png" />
+</div>
+
+Open the embedded wallet using the `useOpenWalletModal` react hook.
+
+```jsx
+import { useOpenWalletModal } from '@0xsequence/kit-wallet'
+
+const MyComponent = () => {
+  const { setOpenWalletModal } = useOpenWalletModal()
+
+  const onClick = () => {
+    setOpenWalletModal(true)
+  }
+
+  return (
+    <button onClick={onClick}>open wallet</button>
+  )
+}
+```
+
+# React Example
+The Sequence Kit [Github repository](https://github.com/0xsequence/kit) contains an [example app](https://github.com/0xsequence/kit/tree/master/examples/react) that you can use for learning and testing.