Skip to content

Commit

Permalink
Create Pool page, Increase Liquidity button
Browse files Browse the repository at this point in the history 
Create Pool page, Increase Liquidity button
  • Loading branch information
@lilchizh
lilchizh authored Mar 22, 2024
2 parents 4503ab2 + f5b2038 commit e341795
Show file tree
Hide file tree
Showing 33 changed files with 2,163 additions and 1,069 deletions.
156 changes: 78 additions & 78 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,80 @@
{
"name": "algebra-integral",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"wagmi-generate": "wagmi generate",
"build": "yarn codegen && yarn wagmi-generate && tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"codegen": "graphql-codegen --config codegen.ts "
},
"dependencies": {
"@apollo/client": "^3.8.4",
"@cryptoalgebra/integral-sdk": "^0.11.11",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@tanstack/react-table": "^8.10.4",
"@web3modal/wagmi": "^3.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"dayjs": "^1.11.10",
"fuse.js": "^7.0.0",
"graphql": "^16.8.1",
"jsbi": "^3.2.5",
"lightweight-charts": "^4.1.0",
"localforage": "^1.10.0",
"lodash.keyby": "^4.6.0",
"lodash.merge": "^4.6.2",
"lucide-react": "^0.279.0",
"match-sorter": "^6.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-window": "^1.8.10",
"recharts": "^2.8.0",
"sort-by": "^1.2.0",
"swr": "^2.2.4",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"usehooks-ts": "^2.9.1",
"vaul": "^0.9.0",
"viem": "^1.12.2",
"wagmi": "^1.4.2",
"zustand": "^4.4.1"
},
"devDependencies": {
"@graphql-codegen/cli": "5.0.0",
"@graphql-codegen/client-preset": "4.1.0",
"@graphql-codegen/typescript": "^4.0.1",
"@graphql-codegen/typescript-operations": "^4.0.1",
"@graphql-codegen/typescript-react-apollo": "^4.0.0",
"@types/lodash.keyby": "^4.6.7",
"@types/lodash.merge": "^4.6.9",
"@types/node": "^20.7.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"@wagmi/cli": "^1.5.2",
"autoprefixer": "^10.4.16",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.30",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
"name": "algebra-integral",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"wagmi-generate": "wagmi generate",
"build": "yarn codegen && yarn wagmi-generate && tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"codegen": "graphql-codegen --config codegen.ts "
},
"dependencies": {
"@apollo/client": "^3.8.4",
"@cryptoalgebra/integral-sdk": "^0.11.17",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@tanstack/react-table": "^8.10.4",
"@web3modal/wagmi": "^3.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"dayjs": "^1.11.10",
"fuse.js": "^7.0.0",
"graphql": "^16.8.1",
"jsbi": "^3.2.5",
"lightweight-charts": "^4.1.0",
"localforage": "^1.10.0",
"lodash.keyby": "^4.6.0",
"lodash.merge": "^4.6.2",
"lucide-react": "^0.279.0",
"match-sorter": "^6.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-window": "^1.8.10",
"recharts": "^2.8.0",
"sort-by": "^1.2.0",
"swr": "^2.2.4",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"usehooks-ts": "^2.9.1",
"vaul": "^0.9.0",
"viem": "^1.12.2",
"wagmi": "^1.4.2",
"zustand": "^4.4.1"
},
"devDependencies": {
"@graphql-codegen/cli": "5.0.0",
"@graphql-codegen/client-preset": "4.1.0",
"@graphql-codegen/typescript": "^4.0.1",
"@graphql-codegen/typescript-operations": "^4.0.1",
"@graphql-codegen/typescript-react-apollo": "^4.0.0",
"@types/lodash.keyby": "^4.6.7",
"@types/lodash.merge": "^4.6.9",
"@types/node": "^20.7.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"@wagmi/cli": "^1.5.2",
"autoprefixer": "^10.4.16",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.30",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}
2 changes: 1 addition & 1 deletion src/components/common/CurrencyLogo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const specialTokens: { [key: Address]: { symbol: string; logo: string } }

const CurrencyLogo = ({ currency, size, className, style = {} }: CurrencyLogoProps) => {

if (!currency) return <Skeleton className={cn(`flex rounded-full bg-card`, className)} style={{ minWidth: `${size}px`, minHeight: `${size}px`, width: `${size}px`, height: `${size}px`, ...style }} />
if (!currency) return <Skeleton className={cn(`flex rounded-full bg-card-dark`, className)} style={{ minWidth: `${size}px`, minHeight: `${size}px`, width: `${size}px`, height: `${size}px`, ...style }} />

const address = currency.wrapped.address.toLowerCase() as Address;

Expand Down
22 changes: 22 additions & 0 deletions src/components/common/PoweredByAlgebra/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import AlgebraLogo from '@/assets/algebra-logo.svg';
import AlgebraIntegral from '@/assets/algebra-itegral.svg';
import { cn } from '@/lib/utils';

const PoweredByAlgebra = ({ className }: { className?: string }) => {
return (
<a
href={'https://algebra.finance'}
className={cn('flex items-center gap-2 p-2', className)}
>
<span className="text-sm font-semibold">Powered by</span>
<div className="flex items-center gap-1">
<div className="flex items-center justify-center w-[18px] h-[18px] rounded-full">
<img src={AlgebraLogo} width={18} height={18} />
</div>
<img src={AlgebraIntegral} width={120} height={18} />
</div>
</a>
);
};

export default PoweredByAlgebra;
146 changes: 100 additions & 46 deletions src/components/common/Table/poolsColumns.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { ColumnDef } from "@tanstack/react-table";
import { HeaderItem } from "./common";
import { Address } from "wagmi";
import { useCurrency } from "@/hooks/common/useCurrency";
import CurrencyLogo from "../CurrencyLogo";
import { TokenFieldsFragment } from "@/graphql/generated/graphql";
import { DynamicFeePluginIcon } from "../PluginIcons";
import { formatUSD } from "@/utils/common/formatUSD";
import { usePoolPlugins } from "@/hooks/pools/usePoolPlugins";
import { Skeleton } from "@/components/ui/skeleton";
import { ColumnDef } from '@tanstack/react-table';
import { HeaderItem } from './common';
import { Address } from 'wagmi';
import { useCurrency } from '@/hooks/common/useCurrency';
import CurrencyLogo from '../CurrencyLogo';
import { TokenFieldsFragment } from '@/graphql/generated/graphql';
import { DynamicFeePluginIcon } from '../PluginIcons';
import { formatUSD } from '@/utils/common/formatUSD';
import { usePoolPlugins } from '@/hooks/pools/usePoolPlugins';
import { Skeleton } from '@/components/ui/skeleton';

interface Pair {
token0: TokenFieldsFragment;
Expand All @@ -20,67 +20,121 @@ interface Pool {
fee: number;
tvlUSD: number;
volume24USD: number;
apr: number;
maxApr: number;
avgApr: number;
}

const PoolPair = ({ pair, fee }: Pool) => {
const currencyA = useCurrency(pair.token0.id as Address);
const currencyB = useCurrency(pair.token1.id as Address);

const currencyA = useCurrency(pair.token0.id as Address)
const currencyB = useCurrency(pair.token1.id as Address)
return (
<div className="flex items-center gap-4 ml-2">
<div className="flex">
<CurrencyLogo currency={currencyA} size={30} />
<CurrencyLogo
currency={currencyB}
size={30}
className="-ml-2"
/>
</div>

return <div className="flex items-center gap-4 ml-2">
{currencyA && currencyB ? (
<div>{`${currencyA?.symbol} - ${currencyB?.symbol}`}</div>
) : (
<Skeleton className="h-[20px] w-[90px] bg-card" />
)}

<div className="flex">
<CurrencyLogo currency={currencyA} size={30} />
<CurrencyLogo currency={currencyB} size={30} className="-ml-2" />
<div className="bg-muted-primary text-primary-text rounded-xl px-2 py-1">{`${fee}%`}</div>
</div>

{currencyA && currencyB ? <div>{`${currencyA?.symbol} - ${currencyB?.symbol}`}</div> : <Skeleton className="h-[20px] w-[90px] bg-card" /> }

<div className="bg-muted-primary text-primary-text rounded-xl px-2 py-1">{`${fee}%`}</div>

</div>

}
);
};

const Plugins = ({ poolId }: { poolId: Address }) => {
const { dynamicFeePlugin } = usePoolPlugins(poolId);

const { dynamicFeePlugin } = usePoolPlugins(poolId)

return <div className="flex gap-2">
{dynamicFeePlugin && <DynamicFeePluginIcon />}
</div>
}
return (
<div className="flex gap-2">
{dynamicFeePlugin && <DynamicFeePluginIcon />}
</div>
);
};

export const poolsColumns: ColumnDef<Pool>[] = [
{
accessorKey: 'pair',
header: () => <HeaderItem className="ml-2">Pool</HeaderItem>,
cell: ({ row }) => <PoolPair {...row.original} />,
filterFn: (v, _, value) => [
v.original.pair.token0.symbol,
v.original.pair.token1.symbol ,
v.original.pair.token0.name,
v.original.pair.token1.name
].join(' ').toLowerCase().includes(value)
filterFn: (v, _, value) =>
[
v.original.pair.token0.symbol,
v.original.pair.token1.symbol,
v.original.pair.token0.name,
v.original.pair.token1.name,
]
.join(' ')
.toLowerCase()
.includes(value),
},
{
accessorKey: 'plugins',
header: () => <HeaderItem>Plugins</HeaderItem>,
header: () => <HeaderItem>Plugins</HeaderItem>,
cell: ({ row }) => <Plugins poolId={row.original.id} />,
},
{
accessorKey: 'tvlUSD',
header: ({ column }) => <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>TVL</HeaderItem>,
cell: ({ getValue }) => formatUSD.format(getValue() as number)
header: ({ column }) => (
<HeaderItem
sort={() =>
column.toggleSorting(column.getIsSorted() === 'asc')
}
isAsc={column.getIsSorted() === 'asc'}
>
TVL
</HeaderItem>
),
cell: ({ getValue }) => formatUSD.format(getValue() as number),
},
{
accessorKey: 'volume24USD',
header: ({ column }) => <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>Volume 24H</HeaderItem>,
cell: ({ getValue }) => formatUSD.format(getValue() as number)
header: ({ column }) => (
<HeaderItem
sort={() =>
column.toggleSorting(column.getIsSorted() === 'asc')
}
isAsc={column.getIsSorted() === 'asc'}
>
Volume 24H
</HeaderItem>
),
cell: ({ getValue }) => formatUSD.format(getValue() as number),
},
{
accessorKey: 'apr',
header: ({ column }) => <HeaderItem sort={() => column.toggleSorting(column.getIsSorted() === "asc")} isAsc={column.getIsSorted() === "asc"}>APR</HeaderItem>,
}
]
accessorKey: 'maxApr',
header: ({ column }) => (
<HeaderItem
sort={() =>
column.toggleSorting(column.getIsSorted() === 'asc')
}
isAsc={column.getIsSorted() === 'asc'}
>
Max. APR
</HeaderItem>
),
cell: ({ getValue }) => `${getValue()} %`,
},
{
accessorKey: 'avgApr',
header: ({ column }) => (
<HeaderItem
sort={() =>
column.toggleSorting(column.getIsSorted() === 'asc')
}
isAsc={column.getIsSorted() === 'asc'}
>
Avg. APR
</HeaderItem>
),
cell: ({ getValue }) => `${getValue()} %`,
},
];
Loading

0 comments on commit e341795

Please sign in to comment.