@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.241

package/dist/components/deployment/DeploymentSectionHeader.svelte

@@ -1,4 +1,5 @@
-<script>export let title;
+<script>import Markdown from "svelte-markdown";
+export let title;
 export let description = "";
 </script>
 
@@ -7,8 +8,10 @@ export let description = "";
 		{title}
 	</h1>
 	{#if description}
-		<p class="break-words text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-			{description}
-		</p>
+		<div
+			class="prose prose-sm lg:prose-base prose-neutral dark:prose-invert text-gray-600 dark:text-gray-400"
+		>
+			<Markdown source={description} />
+		</div>
 	{/if}
 </div>

package/dist/components/deployment/DeploymentSteps.svelte

@@ -1,209 +1,175 @@
-<script>import { Alert } from "flowbite-svelte";
+<script>import { Alert, Button, Spinner, Toggle } from "flowbite-svelte";
 import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import {
-} from "@rainlanguage/orderbook/js_api";
+  RaindexOrderBuilder,
+  RaindexClient,
+  AccountBalance,
+  Float
+} from "@rainlanguage/raindex";
 import WalletConnect from "../wallet/WalletConnect.svelte";
-import {
-} from "@rainlanguage/orderbook/js_api";
-import { fade } from "svelte/transition";
-import { Button, Toggle, Spinner } from "flowbite-svelte";
-import {} from "@wagmi/core";
 import {} from "svelte/store";
-import ShareChoicesButton from "./ShareChoicesButton.svelte";
 import { handleShareChoices } from "../../services/handleShareChoices";
-import { getDeploymentTransactionArgs } from "./getDeploymentTransactionArgs";
 import { DeploymentStepsError, DeploymentStepsErrorCode } from "../../errors";
-import { onMount } from "svelte";
+import { onDestroy, onMount } from "svelte";
 import FieldDefinitionInput from "./FieldDefinitionInput.svelte";
 import DepositInput from "./DepositInput.svelte";
 import SelectToken from "./SelectToken.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
-import { useGui } from "../../hooks/useGui";
-export let settings;
-export let dotrain;
+import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
+import { fade } from "svelte/transition";
+import ShareChoicesButton from "./ShareChoicesButton.svelte";
+import { useRegistry } from "../../providers/registry/useRegistry";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let deployment;
-export let strategyDetail;
-export let handleDeployModal;
-export let handleDisclaimerModal;
+export let orderDetail;
+export let onDeploy;
+export let wagmiConnected;
+export let appKitModal;
+export let account;
 let allDepositFields = [];
 let allTokenOutputs = [];
+let allTokenInputs = [];
 let allFieldDefinitionsWithoutDefaults = [];
 let allFieldDefinitionsWithDefaults = [];
 let allTokensSelected = false;
 let showAdvancedOptions = false;
-let checkingDeployment = false;
 let allTokenInfos = [];
-const gui = useGui();
 let selectTokens = void 0;
-let networkKey = "";
-const subgraphUrl = $settings?.subgraphs?.[networkKey] ?? "";
+let checkingDeployment = false;
+let tokenBalances = /* @__PURE__ */ new Map();
+const builder = useRaindexOrderBuilder();
+const registry = useRegistry();
+const raindexClient = useRaindexClient();
 let deploymentStepsError = DeploymentStepsError.error;
-export let wagmiConfig;
-export let wagmiConnected;
-export let appKitModal;
-export let signerAddress;
 onMount(async () => {
-  const selectTokensResult = gui.getSelectTokens();
+  const selectTokensResult = builder.getSelectTokens();
   if (selectTokensResult.error) {
     throw new Error(selectTokensResult.error.msg);
   }
   selectTokens = selectTokensResult.value;
-  const networkKeyResult = gui.getNetworkKey();
-  if (networkKeyResult.error) {
-    throw new Error(networkKeyResult.error.msg);
-  }
-  networkKey = networkKeyResult.value;
   await areAllTokensSelected();
 });
-function getAllFieldDefinitions() {
-  try {
-    const allFieldDefinitionsResult = gui.getAllFieldDefinitions(false);
-    if (allFieldDefinitionsResult.error) {
-      throw new Error(allFieldDefinitionsResult.error.msg);
-    }
-    allFieldDefinitionsWithoutDefaults = allFieldDefinitionsResult.value;
-    const allFieldDefinitionsWithDefaultsResult = gui.getAllFieldDefinitions(true);
-    if (allFieldDefinitionsWithDefaultsResult.error) {
-      throw new Error(allFieldDefinitionsWithDefaultsResult.error.msg);
-    }
-    allFieldDefinitionsWithDefaults = allFieldDefinitionsWithDefaultsResult.value;
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_FIELD_DEFINITIONS);
-  }
+$: if (selectTokens?.length === 0 || allTokensSelected) {
+  updateFields();
 }
