Skip to content

Commit

Permalink
UI refinements (#3697)
Browse files Browse the repository at this point in the history
- **fix(app): misc refinements**
- **fix(app): hide aptos wallet**
  • Loading branch information
cor authored Feb 6, 2025
2 parents 9b2c8d3 + 8ea7a49 commit 6a18275
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 9 deletions.
3 changes: 2 additions & 1 deletion app/src/lib/components/address.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export let chainId: string
export let address: string | null
export let showChain = false
export let showRaw = false
export let highlightEnabled = true
const chain = chains.find(c => c.chain_id === chainId) ?? null
const parsedAddress =
Expand All @@ -25,7 +26,7 @@ const explorer = chain?.explorers?.at(0)?.address_url ?? null

<!-- svelte-ignore a11y-interactive-supports-focus -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class={cn("flex flex-col text-xs transition-colors", $highlightItem?.kind === "address" && $highlightItem.address === address ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}
<div class={cn("flex flex-col text-xs ", highlightEnabled && $highlightItem?.kind === "address" && $highlightItem.address === address ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}
on:mouseleave={() => highlightItem.set(null)}
on:mouseenter={() => {
highlightItem.set(address ? { kind: "address", address} : null)
Expand Down
11 changes: 10 additions & 1 deletion app/src/lib/components/connect/connect.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,14 @@ let connectedWallets = derived(
}
)
// Set to 3 when shipping aptos.
const WALLET_COUNT = 2
$: if ($connectedWallets >= 1) {
buttonText = $connectedWallets < 3 ? `Connected ${$connectedWallets}/3` : "Connected"
buttonText =
$connectedWallets < WALLET_COUNT
? `Connected ${$connectedWallets}/${WALLET_COUNT}`
: "Connected"
} else {
buttonText = "Connect Wallet"
}
Expand Down Expand Up @@ -91,6 +97,8 @@ $: if ($navigating) sheetOpen = false
</h2>
</Sheet.Title>
</Sheet.Header>
<!-- Uncomment when shipping Aptos !-->
<!--
<Connection
address={$aptosStore.address}
chain="aptos"
Expand All @@ -101,6 +109,7 @@ $: if ($navigating) sheetOpen = false
onConnectClick={aptosStore.connect}
onDisconnectClick={aptosStore.disconnect}
/>
!-->
<Connection
address={$sepoliaStore.address}
chain="evm"
Expand Down
5 changes: 3 additions & 2 deletions app/src/lib/components/table-cells/cell-assets.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export let token: {
</script>

<div class="flex flex-col items-start">
<Token {chains} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
<Token {chains} amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/>
<Token {chains} showWrapping={false} amount={token.base.amount} denom={token.base.token} chainId={token.base.chainId}/>
<!-- TODO: add setting to show this in overview !-->
<!--<Token {chains} amount={token.quote.amount} denom={token.quote.token} chainId={token.quote.chainId}/>!-->
</div>
2 changes: 1 addition & 1 deletion app/src/lib/components/table-cells/cell-timestamp.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ import { toPrettyDateTimeFormat } from "$lib/utilities/date.ts"
export let value: string | undefined
</script>

{#if value}{toPrettyDateTimeFormat(value, { local: true })}{:else}-{/if}
<span class="text-muted-foreground">{#if value}{toPrettyDateTimeFormat(value, { local: true })}{:else}-{/if}</span>
7 changes: 5 additions & 2 deletions app/src/lib/components/token.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export let denom: string
export let amount: string | number | bigint | null = null
export let userAmount: string | null = null
export let expanded = false
export let highlightEnabled = true
export let showWrapping = true
let tokenInfo = derived(
tokenInfos,
Expand Down Expand Up @@ -52,8 +54,9 @@ onMount(() => {
{#if userAmount !== null}
{userAmount}
{/if}
<span class={cn("inline-flex gap-1 transition-colors", $highlightItem?.kind === "token" && $highlightItem.denom === denom ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}><b><Truncate
<span class={cn("inline-flex gap-1", highlightEnabled && $highlightItem?.kind === "token" && $highlightItem.denom === denom ? "bg-union-accent-300 dark:bg-union-accent-950" : "")}><b><Truncate
value={token.combined.symbol} type="symbol"/></b>
{#if showWrapping}
<div class="text-muted-foreground text-xs flex gap-1 items-center">
{toDisplayName(chainId, chains)}
{#each token.combined.wrapping as wrapping}
Expand All @@ -62,7 +65,7 @@ onMount(() => {
chains,
)}
{/each}
</div></span>
</div>{/if}</span>
</div>
{#if expanded}
<div class="text-xs flex flex-col gap gap-4 text-muted-foreground">
Expand Down
6 changes: 4 additions & 2 deletions app/src/lib/components/transfer-details.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ let processedTransfers = derived(
{#if transfer.base_amount && transfer.base_token}
<Token
expanded="true"
highlightEnabled={false}
amount={transfer.base_amount}
denom={transfer.base_token}
chainId={transfer.source_chain_id}
Expand All @@ -106,6 +107,7 @@ let processedTransfers = derived(
{#if "quote_amount" in transfer && transfer.quote_amount && "quote_token" in transfer && transfer.quote_token}
<Token
expanded="true"
highlightEnabled={false}
amount={transfer.quote_amount}
denom={transfer.quote_token}
chainId={transfer.destination_chain_id}
Expand All @@ -123,11 +125,11 @@ let processedTransfers = derived(
<section class="flex flex-col lg:flex-row justify-between gap-8">
<div class="flex-col text-muted-foreground">
<DetailsHeading>Sender</DetailsHeading>
<Address showRaw address={transfer.sender_normalized} {chains} chainId={transfer.source_chain_id} />
<Address highlightEnabled={false} showRaw address={transfer.sender_normalized} {chains} chainId={transfer.source_chain_id} />
</div>
<div class="lg:text-right flex-col text-muted-foreground">
<DetailsHeading>Receiver</DetailsHeading>
<Address showRaw address={transfer.receiver_normalized} {chains} chainId={transfer.destination_chain_id} />
<Address highlightEnabled={false} showRaw address={transfer.receiver_normalized} {chains} chainId={transfer.destination_chain_id} />
</div>
</section>
</Card.Content>
Expand Down

0 comments on commit 6a18275

Please sign in to comment.