Merge pull request #15 from radixdlt/develop

release 0.11.0

.github/workflows/playwright.yml

@@ -0,0 +1,32 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: 
+      - main
+      - develop
+  pull_request:
+    branches: 
+      - main
+      - develop
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - develop
   workflow_dispatch:
 
 jobs:

.gitignore

@@ -23,3 +23,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/coverage
+
+storybook-static

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/web-components',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  features: {
+    storyStoreV7: true,
+  },
+}

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window
+</script>

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -2,17 +2,13 @@
 
 The √ Connect Button is a framework agnostic web component to help developers connect users and their Radix Wallet to their dApps.
 
-It appears as a consistent, Radix-branded UI element that helps users identify your dApp website as a Radix dApp and compatible with the Radix Wallet – and it automatically provides a consistent user experience for users to connect with their wallet and see the current status of the connection between dApp and Radix Wallet.
-
-The √ Connect Button API acts as a wrapper to the [Wallet SDK](https://github.com/radixdlt/wallet-sdk) and exposes its methods while adding additional methods.
-
+It appears as a consistent, Radix-branded UI element that helps users identify your dApp website as a Radix dApp. When used with [Radix dApp Toolkit](https://github.com/radixdlt/radix-dapp-toolkit) it is compatible with the Radix Wallet – and it automatically provides a consistent user experience for users to connect with their wallet and see the current status of the connection between dApp and Radix Wallet.
 
 - [Installation](#installation)
 - [Usage](#usage)
   - [Getting started](#getting-started)
-    - [Configuration](#configuration)
-    - [API](#api)
-  - [Examples](#examples)
+    - [Properties](#properties)
+    - [Events](#events)
 
 # Installation
 
@@ -48,80 +44,56 @@ Add the `<radix-connect-button />` element in your HTML code and call the config
 </html>
 ```
 
-### Configuration
+### Properties
 
-The connect button needs to be configured before use.
+```typescript
+const radixConnectButton = document.querySelector('radix-connect-button')!
 
-`configure(input: ConfigurationInput) => RadixConnectButtonApi`
+const handleConnect = () => {
+  radixConnectButton.loading = true
+  radixConnectButton.connecting = true
+}
 
-```typescript
-import {
-  configure,
-  requestBuilder,
-  requestItem,
-} from '@radixdlt/connect-button'
-
-configure({
-  dAppId: 'dashboard',
-  networkId: 0x01,
-  onConnect: ({ setState, getWalletData }) => {
-    getWalletData(
-      requestBuilder(requestItem.oneTimeAccounts.withoutProofOfOwnership(1))
-    ).map(({ oneTimeAccounts }) => {
-      setState({ connected: true })
-    })
-  },
-  onDisconnect: ({ setState }) => {
-    setState({ connected: false })
-  },
-})
+radixConnectButton.addEventListener('onConnect', handleConnect)
 ```
 
 ```typescript
-type ConfigurationInput = {
-  dAppId: string
-  networkId?: number
-  initialState?: Partial<ButtonState>
-  onConnect: (api: RadixConnectButtonApi) => void
-  onDisconnect: (api: RadixConnectButtonApi) => void
-  onCancel?: () => void
-  onDestroy?: () => void
+type ConnectButtonProperties = {
+  personaLabel: string
+  dAppName: string
+  loading: boolean
+  connected: boolean
+  connecting: boolean
+  showPopover: boolean
+  showNotification: boolean
+  requestItems: RequestItem[]
+  accounts: Account[]
 }
 ```
 
-- **requires** dAppId - Specifies the dApp that is interacting with the wallet. Used in dApp verification process on the wallet side.
-- **optional** networkId - Specifies which network to use, defaults to mainnet (0x01)
-- **optional** initialState - Forces initial connected and / or loading state for button
-- **requires** onConnect - Callback that triggers when user clicks connect now button
-- **requires** onDisconnect - Callback that triggers when user clicks disconnect wallet button
-- **optional** onCancel - Callback that triggers when user cancels connect request
-- **optional** onDestroy - Callback that triggers when button is removed from the DOM. Useful for cleaning up registered event listeners and subscriptions.
+- personaLabel - label of the connected persona
+- dAppName - name of the dApp
+- loading - set loading state
+- connected - set connected state
+- connecting - set connecting state
+- showPopover - display connect button popover
+- showNotification - display an icon that indicates that a request item has been updated
+- requestItems - displays a list of maximum 3 request items in the popover
+- accounts - displays a list of connected accounts
 
-### API
+### Events
 
 ```typescript
-type RadixConnectButtonApi = {
-  getWalletData: WalletSdkType['request']
-  sendTransaction: WalletSdkType['sendTransaction']
-  setState: (
-    input: Partial<{
-      connected: boolean
-      loading: boolean
-    }>
-  ) => void
-  destroy: () => void
-  onConnect$: Observable<void>
+type ConnectButtonEvents = {
+  onConnect: () => void
+  onDisconnect: () => void
+  onCancelRequestItem: (event: CustomEvent<{ id: string }>) => void
+  onDestroy: () => void
+  onShowPopover: () => void
 }
 ```
 
-- getWalletData – uses [wallet SDK request method](https://github.com/radixdlt/wallet-sdk#get-wallet-data)
-- sendTransaction – uses [wallet SDK sendTransaction method](https://github.com/radixdlt/wallet-sdk#send-transaction)
-- setState – Sets the state of the button
-- destroy – Cleanup function to destroy the configuration instance
-- onConnect$ – Observable that emits when the user clicks on the connect button
-
-## Examples
-
-- Vue 3 - [@radixdlt/vue-connect-button](https://github.com/radixdlt/vue-connect-button)
-- Angular 15 - [@radixdlt/angular-connect-button](https://github.com/radixdlt/angular-connect-button)
-- React 18 - [@radixdlt/react-connect-button](https://github.com/radixdlt/react-connect-button)
+- onConnect - triggers when user clicks connect now button
+- onDisconnect - triggers when user clicks disconnect wallet button
+- onCancel - triggers when user cancels connect request
+- onDestroy - triggers when button is removed from the DOM. Useful for cleaning up registered event listeners and subscriptions.

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    'babel-preset-vite',
+  ],
+}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

e2e/connect-button.test.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+test('renders "Connect" text by default', async ({ page }) => {
+  await expect(page.getByText('Connect')).toBeVisible()
+})
+
+test('toggles popover on button click', async ({ page }) => {
+  page.locator('radix-connect-button').click()
+
+  const popover = page.locator('radix-popover')
+
+  await expect(popover.getByText('Connect your Radix Wallet')).toBeVisible()
+  await expect(popover.getByText('Connect Now')).toBeVisible()
+
+  page.locator('radix-connect-button').click()
+
+  await expect(page.locator('radix-popover')).not.toBeVisible()
+})
+
+test('renders indicator in loading state', async ({ page }) => {
+  await page.evaluate(() =>
+    window.radixConnectButtonApi.setState({ loading: true })
+  )
+  await expect(page.locator('loading-spinner')).toBeVisible()
+})
+
+test('renders "Connected" text in connected state', async ({ page }) => {
+  await page.evaluate(() =>
+    window.radixConnectButtonApi.setState({ connected: true })
+  )
+  await expect(page.getByText('Connected')).toBeVisible()
+})
+
+test('renders text & indicator in connected loading state', async ({
+  page,
+}) => {
+  await page.evaluate(() =>
+    window.radixConnectButtonApi.setState({ connected: true, loading: true })
+  )
+  await expect(page.locator('loading-spinner')).toBeVisible()
+  await expect(page.getByText('Connected')).toBeVisible()
+})
+
+test('saves most recent state to local storage', async ({ page }) => {
+  await page.evaluate(() =>
+    window.radixConnectButtonApi.setState({ connected: true })
+  )
+  const localStorage = await page.evaluate(() => window.localStorage)
+  expect(localStorage['radixdlt.connected']).toBe('true')
+})