-async function getAllDepositFields() {
-  try {
-    let result = gui.getCurrentDeployment();
-    if (result.error) {
-      throw new Error(result.error.msg);
-    }
-    let depositFields = result.value.deposits;
-    allDepositFields = depositFields;
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_DEPOSITS);
+let unsubscribeAccount = account.subscribe((account2) => {
+  if (!account2) {
+    const balances = tokenBalances;
+    balances.clear();
+    tokenBalances = balances;
+    return;
   }
-}
-let allTokenInputs = [];
-function getAllTokenInputs() {
-  try {
-    let result = gui.getCurrentDeployment();
-    if (result.error) {
-      throw new Error(result.error.msg);
-    }
-    allTokenInputs = result.value.deployment.order.inputs;
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_INPUTS);
+  if (selectTokens) {
+    selectTokens.forEach(async (selectToken) => {
+      await getTokenInfoAndFetchBalance(selectToken.key);
+    });
   }
-}
-function getAllTokenOutputs() {
+});
+onDestroy(() => {
+  unsubscribeAccount();
+});
+function getAllBuilderConfig() {
   try {
-    let result = gui.getCurrentDeployment();
+    let result = builder.getAllBuilderConfig();
     if (result.error) {
       throw new Error(result.error.msg);
     }
-    allTokenOutputs = result.value.deployment.order.outputs;
+    allFieldDefinitionsWithoutDefaults = result.value.fieldDefinitionsWithoutDefaults;
+    allFieldDefinitionsWithDefaults = result.value.fieldDefinitionsWithDefaults;
+    allDepositFields = result.value.deposits;
+    allTokenOutputs = result.value.orderOutputs;
+    allTokenInputs = result.value.orderInputs;
   } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_BUILDER_CONFIG);
   }
 }
-$: if (selectTokens?.length === 0 || allTokensSelected) {
-  updateFields();
-}
-async function updateFields() {
+function updateFields() {
   try {
     DeploymentStepsError.clear();
-    getAllDepositFields();
-    getAllFieldDefinitions();
-    getAllTokenInputs();
-    getAllTokenOutputs();
+    getAllBuilderConfig();
   } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_GUI);
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_BUILDER);
   }
 }
 async function _handleShareChoices() {
-  await handleShareChoices(gui);
+  await handleShareChoices(builder, registry.getCurrentRegistry());
+}
+async function fetchTokenBalance(tokenInfo) {
+  if (!$account) return;
+  const balances = tokenBalances;
+  balances.set(tokenInfo.key, {
+    value: { balance: Float.parse("0").value, formattedBalance: "0" },
+    loading: true,
+    error: ""
+  });
+  const { value: accountBalance, error } = await builder.getAccountBalance(
+    tokenInfo.address,
+    $account
+  );
+  if (error) {
+    balances.set(tokenInfo.key, {
+      value: { balance: Float.parse("0").value, formattedBalance: "0" },
+      loading: false,
+      error: error.readableMsg
+    });
+    tokenBalances = balances;
+    return;
+  }
+  balances.set(tokenInfo.key, {
+    value: accountBalance,
+    loading: false,
+    error: ""
+  });
+  tokenBalances = balances;
+}
+async function getTokenInfoAndFetchBalance(key) {
+  const tokenInfoResult = await builder.getTokenInfo(key);
+  if (tokenInfoResult.error) {
+    const balances = tokenBalances;
+    balances.delete(key);
+    tokenBalances = balances;
+    return;
+  }
+  const tokenInfo = tokenInfoResult.value;
+  if (!tokenInfo || !tokenInfo.address) {
+    return;
+  }
+  await fetchTokenBalance(tokenInfo);
 }
