Merge pull request #76 from crowdtainer/30Oct23

Connection management improvements
crowdtainer · Oct 31, 2023 · 6f40b49 · 6f40b49
2 parents f5a1aa6 + dc0827b
commit 6f40b49
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 103 deletions.
diff --git a/src/lib/ConnectWallet.svelte b/src/lib/ConnectWallet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { connect, hasInjectedProviderNow } from '$lib/Utils/wallet';
+	import { connect, injectedProviderAvailableNow } from '$lib/Utils/wallet';
 	import { WalletType } from '$lib/Utils/walletStorage';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { InformationCircle } from '@steeze-ui/heroicons';
@@ -12,7 +12,7 @@
 	<button
 		class="btn btn-outline dark:text-white"
 		on:click={() => {
-			if (hasInjectedProviderNow()) {
+			if (injectedProviderAvailableNow()) {
 				connect(WalletType.Injected);
 			} else {
 				connect(WalletType.WalletConnect);

diff --git a/src/lib/JoinProjectButton.svelte b/src/lib/JoinProjectButton.svelte
@@ -438,7 +438,6 @@
 			receipt = await permitApproveTx.wait();
 		} catch (_error) {
 			error = `${_error}`;
-			return false;
 		}
 
 		if (!receipt || error !== '' || receipt.status !== 1) {

diff --git a/src/lib/MyCampaign.svelte b/src/lib/MyCampaign.svelte
@@ -35,14 +35,21 @@
 	import { initializeDataForWallet, walletInCrowdtainer } from './Stores/dataForWalletStore.js';
 	import { handleUserClaimedFundsEvent } from './CampaignActions.js';
 
-	export let wallet: string;
 	export let tokenId: number;
 	export let vouchers721Address: string;
 	export let crowdtainerId: number;
 	export let title: string;
 	export let subtitle: string;
 	export let projectURL: string;
 
+	// svelte-ignore unused-export-let
+	export let wallet: string;
+	// svelte-ignore unused-export-let
+	export let chainId: number;
+	// svelte-ignore unused-export-let
+	export let tokenVersion: string;
+	// svelte-ignore unused-export-let
+	export let txSponsoringEnabled: boolean;
 	// svelte-ignore unused-export-let
 	export let description: string;
 	// svelte-ignore unused-export-let

diff --git a/src/lib/Project.svelte b/src/lib/Project.svelte
@@ -28,11 +28,7 @@
 	import { showToast } from './Toast/ToastStore.js';
 	import { handleCampaignJoinedEvent, handleUserClaimedFundsEvent } from './CampaignActions.js';
 	import { loadOrderDetails } from './TokenUtils/search.js';
-	import {
-		findTokenIdsForWallet,
-		makeNewTokenIDAssociations,
-		type TokenIDAssociations
-	} from './ethersCalls/rpcRequests.js';
+	import { findTokenIdsForWallet, type TokenIDAssociations } from './ethersCalls/rpcRequests.js';
 
 	export let vouchers721Address: string;
 	export let chainId: number;
@@ -104,7 +100,6 @@
 			showToast(`Error fetching data: ${fetchError.details}`);
 			return;
 		}
-		refreshData();
 	});
 
 	async function handleUserLeftCrowdtainerEvent(event: CustomEvent) {
@@ -132,18 +127,15 @@
 
 	// dynamic
 	$: state = toState($campaignDynamicData, $campaignStaticData);
-	$: joinViewEnabled =
+	$: joinViewEnabled = !$connected || !tokenIdAssociations || tokenIdAssociations.foundTokenIds.length == 0 && 
 		state === ProjectStatusUI.Funding &&
-		$walletInCrowdtainer.fundsInCrowdtainer.isZero() &&
-		(tokenIdAssociations === undefined ||
-			($connected ? tokenIdAssociations?.foundTokenIds.length == 0 : true));
+		$walletInCrowdtainer.fundsInCrowdtainer.isZero();
 
 	// $: $campaignDynamicData;
 	$: loadingAnimation = staticDataLoadStatus === LoadStatus.Loading;
 
 	// Immediatelly update UI elements related to connected wallet on wallet or connection change
-	$: $connected,
-		$accountAddress,
+	$: $accountAddress,
 		initializeDataForWallet($campaignStaticData.contractAddress, $accountAddress),
 		refreshData();
 </script>

diff --git a/src/lib/TopMenuNav.svelte b/src/lib/TopMenuNav.svelte
@@ -16,13 +16,14 @@
 		setupWallet,
 		tearDownWallet
 	} from '$lib/Utils/wallet';
-	import { WalletType } from '$lib/Utils/walletStorage';
+	import { ConnectionState, WalletType } from '$lib/Utils/walletStorage';
 
 	// Toast
 	import { addToast, type ToastData } from '$lib/Toast/ToastStore';
 	import type { MessageType } from './Toast/MessageType';
 	import { copyToClipBoardAndNotify } from './Utils/clipboard.js';
 	import { Icon } from '@steeze-ui/svelte-icon';
+	export let VITE_WALLET_CONNECT_CHAIN_ID = import.meta.env.VITE_WALLET_CONNECT_CHAIN_ID;
 
 	let mobileMenuOpen = false,
 		profileMenuOpen = false;
@@ -48,14 +49,13 @@
 	};
 
 	onMount(() => {
-		setupWallet();
-		walletState.setUpdatesCallback(updatesCallbackFunction);
 		console.log(`import.meta.env.MODE: ` + import.meta.env.MODE);
+		walletState.setUpdatesCallback(updatesCallbackFunction);
+		setupWallet();
 	});
 
 	onDestroy(() => {
 		tearDownWallet();
-		walletState.setUpdatesCallback(undefined);
 	});
 
 	$: path = $page.url.pathname;
