chore: create a script for release (#147)

* chore: create a script for release

* fix: creating multiple components

* chore: update readme

* fix: tests

* fix: add custom button to react app

.eslintignore

@@ -4,3 +4,4 @@ web-dev-server.config.js
 tsup.config.ts
 **/test/**
 vite.config.ts
+scripts/prepare-packages.ts

apps/sample-react-app/src/App.tsx

@@ -1,9 +1,14 @@
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
-import { ConnectButtonWithModal } from '@vechain/dapp-kit-react';
+import {
+    ConnectButtonWithModal,
+    useWalletModal,
+} from '@vechain/dapp-kit-react';
 
 function App() {
+    const { open } = useWalletModal();
+
     return (
         <>
             <div>
@@ -19,6 +24,12 @@ function App() {
                 </a>
             </div>
             <h1>Vite + React</h1>
+            <div className="card">
+                <button onClick={open}>Connect Custom Button</button>
+            </div>
+
+            <br />
+
             <div className="card">
                 <ConnectButtonWithModal />
             </div>

package.json

@@ -8,6 +8,7 @@
         "build": "turbo run build",
         "build-react-kit": "turbo run build  --filter='@vechain/dapp-kit-react'",
         "build:deps": "turbo build --no-daemon --filter='@vechain/*'",
+        "build:release": "ts-node scripts/prepare-packages.ts",
         "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean",
         "cucumber": "yarn && cucumber-js",
         "dev": "turbo run dev --filter='@vechain/*'",

packages/dapp-kit-react/README.md

@@ -9,8 +9,6 @@
 
 ## Installation
 
--   See the parent [README](../../README.md) for installation instructions.
-
 ### Build
 
 ```bash

packages/dapp-kit-react/test/helpers/react-test-helpers.tsx

@@ -2,7 +2,7 @@ import { ConnectButtonWithModal, DAppKitProvider } from '../../src';
 import { ThemeProvider } from '../../src/provider/ThemeProvider';
 
 export const wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <DAppKitProvider nodeUrl="https://testnet.vechain.org">
+    <DAppKitProvider nodeUrl="https://testnet.vechain.org" logLevel={'DEBUG'}>
         <ThemeProvider>
             {children}
             <ConnectButtonWithModal />

packages/dapp-kit-react/test/useWalletModal.test.tsx

@@ -11,20 +11,21 @@ describe('useWalletModal', () => {
 
         result.current.open();
 
-        await waitFor(() => {
-            const modal = window.document.querySelector('vwk-connect-modal');
+        await waitFor(
+            () => {
+                const modalHtml = window.document.body
+                    .querySelector('vwk-vechain-dapp-connect-kit')
+                    ?.shadowRoot?.querySelector('vwk-connect-button-with-modal')
+                    ?.shadowRoot?.querySelector('vwk-connect-modal')
+                    ?.shadowRoot?.innerHTML;
 
-            expect(modal).toBeDefined();
+                expect(modalHtml).toBeDefined();
 
-            expect(modal?.open).toBe(true);
-        });
+                expect(modalHtml).toContain('Connect Wallet');
+            },
+            { timeout: 5000 },
+        );
 
         result.current.close();
-
-        await waitFor(() => {
-            const modal = window.document.querySelector('vwk-connect-modal');
-
-            expect(modal?.open).toBe(false);
-        });
     });
 });

packages/dapp-kit-ui/README.md

@@ -10,8 +10,6 @@
 
 ## Installation
 
--   See the parent [README](../../README.md) for installation instructions.
-
 ### Build
 
 ```bash

packages/dapp-kit-ui/src/modal.ts

@@ -13,6 +13,22 @@ import { dispatchCustomEvent, subscribeToCustomEvent } from './utils';
 
 const MODAL_STATE_EVENT = 'vwk-modal-state-change';
 
+const isModalExisting = (): boolean => {
+    const connectModal = document.querySelector('vwk-connect-modal');
+    const connectModalWithButton = document.querySelector(
+        'vwk-connect-button-with-modal',
+    );
+    const vechainConnect = document.querySelector(
+        'vwk-vechain-dapp-connect-kit',
+    );
+
+    return (
+        Boolean(connectModal) ||
+        Boolean(connectModalWithButton) ||
+        Boolean(vechainConnect)
+    );
+};
+
 const getModal = () => {
     const existing = document.querySelector('vwk-connect-modal');
 
@@ -54,16 +70,22 @@ class CustomWalletConnectModal implements WCModal {
     openModal(options: OpenOptions): Promise<void> {
         DAppKitLogger.debug('CustomWalletConnectModal', 'opening the modal');
 
-        const modal = getModal();
-        modal.open = true;
-        modal.walletConnectQRcode = options.uri;
-        modal.onClose = () => {
-            modal.open = false;
-        };
-
-        setTimeout(() => {
+        if (isModalExisting()) {
             dispatchCustomEvent('vwk-open-wc-modal', options);
-        }, 100);
+        } else {
+            DAppKitLogger.debug('DAppKitModal', 'creating a new WC modal');
+
+            const modal = getModal();
+            modal.open = true;
+            modal.walletConnectQRcode = options.uri;
+            modal.onClose = () => {
+                modal.open = false;
+            };
+
+            setTimeout(() => {
+                dispatchCustomEvent('vwk-open-wc-modal', options);
+            }, 100);
+        }
 
         return Promise.resolve();
     }
@@ -109,15 +131,20 @@ export class DAppKitModal {
     open(): void {
         DAppKitLogger.debug('DAppKitModal', 'opening the modal');
 
-        const modal = getModal();
-        modal.open = true;
-        modal.onClose = () => {
-            modal.open = false;
-        };
-
-        setTimeout(() => {
+        if (isModalExisting()) {
             dispatchCustomEvent('vwk-open-wallet-modal', undefined);
-        }, 100);
+        } else {
+            DAppKitLogger.debug('DAppKitModal', 'creating a new modal');
+            const modal = getModal();
+            modal.open = true;
+            modal.onClose = () => {
+                modal.open = false;
+            };
+
+            setTimeout(() => {
+                dispatchCustomEvent('vwk-open-wallet-modal', undefined);
+            }, 100);
+        }
     }
 
     close(): void {

packages/dapp-kit-ui/test/modal.test.ts

@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { DAppKitUI } from '../src';
+import { waitFor } from '@testing-library/react';
+
+describe('DAppKitModal', () => {
+    beforeEach(() => {
+        DAppKitUI.configure({ nodeUrl: 'https://mainnet.vechain.org/' });
+    });
+
+    it('should create an element', () => {
+        const existing = document.querySelector('vwk-connect-modal');
+
+        expect(existing).toBe(null);
+
+        DAppKitUI.modal.open();
+
+        waitFor(() => {
+            const element = document.querySelector('vwk-connect-modal');
+
+            expect(element).not.toBe(null);
+            expect(element?.open).toBe(true);
+        });
+
+        DAppKitUI.modal.close();
+
+        waitFor(() => {
+            const element = document.querySelector('vwk-connect-modal');
+
+            expect(element).not.toBe(null);
+            expect(element?.open).toBe(false);
+        });
+    });
+});

packages/dapp-kit/README.md

@@ -9,9 +9,6 @@
 
 ## Installation
 
--   See the full doc
--   See the parent [README](../../README.md) for installation instructions.
-
 ### Build
 
 ```bash

scripts/prepare-packages.ts

@@ -0,0 +1,88 @@
+import util from 'util';
+import * as child_process from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const exec = util.promisify(child_process.exec);
+
+// variable packages should be all of the child folders in the packages folder
+const packages = fs.readdirSync(path.resolve(__dirname, '../packages'));
+
+console.log('packages', packages);
+
+const updatePackageVersions = (version: string) => {
+    const packageNames = [];
+
+    for (const pkg of packages) {
+        const pkgPath = path.resolve(__dirname, `../packages/${pkg}`);
+        const pkgJsonPath = path.resolve(pkgPath, './package.json');
+        const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
+        pkgJson.version = version;
+        packageNames.push(pkgJson.name);
+        fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
+    }
+
+    // if a package json contains a dependency on another package in this repo, update it to the new version
+    for (const pkg of packages) {
+        const pkgPath = path.resolve(__dirname, `../packages/${pkg}`);
+        const pkgJsonPath = path.resolve(pkgPath, './package.json');
+        const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
+
+        for (const dep of Object.keys(pkgJson.dependencies)) {
+            if (packageNames.includes(dep)) {
+                pkgJson.dependencies[dep] = version;
+            }
+        }
+
+        fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
+    }
+};
+
+const preparePackages = async () => {
+    const version = process.argv[2];
+
+    if (!version || !version.match(/^\d+\.\d+\.\d+$/)) {
+        console.error(
+            `🚨 You must specify a semantic version as the first argument  🚨`,
+        );
+        process.exit(1);
+    }
+
+    console.log('\n______________________________________________________\n\n');
+    console.log(`   🚀🚀🚀 Preparing ${version} for release  🚀🚀🚀`);
+    console.log('\n______________________________________________________\n\n');
+
+    console.log(' Clean:');
+    console.log('       - 🚮 Removing existing packages & builds...');
+    await exec('yarn purge');
+    console.log('       - ✅ Removed!');
+
+    console.log(' Build:');
+    console.log('       - 📦 Building packages...');
+    await exec('yarn install:all');
+    console.log('       - ✅ Built!');
+
+    console.log(' Test:');
+    console.log('       - 🧪 Testing packages...');
+    await exec('yarn test');
+    console.log('       - ✅ Success!');
+
+    console.log(' Version:');
+    console.log(`       - 🏷  Updating package versions to ${version}...`);
+    updatePackageVersions(version);
+    await exec(`yarn format`);
+    console.log('       - ✅ Updated!');
+    //log run `yarn changeset publish` to publish the packages
+
+    console.log('\n______________________________________________________\n\n');
+    console.log(' Publish:');
+    console.log(
+        `       - Run 'yarn changeset publish' to publish the packages`,
+    );
+    console.log('\n______________________________________________________\n\n');
+};
+
+preparePackages().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});