-async function onSelectTokenSelect() {
+async function onSelectTokenSelect(key) {
   await areAllTokensSelected();
+  await getTokenInfoAndFetchBalance(key);
   if (allTokensSelected) {
-    let result = await gui.getAllTokenInfos();
+    let result = await builder.getAllTokenInfos();
     if (result.error) {
       throw new Error(result.error.msg);
     }
     let newAllTokenInfos = result.value;
     if (allTokenInfos !== newAllTokenInfos) {
       allTokenInfos = newAllTokenInfos;
-      getAllDepositFields();
-      getAllFieldDefinitions();
+      getAllBuilderConfig();
     }
   }
 }
-async function handleDeployButtonClick() {
-  DeploymentStepsError.clear();
-  if (!allTokenOutputs) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
-    return;
-  }
-  if (!wagmiConfig) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-    return;
-  }
-  if (!networkKey) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-    return;
-  }
-  let result = null;
-  checkingDeployment = true;
-  try {
-    result = await getDeploymentTransactionArgs(gui, $wagmiConfig);
-  } catch (e) {
-    checkingDeployment = false;
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
-  }
-  if (!result) {
-    checkingDeployment = false;
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
-    return;
-  }
-  checkingDeployment = false;
-  const onAccept = () => {
-    if (!networkKey) {
-      DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-      return;
-    }
-    handleDeployModal({
-      open: true,
-      args: {
-        ...result,
-        subgraphUrl,
-        network: networkKey
-      }
-    });
-  };
-  handleDisclaimerModal({
-    open: true,
-    onAccept
-  });
-}
 const areAllTokensSelected = async () => {
   try {
-    const areAllTokensSelectedResult = gui.areAllTokensSelected();
+    const areAllTokensSelectedResult = builder.areAllTokensSelected();
     if (areAllTokensSelectedResult.error) {
       throw new Error(areAllTokensSelectedResult.error.msg);
     }
     allTokensSelected = areAllTokensSelectedResult.value;
     if (!allTokensSelected) return;
-    const getAllTokenInfosResult = await gui.getAllTokenInfos();
+    const getAllTokenInfosResult = await builder.getAllTokenInfos();
     if (getAllTokenInfosResult.error) {
       throw new Error(getAllTokenInfosResult.error.msg);
     }
     allTokenInfos = getAllTokenInfosResult.value;
-    const hasDepositsResult = gui.hasAnyDeposit();
+    const hasDepositsResult = builder.hasAnyDeposit();
     if (hasDepositsResult.error) {
       throw new Error(hasDepositsResult.error.msg);
     }
-    const hasVaultIdsResult = gui.hasAnyVaultId();
+    const hasVaultIdsResult = builder.hasAnyVaultId();
     if (hasVaultIdsResult.error) {
       throw new Error(hasVaultIdsResult.error.msg);
     }
@@ -214,105 +180,114 @@ const areAllTokensSelected = async () => {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_SELECT_TOKENS);
   }
 };
+async function handleDeployButtonClick() {
+  if (checkingDeployment) {
+    return;
+  }
+  checkingDeployment = true;
+  try {
+    if (!$account) {
+      DeploymentStepsError.catch(
+        "No wallet connected",
+        DeploymentStepsErrorCode.ADD_ORDER_FAILED
+      );
+      return;
+    }
+    DeploymentStepsError.clear();
+    return onDeploy(raindexClient, builder);
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
+  } finally {
+    checkingDeployment = false;
+  }
+}
 </script>
 
 <div>
