feat: contracts

package.json

@@ -20,6 +20,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.1",
     "starknet": "^6.11.0"
   },
   "devDependencies": {
@@ -32,6 +33,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-mkcert": "^1.17.6"
   }
 }

src/App.tsx

@@ -5,6 +5,10 @@ import './App.css'
 
 import { useConnect, useDisconnect, useAccount } from '@starknet-react/core'
 import { useBiometryManagerRaw } from '@telegram-apps/sdk-react'
+import CartridgeConnector from '@cartridge/connector'
+import { useEffect } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { Policy } from '@cartridge/controller'
 // import { useBiometryManager, useSettingsButton } from '@telegram-apps/sdk-react'
 // import { useEffect } from 'react'
 
@@ -14,17 +18,32 @@ function App() {
   const { account } = useAccount()
   // const { provider } = useProvider()
 
-  const cartridgeConnector = connectors[0]
+  const cartridgeConnector = connectors[0] as CartridgeConnector
+  cartridgeConnector.controller.keychain?.session
+
+  const [searchParams] = useSearchParams()
+
+  const policies = JSON.stringify([
+    {
+      target: '0x77d04bd307605c021a1def7987278475342f4ea2581f7c49930e9269bedf476',
+      method: 'flip',
+      description: 'Flip a tile at given x and y coordinates'
+    }
+  ])
+
+  const callbackUri = 'https://localhost:5173/callback'
 
   const bm = useBiometryManagerRaw();
 
 
-  // const biometryManager = useBiometryManager(false)
-  // const settings = useSettingsButton(false)
+  useEffect(() => {
+
+
+    console.log()
 
-  // useEffect(() => {
-  //   settings?.show()
-  // }, [settings])
+    const session = JSON.parse(searchParams.get('session') || '{}')
+    console.log(session)
+  }, [])
 
 
   return (
@@ -42,17 +61,8 @@ function App() {
       </div>
       <h1>TWA + Vite + React</h1>
       <div className="card">
-        <button onClick={() => {
-          if (account) {
-            disconnect()
-            return
-          }
-
-          connect({
-            connector: cartridgeConnector,
-          })
-        }}>
-          connect controller
+        <button>
+        <Link to={encodeURI(`https://x.cartridge.gg/slot/session?policies=${policies}&callback_uri=${callbackUri}&username=nas&rpc_url=https://api.cartridge.gg/x/starknet/sepolia`)}>Connect controller</Link>
         </button>
       </div>
 

src/main.tsx

@@ -5,12 +5,18 @@ import "./index.css";
 
 import { StarknetProvider } from "./providers/StarknetProvider.tsx";
 import { SDKProvider } from "@telegram-apps/sdk-react";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <SDKProvider debug acceptCustomStyles>
       <StarknetProvider>
-        <App />
+        <Router>
+          <Routes>
+            <Route path="/" element={<App />} />
+            <Route path="/callback" element={<App />} />
+          </Routes>
+        </Router>
       </StarknetProvider>
     </SDKProvider>
   </React.StrictMode>

src/providers/StarknetProvider.tsx

@@ -17,8 +17,8 @@ const cartridge = new CartridgeConnector(
     {
       target: '0x77d04bd307605c021a1def7987278475342f4ea2581f7c49930e9269bedf476',
       method: 'flip',
-      description: 'Flip a tile at given x and y coordinates',
-    },
+      description: 'Flip a tile at given x and y coordinates'
+    }
   ],
   {
     url: 'https://x.cartridge.gg',

vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import mkcert from'vite-plugin-mkcert'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), mkcert()],
 });