Skip to content

Commit

Permalink
overview design
Browse files Browse the repository at this point in the history
  • Loading branch information
@ttwishing
ttwishing committed Oct 23, 2024
1 parent 002813d commit db4e445
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 34 deletions.
19 changes: 19 additions & 0 deletions src/lib/assets/resources/cpu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/lib/assets/resources/net.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/lib/assets/resources/ram.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/routes/[network]/(account)/resources/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
import Stack from '$lib/components/layout/stack.svelte';
import Pageheader from '$lib/components/pageheader.svelte';
const { children } = $props();
</script>

<Stack>
<Pageheader title="Resources" />
{@render children()}
</Stack>
159 changes: 125 additions & 34 deletions src/routes/[network]/(account)/resources/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<script lang="ts">
import PageHeader from '$lib/components/pageheader.svelte';
import Grid from '$lib/components/layout/grid.svelte';
import Stack from '$lib/components/layout/stack.svelte';
import Button from '$lib/components/button/button.svelte';
import ResourceWrapper from './components/overview/resources.svelte';
import RamIcon from '$lib/assets/resources/ram.svg';
import CpuIcon from '$lib/assets/resources/cpu.svg';
import NetIcon from '$lib/assets/resources/net.svg';
import type { UnicoveContext } from '$lib/state/client.svelte';
import { getContext } from 'svelte';
Expand All @@ -26,43 +25,135 @@
netState.setResource(context.account?.net);
});
const explanations = [
{
icon: CpuIcon,
name: 'CPU',
title: 'CPU (Central Processing Unit)',
descriptions: [
'Provides processing power for blockchain actions.',
'Measured in microseconds.',
'Needed to execute transactions.'
]
},
{
icon: NetIcon,
name: 'NET',
title: 'NET (Network Bandwidth)',
descriptions: [
'Represents network bandwidth usage.',
'Required for transactions on the blockchain.'
]
},
{
icon: '',
name: 'CPU and NET',
title: 'CPU and NET',
descriptions: [
'Can be "powered up" by spending EOS.',
'Some free services offer daily power-ups.',
'Amount received is proportional to EOS spent.',
'Lasts for a specific time period.'
]
},
{
icon: RamIcon,
name: 'RAM',
title: 'RAM (Random Access Memory)',
descriptions: [
"It's like computer memory, but for the blockchain.",
'Used to store data on the blockchain.',
'Limited and in high demand.',
'Can be bought and sold by users.',
'Price changes based on availability.'
]
}
];
const network = $derived(String(data.network));
</script>

<PageHeader title="Resources" />
<Stack class="mt-10">
<Grid itemWidth="270px">
<ResourceWrapper resourceState={ramState}>
{#if context.network?.supports('rammarket')}
<div class="flex flex-col">
<Button class="text-blue-400" variant="pill" href="/{network}/ram/buy/tokens">BUY</Button>
<Button class="text-blue-400" variant="pill" href="/{network}/ram/sell/tokens"
>SELL</Button
>
<div
class="mx-auto flex flex-col gap-9 py-9 sm:gap-12 md:mx-0 md:flex-row md:justify-between md:gap-8"
>
<Stack class="max-w-lg flex-1">
<Stack>
<div class="flex gap-[1px]">
<div class="relative h-24 flex-1 rounded-l-lg bg-[#303338]">
<div class="absolute left-4 top-5">
<img src={CpuIcon} class="size-6" alt="cpu icon" />
</div>
<div class="absolute right-3 top-3">CPU</div>
<div class="absolute bottom-2 right-3">
<h5 class="h5 text-right">{cpuState.availableSize} ms</h5>
<p>Usage Available</p>
</div>
</div>
{/if}
</ResourceWrapper>
<ResourceWrapper resourceState={cpuState}>
{#if context.network?.supports('rentrex') || context.network?.supports('powerup')}
<Button class="text-blue-400" variant="pill" href="/{network}/resources/cpu">RENT</Button>
{/if}
{#if context.network?.supports('stakeresource')}
<Button class="text-blue-400" variant="pill" href="/{network}/resources/cpu/stake"
>STAKE</Button
<div class="relative h-24 flex-1 rounded-r-lg bg-[#303338]">
<div class="absolute left-5 top-4">
<img src={NetIcon} class="size-6" alt="cpu icon" />
</div>
<div class="absolute right-4 top-3">NET</div>
<div class="absolute bottom-2 right-4">
<h5 class="h5 text-right">{netState.availableSize} kb</h5>
<p>Usage Available</p>
</div>
</div>
</div>
{#if context.network?.supports('powerup')}
<Button class="text-blue-400" variant="primary" href="/{network}/resources/cpu/powerup"
>Rent resources with PowerUp</Button
>
{/if}
</ResourceWrapper>
<ResourceWrapper resourceState={netState}>
{#if context.network?.supports('rentrex') || context.network?.supports('powerup')}
<Button class="text-blue-400" variant="pill" href="/{network}/resources/net">RENT</Button>
{#if context.network?.supports('rentrex')}
<Button class="text-blue-400" variant="primary" href="/{network}/resources/cpu/rex"
>Rent resources with PowerUp</Button
>
{/if}
{#if context.network?.supports('stakeresource')}
<Button class="text-blue-400" variant="pill" href="/{network}/resources/net/stake"
>STAKE</Button
<Button class="text-blue-400" variant="primary" href="/{network}/resources/cpu/stake"
>Rent resources with PowerUp</Button
>
{/if}
</ResourceWrapper>
</Grid>
</Stack>

<!-- <Code>{JSON.stringify(context, null, 2)}</Code> -->
</Stack>
<Stack>
<div class="relative h-24 rounded-lg bg-[#303338]">
<div class="absolute left-4 top-3"><img src={RamIcon} class="size-6" alt="cpu icon" /></div>
<div class="absolute right-3 top-3">RAM</div>
<div class="absolute bottom-2 right-3">
<h5 class="h5 text-right">{ramState.availableSize} kb</h5>
<p>Usage Available</p>
</div>
</div>
<Button class="text-blue-400" variant="secondary" href="/{network}/ram">RAM Market</Button>
</Stack>
</Stack>
<Stack class="max-w-lg flex-1 gap-4">
<Stack class="gap-4 px-5 py-3">
<h3 class="h3">EOS Resources: A Simple Explanation</h3>
<p>
The EOS blockchain uses three main resources: CPU, NET, and RAM. Users need these resources
to interact with smart contracts and perform actions on the EOS blockchain. Managing these
resources is crucial for efficient use of the EOS network.
</p>
</Stack>
<ul class="space-y-0 md:space-y-4">
{#each explanations as explanation}
<li class="grid grid-cols-[25%_75%]">
<div class="flex justify-center pl-5 pt-5">
{#if explanation.icon}
<img src={explanation.icon} class="size-6" alt={`${explanation.name} icon`} />
{/if}
</div>
<div class="space-y-4 px-5 py-3">
<h3 class="h5 text-white">{explanation.title}</h3>
<ul class="space-y-1">
{#each explanation.descriptions as desc}
<li>- {desc}</li>
{/each}
</ul>
</div>
</li>
{/each}
</ul>
</Stack>
</div>

0 comments on commit db4e445

Please sign in to comment.