-	{#if $deploymentStepsError}
-		<Alert color="red">
-			<p class="text-red-500">{$deploymentStepsError.code}</p>
-			{#if $deploymentStepsError.details}
-				<p class="text-red-500">{$deploymentStepsError.details}</p>
+	{#if builder}
+		<div class="flex max-w-3xl flex-col gap-12" in:fade>
+			{#if deployment}
+				<div class="flex max-w-2xl flex-col gap-4 text-start">
+					<h1 class="text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
+						{orderDetail.name}
+					</h1>
+					<p class="text-xl text-gray-600 lg:text-2xl dark:text-gray-400">
+						{deployment.description}
+					</p>
+				</div>
 			{/if}
-		</Alert>
-	{/if}
-	{#if dotrain}
-		{#if gui}
-			<div class="flex max-w-3xl flex-col gap-12" in:fade>
-				{#if deployment}
-					<div class="flex max-w-2xl flex-col gap-4 text-start">
-						<h1 class=" text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
-							{strategyDetail.name}
-						</h1>
-						<p class="text-xl text-gray-600 lg:text-2xl dark:text-gray-400">
-							{deployment.description}
-						</p>
-					</div>
-				{/if}
 
-				{#if selectTokens && selectTokens.length > 0}
-					<div class="flex w-full flex-col gap-4">
-						<DeploymentSectionHeader
-							title="Select Tokens"
-							description="Select the tokens that you want to use in your order."
-						/>
-						{#each selectTokens as token}
-							<SelectToken {token} {onSelectTokenSelect} {gui} />
-						{/each}
-					</div>
+			{#if selectTokens && selectTokens.length > 0}
+				<div class="flex w-full flex-col gap-4">
+					<DeploymentSectionHeader
+						title="Select Tokens"
+						description="Select the tokens that you want to use in your order."
+					/>
+					{#each selectTokens as token}
+						<SelectToken {token} {onSelectTokenSelect} {tokenBalances} />
+					{/each}
+				</div>
+			{/if}
+
+			{#if allTokensSelected || selectTokens?.length === 0}
+				{#if allFieldDefinitionsWithoutDefaults.length > 0}
+					{#each allFieldDefinitionsWithoutDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 				{/if}
 
-				{#if allTokensSelected || selectTokens?.length === 0}
-					{#if allFieldDefinitionsWithoutDefaults.length > 0}
-						{#each allFieldDefinitionsWithoutDefaults as fieldDefinition}
-							<FieldDefinitionInput {fieldDefinition} {gui} />
-						{/each}
-					{/if}
+				<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
 
-					<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
+				{#if showAdvancedOptions}
+					{#each allFieldDefinitionsWithDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 
-					{#if allFieldDefinitionsWithDefaults.length > 0 && showAdvancedOptions}
-						{#each allFieldDefinitionsWithDefaults as fieldDefinition}
-							<FieldDefinitionInput {fieldDefinition} {gui} />
-						{/each}
-					{/if}
+					{#each allDepositFields as deposit}
+						<DepositInput {deposit} />
+					{/each}
 
-					{#if showAdvancedOptions}
-						{#each allDepositFields as deposit}
-							<DepositInput {deposit} {gui} />
-						{/each}
-					{/if}
+					{#each allTokenOutputs as output}
+						<TokenIOInput label="Output" vault={output} {tokenBalances} />
+					{/each}
 
-					{#if showAdvancedOptions}
-						{#each allTokenInputs as input, i}
-							<TokenIOInput {i} label="Input" vault={input} {gui} />
-						{/each}
+					{#each allTokenInputs as input}
+						<TokenIOInput label="Input" vault={input} {tokenBalances} />
+					{/each}
+				{/if}
 
-						{#each allTokenOutputs as output, i}
-							<TokenIOInput {i} label="Output" vault={output} {gui} />
-						{/each}
-					{/if}
+				{#if $deploymentStepsError}
+					<Alert color="red">
+						<p class="text-red-500">{$deploymentStepsError.code}</p>
+						{#if $deploymentStepsError.details}
+							<p class="text-red-500">{$deploymentStepsError.details}</p>
+						{/if}
+					</Alert>
+				{/if}
 
-					{#if $deploymentStepsError}
-						<Alert color="red">
-							<p class="text-red-500">{$deploymentStepsError.code}</p>
-							{#if $deploymentStepsError.details}
-								<p class="text-red-500">{$deploymentStepsError.details}</p>
+				<div class="flex flex-wrap items-start justify-start gap-2">
+					{#if $account}
+						<Button
+							data-testid="deploy-button"
+							size="lg"
+							disabled={checkingDeployment}
+							on:click={handleDeployButtonClick}
+							class="bg-gradient-to-br from-blue-600 to-violet-600"
+						>
+							{#if checkingDeployment}
+								<Spinner size="4" color="white" />
+								<span class="ml-2">Checking deployment...</span>
+							{:else}
+								Deploy Order
 							{/if}
-						</Alert>
+						</Button>
+					{:else}
+						<WalletConnect {appKitModal} connected={wagmiConnected} />
 					{/if}
-
-					<div class="flex flex-wrap items-start justify-start gap-2">
-						{#if $wagmiConnected}
-							<Button
-								size="lg"
-								on:click={handleDeployButtonClick}
-								class="bg-gradient-to-br from-blue-600 to-violet-600"
-							>
-								{#if checkingDeployment}
-									<Spinner size="4" color="white" />
-									<span class="ml-2">Checking deployment...</span>
-								{:else}
-									Deploy Strategy
-								{/if}
-							</Button>
-						{:else}
-							<WalletConnect {appKitModal} connected={wagmiConnected} {signerAddress} />
-						{/if}
-						<ComposedRainlangModal {gui} />
-						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
-					</div>
-				{/if}
-			</div>
-		{/if}
+					<ComposedRainlangModal />
+					<ShareChoicesButton handleShareChoices={_handleShareChoices} />
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>

package/dist/components/deployment/DeploymentSteps.svelte.d.ts

@@ -1,26 +1,20 @@
 import { SvelteComponent } from "svelte";
-import { type ConfigSource } from '@rainlanguage/orderbook/js_api';
-import { type NameAndDescriptionCfg } from '@rainlanguage/orderbook/js_api';
-import { type Config } from '@wagmi/core';
+import { type NameAndDescriptionCfg, RaindexOrderBuilder, RaindexClient } from '@rainlanguage/raindex';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
-import type { DisclaimerModalProps, DeployModalProps } from '../../types/modal';
+import type { Account } from '../../types/account';
 declare const __propDef: {
     props: {
-        settings: Writable<ConfigSource>;
-        dotrain: string;
-        deployment: {
+        /** The deployment configuration containing key, name and description */ deployment: {
             key: string;
             name: string;
             description: string;
         };
-        strategyDetail: NameAndDescriptionCfg;
-        handleDeployModal: (args: DeployModalProps) => void;
-        handleDisclaimerModal: (args: DisclaimerModalProps) => void;
-        wagmiConfig: Writable<Config | undefined>;
+        /** Strategy details containing name and description configuration */ orderDetail: NameAndDescriptionCfg;
+        /** Handlers for deployment modals */ onDeploy: (raindexClient: RaindexClient, builder: RaindexOrderBuilder) => void;
         wagmiConnected: Writable<boolean>;
         appKitModal: Writable<AppKit>;
-        signerAddress: Writable<string | null>;
+        account: Account;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/DeploymentTile.svelte

@@ -1,6 +1,6 @@
 <script>import { page } from "$app/stores";
 import { onMount } from "svelte";
-export let strategyName;
+export let orderName;
 export let key;
 export let name;
 export let description;
@@ -11,7 +11,7 @@ onMount(async () => {
 </script>
 
 <a
-	href={`/deploy/${strategyName}/${key}${customRegistryParam}`}
+	href={`/deploy/${orderName}/${key}${customRegistryParam}`}
 	class="flex h-full w-full max-w-sm cursor-pointer flex-col gap-y-4 rounded-3xl border border-gray-200 bg-white p-4 text-left hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
 >
 	<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{name}</h1>

package/dist/components/deployment/DeploymentTile.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        strategyName: string;
+        orderName: string;
         key: string;
         name: string;
         description: string;

package/dist/components/deployment/DeploymentsSection.svelte

@@ -1,24 +1,17 @@
-<script>import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
-import DeploymentTile from "./DeploymentTile.svelte";
-export let dotrain;
-export let strategyName;
+<script>import DeploymentTile from "./DeploymentTile.svelte";
+export let deployments = [];
+export let orderName;
+$: deploymentEntries = deployments instanceof Map ? Array.from(deployments.entries()) : deployments ?? [];
 </script>
 
-{#await DotrainOrderGui.getDeploymentDetails(dotrain) then result}
-	{#if result.error}
-		<p class="text-red-500">Error loading deployments:</p>
-		<p class="text-gray-500">
-			{result.error.msg}
-		</p>
-	{/if}
-
-	{#if result.value}
-		<div
-			class="mr-auto grid w-full grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:w-auto lg:grid-cols-3"
-		>
-			{#each result.value as [key, { name, description }]}
-				<DeploymentTile {name} {description} {key} {strategyName} />
-			{/each}
-		</div>
-	{/if}
-{/await}
+{#if deploymentEntries.length === 0}
+	<p class="text-gray-500">No deployments found for this order.</p>
+{:else}
+	<div
+		class="mr-auto grid w-full grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:w-auto lg:grid-cols-3"
+	>
+		{#each deploymentEntries as [key, { name, description }]}
+			<DeploymentTile {name} {description} {key} {orderName} />
+		{/each}
+	</div>
+{/if}

package/dist/components/deployment/DeploymentsSection.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { NameAndDescriptionCfg } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        dotrain: string;
-        strategyName: string;
+        deployments?: Map<string, NameAndDescriptionCfg> | [string, NameAndDescriptionCfg][];
+        orderName: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;