Add headless and styled UI to connect wallet

.changeset/config.json

@@ -3,7 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "linked": [["@starknet-io/get-starknet-core", "@starknet-io/get-starknet"]],
+  "linked": [["@starknet-io/*"]],
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",

.changeset/five-birds-sink.md

@@ -0,0 +1,12 @@
+---
+"@starknet-io/get-starknet-wallet-standard": patch
+"@starknet-io/get-starknet-virtual-wallet": patch
+"@starknet-io/get-starknet-discovery": patch
+"@starknet-io/get-starknet-wallets": patch
+"@starknet-io/get-starknet-modal": patch
+"@starknet-io/get-starknet-core": patch
+"@starknet-io/get-starknet-ui": patch
+"get-starknet-docs": patch
+---
+
+Initial get starknet 5 release

biome.json

@@ -1,28 +1,65 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",
     "useIgnoreFile": false
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist"]
+    "includes": ["**", "!**/dist", "!**/node_modules", "!**/build", "!**/*.css"]
   },
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
     "indentWidth": 2,
     "bracketSpacing": true
   },
-  "organizeImports": {
-    "enabled": true
+  "css": {
+    "linter": {
+      "enabled": false
+    },
+    "formatter": {
+      "enabled": false
+    }
   },
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
   "linter": {
+    "domains": {
+      "react": "recommended"
+    },
     "enabled": true,
     "rules": {
       "correctness": {
-        "noUnusedImports": "warn"
+        "noUnusedImports": {
+          "options": {},
+          "level": "error",
+          "fix": "safe"
+        },
+        "noUnusedFunctionParameters": "off",
+        "noUnusedVariables": "off"
+      },
+      "suspicious": {
+        "noControlCharactersInRegex": "off",
+        "noArrayIndexKey": "off"
+      },
+      "complexity": {
+        "useLiteralKeys": "off",
+        "noUselessFragments": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "off"
+      },
+      "a11y": {
+        "noStaticElementInteractions": "off",
+        "useFocusableInteractive": "off",
+        "useSemanticElements": "off",
+        "useAriaPropsForRole": "off",
+        "noSvgWithoutTitle": "off",
+        "useAltText": "off",
+        "useButtonType": "off",
+        "useKeyWithClickEvents": "off"
       },
       "recommended": true
     }

docs/components/wallet-discovery.tsx

@@ -1,15 +1,15 @@
+import { createStore } from "@starknet-io/get-starknet-discovery";
+import type { StarknetWalletAccount } from "@starknet-io/get-starknet-wallet-standard";
+import type { WalletWithStarknetFeatures } from "@starknet-io/get-starknet-wallet-standard/features";
 import {
   QueryClient,
   QueryClientProvider,
   useMutation,
   useQuery,
 } from "@tanstack/react-query";
+import type { StandardEventsChangeProperties } from "@wallet-standard/features";
 import { RefreshCcw, Trash } from "lucide-react";
-import { createStore } from "@starknet-io/get-starknet-discovery";
-import type { WalletWithStarknetFeatures } from "@starknet-io/get-starknet-wallet-standard/features";
-import type { StarknetWalletAccount } from "@starknet-io/get-starknet-wallet-standard";
 import { useCallback, useEffect, useState } from "react";
-import type { StandardEventsChangeProperties } from "@wallet-standard/features";
 
 const store = createStore();
 const queryClient = new QueryClient();
@@ -83,7 +83,6 @@ export default function WalletDiscoveryDemo() {
           </div>
           <div className="flex flex-col gap-2 pt-4">
             {events.map((event, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: it's fine
               <p key={index} className="text-sm text-gray-500">
                 {event}
               </p>

docs/components/wallet-modal-ui.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  GetStarknetProvider,
+  StarknetWalletApi,
+  useConnect,
+  WalletConnectModal,
+} from "@starknet-io/get-starknet-ui";
+import {
+  useWebWallet,
+  WebWalletConnectUi,
+  WebWalletProvider,
+} from "./web-wallet";
+
+export default function WalletModalUiDemo() {
+  return (
+    <WebWalletProvider>
+      <DemoComponent />
+    </WebWalletProvider>
+  );
+}
+
+function DemoComponent() {
+  const { wallet: webWallet } = useWebWallet();
+
+  return (
+    <GetStarknetProvider extraWallets={[webWallet]}>
+      <WalletUser />
+    </GetStarknetProvider>
+  );
+}
+
+function WalletUser() {
+  const { wallet: webWallet } = useWebWallet();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 p-4">
+      <WalletConnectModal
+        walletUi={{
+          [webWallet.features[StarknetWalletApi].id]: {
+            viewPanel: (wallet) => <WebWalletConnectUi key={wallet.name} />,
+          },
+        }}
+      />
+      <ExampleNestedComponent />
+    </div>
+  );
+}
+
+function ExampleNestedComponent() {
+  const { connected } = useConnect();
+
+  return (
+    <div className="p-32">
+      <p>
+        {connected && connected.accounts.length > 0
+          ? connected.accounts[0].address
+          : "Not connected"}
+      </p>
+    </div>
+  );
+}