Skip to content

Commit

Permalink
style: updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@deansallinen
deansallinen committed Dec 19, 2024
1 parent 8a52e9d commit fe8eee2
Showing 1 changed file with 148 additions and 32 deletions.
180 changes: 148 additions & 32 deletions src/routes/[network]/(account)/fund/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@
import gateioLogo from '$lib/assets/exchanges/gate-io.webp?enhanced';
import upbitLogo from '$lib/assets/exchanges/upbit.webp?enhanced';
import kucoinLogo from '$lib/assets/exchanges/kucoin.webp?enhanced';
import coinbaseLogo from '$lib/assets/exchanges/coinbase.svg';
import type { UnicoveContext } from '$lib/state/client.svelte';
import { initOnRamp, type CBPayInstanceType, type InitOnRampParams } from '@coinbase/cbpay-js';
import Button from '$lib/components/button/button.svelte';
import { env } from '$env/dynamic/public';
import * as m from '$lib/paraglide/messages';
import Grid from '$lib/components/layout/grid.svelte';
import { DL, DLRow, DD } from '$lib/components/descriptionlist';
import coinbaseLogo from '$lib/assets/exchanges/coinbase.svg';
import Stack from '$lib/components/layout/stack.svelte';
import Cluster from '$lib/components/layout/cluster.svelte';
import { MultiCard } from '$lib/components/layout';
const ON_RAMP_PROVIDERS = [
{
Expand Down Expand Up @@ -151,12 +154,86 @@
}
</script>

<div class="max-w-5xl space-y-6">
<Stack>
<h2 class="h4">{m.token_purchase_providers()}</h2>

<Grid tag="ul" class="grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<MultiCard tag="ul">
{#each ON_RAMP_PROVIDERS as service}
<Card tag="li" class="h-full w-full p-6">
<Card tag="li" class="p-6">
<div>
<div class="mb-4 flex items-center justify-center">
<img src={service.logo} alt={service.id} class="h-24 w-3/5 object-contain" />
</div>
<DL>
<DLRow title={m.processing_fees()}>
<DD>
<p class="text-white">{service.fees.range}</p>
</DD>
</DLRow>
<DLRow title={m.limits()}>
<DD>
<p class="text-white">{service.limits.daily}</p>
</DD>
</DLRow>
<DLRow title={m.details()}>
<DD>
<ul class="list-disc pl-6">
{#each service.details as detail}
<li class="text-left text-sm text-white">{detail}</li>
{/each}
</ul>
</DD>
</DLRow>
</DL>
</div>

<div class="mt-6">
{#if !context.account}
<p class="text-sm">{m.must_be_logged_in_for_feature()}</p>
{:else}
<Button variant="secondary" class="w-full" onclick={() => handleOnRamp(service.id)}
>{service.action.text}</Button
>
{/if}
</div>
</Card><Card tag="li" class="min-w-sm p-6">
<div>
<div class="mb-4 flex items-center justify-center">
<img src={service.logo} alt={service.id} class="h-24 w-3/5 object-contain" />
</div>
<DL>
<DLRow title={m.processing_fees()}>
<DD>
<p class="text-white">{service.fees.range}</p>
</DD>
</DLRow>
<DLRow title={m.limits()}>
<DD>
<p class="text-white">{service.limits.daily}</p>
</DD>
</DLRow>
<DLRow title={m.details()}>
<DD>
<ul class="list-disc pl-6">
{#each service.details as detail}
<li class="text-left text-sm text-white">{detail}</li>
{/each}
</ul>
</DD>
</DLRow>
</DL>
</div>

<div class="mt-6">
{#if !context.account}
<p class="text-sm">{m.must_be_logged_in_for_feature()}</p>
{:else}
<Button variant="secondary" class="w-full" onclick={() => handleOnRamp(service.id)}
>{service.action.text}</Button
>
{/if}
</div>
</Card><Card tag="li" class="min-w-sm p-6">
<div>
<div class="mb-4 flex items-center justify-center">
<img src={service.logo} alt={service.id} class="h-24 w-3/5 object-contain" />
Expand All @@ -183,6 +260,7 @@
</DLRow>
</DL>
</div>

<div class="mt-6">
{#if !context.account}
<p class="text-sm">{m.must_be_logged_in_for_feature()}</p>
Expand All @@ -193,36 +271,74 @@
{/if}
</div>
</Card>
{/each}
</Grid>

<h2 class="h4">{m.exchanges()}</h2>

<p class="mb-6">
{m.where_eos_can_be_purchased()}
</p>

<Grid tag="ul" class="grid-cols-2 lg:grid-cols-4">
{#each EXCHANGES as exchange}
<Card tag="li" class="h-full w-full">
<a
href={exchange.url}
target="_blank"
rel="noopener noreferrer"
class="block h-full transition-all hover:scale-105"
>
<div class="mb-4 aspect-square rounded-lg bg-mineShaft-900">
<enhanced:img
src={exchange.logo}
alt="{exchange.name} logo"
class="size-full object-cover object-center p-4"
/>
<Card tag="li" class="min-w-sm p-6">
<div>
<div class="mb-4 flex items-center justify-center">
<img src={service.logo} alt={service.id} class="h-24 w-3/5 object-contain" />
</div>
<h3 class="text-center text-lg font-medium">{exchange.name}</h3>
</a>
<DL>
<DLRow title={m.processing_fees()}>
<DD>
<p class="text-white">{service.fees.range}</p>
</DD>
</DLRow>
<DLRow title={m.limits()}>
<DD>
<p class="text-white">{service.limits.daily}</p>
</DD>
</DLRow>
<DLRow title={m.details()}>
<DD>
<ul class="list-disc pl-6">
{#each service.details as detail}
<li class="text-left text-sm text-white">{detail}</li>
{/each}
</ul>
</DD>
</DLRow>
</DL>
</div>

<div class="mt-6">
{#if !context.account}
<p class="text-sm">{m.must_be_logged_in_for_feature()}</p>
{:else}
<Button variant="secondary" class="w-full" onclick={() => handleOnRamp(service.id)}
>{service.action.text}</Button
>
{/if}
</div>
</Card>
{/each}
</Grid>
</MultiCard>

<Stack class="gap-4">
<h2 class="h4">{m.exchanges()}</h2>

<p>{m.where_eos_can_be_purchased()}</p>

<Grid tag="ul" itemWidth="10rem" class="">
{#each EXCHANGES as exchange}
<Card tag="li" class="">
<a
href={exchange.url}
target="_blank"
rel="noopener noreferrer"
class="block h-full transition-all hover:scale-105"
>
<div class="mb-4 grid aspect-square rounded-lg bg-mineShaft-900 p-4">
<enhanced:img
src={exchange.logo}
alt="{exchange.name} logo"
class="h-full object-cover"
/>
</div>
<h3 class="text-center text-lg font-medium">{exchange.name}</h3>
</a>
</Card>
{/each}
</Grid>
</Stack>

{#if context.settings.data.debugMode}
<h3 class="h3">{m.common_debugging()}</h3>
Expand All @@ -233,4 +349,4 @@
{JSON.stringify(coinbaseInstance, null, 2)}
</Code>
{/if}
</div>
</Stack>

0 comments on commit fe8eee2

Please sign in to comment.