Feat/react components

.eslintrc.json

@@ -4,13 +4,19 @@
     "es2021": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
+  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-extra-semi": "off",

package.json

@@ -21,38 +21,11 @@
     "*.{ts,tsx}": "eslint --cache --ext .ts,.tsx"
   },
   "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/starknetkit.d.ts",
-      "import": "./dist/starknetkit.js",
-      "require": "./dist/starknetkit.cjs"
-    },
-    "./webwallet": {
-      "types": "./dist/webwalletConnector.d.ts",
-      "import": "./dist/webwalletConnector.js",
-      "require": "./dist/webwalletConnector.cjs"
-    },
-    "./argentMobile": {
-      "types": "./dist/argentMobile.d.ts",
-      "import": "./dist/argentMobile.js",
-      "require": "./dist/argentMobile.cjs"
-    },
-    "./injected": {
-      "types": "./dist/injectedConnector.d.ts",
-      "import": "./dist/injectedConnector.js",
-      "require": "./dist/injectedConnector.cjs"
-    }
-  },
-  "main": "./dist/starknetkit.cjs",
-  "module": "./dist/starknetkit.js",
-  "types": "./dist/starknetkit.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "dev": "vite build --watch"
+    "build": "pnpm run -r --parallel --stream build"
   },
   "dependencies": {
     "@trpc/client": "^10.38.1",
@@ -64,44 +37,30 @@
     "events": "^3.3.0",
     "get-starknet-core": "^3.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-forms": "^2.3.1",
     "trpc-browser": "^1.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@semantic-release/git": "^10.0.1",
-    "@sveltejs/vite-plugin-svelte": "^2.2.0",
-    "@tsconfig/svelte": "^5.0.0",
     "@types/async-retry": "^1.4.5",
     "@types/lodash-es": "^4.17.8",
     "@types/node": "^20.5.7",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@walletconnect/ethereum-provider": "^2.7.7",
-    "@walletconnect/jsonrpc-provider": "^1.0.13",
-    "@walletconnect/signer-connection": "^2.7.7",
-    "@walletconnect/types": "^2.7.7",
-    "@walletconnect/utils": "^2.10.0",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.48.0",
     "eslint-config-next": "^13.4.19",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "postcss": "^8.4.21",
-    "postcss-load-config": "^4.0.1",
     "prettier": "^3.0.3",
     "prettier-plugin-import-sort": "^0.0.7",
     "semantic-release": "^21.1.1",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.5.1",
-    "svelte-preprocess": "^5.0.4",
     "tailwindcss": "^3.1.6",
     "tslib": "^2.4.0",
     "typescript": "^5.1.6",
     "vite": "^4.3.8",
     "vite-plugin-dts": "^3.0.0",
-    "ws": "^8.8.1",
-    "zod": "^3.20.6"
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "starknet": "^5.24.3"

packages/connectors/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "starknetkit",
+  "version": "1.0.20",
+  "repository": "github:argentlabs/starknetkit",
+  "private": false,
+  "browser": {
+    "crypto": false
+  },
+  "keywords": [
+    "starknet",
+    "starkware",
+    "l2",
+    "zk",
+    "rollup",
+    "wallet",
+    "dapp"
+  ],
+  "license": "MIT",
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,css,md,yml,json}": "prettier --write",
+    "*.{ts,tsx}": "eslint --cache --ext .ts,.tsx"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/starknetkit.d.ts",
+      "import": "./dist/starknetkit.js",
+      "require": "./dist/starknetkit.cjs"
+    },
+    "./webwallet": {
+      "types": "./dist/webwalletConnector.d.ts",
+      "import": "./dist/webwalletConnector.js",
+      "require": "./dist/webwalletConnector.cjs"
+    },
+    "./argentMobile": {
+      "types": "./dist/argentMobile.d.ts",
+      "import": "./dist/argentMobile.js",
+      "require": "./dist/argentMobile.cjs"
+    },
+    "./injected": {
+      "types": "./dist/injectedConnector.d.ts",
+      "import": "./dist/injectedConnector.js",
+      "require": "./dist/injectedConnector.cjs"
+    }
+  },
+  "main": "./dist/starknetkit.cjs",
+  "module": "./dist/starknetkit.js",
+  "types": "./dist/starknetkit.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "@trpc/client": "^10.38.1",
+    "@trpc/server": "^10.38.1",
+    "@walletconnect/sign-client": "^2.10.1",
+    "bowser": "^2.11.0",
+    "detect-browser": "^5.3.0",
+    "eventemitter3": "^5.0.1",
+    "events": "^3.3.0",
+    "get-starknet-core": "^3.1.0",
+    "lodash-es": "^4.17.21",
+    "trpc-browser": "^1.3.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@walletconnect/ethereum-provider": "^2.7.7",
+    "@walletconnect/jsonrpc-provider": "^1.0.13",
+    "@walletconnect/signer-connection": "^2.7.7",
+    "@walletconnect/types": "^2.7.7",
+    "@walletconnect/utils": "^2.10.0",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.48.0",
+    "eslint-config-next": "^13.4.19",
+    "postcss": "^8.4.21",
+    "postcss-load-config": "^4.0.1",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.5.1",
+    "svelte-preprocess": "^5.0.4"
+  },
+  "gitHead": "b16688a8638cc138938e74e1a39d004760165d75"
+}