@@ -127,15 +127,13 @@
 			</div>
 		</div>
 		<div
-			class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
+			class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-3 sm:pr-0"
 		>
 			<!-- Profile dropdown -->
-			{#if !$connected}
-				<p class="pt-1 text-right text-sm text-white invisible sm:visible">Disconnected</p>
-			{:else}
+			{#if $connected}
 				<div class="pr-2 md:pr-4 text-right text-sm text-white">
 					{#await $shortOrENSNamedAccount}
-						"Loading"
+						Loading
 					{:then address}
 						<div class="flex justify-center">
 							<button
@@ -144,15 +142,41 @@
 								}}
 							>
 								<span class="inline-flex items-center">
+									<span class="relative flex h-2 w-2 mx-2">
+										<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400" />
+									</span>
 									<span>{address} </span>
 									<span><Icon src={Clipboard} class="self-center ml-2" size="16" /></span>
 								</span>
 							</button>
 						</div>
 					{/await}
 				</div>
+			{:else if $walletState.connectionState === ConnectionState.ConnectedButNoAccountAvailable}
+				<p class="pt-1 text-right text-sm text-white invisible sm:visible">Wallet locked.</p>
+			{:else if $walletState.connectionState === ConnectionState.ConnectedToUnsupportedNetwork}
+				<div class="inline-flex items-baseline">
+					<span class="relative flex h-2 w-2 mx-2 float-right">
+						<span
+							class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"
+						/>
+						<span class="relative inline-flex rounded-full h-2 w-2 bg-yellow-400" />
+					</span>
+					<p class="hidden md:block pt-1 text-right text-sm text-white invisible sm:visible">
+						Change your wallet to chain id {VITE_WALLET_CONNECT_CHAIN_ID}.
+					</p>
+				</div>
+			{:else if $walletState.connectionState === ConnectionState.Disconnected}
+				<div class="inline-flex items-baseline">
+					<span class="relative flex h-2 w-2 mx-2 float-right">
+						<span class="relative inline-flex rounded-full h-2 w-2 bg-red-400" />
+					</span>
+					<p class="hidden md:block pt-1 text-right text-sm text-white invisible sm:visible">
+						Disconnected
+					</p>
+				</div>
 			{/if}
-			<div class="ml-3 relative">
+			<div class="ml-2 relative">
 				<div>
 					<button
 						on:click={flipProfileMenu}
@@ -177,15 +201,15 @@
 						aria-labelledby="user-menu-button"
 						tabindex="-1"
 					>
-						{#if $connected}
+						{#if $walletState.connectionState !== ConnectionState.Disconnected}
 							<!-- svelte-ignore a11y-invalid-attribute -->
 							<a
 								href="#"
 								on:click={async () => {
 									await disconnect();
 									profileMenuOpen = false;
 								}}
-								class="block px-4 py-2 text-sm"
+								class="block px-4 py-4 text-sm"
 								role="menuitem"
 								tabindex="-1"
 								id="user-menu-item-0">Disconnect wallet</a
@@ -198,25 +222,23 @@
 									await connect(WalletType.WalletConnect);
 									profileMenuOpen = false;
 								}}
-								class="block px-4 py-2 text-sm"
+								class="block px-4 py-4 text-sm"
 								role="menuitem"
 								tabindex="-1"
 								id="user-menu-item-0">Connect to external wallet</a
 							>
-							<!-- {#if import.meta.env.MODE === 'development'} -->
 							<!-- svelte-ignore a11y-invalid-attribute -->
 							<a
 								href="#"
 								on:click={async () => {
 									await connect(WalletType.Injected);
 									profileMenuOpen = false;
 								}}
-								class="block px-4 py-2 text-sm"
+								class="block px-4 py-4 text-sm"
 								role="menuitem"
 								tabindex="-1"
 								id="user-menu-item-0">Connect to browser wallet</a
 							>
-							<!-- {/if} -->
 						{/if}
 					</div>
 				{/if}