Skip to content

Commit

Permalink
Add address view to app explorer (#2627)
Browse files Browse the repository at this point in the history
  • Loading branch information
cor authored Aug 6, 2024
2 parents d4b4a40 + 09b3e6c commit 91c27bf
Show file tree
Hide file tree
Showing 87 changed files with 2,268 additions and 27,171 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -71,3 +71,6 @@ data/
.cursorignore
.netlify
.stackbit
fbef3d1a-8b84-4eb5-937c-06f78b1a1347
db.sqlite
db.sqlite3*
4 changes: 2 additions & 2 deletions app/.env.example
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
NODE_ENV="development"
PORT=5433
NODE_ENV="development"

HASURA_ADMIN_SECRET=""
DEBUG_TABLE=false
2 changes: 1 addition & 1 deletion app/app.nix
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{
packages = {
app = unstablePkgs.buildNpmPackage {
npmDepsHash = "sha256-PGRqqSoDeofuxWD8d7xwYYIOoiKj5Y8YlpQgdkuxs/0=";
npmDepsHash = "sha256-xgWvY38HJJSErFFVvXAHUf7myWOKfq7h4HAYQyvgyXk=";
src = ./.;
sourceRoot = "app";
npmFlags = [ "--legacy-peer-deps" ];
Expand Down
1,002 changes: 500 additions & 502 deletions app/package-lock.json

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"start": "npm_config_yes=true npx serve@latest build",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test": "vitest --run",
Expand All @@ -23,9 +24,9 @@
"@tanstack/svelte-query": "^5.51.15",
"@tanstack/svelte-query-persist-client": "^5.51.15",
"@tanstack/svelte-table": "^8.19.3",
"@union/client": "npm:@jsr/union__client@^0.0.1-rc.49",
"@tanstack/svelte-virtual": "^3.8.4",
"@union/client": "npm:@jsr/union__client@^0.0.1-rc.19",
"@wagmi/connectors": "^5.1.1",
"@wagmi/connectors": "^5.1.2",
"@wagmi/core": "^2.13.1",
"bech32": "^2.0.0",
"bits-ui": "^0.21.13",
Expand All @@ -38,22 +39,21 @@
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.27",
"svelte-ux": "^0.73.3",
"three": "^0.167.0",
"temporal-polyfill": "^0.2.5",
"three": "^0.167.0",
"uint8array-extras": "^1.4.0",
"valibot": "^0.37.0",
"vaul-svelte": "^0.3.2",
"viem": "^2.18.5"
"viem": "^2.18.8"
},
"devDependencies": {
"@types/three": "^0.167.1",
"@cosmjs/tendermint-rpc": "0.32.4",
"@iconify-json/fa6-solid": "^1.1.23",
"@iconify-json/logos": "^1.1.43",
"@iconify-json/lucide": "^1.1.203",
"@iconify-json/mdi": "^1.1.67",
"@iconify-json/tabler": "^1.1.118",
"@keplr-wallet/types": "^0.12.117",
"@keplr-wallet/types": "^0.12.119",
"@leapwallet/types": "^0.0.5",
"@melt-ui/pp": "^0.3.2",
"@melt-ui/svelte": "^0.83.0",
Expand All @@ -69,6 +69,7 @@
"@total-typescript/ts-reset": "^0.5.1",
"@types/node": "^22.0.0",
"@types/postcss-import": "^14.0.3",
"@types/three": "^0.167.1",
"autoprefixer": "^10.4.19",
"buffer": "^6.0.3",
"clsx": "^2.1.1",
Expand Down
26,007 changes: 307 additions & 25,700 deletions app/src/generated/graphql-env.d.ts

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion app/src/lib/actions/copy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export function copyTextAction<K extends keyof HTMLElementEventMap>(
let { trigger, text, events, enabled, synthetic } = resolveConfiguration(node, parameters)

const handle = async (event: HTMLElementEventMap[K]) => {
console.log(event)
const _text = await text({ node, trigger, event })
copyToClipboard(_text)
const detail = { text: _text }
Expand Down
56 changes: 38 additions & 18 deletions app/src/lib/components/connect/connect.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -42,37 +42,44 @@ $: if ($navigating) sheetOpen = false
<Button
builders={[builder]}
class={cn(
'space-x-2 w-[189px] text-md bg-accent text-black hover:bg-cyan-300/90',
($sepoliaStore.connectionStatus === 'connected' &&
$cosmosStore.connectionStatus === 'connected')
"space-x-2 w-[189px] text-md bg-accent text-black hover:bg-cyan-300/90",
$sepoliaStore.connectionStatus === "connected" &&
$cosmosStore.connectionStatus === "connected"
)}
on:click={() => (sheetOpen = !sheetOpen)}
size="sm"
>
<WalletIcon class="size-4 text-black"/>
<WalletIcon class="size-4 text-black" />
<span class="font-supermolot font-bold uppercase">{buttonText}</span>
</Button>
</Sheet.Trigger>
<Sheet.Content
class={cn("h-full border-solid border-left flex flex-col justify-start",
'min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]'
,
'overflow-y-auto'
class={cn(
"h-full border-solid border-left flex flex-col justify-start",
"min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]",
"overflow-y-auto"
)}
>
<Sheet.Header class="pl-2">
<Sheet.Title class="flex gap-4 items-center">
<!-- Connect Wallet -->
<Avatar.Root
class={cn('size-10', $sepoliaStore.connectionStatus !== 'connected' && 'hidden')}
class={cn(
"size-10",
$sepoliaStore.connectionStatus !== "connected" && "hidden"
)}
>
<Avatar.Image
alt="ethereum avatar"
src={`https://effigy.im/a/${$sepoliaStore.address || '0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd'}.png`}
src={`https://effigy.im/a/${$sepoliaStore.address || "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd"}.png`}
/>
<Avatar.Fallback>UN</Avatar.Fallback>
</Avatar.Root>
<h2 class=" text-start w-full text-2xl font-bold uppercase font-supermolot">Connect Wallets</h2>
<h2
class=" text-start w-full text-2xl font-bold uppercase font-supermolot"
>
Connect Wallets
</h2>
</Sheet.Title>
</Sheet.Header>
<Connection
Expand All @@ -85,7 +92,7 @@ $: if ($navigating) sheetOpen = false
onConnectClick={sepoliaStore.connect}
onDisconnectClick={sepoliaStore.disconnect}
/>
<Separator class={cn('px-0 bg-border -mt-5')} />
<Separator class={cn("px-0 bg-border -mt-5")} />
<Connection
address={$cosmosStore.address}
chain="cosmos"
Expand All @@ -98,12 +105,17 @@ $: if ($navigating) sheetOpen = false
/>
<div class="mt-auto flex justify-between">
<div class="flex items-center space-x-2">
<Switch bind:checked={$showUnsupported} id="unsupported-assets"/>
<Switch bind:checked={$showUnsupported} id="unsupported-assets" />
<Label for="unsupported-assets">Show unverified assets</Label>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="default" size="icon" class="hover:text-black hover:bg-accent">
<Button
builders={[builder]}
variant="default"
size="icon"
class="hover:text-black hover:bg-accent"
>
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
Expand All @@ -115,13 +127,21 @@ $: if ($navigating) sheetOpen = false
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-fit rounded-none bg-secondary">
<DropdownMenu.Group>
<DropdownMenu.Item on:click={() => setMode('system')} class="cursor-pointer">System</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => setMode('dark')} class="cursor-pointer">Dark</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => setMode('light')} class="cursor-pointer">Light</DropdownMenu.Item>
<DropdownMenu.Item
on:click={() => setMode("system")}
class="cursor-pointer">System</DropdownMenu.Item
>
<DropdownMenu.Item
on:click={() => setMode("dark")}
class="cursor-pointer">Dark</DropdownMenu.Item
>
<DropdownMenu.Item
on:click={() => setMode("light")}
class="cursor-pointer">Light</DropdownMenu.Item
>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</Sheet.Content>
</Sheet.Root>

3 changes: 1 addition & 2 deletions app/src/lib/components/dev-tools.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const queryClient = useQueryClient()
{
key: 'd',
modifier: ['ctrl'],
callback: () => {
callback: (_shortCutEventDetail) => {
if (import.meta.env.MODE !== 'development') return
console.info('Clearing cache and local storage')
toast.warning('Clearing cache and local storage')
Expand All @@ -26,7 +26,6 @@ const queryClient = useQueryClient()
queryClient.cancelQueries()
queryClient.invalidateQueries()
queryClient.unmount()
localStorage.clear()
if (typeof window === 'undefined') return
window.localStorage.clear()
window.sessionStorage.clear()
Expand Down
2 changes: 1 addition & 1 deletion app/src/lib/components/header/header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { routes } from "$lib/components/navigation/index.ts"
? 'hidden'
: [
'',
$page.route.id?.split('/')[1] === path.split('/')[1] ? 'bg-foreground text-primary-foreground !hover:bg-foreground !hover:text-primary-foreground' : '',
currentRoute ? 'bg-foreground text-primary-foreground !hover:bg-foreground !hover:text-primary-foreground' : '',
],
)}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { truncate } from "$lib/utilities/format"
import { cn } from "$lib/utilities/shadcn.ts"
import { truncate } from "$lib/utilities/format"
import ExplorerPrecise from "$lib/components/explorer-precise.svelte"
export let value: object
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { cn } from "$lib/utilities/shadcn.ts"
import CopyIcon from "virtual:icons/lucide/copy"
import { Button } from "$lib/components/ui/button"
import CheckIcon from "virtual:icons/lucide/check"
Expand All @@ -11,8 +12,10 @@ export let trunc = 0
let copyClicked = false
const toggleCopy = () => (copyClicked = !copyClicked)
const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
</script>
export let buttonClass = ""
export { buttonClass as class }
</script>

<div class="text-start flex items-center gap-2 group cursor-default">
{#if trunc}
Expand All @@ -21,18 +24,19 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
{value}
{/if}
<Button
builders={[{ action: node => copyTextAction(node, { text: value }) }]}
class="bg-transparent hover:bg-transparent opacity-0 group-hover:opacity-100 transition h-5 w-5"
builders={[{ action: (node) => copyTextAction(node, { text: value }) }]}
class={cn(
"bg-transparent hover:bg-transparent opacity-0 group-hover:opacity-100 transition h-5 w-5",
buttonClass
)}
on:click={onCopyClick}
size="icon"
variant="ghost"
>
{#if copyClicked}
<CheckIcon class="size-4"/>
<CheckIcon class="size-4 text-emerald-500" />
{:else}
<CopyIcon class="size-4"/>
<CopyIcon class="size-4" />
{/if}
</Button>
</div>


76 changes: 76 additions & 0 deletions app/src/lib/components/table-cells/cell-icon-tooltip.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<script lang="ts">
import { cn } from "$lib/utilities/shadcn.ts"
import EyeIcon from "virtual:icons/lucide/eye"
import CopyIcon from "virtual:icons/lucide/copy"
import CheckIcon from "virtual:icons/lucide/check"
import { copyTextAction } from "$lib/actions/copy"
import { truncate } from "$lib/utilities/format.ts"
import { Button } from "$lib/components/ui/button/index.ts"
import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
export let records: Array<{
index: number
hash: string
label: string
truncateSize: number
}>
let copyClicked = false
const toggleCopy = () => (copyClicked = !copyClicked)
const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 3_000)]
</script>

<div class="w-full flex items-center group cursor-default mx-3.5">
<Tooltip.Root let:ids>
<Tooltip.Trigger asChild let:builder class="size-full">
<Button
size="default"
variant="outline"
class="size-9 p-1"
builders={[builder]}
>
<EyeIcon class="size-7" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content
side="right"
align="start"
sideOffset={7}
alignOffset={0}
class={cn(
"w-[425px]",
"px-1 bg-card shadow-lg",
`h-[${records.length * 11}px]`
)}
>
{#each records as record, index}
<Button
size="default"
variant="secondary"
on:click={onCopyClick}
builders={[
{ action: (node) => copyTextAction(node, { text: record.hash }) }
]}
class={cn(
"flex-1 justify-end w-full px-2",
"bg-transparent hover:bg-transparent group-hover:opacity-100 transition h-7"
)}
>
<span class="font-medium text-zinc-400 mr-auto">{record.label}</span>
<span class="font-mono tabular-nums text-white ml-auto mr-3">
{#if record.truncateSize}
{truncate(record.hash, record.truncateSize)}
{:else}
{record.hash}
{/if}
</span>
{#if copyClicked}
<CheckIcon class="size-5 text-green-500" />
{:else}
<CopyIcon class="size-5 text-primary" />
{/if}
</Button>
{/each}
</Tooltip.Content>
</Tooltip.Root>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ import Button from "$lib/components/ui/button/button.svelte"
import ChevronRight from "virtual:icons/lucide/chevron-right"
import * as Pagination from "$lib/components/ui/pagination/index.ts"
export let rowsPerPage: number
export let totalTableRows: number
export let timestamp: string
export let status: "pending" | "done" = "done"
Expand All @@ -21,17 +18,14 @@ export let onNewerPage: (page: number) => void
export let newerDisabled = false
export let onCurrentClick: () => void
export let className = ""
export { className as class }
</script>

<Pagination.Root
let:pages
siblingCount={2000}
perPage={rowsPerPage}
class={cn(className)}
count={totalTableRows}
perPage={20}
class="w-auto"
count={20}
>
<Pagination.Content
class="py-2 text-sm uppercase font-supermolot w-full flex gap-x-1"
Expand Down
Loading

0 comments on commit 91c27bf

Please sign in to comment.