src/connectors/argentMobile/modal/starknet/adapter.ts → packages/connectors/src/connectors/argentMobile/modal/starknet/adapter.ts

@@ -72,7 +72,7 @@ export class StarknetAdapter
       methods: this.methods,
       events: this.events,
     }
-    this.signerConnection = this.getSignerConnection(client)
+    this.signerConnection = this.getSignerConnection(client as any)
     this.rpcProvider = new JsonRpcProvider(this.signerConnection)
     this.client = client
     this.registerEventListeners()
@@ -178,7 +178,6 @@ export class StarknetAdapter
     super.registerEventListeners()
     this.eventEmitter.on("chainChanged", (_chainId: string) => {
       throw new Error("Not implemented: chainChanged")
-      // TODO: update provider
     })
   }
 

packages/connectors/src/helpers/address.ts

@@ -0,0 +1,15 @@
+import { encode } from "starknet"
+
+export const formatAddress = (address: string) =>
+  encode.addHexPrefix(encode.removeHexPrefix(address).padStart(64, "0"))
+
+export const truncateAddress = (address: string) => {
+  return truncateHex(formatAddress(address))
+}
+
+export const truncateHex = (value: string) => {
+  const hex = value.slice(0, 2)
+  const start = value.slice(2, 6)
+  const end = value.slice(-4)
+  return `${hex}${start}…${end}`
+}

src/helpers/mapTargetUrlToNetworkId.ts → packages/connectors/src/helpers/mapTargetUrlToNetworkId.ts

@@ -17,9 +17,6 @@ export function mapTargetUrlToNetworkId(target: string): constants.NetworkName {
     if (origin.includes("staging")) {
       return Network.SN_MAIN
     }
-    if (origin.includes("dev")) {
-      return Network.SN_GOERLI2
-    }
     if (origin.includes("argent.xyz")) {
       return Network.SN_MAIN
     }

src/main.ts → packages/connectors/src/main.ts

@@ -16,9 +16,14 @@ import {
 } from "./helpers/lastConnected"
 import { mapModalWallets } from "./helpers/mapModalWallets"
 import Modal from "./modal/Modal.svelte"
-import type { ConnectOptions, ModalWallet } from "./types/modal"
+import type {
+  ConnectOptions,
+  ModalWallet,
+  ModalMode,
+  ModalTheme,
+} from "./types/modal"
 
-import { Connector } from "./connectors"
+import type { Connector } from "./connectors"
 import css from "./theme.css?inline"
 
 let selectedConnector: Connector | null = null
@@ -153,4 +158,9 @@ export type {
   DisconnectOptions,
   DisconnectedStarknetWindowObject,
   StarknetWindowObject,
+  Connector,
+  ModalMode,
+  ModalTheme,
 }
+
+export { DEFAULT_WEBWALLET_URL }

src/types/modal.ts → packages/connectors/src/types/modal.ts

@@ -5,12 +5,16 @@ import { ProviderInterface } from "starknet"
 
 export type StoreVersion = "chrome" | "firefox" | "edge"
 
+export type ModalMode = "alwaysAsk" | "canAsk" | "neverAsk"
+
+export type ModalTheme = "light" | "dark" | "system"
+
 export interface ConnectOptions extends GetWalletOptions {
   argentMobileOptions?: ArgentMobileConnectorOptions
   dappName?: string
   connectors?: Connector[]
-  modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
-  modalTheme?: "light" | "dark" | "system"
+  modalMode?: ModalMode
+  modalTheme?: ModalTheme
   storeVersion?: StoreVersion | null
   webWalletUrl?: string
   provider?: ProviderInterface

vite.config.ts → packages/connectors/vite.config.ts

@@ -8,7 +8,7 @@ import dts from "vite-plugin-dts"
 export default defineConfig({
   build: {
     rollupOptions: {
-      external: ["starknet"],
+      external: ["starknet",],
     },
     emptyOutDir: false,
     target: "es2020",
@@ -34,7 +34,6 @@ export default defineConfig({
   plugins: [
     svelte({ emitCss: false }),
     dts({
-      entryRoot: resolve(__dirname, "src"),
       insertTypesEntry: true,
     }),
   ],

packages/ui/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

packages/ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/ui/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  stories: ["../storybook/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+}
+export default config

packages/ui/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import "../src/styles.css"
+import type { Preview } from "@storybook/react"
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview