Merge branch 'develop' into fix-typos-2

.gitignore

@@ -78,6 +78,8 @@ docs/content/references/framework/**
 lcov.info
 **/venv/
 
+*storybook.log
+
 # iota-private-network
 docker/iota-private-network/data
 docker/iota-private-network/configs/validators/validator*

apps/ui-kit/.prettierignore

@@ -0,0 +1 @@
+storybook-static/

apps/ui-kit/.storybook/main.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { dirname, join } from 'path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        getAbsolutePath('@storybook/addon-a11y'),
+        getAbsolutePath('@storybook/addon-links'),
+        getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@storybook/addon-interactions'),
+        '@chromatic-com/storybook',
+    ],
+
+    framework: {
+        name: getAbsolutePath('@storybook/react-vite'),
+        options: {},
+    },
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
+    docs: {},
+};
+
+export default config;

apps/ui-kit/.storybook/preview.ts

@@ -0,0 +1,17 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+};
+
+export default preview;

apps/ui-kit/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@iota/apps-ui-kit",
+    "private": true,
+    "sideEffects": false,
+    "repository": {
+        "type": "git",
+        "url": "github.com:iotaledger/iota.git"
+    },
+    "license": "Apache-2.0",
+    "scripts": {
+        "prettier:check": "prettier -c --ignore-unknown .",
+        "prettier:fix": "prettier -w --ignore-unknown .",
+        "eslint:check": "eslint --max-warnings=0 .",
+        "eslint:fix": "pnpm run eslint:check --fix",
+        "lint": "pnpm run eslint:check && pnpm run prettier:check",
+        "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "dev": "pnpm run storybook"
+    },
+    "dependencies": {
+        "@iota/core": "workspace:*",
+        "@iota/icons": "workspace:*",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^1.6.0",
+        "@storybook/addon-essentials": "^7.1.0",
+        "@storybook/addon-interactions": "^7.1.0",
+        "@storybook/addon-links": "^7.1.0",
+        "@storybook/addon-onboarding": "^8.1.11",
+        "@storybook/blocks": "^7.1.0",
+        "@storybook/react": "^7.1.0",
+        "@storybook/react-vite": "^7.1.0",
+        "@storybook/test": "^8.1.11",
+        "@types/react": "^18.2.15",
+        "storybook": "^7.1.0",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.3.3",
+        "vite": "^4.4.4",
+        "vite-tsconfig-paths": "^4.2.0"
+    }
+}

apps/ui-kit/postcss.config.js

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

apps/ui-kit/src/lib/components/Button.tsx

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+export interface ButtonProps {
+    label: string;
+}
+
+export function Button({ label }: ButtonProps): React.JSX.Element {
+    return <button className="p-2 border rounded-full border-blue-500">{label}</button>;
+}

apps/ui-kit/src/lib/components/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Button';

apps/ui-kit/src/stories/Button.stories.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta = {
+    component: Button,
+    tags: ['autodocs'],
+    render: (props) => {
+        return (
+            <div className="flex flex-col gap-2 items-start">
+                <Button {...props}>Primary</Button>
+            </div>
+        );
+    },
+} satisfies Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Button',
+    },
+};

apps/ui-kit/tailwind.config.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import preset from '@iota/core/tailwind.config';
+import { type Config } from 'tailwindcss';
+
+export default {
+    presets: [preset],
+} satisfies Partial<Config>;

apps/ui-kit/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "noEmit": true,
+        "isolatedModules": true,
+        "sourceMap": true,
+        "jsx": "react-jsx",
+        "paths": {
+            "@/*": ["./src/*"],
+            "@/components": ["./src/lib/components"],
+            "@/components/*": ["./src/lib/components/*"]
+        }
+    },
+    "include": ["src"],
+    "exclude": ["node_modules"]
+}

apps/ui-kit/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+    plugins: [
+        tsconfigPaths({
+            root: __dirname,
+        }),
+    ],
+});

apps/wallet/src/background/accounts/Account.ts

@@ -22,8 +22,8 @@ import { accountsEvents } from './events';
 export enum AccountType {
     MnemonicDerived = 'mnemonic-derived',
     SeedDerived = 'seed-derived',
-    Imported = 'imported',
-    Ledger = 'ledger',
+    PrivateKeyDerived = 'private-key-derived',
+    LedgerDerived = 'ledger-derived',
 }
 
 export abstract class Account<

apps/wallet/src/background/accounts/ImportedAccount.ts

@@ -19,20 +19,20 @@ type SessionStorageData = { keyPair: string };
 type EncryptedData = { keyPair: string };
 
 export interface ImportedAccountSerialized extends SerializedAccount {
-    type: AccountType.Imported;
+    type: AccountType.PrivateKeyDerived;
     encrypted: string;
     publicKey: string;
 }
 
 export interface ImportedAccountSerializedUI extends SerializedUIAccount {
-    type: AccountType.Imported;
+    type: AccountType.PrivateKeyDerived;
     publicKey: string;
 }
 
 export function isImportedAccountSerializedUI(
     account: SerializedUIAccount,
 ): account is ImportedAccountSerializedUI {
-    return account.type === AccountType.Imported;
+    return account.type === AccountType.PrivateKeyDerived;
 }
 
 export class ImportedAccount
@@ -52,7 +52,7 @@ export class ImportedAccount
             keyPair: inputs.keyPair,
         };
         return {
-            type: AccountType.Imported,
+            type: AccountType.PrivateKeyDerived,
             address: keyPair.getPublicKey().toIotaAddress(),
             publicKey: keyPair.getPublicKey().toBase64(),
             encrypted: await encrypt(inputs.password, dataToEncrypt),
@@ -64,11 +64,11 @@ export class ImportedAccount
     }
 
     static isOfType(serialized: SerializedAccount): serialized is ImportedAccountSerialized {
-        return serialized.type === AccountType.Imported;
+        return serialized.type === AccountType.PrivateKeyDerived;
     }
 
     constructor({ id, cachedData }: { id: string; cachedData?: ImportedAccountSerialized }) {
-        super({ type: AccountType.Imported, id, cachedData });
+        super({ type: AccountType.PrivateKeyDerived, id, cachedData });
     }
 
     async lock(allowRead = false): Promise<void> {

apps/wallet/src/background/accounts/LedgerAccount.ts

@@ -13,21 +13,21 @@ import {
 } from './Account';
 
 export interface LedgerAccountSerialized extends SerializedAccount {
-    type: AccountType.Ledger;
+    type: AccountType.LedgerDerived;
     derivationPath: string;
     // just used for authentication nothing is stored here at the moment
     encrypted: string;
 }
 
 export interface LedgerAccountSerializedUI extends SerializedUIAccount {
-    type: AccountType.Ledger;
+    type: AccountType.LedgerDerived;
     derivationPath: string;
 }
 
 export function isLedgerAccountSerializedUI(
     account: SerializedUIAccount,
 ): account is LedgerAccountSerializedUI {
-    return account.type === AccountType.Ledger;
+    return account.type === AccountType.LedgerDerived;
 }
 
 type EphemeralData = {
@@ -52,7 +52,7 @@ export class LedgerAccount
         derivationPath: string;
     }): Promise<Omit<LedgerAccountSerialized, 'id'>> {
         return {
-            type: AccountType.Ledger,
+            type: AccountType.LedgerDerived,
             address,
             publicKey,
             encrypted: await encrypt(password, {}),
@@ -65,11 +65,11 @@ export class LedgerAccount
     }
 
     static isOfType(serialized: SerializedAccount): serialized is LedgerAccountSerialized {
-        return serialized.type === AccountType.Ledger;
+        return serialized.type === AccountType.LedgerDerived;
     }
 
     constructor({ id, cachedData }: { id: string; cachedData?: LedgerAccountSerialized }) {
-        super({ type: AccountType.Ledger, id, cachedData });
+        super({ type: AccountType.LedgerDerived, id, cachedData });
     }
 
     async lock(allowRead = false): Promise<void> {

apps/wallet/src/background/accounts/index.ts

@@ -221,9 +221,9 @@ export async function accountsHandleUIMessage(msg: Message, uiConnection: UiConn
                 throw new Error(`Invalid account source type`);
             }
             newSerializedAccounts.push(await accountSource.deriveAccount());
-        } else if (type === AccountType.Imported) {
+        } else if (type === AccountType.PrivateKeyDerived) {
             newSerializedAccounts.push(await ImportedAccount.createNew(payload.args));
-        } else if (type === AccountType.Ledger) {
+        } else if (type === AccountType.LedgerDerived) {
             const { password, accounts } = payload.args;
             for (const aLedgerAccount of accounts) {
                 newSerializedAccounts.push(

apps/wallet/src/shared/analytics/ampli/index.ts

@@ -109,9 +109,9 @@ export interface AddedAccountsProperties {
      *
      * | Rule | Value |
      * |---|---|
-     * | Enum Values | Ledger, Derived, Imported|
+     * | Enum Values | Ledger, Derived, Private Key|
      */
-    accountType: 'Ledger' | 'Derived' | 'Imported';
+    accountType: 'Ledger' | 'Derived' | 'Private Key';
     /**
      * The number of accounts imported.
      *

apps/wallet/src/shared/messaging/messages/payloads/MethodPayload.ts

@@ -46,9 +46,9 @@ type MethodPayloads = {
     createAccounts:
         | { type: AccountType.MnemonicDerived; sourceID: string }
         | { type: AccountType.SeedDerived; sourceID: string }
-        | { type: AccountType.Imported; keyPair: string; password: string }
+        | { type: AccountType.PrivateKeyDerived; keyPair: string; password: string }
         | {
-              type: AccountType.Ledger;
+              type: AccountType.LedgerDerived;
               accounts: { publicKey: string; derivationPath: string; address: string }[];
               password: string;
           };

apps/wallet/src/ui/app/ApiProvider.ts

@@ -14,7 +14,7 @@ import { type WalletSigner } from './WalletSigner';
 const ACCOUNT_TYPES_WITH_BACKGROUND_SIGNER: AccountType[] = [
     AccountType.MnemonicDerived,
     AccountType.SeedDerived,
-    AccountType.Imported,
+    AccountType.PrivateKeyDerived,
 ];
 
 export default class ApiProvider {
@@ -60,7 +60,7 @@ export default class ApiProvider {
         if (ACCOUNT_TYPES_WITH_BACKGROUND_SIGNER.includes(account.type)) {
             return this.getBackgroundSignerInstance(account, backgroundClient);
         }
-        if (AccountType.Ledger === account.type) {
+        if (AccountType.LedgerDerived === account.type) {
             // Ideally, Ledger transactions would be signed in the background
             // and exist as an asynchronous keypair; however, this isn't possible
             // because you can't connect to a Ledger device from the background

apps/wallet/src/ui/app/components/AccountBadge.tsx

@@ -11,8 +11,8 @@ interface AccountBadgeProps {
 }
 
 const TYPE_TO_TEXT: Record<AccountType, string | null> = {
-    [AccountType.Ledger]: 'Ledger',
-    [AccountType.Imported]: 'Imported',
+    [AccountType.LedgerDerived]: 'Ledger',
+    [AccountType.PrivateKeyDerived]: 'Private Key',
     [AccountType.MnemonicDerived]: null,
     [AccountType.SeedDerived]: null,
 };