Skip to content

Commit

Permalink
display block explorer popup on token selection hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@eli-d
eli-d committed Nov 26, 2024
1 parent f60b4d6 commit 01a56ee
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 50 deletions.
85 changes: 62 additions & 23 deletions ...app/stake/pool/create/select-prime-asset/_SelectPrimeAssetTable/SelectPrimeAssetTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ import { useStakeStore } from "@/stores/useStakeStore";
import { useTokens } from "@/config/tokens";
import { rankItem } from "@tanstack/match-sorter-utils";
import { useState } from "react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
Expand Down Expand Up @@ -126,29 +132,62 @@ export function SelectPrimeAssetTable<TData, TValue>({
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="cursor-pointer border-b-0"
onClick={() => {
// assume the first token is always the original
const [token0] = row.original.tokens;
setToken0(token0);
setToken1(fUSDC);
router.push(`/stake/pool/create?id=${token0.address}`);
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="p-0 py-[4px] text-2xs">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))
table.getRowModel().rows.map((row) => {
const token0Address = row.original.token0Address; // Access token0Address from row data
const blockExplorerUrl = `https://testnet-explorer.superposition.so/address/${token0Address}`;

return (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="relative cursor-pointer border-b-0"
onClick={() => {
// assume the first token is always the original
const [token0] = row.original.tokens;
setToken0(token0);
setToken1(fUSDC);
router.push(`/stake/pool/create?id=${token0.address}`);
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
className="p-0 py-[4px] text-2xs"
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
{cell.column.getIndex() === 0 ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="absolute inset-0" />
<TooltipContent
side={"bottom"}
className="relative flex justify-center overflow-visible bg-black p-0 text-white"
>
<div className="absolute -top-1 z-20 border-x-4 border-b-4 border-transparent border-b-black" />
<a
onClick={(e) => e.stopPropagation()}
href={blockExplorerUrl}
target="_blank"
className="px-3 py-1.5 text-xs"
>
See on block explorer{" "}
<span className="inline-block -rotate-45">
-&gt;
</span>
{/* ↗️ */}
</a>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
</TableCell>
))}
</TableRow>
);
})
) : (
<TableRow>
<TableCell
Expand Down
93 changes: 66 additions & 27 deletions web/src/app/swap/explore/_AllAssetsTable/AllAssetsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ import { useState } from "react";
import { rankItem } from "@tanstack/match-sorter-utils";
import { useSwapStore } from "@/stores/useSwapStore";
import { useRouter } from "next/navigation";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";

interface AllPoolsTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
Expand Down Expand Up @@ -151,33 +157,66 @@ export function AllAssetsTable<TData, TValue>({
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="cursor-pointer border-b-0 text-[10px] hover:bg-black md:text-xs"
onClick={() => {
const {
original: { token: rowToken },
} = row;
const { address } = rowToken;
if (token === "0") {
if (address === token1.address) flipTokens();
else setToken0(rowToken);
} else if (token === "1") {
if (address === token0.address) flipTokens();
else setToken1(rowToken);
}
router.back();
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="h-8 p-0">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
table.getRowModel().rows.map((row) => {
const tokenAddress = row.original.address; // Access address from row data
const blockExplorerUrl = `https://testnet-explorer.superposition.so/address/${tokenAddress}`;

return (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="relative cursor-pointer border-b-0 text-[10px] hover:bg-black md:text-xs"
onClick={() => {
const {
original: { token: rowToken },
} = row;
const { address } = rowToken;
if (token === "0") {
if (address === token1.address) flipTokens();
else setToken0(rowToken);
} else if (token === "1") {
if (address === token0.address) flipTokens();
else setToken1(rowToken);
}
router.back();
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id} className="h-8 p-0">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
{cell.column.getIndex() === 0 ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="absolute inset-0" />
<TooltipContent
side={"bottom"}
className="relative flex justify-center overflow-visible bg-black p-0 text-white"
>
<div className="absolute -top-1 z-20 border-x-4 border-b-4 border-transparent border-b-black" />
<a
onClick={(e) => e.stopPropagation()}
href={blockExplorerUrl}
target="_blank"
className="px-3 py-1.5 text-xs"
>
See on block explorer{" "}
<span className="inline-block -rotate-45">
-&gt;
</span>
{/* ↗️ */}
</a>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
</TableCell>
))}
</TableRow>
);
})
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
Expand Down

0 comments on commit 01a56ee

Please sign in to comment.