-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9e4ee19
commit e8c4b97
Showing
9 changed files
with
228 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { format, formatDistanceToNowStrict } from 'date-fns'; | ||
| import { es } from 'date-fns/locale'; | ||
| import { ArrowRight } from 'lucide-react'; | ||
| import Image from 'next/image'; | ||
| import { useLocale, useTranslations } from 'next-intl'; | ||
| import { FC } from 'react'; | ||
|
|
||
| import bitcoin from '/public/images/bitcoin.png'; | ||
| import liquid from '/public/images/liquid.jpg'; | ||
| import { SimpleSwap } from '@/graphql/types'; | ||
| import { numberWithPrecisionAndDecimals } from '@/utils/numbers'; | ||
|
|
||
| const AssetLogo: FC<{ coin: string }> = ({ coin }) => { | ||
| const classname = 'h-10 w-10 rounded-full object-cover'; | ||
|
|
||
| switch (coin) { | ||
| case 'BTC': | ||
| return <Image src={bitcoin} alt="bitcoin" className={classname} />; | ||
| case 'L-BTC': | ||
| return <Image src={liquid} alt="liquid" className={classname} />; | ||
| default: | ||
| return <div className="h-10 w-10 rounded-full bg-primary" />; | ||
| } | ||
| }; | ||
|
|
||
| export const Swap: FC<{ data: SimpleSwap }> = ({ data }) => { | ||
| const t = useTranslations(); | ||
| const locale = useLocale(); | ||
|
|
||
| return ( | ||
| <div className="w-full space-y-1 overflow-x-auto whitespace-nowrap rounded-xl bg-slate-100 px-2 py-1.5 dark:bg-neutral-900"> | ||
| <p className="text-center text-xs font-medium text-slate-600 dark:text-neutral-400"> | ||
| {data.provider} | ||
| </p> | ||
|
|
||
| <div className="flex w-full items-center justify-between space-x-2"> | ||
| <div className="flex shrink-0 items-center space-x-2"> | ||
| <AssetLogo coin={data.deposit_coin} /> | ||
|
|
||
| <div> | ||
| <p className="font-medium"> | ||
| {data.deposit_amount | ||
| ? numberWithPrecisionAndDecimals(data.deposit_amount, 0) | ||
| : '-'} | ||
| </p> | ||
|
|
||
| <p className="text-sm font-medium text-slate-600 dark:text-neutral-400"> | ||
| {data.deposit_coin} | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ArrowRight size={20} className="shrink-0" /> | ||
|
|
||
| <div className="flex shrink-0 items-center space-x-2"> | ||
| <div className="text-right"> | ||
| <p className="font-medium"> | ||
| {data.settle_amount | ||
| ? numberWithPrecisionAndDecimals(data.settle_amount, 0) | ||
| : '-'} | ||
| </p> | ||
|
|
||
| <p className="text-sm font-medium text-slate-600 dark:text-neutral-400"> | ||
| {data.settle_coin} | ||
| </p> | ||
| </div> | ||
|
|
||
| <AssetLogo coin={data.settle_coin} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="text-center text-xs font-medium text-slate-600 dark:text-neutral-400"> | ||
| {format(data.created_at, 'MMM dd, yyyy - HH:mm', { | ||
| locale: locale === 'es' ? es : undefined, | ||
| })}{' '} | ||
| ( | ||
| {locale === 'es' | ||
| ? t('App.Wallet.ago') + | ||
| ' ' + | ||
| formatDistanceToNowStrict(data.created_at, { | ||
| locale: es, | ||
| }) | ||
| : formatDistanceToNowStrict(data.created_at) + | ||
| ' ' + | ||
| t('App.Wallet.ago')} | ||
| ) | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,105 +1,55 @@ | ||
| 'use client'; | ||
|
|
||
| import { ColumnDef } from '@tanstack/react-table'; | ||
| import { format, formatDistanceToNowStrict } from 'date-fns'; | ||
| import { ChevronRight, Loader2 } from 'lucide-react'; | ||
| import { useTranslations } from 'next-intl'; | ||
| import { useLocalStorage } from 'usehooks-ts'; | ||
|
|
||
| import { useToast } from '@/components/ui/use-toast'; | ||
| import { useGetWalletSwapsQuery } from '@/graphql/queries/__generated__/swaps.generated'; | ||
| import { SimpleSwap } from '@/graphql/types'; | ||
| import { LOCALSTORAGE_KEYS } from '@/utils/constants'; | ||
| import { numberWithPrecisionAndDecimals } from '@/utils/numbers'; | ||
| import { handleApolloError } from '@/utils/error'; | ||
|
|
||
| import { SimpleTable } from '../wallet/SimpleTable'; | ||
| import { Swap } from './Swap'; | ||
| import { SwapsTable } from './SwapsTable'; | ||
|
|
||
| export const columns: ColumnDef<SimpleSwap>[] = [ | ||
| { | ||
| accessorKey: 'date', | ||
| header: 'Date', | ||
| cell: ({ row }) => | ||
| row.original.created_at ? ( | ||
| <div> | ||
| {`${formatDistanceToNowStrict(row.original.created_at)} ago`} | ||
| <p className="mt-1 text-xs text-slate-500 dark:text-slate-400"> | ||
| {format(row.original.created_at, 'MMM do, yyyy - HH:mm')} | ||
| </p> | ||
| </div> | ||
| ) : ( | ||
| 'Pending' | ||
| ), | ||
| }, | ||
| { | ||
| accessorKey: 'pair', | ||
| header: 'Pair', | ||
| cell: ({ row }) => ( | ||
| <div className="flex items-center justify-start gap-2"> | ||
| <div> | ||
| <p className="mt-1 text-xs text-slate-500 dark:text-slate-400"> | ||
| From | ||
| </p> | ||
| <div className="flex gap-1"> | ||
| {row.original.deposit_amount ? ( | ||
| <p> | ||
| {numberWithPrecisionAndDecimals(row.original.deposit_amount, 0)} | ||
| </p> | ||
| ) : null} | ||
| <p>{row.original.deposit_coin}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ChevronRight className="size-4" /> | ||
|
|
||
| <div> | ||
| <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">To</p> | ||
| <div className="flex gap-1"> | ||
| {row.original.settle_amount ? ( | ||
| <p> | ||
| {numberWithPrecisionAndDecimals(row.original.settle_amount, 0)} | ||
| </p> | ||
| ) : null} | ||
| <p>{row.original.settle_coin}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ), | ||
| }, | ||
| { | ||
| accessorKey: 'provider', | ||
| header: 'Provider', | ||
| cell: ({ row }) => <div>{row.original.provider}</div>, | ||
| id: 'swap', | ||
| cell: ({ row }) => <Swap data={row.original} />, | ||
| }, | ||
| ]; | ||
|
|
||
| export const Swaps = () => { | ||
| const t = useTranslations('Index'); | ||
| const { toast } = useToast(); | ||
|
|
||
| const [value] = useLocalStorage(LOCALSTORAGE_KEYS.currentWalletId, ''); | ||
|
|
||
| const { data, loading, error } = useGetWalletSwapsQuery({ | ||
| const { data, loading } = useGetWalletSwapsQuery({ | ||
| variables: { id: value }, | ||
| onError: err => { | ||
| const messages = handleApolloError(err); | ||
|
|
||
| toast({ | ||
| variant: 'destructive', | ||
| title: 'Error getting swaps.', | ||
| description: messages.join(', '), | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| console.log(data?.wallets?.find_one?.swaps?.find_many?.[0]); | ||
| const swaps = data?.wallets.find_one.swaps.find_many || []; | ||
|
|
||
| return ( | ||
| <div className="py-4"> | ||
| <h2 className="scroll-m-20 pb-4 text-xl font-semibold tracking-tight"> | ||
| Swaps | ||
| </h2> | ||
| {loading ? ( | ||
| <div className="my-10 flex w-full justify-center"> | ||
| <Loader2 className="animate-spin" /> | ||
| </div> | ||
| ) : error ? ( | ||
| <div className="my-4 flex w-full justify-center"> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Error loading wallet swaps | ||
| </p> | ||
| </div> | ||
| ) : ( | ||
| <SimpleTable<SimpleSwap> | ||
| data={data?.wallets.find_one.swaps.find_many || []} | ||
| columns={columns} | ||
| /> | ||
| )} | ||
| <div className="mx-auto w-full max-w-lg py-4 lg:py-10"> | ||
| <h1 className="mb-6 text-3xl font-semibold">{t('swaps')}</h1> | ||
|
|
||
| <SwapsTable<SimpleSwap> | ||
| data={swaps} | ||
| columns={columns} | ||
| loading={loading} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.