Skip to content

Commit

Permalink
fix: responsive view
Browse files Browse the repository at this point in the history
  • Loading branch information
@minikas
minikas committed Jun 18, 2024
1 parent fefef1d commit ec32d2d
Show file tree
Hide file tree
Showing 7 changed files with 252 additions and 58 deletions.
34 changes: 17 additions & 17 deletions apps/hestia/src/components/direct/History/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,6 @@ import { Transaction } from "@/hooks";
const columnHelper = createColumnHelper<Transaction>();

export const columns = [
columnHelper.accessor((row) => row.timestamp, {
id: "date",
cell: (e) => {
const date = formatedDate(new Date(e.getValue()), false);
return (
<Typography.Text size="sm" className=" whitespace-nowrap">
{date}
</Typography.Text>
);
},
header: () => (
<Typography.Text size="xs" appearance="primary">
Date
</Typography.Text>
),
footer: (e) => e.column.id,
}),
columnHelper.accessor((row) => row, {
id: "token",
cell: (e) => {
Expand Down Expand Up @@ -107,4 +90,21 @@ export const columns = [
),
footer: (e) => e.column.id,
}),
columnHelper.accessor((row) => row.timestamp, {
id: "date",
cell: (e) => {
const date = formatedDate(new Date(e.getValue()), false);
return (
<Typography.Text size="sm" className=" whitespace-nowrap">
{date}
</Typography.Text>
);
},
header: () => (
<Typography.Text size="xs" appearance="primary">
Date
</Typography.Text>
),
footer: (e) => e.column.id,
}),
];
4 changes: 2 additions & 2 deletions apps/hestia/src/components/direct/History/filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const Filters = <TData,>({
{table.getColumn("source") && (
<FacetedFilter
column={table.getColumn("source")}
title="Source chain"
title="Chain"
values={availableChains}
/>
)}
Expand Down Expand Up @@ -119,7 +119,7 @@ export const Filters = <TData,>({
{table.getColumn("source") && (
<FacetedFilter
column={table.getColumn("source")}
title="Source chain"
title="Chain"
values={availableChains}
/>
)}
Expand Down
59 changes: 49 additions & 10 deletions apps/hestia/src/components/direct/History/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@ import {
import classNames from "classnames";
import { useWindowSize } from "usehooks-ts";
import { useProfile } from "@orderbook/core/providers/user/profile";
import { toUnit } from "@polkadex/numericals";

import { columns } from "./columns";
import { Filters } from "./filters";
import { ResponsiveTable } from "./responsiveTable";

import { Transaction } from "@/hooks";

const actionKeys = ["token", "date"];
const responsiveKeys = ["hash", "date"];

Expand All @@ -40,21 +43,23 @@ export const History = forwardRef<
} = useProfile();

const [responsiveState, setResponsiveState] = useState(false);
const [responsiveData, setResponsiveData] = useState<any | null>(null);
const [responsiveData, setResponsiveData] = useState<Transaction | null>(
null
);
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

const { width } = useWindowSize();

const deposits: any = [];
const depositsLoading: any = false;
const depositsRefetching: any = false;
const onDepositsRefetch = () => {};
const deposits: any = fakeData;
const depositsLoading = false;
const depositsRefetching = false;
const onDepositsRefetch = useCallback(() => {}, []);

const withdrawals: any = [];
const withdrawalsLoading: any = false;
const withdrawalsRefetching: any = false;
const onWithdrawalsRefetch = () => {};
const withdrawals = useMemo(() => [], []);
const withdrawalsLoading = false;
const withdrawalsRefetching = false;
const onWithdrawalsRefetch = useCallback(() => {}, []);

const onRefetch = useCallback(async () => {
await onDepositsRefetch();
Expand Down Expand Up @@ -203,7 +208,9 @@ export const History = forwardRef<
</Table.Row>
))}
</Table.Body>
<Table.Caption>Bridge history table</Table.Caption>
<Table.Caption>
Deposits/Withdrawals history table
</Table.Caption>
</Table>
</div>
</div>
Expand All @@ -223,3 +230,35 @@ export const History = forwardRef<
});

History.displayName = "History";

const fakeData = [
{
timestamp: Number(new Date().getTime()),
amount: toUnit(10, 12),
asset: {
id: "2",
ticker: "PDEX",
logo: "PDEX",
name: "Polkadex",
decimal: 12,
},
from: {
name: "Polkadex",
logo: "Polkadex",
genesis: "0x001",
type: "...",
isTestnet: false,
},
id: 1,
to: {
name: "Polkadot",
logo: "Polkadot",
genesis: "0x003",
type: "...",
isTestnet: false,
},
status: "Completed",
hash: "0x00001",
isDeposit: true,
},
];
47 changes: 33 additions & 14 deletions ...a/src/components/direct/Deposit/index.tsx → .../hestia/src/components/direct/deposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ import {
Tooltip,
AccountCombobox,
} from "@polkadex/ux";
import { RiInformationFill } from "@remixicon/react";
import { RiCheckLine, RiInformationFill } from "@remixicon/react";
import classNames from "classnames";
import { useMeasure } from "react-use";
import { useState } from "react";

import { SelectNetwork, fakeNetworks } from "../selectNetwork";
import { SelectAsset } from "../selectAsset";
import { SelectNetwork, fakeNetworks } from "./selectNetwork";
import { SelectAsset } from "./selectAsset";

export const Deposit = () => {
const [ref, bounds] = useMeasure<HTMLDivElement>();
Expand All @@ -24,17 +24,27 @@ export const Deposit = () => {
const isEVM = network.genesis === "0x006";

return (
<div className="flex flex-col max-w-[500px]">
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-2">
<Typography.Text size="lg" bold>
<div className="flex flex-col md:max-w-[500px] py-8 max-md:pl-6">
<div className="flex flex-col">
<div className="flex flex-col gap-2 border-l-2 border-success-base px-8 pb-5 relative">
<Typography.Heading size="lg" className="leading-none">
Deposit to
</Typography.Text>
</Typography.Heading>
<SelectNetwork network={network} setNetwork={(e) => setNetwork(e)} />
<div className="flex item-center justify-center bg-success-base rounded-full w-4 h-4 p-0.5 absolute top-0 -left-2.5">
<RiCheckLine className="w-full h-full" />
</div>
</div>
<div className="flex flex-col gap-2">
<div
className={classNames(
isEVM && "border-l-2 border-success-base",
"flex flex-col gap-2 pb-5 px-8 relative"
)}
>
<div className="flex items-center justify-between gap-2">
<Typography.Heading>Asset</Typography.Heading>
<Typography.Heading size="lg" className="leading-none">
Asset
</Typography.Heading>
<HoverInformation>
<HoverInformation.Trigger className="min-w-20">
<RiInformationFill className="w-3 h-3 text-actionInput" />
Expand Down Expand Up @@ -93,20 +103,29 @@ export const Deposit = () => {
</Tooltip>
</div>
</div>
<div className="flex item-center justify-center bg-success-base rounded-full w-4 h-4 p-0.5 absolute top-0 -left-2.5">
<RiCheckLine className="w-full h-full" />
</div>
</div>

{isEVM && (
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 px-8 pb-5 relative">
<Typography.Text size="lg" bold>
Address
</Typography.Text>
<div className="border border-primary rounded-sm px-2 py-4">
<AccountCombobox account={null} setAccount={(e) => {}} />
<AccountCombobox account={null} setAccount={() => {}} />
</div>
<div className="flex item-center justify-center bg-success-base rounded-full w-4 h-4 p-0.5 absolute top-0 -left-2.5">
<RiCheckLine className="w-full h-full" />
</div>
</div>
)}

<Button.Light appearance="secondary">Withdraw</Button.Light>
<div className="px-8 w-full">
<Button.Light className="w-full" appearance="secondary">
Deposit
</Button.Light>
</div>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/hestia/src/components/direct/faq.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import React from "react";

export const Faq = () => {
return (
<div className="flex flex-col gap-4 p-6">
<div className="flex flex-col gap-4 max-md:p-4 md:p-6">
<Typography.Heading type="h2">FAQ</Typography.Heading>
<div className="flex flex-col gap-2 max-w-[200px]">
<div className="flex flex-col gap-2 md:max-w-[200px]">
{fakeNews.map((e) => (
<Link
key={e.id}
Expand Down
30 changes: 17 additions & 13 deletions apps/hestia/src/components/direct/template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { useMeasure } from "react-use";
import { ResponsiveProfile } from "../ui/Header/Profile/responsiveProfile";

import { Help } from "./help";
import { Deposit } from "./Deposit";
import { Deposit } from "./deposit";
import { Withdraw } from "./withdraw";
import { History } from "./History";
import { Faq } from "./faq";

Expand Down Expand Up @@ -46,29 +47,34 @@ export function Template() {
paddingBottom,
}}
>
<div className="flex-1 flex flex-col min-h-[360px]">
<Tabs className="flex flex-row flex-1" defaultValue="deposit">
<div className="flex-1 flex flex-col">
<Tabs
className="flex flex-row flex-1 md:min-h-[430px] max-md:flex-col md:flex-row"
defaultValue="deposit"
>
<div className="flex flex-col">
<Tabs.List className="flex flex-col items-start gap-0 py-4">
<Tabs.List className="flex max-md:flex-row md:flex-col items-start gap-0 py-4">
<Tabs.Trigger
className="pl-4 pr-8 py-2 w-full text-left"
className="pl-4 md:pr-10 py-2 md:w-full text-left data-[state=active]:text-success-base data-[state=active]:hover:text-success-hover"
value="deposit"
>
Deposit
</Tabs.Trigger>
<Tabs.Trigger
className="pl-4 pr-8 py-2 w-full text-left"
className="pl-4 md:pr-10 py-2 md:w-full text-left"
value="withdraw"
>
Withdraw
</Tabs.Trigger>
</Tabs.List>
</div>
<div className="flex flex-1 border-x border-primary p-8">
<div className="flex flex-1 border-x border-primary">
<Tabs.Content value="deposit">
<Deposit />
</Tabs.Content>
<Tabs.Content value="withdraw">Withdraw</Tabs.Content>
<Tabs.Content value="withdraw">
<Withdraw />
</Tabs.Content>
</div>
<Faq />
</Tabs>
Expand All @@ -82,11 +88,9 @@ export function Template() {
<Tabs.Trigger value="history">History</Tabs.Trigger>
</Tabs.List>
{extensionAccountPresent ? (
<Fragment>
<Tabs.Content value="history" className="flex flex-col">
<History searchTerm="" />
</Tabs.Content>
</Fragment>
<Tabs.Content value="history" className="flex flex-col">
<History searchTerm="" />
</Tabs.Content>
) : (
<GenericMessage
title="Connect a wallet"
Expand Down
Loading

0 comments on commit ec32d2d

Please sign in to comment.