Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@hardyjosh
hardyjosh committed Feb 15, 2025
1 parent 75c5e5b commit f04f389
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 82 deletions.
83 changes: 61 additions & 22 deletions packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script lang="ts">
import { Alert } from 'flowbite-svelte';
import TokenIOSection from './TokenIOSection.svelte';
import DepositsSection from './DepositsSection.svelte';
import SelectTokensSection from './SelectTokensSection.svelte';
import ComposedRainlangModal from './ComposedRainlangModal.svelte';
import FieldDefinitionsSection from './FieldDefinitionsSection.svelte';
import { type ConfigSource } from '../../typeshare/config';
import WalletConnect from '../wallet/WalletConnect.svelte';
import {
DotrainOrderGui,
Expand All @@ -16,7 +16,7 @@
type SelectTokens
} from '@rainlanguage/orderbook/js_api';
import { fade } from 'svelte/transition';
import { Button, Toggle } from 'flowbite-svelte';
import { Button, Toggle, Spinner } from 'flowbite-svelte';
import { type Config } from '@wagmi/core';
import { type Writable } from 'svelte/store';
import type { AppKit } from '@reown/appkit';
Expand All @@ -27,7 +27,8 @@
import DisclaimerModal from './DisclaimerModal.svelte';
import type { ComponentProps } from 'svelte';
import type { DeploymentArgs } from '$lib/types/transaction';
import { getDeploymentTransactionArgs } from './getDeploymentTransactionArgs';
import type { HandleAddOrderResult } from './getDeploymentTransactionArgs';
enum DeploymentStepErrors {
NO_GUI = 'Error loading GUI',
NO_STRATEGY = 'No valid strategy exists at this URL',
Expand All @@ -47,7 +48,7 @@
export let deployment: GuiDeployment;
export let handleDeployModal: (args: DeploymentArgs) => void;
export let handleDisclaimerModal: (args: ComponentProps<DisclaimerModal>) => void;
export let handleDisclaimerModal: (args: Omit<ComponentProps<DisclaimerModal>, 'open'>) => void;
export let handleUpdateGuiState: (gui: DotrainOrderGui) => void;
let selectTokens: SelectTokens | null = null;
Expand All @@ -57,6 +58,7 @@
let allTokensSelected: boolean = false;
let showAdvancedOptions: boolean = false;
let gui: DotrainOrderGui | null = null;
let checkingDeployment: boolean = false;
let error: DeploymentStepErrors | null = null;
let errorDetails: string | null = null;
let networkKey: string | null = null;
Expand Down Expand Up @@ -186,6 +188,9 @@
}
async function handleDeployButtonClick() {
error = null;
errorDetails = null;
if (!gui) {
error = DeploymentStepErrors.NO_GUI;
return;
Expand All @@ -199,13 +204,34 @@
return;
}
handleDisclaimerModal({
gui,
allTokenOutputs,
wagmiConfig,
subgraphUrl,
handleDeployModal
});
let result: HandleAddOrderResult | null = null;
checkingDeployment = true;
try {
result = await getDeploymentTransactionArgs(gui, $wagmiConfig, allTokenOutputs);
} catch (e) {
checkingDeployment = false;
error = DeploymentStepErrors.ADD_ORDER_FAILED;
errorDetails = e instanceof Error ? e.message : 'Unknown error';
}
if (!result) {
checkingDeployment = false;
error = DeploymentStepErrors.ADD_ORDER_FAILED;
return;
}
checkingDeployment = false;
const onAccept = () => {
handleDeployModal({
...result,
subgraphUrl: subgraphUrl
});
};
handleDisclaimerModal({ onAccept });
}
const areAllTokensSelected = async () => {
Expand Down Expand Up @@ -270,23 +296,36 @@
<TokenIOSection bind:allTokenInputs bind:allTokenOutputs {gui} {handleUpdateGuiState} />
{/if}

<div class="flex gap-2">
{#if $wagmiConnected}
<Button size="lg" on:click={handleDeployButtonClick}>Deploy Strategy</Button>
<ComposedRainlangModal {gui} />
{:else}
<WalletConnect {appKitModal} connected={wagmiConnected} />
{/if}
<ShareChoicesButton handleShareChoices={_handleShareChoices} />

<div class="flex flex-col">
{#if error || errorDetails}
<Alert color="red">
{#if error}
<p class="text-red-500">{error}</p>
{/if}
{#if errorDetails}
<p class="text-red-500">{errorDetails}</p>
{/if}
</div>
</Alert>
{/if}

<div class="flex 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} />
{/if}
<ComposedRainlangModal {gui} />
<ShareChoicesButton handleShareChoices={_handleShareChoices} />
</div>
{/if}
</div>
Expand Down
67 changes: 10 additions & 57 deletions packages/ui-components/src/lib/components/deployment/DisclaimerModal.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,17 @@
<script lang="ts">
import { Alert, Modal, Button } from 'flowbite-svelte';
import { ExclamationCircleSolid } from 'flowbite-svelte-icons';
import { getDeploymentTransactionArgs } from './getDeploymentTransactionArgs';
import type { Config } from 'wagmi';
import type { Writable } from 'svelte/store';
import type { DotrainOrderGui, OrderIO } from '@rainlanguage/orderbook/js_api';
import type { DeploymentArgs } from '@rainlanguage/ui-components';
import type { HandleAddOrderResult } from './getDeploymentTransactionArgs';
export let open: boolean = false;
export let gui: DotrainOrderGui;
export let allTokenOutputs: OrderIO[];
export let wagmiConfig: Writable<Config | undefined>;
export let subgraphUrl: string;
export let handleDeployModal: (args: DeploymentArgs) => void;
let result: HandleAddOrderResult | null = null;
let error: string | null = null;
let errorDetails: string | null = null;
let deployButtonText: 'Loading...' | 'Deploy' | 'Error' = 'Loading...';
const handleOpenModal = async () => {
try {
result = await getDeploymentTransactionArgs(gui, $wagmiConfig, allTokenOutputs);
deployButtonText = 'Deploy';
} catch (e) {
deployButtonText = 'Error';
error = 'Error getting deployment transaction data:';
errorDetails = e instanceof Error ? e.message : 'Unknown error';
}
};
$: if (open === true) {
handleOpenModal();
}
export let onAccept: () => void;
async function handleAcceptDisclaimer() {
if (!result) {
error = 'No result found';
return;
} else {
open = false;
handleDeployModal({ ...result, subgraphUrl: subgraphUrl });
}
open = false;
onAccept();
}
</script>

<Modal bind:open>
<div class="flex flex-col items-start gap-y-4">
<Modal bind:open class="dark:border dark:border-gray-700 dark:bg-gray-900">
<div class="flex flex-col items-start gap-y-8 p-4">
<div class="space-y-4">
<Alert color="red" class="text-base">
<div class="flex items-center justify-center">
Expand All @@ -56,7 +21,7 @@
</span>
</div>
</Alert>
<ul class="list-outside list-disc space-y-2 text-gray-700">
<ul class="list-outside list-disc space-y-2">
<li class="ml-4">
This front end is provided as a tool to interact with the Raindex smart contracts.
</li>
Expand All @@ -74,25 +39,13 @@
<li class="ml-4">Do not invest unless you are prepared to lose all funds.</li>
</ul>
</div>
<div class="flex gap-2">
<div class="flex justify-center gap-2">
<Button
size="lg"
class="w-32"
color="green"
disabled={!result}
on:click={handleAcceptDisclaimer}
class="w-32 bg-gradient-to-br from-blue-600 to-violet-600"
on:click={handleAcceptDisclaimer}>Deploy</Button
>
{deployButtonText}
</Button>
<Button size="lg" class="w-32" color="red" on:click={() => (open = false)}>Cancel</Button>
</div>
<div class="flex flex-col">
{#if error}
<span class="ml-2 text-red-500">{error}</span>
{/if}
{#if errorDetails}
<span class="ml-2 text-red-500">{errorDetails}</span>
{/if}
<Button size="lg" class="w-32" color="light" on:click={() => (open = false)}>Cancel</Button>
</div>
</div>
</Modal>
5 changes: 4 additions & 1 deletion packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
import { CheckCircleOutline } from 'flowbite-svelte-icons';
import type { Writable } from 'svelte/store';
import type { AppKit } from '@reown/appkit';
import { twMerge } from 'tailwind-merge';
export let appKitModal: Writable<AppKit>;
export let connected: Writable<boolean>;
export let classes: string = '';
function handleClick() {
$appKitModal.open();
}
Expand All @@ -13,7 +15,8 @@
<Button
data-testid="wallet-connect"
on:click={handleClick}
class="flex w-full border border-gray-700 px-2 md:px-4 dark:border-gray-200 "
size="lg"
class={twMerge('flex border border-gray-700 px-2 md:px-4 dark:border-gray-200', classes)}
color={$connected ? 'alternative' : 'primary'}
>
{#if $connected}
Expand Down
4 changes: 2 additions & 2 deletions packages/webapp/src/lib/components/Sidebar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
{#if !sideBarHidden}
<CloseButton
data-testid="close-button"
class="absolute right-3 top-2 z-20 flex size-8 items-center border dark:border-gray-700 lg:hidden"
class="absolute right-3 top-2 z-20 flex size-8 items-center border lg:hidden dark:border-gray-700"
on:click={() => (sideBarHidden = true)}
/>
{/if}
Expand Down Expand Up @@ -104,7 +104,7 @@
</SidebarItem>
</SidebarGroup>
<SidebarGroup border ulClass="list-none">
<WalletConnect {appKitModal} {connected} />
<WalletConnect {appKitModal} {connected} classes="w-full" />
</SidebarGroup>
<SidebarGroup border ulClass="list-none">
<SidebarItem
Expand Down

0 comments on commit f04f389

Please sign in to comment.