change out dir

package.json

@@ -10,8 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@cartridge/connector": "^0.3.41",
+    "@cartridge/controller": "^0.3.41",
+    "@dojoengine/torii-wasm": "^1.0.0-alpha.5",
     "@twa-dev/sdk": "^6.7.1",
+    "@starknet-react/chains": "^0.1.7",
+    "@starknet-react/core": "^2.9.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "starknet": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.tsx

@@ -5,9 +5,17 @@ import viteLogo from '/vite.svg'
 import './App.css'
 
 import WebApp from '@twa-dev/sdk'
+import { useConnect, useDisconnect, useAccount } from '@starknet-react/core'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count] = useState(0)
+
+  const { connect, connectors } = useConnect()
+  const { disconnect } = useDisconnect()
+  const { account } = useAccount()
+  // const { provider } = useProvider()
+
+  const cartridgeConnector = connectors[0]
 
   return (
     <>
@@ -24,7 +32,16 @@ function App() {
       </div>
       <h1>TWA + Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
+        <button onClick={() => {
+          if (account) {
+            disconnect()
+            return
+          }
+
+          connect({
+            connector: cartridgeConnector,
+          })
+        }}>
           count is {count}
         </button>
       </div>

src/main.tsx

@@ -4,11 +4,14 @@ import App from './App.tsx'
 import './index.css'
 
 import WebApp from '@twa-dev/sdk'
+import { StarknetProvider } from './providers/StarknetProvider.tsx'
 
 WebApp.ready();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <StarknetProvider>
+      <App />
+    </StarknetProvider>
   </React.StrictMode>,
 )

src/providers/StarknetProvider.tsx

@@ -0,0 +1,45 @@
+import { Chain, mainnet, sepolia } from '@starknet-react/chains'
+import { StarknetConfig, starkscan } from '@starknet-react/core'
+import { PropsWithChildren } from 'react'
+import CartridgeConnector from '@cartridge/connector'
+import { RpcProvider, shortString } from 'starknet'
+
+export function StarknetProvider({ children }: PropsWithChildren) {
+  return (
+    <StarknetConfig autoConnect chains={[sepolia]} connectors={[cartridge]} explorer={starkscan} provider={provider}>
+      {children}
+    </StarknetConfig>
+  )
+}
+
+const cartridge = new CartridgeConnector(
+  [
+    {
+      target: '0x77d04bd307605c021a1def7987278475342f4ea2581f7c49930e9269bedf476',
+      method: 'flip',
+      description: 'Flip a tile at given x and y coordinates',
+    },
+  ],
+  {
+    url: 'https://x.cartridge.gg',
+    rpc: 'https://api.cartridge.gg/x/starknet/sepolia',
+    paymaster: {
+      caller: shortString.encodeShortString('ANY_CALLER'),
+    },
+    theme: 'flippyflop',
+  },
+)
+
+function provider(chain: Chain) {
+  switch (chain) {
+    case mainnet:
+      return new RpcProvider({
+        nodeUrl: 'https://api.cartridge.gg/x/starknet/mainnet',
+      })
+    case sepolia:
+    default:
+      return new RpcProvider({
+        nodeUrl: 'https://api.cartridge.gg/x/starknet/sepolia',
+      })
+  }
+}

vite.config.ts

@@ -6,7 +6,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl';
 export default defineConfig({
   plugins: [react(), basicSsl()],
   build: {
-    outDir: './docs'
+    outDir: './dist'
   },
   base: '/vite-boilerplate/'
 });