fix: add new modal to allow selecting which wallet to use

.changeset/unlucky-geckos-doubt.md

@@ -0,0 +1,7 @@
+---
+'@stacks/connect-ui': minor
+'@stacks/connect': minor
+'@stacks/connect-react': minor
+---
+
+Add new UI to allow selecting which wallet to use

.gitignore

@@ -48,3 +48,5 @@ packages/connect-ui/connect
 web-ext-artifacts
 
 docs/
+
+storybook-static/

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@stacks/prettier-config'),
+  plugins: ['prettier-plugin-tailwindcss'],
+};

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

package.json

@@ -4,7 +4,6 @@
   "workspaces": [
     "packages/**"
   ],
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "lerna run build",
     "build:connect": "lerna run build --scope @stacks/connect",
@@ -30,7 +29,7 @@
     "@stacks/eslint-config": "^2.0.0",
     "@stacks/prettier-config": "^0.0.10",
     "@stencil-community/eslint-plugin": "^0.5.0",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "eslint": "^8.49.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-import": "^2.28.1",
@@ -40,11 +39,12 @@
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "lerna": "^7.3.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^7.2.0",
-    "typedoc": "^0.25.1",
-    "typescript": "^5.2.2"
+    "typedoc": "^0.25.3",
+    "typescript": "^5.3.2"
   }
 }

packages/connect-react/package.json

@@ -2,7 +2,6 @@
   "name": "@stacks/connect-react",
   "version": "22.2.2",
   "license": "MIT",
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "concurrently 'tsup src/index.ts' 'yarn types'",
     "prepublishOnly": "yarn build",

packages/connect-react/src/react/components/connect/context.tsx

@@ -5,7 +5,7 @@ enum States {
   UPDATE_AUTH_OPTIONS = 'data/update-auth-options',
 }
 
-type Action = { type: string; payload?: any };
+type Action = { type: States; payload?: any };
 
 type Dispatch = (action: Action) => void;
 
@@ -35,7 +35,7 @@ const initialState: State = {
   },
 };
 
-const connectReducer = (state: State, { type, payload }: { type: string; payload?: any }) => {
+const connectReducer = (state: State, { type, payload }: { type: States; payload?: any }) => {
   switch (type) {
     case States.UPDATE_AUTH_OPTIONS: {
       return {

packages/connect-ui/package.json

@@ -2,7 +2,6 @@
   "name": "@stacks/connect-ui",
   "version": "6.1.3",
   "license": "MIT",
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "stencil build --docs",
     "dev": "stencil build --dev --watch",
@@ -19,7 +18,10 @@
   "devDependencies": {
     "@stencil/sass": "^1.5.2",
     "@types/node": "^14.6.0",
-    "puppeteer": "^9.0.0"
+    "puppeteer": "^9.0.0",
+    "stencil-tailwind-plugin": "^1.8.0",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "publishConfig": {
     "access": "public"

packages/connect-ui/src/components.d.ts

@@ -5,9 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { WebBTCProvider } from "./providers";
 export namespace Components {
     interface ConnectModal {
-        "authOptions": any;
+        "callback": Function;
+        "defaultProviders": WebBTCProvider[];
+        "installedProviders": WebBTCProvider[];
     }
 }
 declare global {
@@ -23,7 +26,9 @@ declare global {
 }
 declare namespace LocalJSX {
     interface ConnectModal {
-        "authOptions"?: any;
+        "callback"?: Function;
+        "defaultProviders"?: WebBTCProvider[];
+        "installedProviders"?: WebBTCProvider[];
     }
     interface IntrinsicElements {
         "connect-modal": ConnectModal;

packages/connect-ui/src/components/modal/modal.scss

@@ -1,196 +1,17 @@
-@import 'browser-not-supported';
-@import 'hiro-wallet-download';
-
-@mixin mobile {
-  @media (max-width: 640px) {
-    @content;
-  }
-}
-
 :host {
   all: initial;
 }
 
 .modal-container {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.48);
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  justify-content: center;
+  color: #74777D;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  z-index: 8999;
-  overflow-y: scroll;
 }
 
 .modal-body {
-  width: 486px;
-  max-width: 100%;
-  max-height: calc(100% - 48px);
-  background: white;
-  margin-left: auto;
-  margin-right: auto;
-  border-radius: 12px;
-  padding: 20px 24px 20px;
-  box-sizing: border-box;
-  overflow-y: scroll;
   -ms-overflow-style: none;
   scrollbar-width: none;
   &::-webkit-scrollbar {
     display: none;
   }
-
-  @include mobile {
-    max-height: 100%;
-  }
-}
-
-.modal-header {
-  display: flex;
-  flex-direction: column;
-
-  @include mobile {
-    flex-direction: row-reverse;
-    align-items: flex-start;
-  }
-}
-
-.close-modal {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.close-icon {
-  cursor: pointer;
-}
-
-.modal-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-title {
-  color: #242629;
-  font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-weight: 500;
-  font-size: 32px;
-  line-height: 32px;
-  margin-bottom: 18px;
-  padding-right: 48px;
-  margin-top: 18px;
-
-  @include mobile {
-    font-size: 24px;
-    line-height: 24px;
-    margin-bottom: 8px;
-    margin-top: 0px;
-    padding-right: 0px;
-  }
-}
-
-.modal-subtitle {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  color: #74777d;
-
-  @include mobile {
-    font-size: 13px;
-  }
-}
-
-.download-app-container {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-}
-
-.button {
-  width: 100%;
-  max-width: 139px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  background-color: #5546ff;
-  color: #ffffff;
-  min-height: 48px;
-  min-width: 126px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-transition: all 250ms;
-  transition: all 250ms;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  outline: none;
-  border: none;
-  cursor: pointer;
-}
-
-.link {
-  color: #5546ff;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  margin-top: 4px;
-}
-
-.modal-subheading {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 19px;
-  color: #000000;
-}
-
-.modal-wallet-card {
-  display: flex;
-  align-items: flex-start;
-  background: white;
-  border: 2px solid #f4f4f6;
-  border-radius: 16px;
-  margin-top: 12px;
-  padding: 24px 10px 24px 20px;
-}
-
-.wallet-container {
-  display: flex;
-  flex-direction: column;
-
-  @include mobile {
-    flex-direction: column-reverse;
-  }
-}
-
-.modal-wallet-text {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  margin-top: 4px;
-  color: #74777d;
-
-  a {
-    color: #5546ff;
-    text-decoration: none;
-  }
-
-  @include mobile {
-    font-size: 13px;
-  }
-}
-
-.modal-wallet-card-content {
-  display: flex;
-  flex-direction: column;
-  padding-left: 14px;
 }