feat: initial wallet service implementation

wallet service implementation;
example page setup;
repository setup;

.editorconfig

@@ -0,0 +1,18 @@
+.root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,ts}]
+indent_size = 4
+
+[*.{html,css,json}]
+indent_size = 2
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "root": true,
+  "extends": [
+    "@swivel-finance"
+  ],
+  "ignorePatterns": [
+    "node_modules/",
+    "dist/",
+    "*.js"
+  ],
+  "rules": {
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "groups": [
+          "builtin",
+          "external",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "never",
+        "pathGroups": [
+          {
+            "pattern": "@swivel-finance/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "distinctGroup": false
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional npm authToken
+.npmrc
+
+# Build and test output
+node_modules/
+dist/

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "livePreview.autoRefreshPreview": "On Changes to Saved Files",
+    "typescript.preferences.importModuleSpecifierEnding": "js",
+    "typescript.preferences.importModuleSpecifier": "relative",
+    "javascript.preferences.importModuleSpecifierEnding": "js",
+    "javascript.preferences.importModuleSpecifier": "relative"
+}

README.md

@@ -1,2 +1,38 @@
 # connect
 A flexible web3 connection service for swivel frontends and node scripting environments.
+
+## Features
+- Supports multiple browser wallet extensions through [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963)
+- Supports browser wallets, rpc providers, and mocked providers
+
+## Installation
+```bash
+npm install --save @swivel-finance/connect
+```
+
+## Usage
+```ts
+import { WalletService } from '@swivel-finance/connect';
+import { BrowserConnectionProvider } from '@swivel-finance/connect/connection/providers/browser/provider.js';
+
+// create a wallet service instance, passing a compatible connection provider
+// you could pass an rpc provider or a mock provider here as well
+const walletService = new WalletService({
+    connectionProvider: new BrowserConnectionProvider({
+        chainId: 1,
+    }),
+});
+
+// obtain a connection object by calling connect on the wallet service
+// the connection object contains the following properties:
+//
+// interface Connection {
+//     network: Network;
+//     account: Account;
+//     provider: Provider;
+//     signer: Signer;
+// }
+const connection = await walletService.connect();
+```
+
+See more examples in the [examples](./examples) directory.

example/assets/css/base.css

@@ -0,0 +1,89 @@
+:root {
+  --rem-ratio: 1;
+  --grid-ratio: 0.5;
+  --font-ratio: 1;
+  --line-ratio: 1.5;
+  --grid-size: calc(1rem * var(--grid-ratio));
+  --font-size: calc(1rem * var(--font-ratio));
+  --line-height: calc(1rem * var(--line-ratio));
+  --font-family: Helvetica, Arial, sans-serif;
+  --font-family-mono: monospace, monospace;
+  --color-bg: #fff;
+  --color-fg: #222;
+  --color-action-primary-bg: #0070f3;
+  --color-action-disabled-bg: #aaaaaa;
+  --color-action-bg: var(--color-action-primary-bg);
+  --color-action-fg: #fff;
+  --border-radius: calc(var(--grid-size) / 2);
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: calc(100% * var(--rem-ratio));
+  box-sizing: border-box;
+  background-color: var(--color-bg);
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  text-rendering: optimizeLegibility;
+  vertical-align: baseline;
+  white-space: normal;
+  color: var(--color-fg);
+}
+
+html,
+body {
+  min-height: 100vh;
+  min-width: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+pre {
+  white-space: pre;
+}
+
+pre,
+code {
+  font-family: var(--font-family-mono);
+}
+
+*::-moz-focus-inner {
+  outline: none;
+  box-shadow: none;
+}
+*::-moz-focus-outer {
+  outline: none;
+  box-shadow: none;
+}
+*:-moz-focusring {
+  outline: none;
+  box-shadow: none;
+}
+*:focus {
+  outline: none;
+}

example/assets/css/main.css

@@ -0,0 +1,18 @@
+@import './base.css';
+@import './wallet-list.css';
+
+button {
+  padding-block: var(--grid-size);
+  padding-inline: calc(var(--grid-size) * 2);
+  color: var(--color-action-fg);
+  cursor: pointer;
+  font-weight: bold;
+  background: var(--color-action-bg);
+  border: none;
+  border-radius: var(--border-radius);
+}
+
+button:is([disabled], [aria-disabled=true]) {
+  --color-action-bg: var(--color-action-disabled-bg);
+  cursor: not-allowed;
+}

example/assets/css/wallet-list.css

@@ -0,0 +1,55 @@
+wallet-list-element {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-size);
+}
+
+wallet-list-element .list-item {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--grid-size);
+  cursor: pointer;
+}
+
+wallet-list-element .selection {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  aspect-ratio: 1;
+  width: calc(var(--grid-size) * 2);
+  border: 1px solid var(--color-fg);
+  border-radius: 50%;
+  opacity: 0.5;
+}
+
+wallet-list-element .selected .selection {
+  opacity: 1;
+}
+
+wallet-list-element .selected .selection::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  background: var(--color-fg);
+  border-radius: 50%;
+}
+
+wallet-list-element .icon {
+  aspect-ratio: 1;
+  width: calc(var(--grid-size) * 3);
+  object-fit: contain;
+}
+
+wallet-list-element .name {
+  font-weight: bold;
+}
+
+wallet-list-element .detail {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size) * 0.75);
+  opacity: 0.5;
+}

example/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Wallet Connection</title>
+  <meta name="description" content="Connect wallets to your dapp.">
+  <meta name="keywords" content="">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#3367D6">
+
+  <meta property="og:title" content="Wallet Connection">
+  <meta property="og:description" content="Connect wallets to your dapp.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+
+  <link rel="stylesheet" href="assets/css/main.css">
+</head>
+
+<body>
+  <h1>Wallet Connection</h1>
+
+  <wallet-element></wallet-element>
+
+  <noscript>
+    <h1>JavaScript disabled</h1>
+    <p>You need to enable JavaScript in order to run this web application.</p>
+  </noscript>
+
+  <script type="importmap">
+    {
+      "imports": {
+        "ethers": "/node_modules/ethers/dist/ethers.esm.js",
+        "@swivel-finance/connect": "/dist/src/index.js",
+        "@swivel-finance/connect/": "/dist/src/"
+      }
+    }
+  </script>
+
+  <script src="../dist/example/src/main.js" type="module"></script>
+</body>
+
+</html>