@rainlanguage/ui-components 0.0.1-alpha.151 → 0.0.1-alpha.152

package/dist/components/deployment/DeploymentSteps.svelte

@@ -3,13 +3,14 @@ import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import {
   DotrainOrderGui,
-  RaindexClient
+  RaindexClient,
+  AccountBalance
 } from "@rainlanguage/orderbook";
 import WalletConnect from "../wallet/WalletConnect.svelte";
 import {} from "svelte/store";
 import { handleShareChoices } from "../../services/handleShareChoices";
 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";
@@ -37,6 +38,7 @@ let selectTokens = void 0;
 let checkingDeployment = false;
 let availableTokens = [];
 let loadingTokens = false;
+let tokenBalances = /* @__PURE__ */ new Map();
 const gui = useGui();
 const registry = useRegistry();
 const raindexClient = useRaindexClient();
@@ -53,6 +55,22 @@ onMount(async () => {
 $: if (selectTokens?.length === 0 || allTokensSelected) {
   updateFields();
 }
+let unsubscribeAccount = account.subscribe((account2) => {
+  if (!account2) {
+    const balances = tokenBalances;
+    balances.clear();
+    tokenBalances = balances;
+    return;
+  }
+  if (selectTokens) {
+    selectTokens.forEach(async (selectToken) => {
+      await getTokenInfoAndFetchBalance(selectToken.key);
+    });
+  }
+});
+onDestroy(() => {
+  unsubscribeAccount();
+});
 async function loadAvailableTokens() {
   if (loadingTokens) return;
   loadingTokens = true;
@@ -95,8 +113,48 @@ function updateFields() {
 async function _handleShareChoices() {
   await handleShareChoices(gui, registry.getCurrentRegistry());
 }
-async function onSelectTokenSelect() {
+async function fetchTokenBalance(tokenInfo) {
+  if (!$account) return;
+  const balances = tokenBalances;
+  balances.set(tokenInfo.key, {
+    value: { balance: BigInt(0), formattedBalance: "0" },
+    loading: true,
+    error: ""
+  });
+  const { value: accountBalance, error } = await gui.getAccountBalance(
+    tokenInfo.address,
+    $account
+  );
+  if (error) {
+    balances.set(tokenInfo.key, {
+      value: { balance: BigInt(0), 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 gui.getTokenInfo(key);
+  if (tokenInfoResult.error) {
+    throw new Error(tokenInfoResult.error.msg);
+  }
+  const tokenInfo = tokenInfoResult.value;
+  if (!tokenInfo || !tokenInfo.address) {
+    return;
+  }
+  await fetchTokenBalance(tokenInfo);
+}
+async function onSelectTokenSelect(key) {
   await areAllTokensSelected();
+  await getTokenInfoAndFetchBalance(key);
   if (allTokensSelected) {
     let result = await gui.getAllTokenInfos();
     if (result.error) {
@@ -181,7 +239,13 @@ async function handleDeployButtonClick() {
 						description="Select the tokens that you want to use in your order."
 					/>
 					{#each selectTokens as token}
-						<SelectToken {token} {onSelectTokenSelect} {availableTokens} loading={loadingTokens} />
+						<SelectToken
+							{token}
+							{onSelectTokenSelect}
+							{availableTokens}
+							loading={loadingTokens}
+							{tokenBalances}
+						/>
 					{/each}
 				</div>
 			{/if}
@@ -205,11 +269,11 @@ async function handleDeployButtonClick() {
 					{/each}
 
 					{#each allTokenOutputs as output}
-						<TokenIOInput label="Output" vault={output} />
+						<TokenIOInput label="Output" vault={output} {tokenBalances} />
 					{/each}
 
 					{#each allTokenInputs as input}
-						<TokenIOInput label="Input" vault={input} />
+						<TokenIOInput label="Input" vault={input} {tokenBalances} />
 					{/each}
 				{/if}
 

package/dist/components/deployment/SelectToken.svelte

@@ -5,10 +5,12 @@ import { onMount } from "svelte";
 import { useGui } from "../../hooks/useGui";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import TokenSelectionModal from "./TokenSelectionModal.svelte";
+import TokenBalanceComponent from "./TokenBalance.svelte";
 export let token;
 export let onSelectTokenSelect;
 export let availableTokens = [];
 export let loading = false;
+export let tokenBalances = /* @__PURE__ */ new Map();
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
@@ -24,8 +26,9 @@ onMount(async () => {
       throw new Error(result.error.msg);
     }
     tokenInfo = result.value;
-    if (result.value?.address) {
+    if (result.value.address) {
       inputValue = result.value.address;
+      onSelectTokenSelect(token.key);
     }
   } catch {
   }
@@ -93,12 +96,12 @@ async function saveTokenSelection(address) {
     error = errorMessage;
   } finally {
     checking = false;
-    onSelectTokenSelect();
+    onSelectTokenSelect(token.key);
   }
 }
 function clearTokenSelection() {
   gui.unsetSelectToken(token.key);
-  onSelectTokenSelect();
+  onSelectTokenSelect(token.key);
 }
 async function getInfoForSelectedToken() {
   error = "";
@@ -207,6 +210,7 @@ async function handleInput(event) {
 			>
 				<CheckCircleSolid class="h-5 w-5" color="green" />
 				<span>{tokenInfo.name}</span>
+				<TokenBalanceComponent tokenBalance={tokenBalances.get(token.key)} />
 			</div>
 		{:else if error}
 			<div class="flex h-5 flex-row items-center gap-2" data-testid="error">

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

@@ -1,11 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { GuiSelectTokensCfg, TokenInfo } from '@rainlanguage/orderbook';
+import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {
         token: GuiSelectTokensCfg;
-        onSelectTokenSelect: () => void;
+        onSelectTokenSelect: (key: string) => void;
         availableTokens?: TokenInfo[];
         loading?: boolean;
+        tokenBalances?: Map<string, TokenBalance>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/TokenBalance.svelte

@@ -0,0 +1,19 @@
+<script>import { Spinner } from "flowbite-svelte";
+export let tokenBalance;
+</script>
+
+{#if tokenBalance}
+	{#if tokenBalance.loading}
+		<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+			<Spinner class="h-4 w-4" />
+		</div>
+	{:else if !tokenBalance.error}
+		<div class="text-sm text-gray-600 dark:text-gray-400">
+			Balance: {tokenBalance.value.formattedBalance}
+		</div>
+	{:else if tokenBalance.error}
+		<div class="text-sm text-red-600 dark:text-red-400">
+			{tokenBalance.error}
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TokenBalance } from '../../types/tokenBalance';
+declare const __propDef: {
+    props: {
+        tokenBalance: TokenBalance | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TokenBalanceProps = typeof __propDef.props;
+export type TokenBalanceEvents = typeof __propDef.events;
+export type TokenBalanceSlots = typeof __propDef.slots;
+export default class TokenBalance extends SvelteComponent<TokenBalanceProps, TokenBalanceEvents, TokenBalanceSlots> {
+}
+export {};

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,11 +1,12 @@
 <script>import { Input } from "flowbite-svelte";
 import {} from "@rainlanguage/orderbook";
-import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
 import { useGui } from "../../hooks/useGui";
+import VaultIdInformation from "./VaultIdInformation.svelte";
 const gui = useGui();
 export let label;
 export let vault;
+export let tokenBalances = /* @__PURE__ */ new Map();
 let tokenInfo = null;
 let inputValue = "";
 let error = "";
@@ -56,10 +57,15 @@ $: if (vault.token?.key) {
 </script>
 
 <div class="flex w-full flex-col gap-6">
-	<DeploymentSectionHeader
-		title={`${label} ${tokenInfo?.symbol ? `(${tokenInfo.symbol})` : ''}`}
-		description={`${tokenInfo?.symbol || 'Token'} vault ID`}
-	/>
+	<div class="flex w-full flex-col gap-2">
+		<div class="flex items-center gap-2">
+			<VaultIdInformation
+				title={`${label} ${tokenInfo?.symbol ? `(${tokenInfo.symbol})` : ''}`}
+				description={`${tokenInfo?.symbol || 'Token'} vault ID`}
+				tokenBalance={tokenBalances.get(vault.token?.key || '')}
+			/>
+		</div>
+	</div>
 	<div class="flex flex-col gap-2">
 		<Input
 			data-testid="vault-id-input"

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

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
 import { type OrderIOCfg } from '@rainlanguage/orderbook';
+import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {
         label: "Input" | "Output";
         vault: OrderIOCfg;
+        tokenBalances?: Map<string, TokenBalance>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/VaultIdInformation.svelte

@@ -0,0 +1,17 @@
+<script>import TokenBalanceComponent from "./TokenBalance.svelte";
+export let title;
+export let description;
+export let tokenBalance;
+</script>
+
+<div class="flex max-w-xl flex-grow flex-col gap-y-4 text-left">
+	<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
+		{title}
+	</h1>
+	<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+		<div class="text-gray-600 dark:text-gray-400">
+			{description}
+		</div>
+		<TokenBalanceComponent {tokenBalance} />
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TokenBalance } from '../../types/tokenBalance';
+declare const __propDef: {
+    props: {
+        title: string;
+        description: string;
+        tokenBalance: TokenBalance | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultIdInformationProps = typeof __propDef.props;
+export type VaultIdInformationEvents = typeof __propDef.events;
+export type VaultIdInformationSlots = typeof __propDef.slots;
+export default class VaultIdInformation extends SvelteComponent<VaultIdInformationProps, VaultIdInformationEvents, VaultIdInformationSlots> {
+}
+export {};

package/dist/types/tokenBalance.d.ts

@@ -0,0 +1,6 @@
+import type { AccountBalance } from '@rainlanguage/orderbook';
+export interface TokenBalance {
+    value: AccountBalance;
+    loading: boolean;
+    error: string;
+}

package/dist/types/tokenBalance.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.151",
+	"version": "0.0.1-alpha.152",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.151",
+		"@rainlanguage/orderbook": "0.0.1-alpha.152",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",