From 41886c09991a566613c2d38fe70bf91e85dcbedb Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 15 Jun 2023 15:52:48 +0100 Subject: [PATCH 01/59] fix(packages/ui): remove old components --- .../app/internal/bentobox/strategies/page.tsx | 50 ++-- .../subgraphs/components/SubgraphTable.tsx | 15 +- .../internal/tokens/components/TokenTable.tsx | 2 +- apps/_root/app/internal/tokens/page.tsx | 31 +- .../components/article/ArticleLinks.tsx | 29 +- .../FarmRewardsAvailableTooltip.tsx | 10 +- .../TokenSection/TokenInformation.tsx | 3 +- .../components/TokenSection/TokenPairs.tsx | 129 +++++---- apps/analytics/pages/token/[id].tsx | 4 +- .../FarmRewardsAvailableTooltip.tsx | 10 +- .../SelectNetworkWidget.tsx | 19 +- .../PoolTransactionsV2/PoolTransactionsV2.tsx | 2 +- .../PoolTransactionsV3/PoolTransactionsV3.tsx | 2 +- .../CreateMultipleForm/ReviewSection.tsx | 3 +- packages/ui/package.json | 4 +- .../networkselector/NetworkSelectorDialog.tsx | 2 +- .../networkselector/NetworkSelectorMenu.tsx | 94 ++----- .../components/networkselector/index.tsx | 6 +- .../ui/src/future/components/scroll-area.tsx | 43 +++ packages/ui/src/future/components/select.tsx | 31 +- .../ui/src/future/components/separator.tsx | 25 ++ packages/ui/src/index.css | 1 - packages/ui/src/index.ts | 3 - packages/ui/src/network/Selector.tsx | 74 ----- packages/ui/src/network/SelectorMenu.tsx | 78 ------ packages/ui/src/network/index.ts | 17 -- packages/ui/src/table/Body.tsx | 12 - packages/ui/src/table/Cell.tsx | 18 -- packages/ui/src/table/Container.tsx | 12 - packages/ui/src/table/GenericTable.tsx | 265 ------------------ packages/ui/src/table/Head.tsx | 17 -- packages/ui/src/table/HeadCell.tsx | 19 -- packages/ui/src/table/HeadRow.tsx | 12 - packages/ui/src/table/Paginator.tsx | 69 ----- packages/ui/src/table/Root.tsx | 22 -- packages/ui/src/table/Row.tsx | 23 -- packages/ui/src/table/Table.tsx | 34 --- packages/ui/src/table/index.ts | 2 - packages/ui/src/tooltip/Tooltip.tsx | 53 ---- packages/ui/src/tooltip/index.ts | 1 - packages/ui/src/tooltip/styles.css | 185 ------------ .../components/HeaderNetworkSelector.tsx | 36 ++- pnpm-lock.yaml | 78 +++++- 43 files changed, 376 insertions(+), 1169 deletions(-) create mode 100644 packages/ui/src/future/components/scroll-area.tsx create mode 100644 packages/ui/src/future/components/separator.tsx delete mode 100644 packages/ui/src/network/Selector.tsx delete mode 100644 packages/ui/src/network/SelectorMenu.tsx delete mode 100644 packages/ui/src/network/index.ts delete mode 100644 packages/ui/src/table/Body.tsx delete mode 100644 packages/ui/src/table/Cell.tsx delete mode 100644 packages/ui/src/table/Container.tsx delete mode 100644 packages/ui/src/table/GenericTable.tsx delete mode 100644 packages/ui/src/table/Head.tsx delete mode 100644 packages/ui/src/table/HeadCell.tsx delete mode 100644 packages/ui/src/table/HeadRow.tsx delete mode 100644 packages/ui/src/table/Paginator.tsx delete mode 100644 packages/ui/src/table/Root.tsx delete mode 100644 packages/ui/src/table/Row.tsx delete mode 100644 packages/ui/src/table/Table.tsx delete mode 100644 packages/ui/src/table/index.ts delete mode 100644 packages/ui/src/tooltip/Tooltip.tsx delete mode 100644 packages/ui/src/tooltip/index.ts delete mode 100644 packages/ui/src/tooltip/styles.css diff --git a/apps/_root/app/internal/bentobox/strategies/page.tsx b/apps/_root/app/internal/bentobox/strategies/page.tsx index 1d579a3fc8..c055a749d9 100644 --- a/apps/_root/app/internal/bentobox/strategies/page.tsx +++ b/apps/_root/app/internal/bentobox/strategies/page.tsx @@ -1,11 +1,15 @@ 'use client' -import { ChainId } from '@sushiswap/chain' -import { Network } from '@sushiswap/ui/network' +import { Chain, ChainId } from '@sushiswap/chain' import { Typography } from '@sushiswap/ui/typography' -import { useEffect, useMemo, useState } from 'react' -import useSWR from 'swr' +import React, { useMemo, useState } from 'react' import { getStrategies } from './lib' +import { ChevronDownIcon } from '@heroicons/react/24/outline' +import useSWR from 'swr' +import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' +import { Button } from '@sushiswap/ui/future/components/button/Button' +import { SelectPrimitive } from '@sushiswap/ui/future/components/select' export default function BentoBoxStrategiesPage() { const { data } = useSWR('bentobox-strategies', () => getStrategies()) @@ -18,17 +22,10 @@ export default function BentoBoxStrategiesPage() { [data] ) - const [selectedChainIds, setChainIds] = useState([]) - - useEffect(() => { - if (strategyChainIds) { - setChainIds(strategyChainIds) - } - }, [strategyChainIds]) - + const [selectedChainId, setSelectedChainId] = useState(ChainId.ETHEREUM) const filteredStrategies = useMemo( - () => data?.filter((el) => selectedChainIds.includes(el.chainId)), - [data, selectedChainIds] + () => data?.filter((el) => el.chainId === selectedChainId), + [data, selectedChainId] ) return ( @@ -36,15 +33,22 @@ export default function BentoBoxStrategiesPage() { BentoBox Strategies - <> - {strategyChainIds && ( - setChainIds(selectedChainIds)} - /> - )} - + {strategyChainIds && ( + + + + + + )}
{filteredStrategies?.map((strategy, i) => ( 
diff --git a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx
index efbfb66d4d..84ee6a225c 100644
--- a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx
+++ b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx
@@ -4,10 +4,11 @@ import { RefreshIcon } from '@heroicons/react-v1/solid'
 import { ChainId, chainName } from '@sushiswap/chain'
 import { formatNumber, formatPercent } from '@sushiswap/format'
 import { CHAIN_NAME } from '@sushiswap/graph-config'
-import { CheckIcon, NetworkIcon, Tooltip } from '@sushiswap/ui'
+import { CheckIcon, NetworkIcon } from '@sushiswap/ui'
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { GenericTable } from '@sushiswap/ui/table'
 import { Subgraph } from '../lib'
+import { Tooltip } from '@sushiswap/ui/future/components/Tooltip'
+import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable'
 
 interface SubgraphTable {
   subgraphs: Subgraph[]
@@ -40,9 +41,13 @@ const columns = [
     cell: (info) => (
       

         {info.getValue() === 'Current' ? (
-          Synced} button={} />
+          
+            
+          
         ) : (
-          Syncing} button={} />
+          
+            
+          
         )}
       

     ),
@@ -94,7 +99,7 @@ const columns = [
             

               {status} ({formatNumber(unsyncedBlockCount).replace(/\.(00|0)/, '')})
             

-          );
+          )
         case 'Failed':
           return 
{status}

       }
diff --git a/apps/_root/app/internal/tokens/components/TokenTable.tsx b/apps/_root/app/internal/tokens/components/TokenTable.tsx
index 9fe213a458..dcba22d112 100644
--- a/apps/_root/app/internal/tokens/components/TokenTable.tsx
+++ b/apps/_root/app/internal/tokens/components/TokenTable.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { GenericTable } from '@sushiswap/ui/table/GenericTable'
 import { Token } from '../lib'
 import { FC } from 'react'
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
@@ -10,6 +9,7 @@ import { ChainId, chainName } from '@sushiswap/chain'
 import { formatUSD } from '@sushiswap/format'
 import { XIcon } from '@heroicons/react-v1/outline'
 import { TokenAdder } from './TokenAdder'
+import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable'
 
 interface TokenTable {
   tokens: Token[]
diff --git a/apps/_root/app/internal/tokens/page.tsx b/apps/_root/app/internal/tokens/page.tsx
index 1dfe6bc2ea..53f8a2a702 100644
--- a/apps/_root/app/internal/tokens/page.tsx
+++ b/apps/_root/app/internal/tokens/page.tsx
@@ -1,23 +1,28 @@
 'use client'
 
 import { SearchIcon } from '@heroicons/react-v1/solid'
-import { ChainId } from '@sushiswap/chain'
+import { Chain, ChainId } from '@sushiswap/chain'
 import { useDebounce } from '@sushiswap/hooks'
-import { classNames, DEFAULT_INPUT_UNSTYLED, Network } from '@sushiswap/ui'
+import { classNames, DEFAULT_INPUT_UNSTYLED } from '@sushiswap/ui'
 import { TokenTable } from './components/TokenTable'
 import { TOKENS_SUPPORTED_CHAIN_IDS } from './config'
 import stringify from 'fast-json-stable-stringify'
 import { getTokens, Token } from './lib'
-import { FC, useState } from 'react'
+import React, { FC, useState } from 'react'
 import useSWR from 'swr'
+import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector'
+import { NetworkIcon } from '@sushiswap/ui/future/components/icons'
+import { Button } from '@sushiswap/ui/future/components/button/Button'
+import { SelectPrimitive } from '@sushiswap/ui/future/components/select'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
 
 const TokensPage: FC = () => {
   const [filter, setFilter] = useState('')
-  const [chainIds, setChainIds] = useState([ChainId.ETHEREUM])
+  const [chainId, setChainId] = useState(ChainId.ETHEREUM)
   const debouncedFilter = useDebounce(filter, 400)
 
-  const { data: tokens } = useSWR(stringify(['tokens', debouncedFilter, chainIds]), () =>
-    getTokens({ chainIds, filter: debouncedFilter })
+  const { data: tokens } = useSWR(stringify(['tokens', debouncedFilter, chainId]), () =>
+    getTokens({ chainIds: [chainId], filter: debouncedFilter })
   )
 
   // console.log(tokens)
@@ -47,11 +52,15 @@ const TokensPage: FC = () => {
- setChainIds(selectedNetworks)} - /> + + + + + diff --git a/apps/academy/common/components/article/ArticleLinks.tsx b/apps/academy/common/components/article/ArticleLinks.tsx index a85a828b92..5e3f17a959 100644 --- a/apps/academy/common/components/article/ArticleLinks.tsx +++ b/apps/academy/common/components/article/ArticleLinks.tsx @@ -1,9 +1,10 @@ import { EnvelopeIcon, LinkIcon } from '@heroicons/react/24/outline' -import { Tooltip, TwitterIcon } from '@sushiswap/ui' +import { TwitterIcon } from '@sushiswap/ui' import { getShareText } from 'common/helpers' -import { FC, useState } from 'react' +import { FC } from 'react' import { ArticleEntity } from '../../../.mesh' +import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' interface ArticleLinks { article?: ArticleEntity @@ -13,14 +14,6 @@ export const ArticleLinks: FC = ({ article }) => { const shareText = getShareText(article?.attributes?.title) const url = `https://www.sushi.com/academy/articles/${article?.attributes?.slug}` - const [showTooltip, setShowTooltip] = useState(false) - const handleTooltipTimer = () => { - setShowTooltip(true) - setTimeout(() => { - setShowTooltip(false) - }, 1000) - } - return (
@@ -38,22 +31,16 @@ export const ArticleLinks: FC = ({ article }) => { > - + {({ setCopied }) => ( { - navigator.clipboard.writeText(url) - handleTooltipTimer() - }} + onClick={() => setCopied(url)} /> - } - panel={<>Copied to clipboard} - placement="bottom" - visible={showTooltip} - /> + )} +
) diff --git a/apps/analytics/components/FarmRewardsAvailableTooltip.tsx b/apps/analytics/components/FarmRewardsAvailableTooltip.tsx index f947020b0e..8a50120f02 100644 --- a/apps/analytics/components/FarmRewardsAvailableTooltip.tsx +++ b/apps/analytics/components/FarmRewardsAvailableTooltip.tsx @@ -1,12 +1,6 @@ -import { Tooltip } from '@sushiswap/ui' import { FC } from 'react' +import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' export const FarmRewardsAvailableTooltip: FC = () => { - return ( - ✨} - panel={
Farm rewards available
} - /> - ) + return ✨ } diff --git a/apps/analytics/components/TokenSection/TokenInformation.tsx b/apps/analytics/components/TokenSection/TokenInformation.tsx index 8bcd34a988..f361fcb602 100644 --- a/apps/analytics/components/TokenSection/TokenInformation.tsx +++ b/apps/analytics/components/TokenSection/TokenInformation.tsx @@ -2,8 +2,9 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain } from '@sushiswap/chain' import { shortenAddress } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' -import { CopyHelper, Currency, Link, Table, Typography } from '@sushiswap/ui' +import { CopyHelper, Currency, Link, Typography } from '@sushiswap/ui' import { FC } from 'react' +import { Table } from '@sushiswap/ui/future/components/Table' import { useTokenFromToken } from '../../lib/hooks' diff --git a/apps/analytics/components/TokenSection/TokenPairs.tsx b/apps/analytics/components/TokenSection/TokenPairs.tsx index fcc66c8a48..285574c2f4 100644 --- a/apps/analytics/components/TokenSection/TokenPairs.tsx +++ b/apps/analytics/components/TokenSection/TokenPairs.tsx @@ -3,12 +3,13 @@ import { usePools } from '@sushiswap/client' import { Native, Token } from '@sushiswap/currency' import { formatPercent, formatUSD } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' -import { Currency, Link, Table, Tooltip, Typography } from '@sushiswap/ui' -import { FC } from 'react' +import { Currency, Link, Typography } from '@sushiswap/ui' +import React, { FC } from 'react' import { useSWRConfig } from 'swr' - +import { Table } from '@sushiswap/ui/future/components/table' import { FarmRewardsAvailableTooltip } from '../FarmRewardsAvailableTooltip' import { PoolQuickHoverTooltip } from '../PoolQuickHoverTooltip' +import { Popover } from '@sushiswap/ui/future/components/Popover' interface TokenPairs { token: GraphToken @@ -68,60 +69,74 @@ export const TokenPairs: FC = ({ token }) => { const volume1w = formatUSD(pair.volume1w) return ( - - - -
- - - - - - - {token0.symbol} / {token1.symbol} - - -
- - - - - - {liquidityUSD.includes('NaN') ? '$0.00' : liquidityUSD} - - - - - - - {volume1w.includes('NaN') ? '$0.00' : volume1w} - - - - - - - {formatPercent(pair.feeApr)}{' '} - {pool && pool.incentives.length > 0 && pool.incentiveApr > 0 && ( - - )} - - - - - } - panel={pool ? : <>} - /> + <> + { + state.styles.popper.width = '320px' + }, + phase: 'beforeWrite', + requires: ['computeStyles'], + }, + ], + }} + > + + + + +
+ + + + + + + {token0.symbol} / {token1.symbol} + + +
+ + + + + + {liquidityUSD.includes('NaN') ? '$0.00' : liquidityUSD} + + + + + + + {volume1w.includes('NaN') ? '$0.00' : volume1w} + + + + + + + {formatPercent(pair.feeApr)}{' '} + {pool && pool.incentives.length > 0 && pool.incentiveApr > 0 && ( + + )} + + + + + + {pool ? : <>} + + ) })} diff --git a/apps/analytics/pages/token/[id].tsx b/apps/analytics/pages/token/[id].tsx index e73114f86b..f7aa00c55b 100644 --- a/apps/analytics/pages/token/[id].tsx +++ b/apps/analytics/pages/token/[id].tsx @@ -6,9 +6,9 @@ import useSWR, { SWRConfig } from 'swr' import { Layout } from '../../components' import { TokenInformation } from '../../components/TokenSection' -import { TokenHeader } from '../../components/TokenSection/TokenHeader' +import { TokenHeader } from '../../components/TokenSection' import { TokenPairs } from '../../components/TokenSection/TokenPairs' -import { TokenStats } from '../../components/TokenSection/TokenStats' +import { TokenStats } from '../../components/TokenSection' import { getBundles, getToken } from '../../lib/api' export const getServerSideProps: GetServerSideProps = async ({ query, res }) => { diff --git a/apps/earn/components/FarmRewardsAvailableTooltip.tsx b/apps/earn/components/FarmRewardsAvailableTooltip.tsx index f947020b0e..505378f24d 100644 --- a/apps/earn/components/FarmRewardsAvailableTooltip.tsx +++ b/apps/earn/components/FarmRewardsAvailableTooltip.tsx @@ -1,12 +1,6 @@ -import { Tooltip } from '@sushiswap/ui' +import { Tooltip } from '@sushiswap/ui/future/components/tooltip' import { FC } from 'react' export const FarmRewardsAvailableTooltip: FC = () => { - return ( - ✨} - panel={
Farm rewards available
} - /> - ) + return ✨ } diff --git a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx index 745456f5ce..7fca8d26a9 100644 --- a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx @@ -1,6 +1,5 @@ -import { Popover } from '@headlessui/react' import { ChainId, chainName } from '@sushiswap/chain' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui' import React, { FC, memo } from 'react' import { V3_SUPPORTED_CHAIN_IDS } from '@sushiswap/v3-sdk' @@ -8,6 +7,7 @@ import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector import { Button } from '@sushiswap/ui/future/components/button' import { ChevronDownIcon } from '@heroicons/react/solid' import { ContentBlock } from '../AddPage/ContentBlock' +import { SelectPrimitive } from '@sushiswap/ui/future/components/select' interface SelectNetworkWidgetProps { networks?: ChainId[] @@ -34,19 +34,14 @@ export const SelectNetworkWidget: FC = memo(function S selected={selectedNetwork} onSelect={onSelect} variant="menu" - align="left" > - {({ open }) => ( - + + + diff --git a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx index d19b130bdc..6f2ba05493 100644 --- a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx +++ b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx @@ -4,10 +4,10 @@ import { getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/rea import { AMOUNT_IN_COLUMN, AMOUNT_OUT_COLUMN, AMOUNT_USD_COLUMN, SENDER_COLUMN, TIME_COLUMN } from './columns' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' import { Chain } from '@sushiswap/chain' -import { Paginator } from '@sushiswap/ui/table/Paginator' import { RadioGroup } from '@headlessui/react' import { Button } from '@sushiswap/ui/future/components/button' import { Pool } from '@sushiswap/client' +import { Paginator } from '@sushiswap/ui/future/components/table/Paginator' interface PoolTransactionsV2Props { pool: Pool | undefined | null diff --git a/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx b/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx index 35647af2df..0577e1611d 100644 --- a/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx +++ b/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx @@ -5,9 +5,9 @@ import { getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/rea import { AMOUNT_IN_COLUMN, AMOUNT_OUT_COLUMN, AMOUNT_USD_COLUMN, SENDER_COLUMN, TIME_COLUMN } from './columns' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' import { Chain } from '@sushiswap/chain' -import { Paginator } from '@sushiswap/ui/table/Paginator' import { RadioGroup } from '@headlessui/react' import { Button } from '@sushiswap/ui/future/components/button' +import { Paginator } from '@sushiswap/ui/future/components/table/Paginator' interface PoolTransactionsV3Props { pool: Pool | undefined | null diff --git a/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx b/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx index 7378dce341..2b29b40ed1 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx @@ -3,7 +3,7 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain, ChainId } from '@sushiswap/chain' import { Amount, Type } from '@sushiswap/currency' import { shortenAddress } from '@sushiswap/format' -import { Currency, Table } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui' import { usePrices } from '@sushiswap/react-query' import { format } from 'date-fns' import React, { FC, useMemo } from 'react' @@ -14,6 +14,7 @@ import { useTokenFromZToken } from '../../../lib/zod' import { calculateEndDate, calculateTotalAmount } from '../utils' import { List } from '@sushiswap/ui/future/components/list/List' import { CreateMultipleVestingFormSchemaType, CreateVestingFormSchemaType } from '../schema' +import { Table } from '@sushiswap/ui/future/components/table' interface ReviewSection { chainId: ChainId diff --git a/packages/ui/package.json b/packages/ui/package.json index fcff436ea1..0f9c4d8c9c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -64,14 +64,16 @@ "@headlessui/react": "1.7.7", "@heroicons/react": "2.0.13", "@popperjs/core": "2.11.7", + "@radix-ui/react-scroll-area": "^1.0.4", "@radix-ui/react-select": "^1.2.2", + "@radix-ui/react-separator": "^1.0.3", "@react-hook/window-scroll": "1.3.0", "@sushiswap/chain": "workspace:*", "@sushiswap/currency": "workspace:*", "@sushiswap/dexie": "workspace:*", "@sushiswap/hooks": "workspace:*", - "@sushiswap/token-lists": "workspace:*", "@sushiswap/tailwindcss-config": "workspace:*", + "@sushiswap/token-lists": "workspace:*", "@tailwindcss/aspect-ratio": "0.4.2", "@tailwindcss/forms": "0.5.3", "@tailwindcss/typography": "0.5.9", diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx index c6a1b7cfa2..70ff380dc7 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx @@ -20,7 +20,7 @@ export const NetworkSelectorDialog = ({ {({ open, close }) => ( <> - {typeof children === 'function' ? children({ open, close }) : children} + {children} close()}> diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx index 2570d25b6f..5d239f996b 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx @@ -1,82 +1,46 @@ -import { Popover, Transition } from '@headlessui/react' -import chains from '@sushiswap/chain' -import classNames from 'classnames' +import chains, { Chain } from '@sushiswap/chain' import React, { useState } from 'react' import { NetworkIcon } from '../icons' import { Search } from '../input/Search' import { NetworkSelectorProps } from './index' +import { Select, SelectContent, SelectItem } from '../select' +import { ScrollArea } from '../scroll-area' +import { Separator } from '../separator' export const NetworkSelectorMenu = ({ selected, onSelect, networks = [], children, - align = 'right', }: Omit, 'variant'>) => { const [query, setQuery] = useState('') return ( - - {({ open, close }) => ( - <> - {typeof children === 'function' ? children({ open, close }) : children} - -
-
- - -
-
- {networks - .filter((el) => (query ? chains[el].name.toLowerCase().includes(query.toLowerCase()) : Boolean)) - .map((el) => ( - - ))} -
- -
-
- - - )} - + ) } diff --git a/packages/ui/src/future/components/networkselector/index.tsx b/packages/ui/src/future/components/networkselector/index.tsx index 938dfbbf26..5138f170a5 100644 --- a/packages/ui/src/future/components/networkselector/index.tsx +++ b/packages/ui/src/future/components/networkselector/index.tsx @@ -11,8 +11,7 @@ export interface NetworkSelectorProps { selected: T onSelect: NetworkSelectorOnSelectCallback variant: 'menu' | 'dialog' - align?: 'left' | 'right' - children: ((props: { open: boolean; close(): void }) => ReactNode) | ReactNode + children: ReactNode } export const NetworkSelector = ({ @@ -21,7 +20,6 @@ export const NetworkSelector = ({ selected, onSelect, children, - align, }: NetworkSelectorProps) => { if (variant === 'dialog') { return ( @@ -32,7 +30,7 @@ export const NetworkSelector = ({ } return ( - + {children} ) diff --git a/packages/ui/src/future/components/scroll-area.tsx b/packages/ui/src/future/components/scroll-area.tsx new file mode 100644 index 0000000000..dda09124b6 --- /dev/null +++ b/packages/ui/src/future/components/scroll-area.tsx @@ -0,0 +1,43 @@ +'use client' + +import * as React from 'react' +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area' +import classNames from 'classnames' + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'vertical', ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/packages/ui/src/future/components/select.tsx b/packages/ui/src/future/components/select.tsx index bb631eaf5c..673b47b9ad 100644 --- a/packages/ui/src/future/components/select.tsx +++ b/packages/ui/src/future/components/select.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import * as SelectPrimitive from '@radix-ui/react-select' - +export * as SelectPrimitive from '@radix-ui/react-select' import { ChevronUpDownIcon } from '@heroicons/react/24/outline' import { CheckIcon } from '@heroicons/react/20/solid' import classNames from 'classnames' @@ -24,6 +24,22 @@ const SelectValue = React.forwardRef< }) SelectValue.displayName = SelectPrimitive.Value.displayName +const SelectIcon = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
+ +
+ +)) + const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -38,11 +54,7 @@ const SelectTrigger = React.forwardRef< {...props} > {children} - -
- -
- + )) @@ -56,7 +68,7 @@ const SelectContent = React.forwardRef< @@ -108,7 +120,7 @@ const SelectItem = React.forwardRef< > - + @@ -145,4 +157,5 @@ export { SelectItem, SelectSeparator, SelectCaption, + SelectIcon, } diff --git a/packages/ui/src/future/components/separator.tsx b/packages/ui/src/future/components/separator.tsx new file mode 100644 index 0000000000..d75adff388 --- /dev/null +++ b/packages/ui/src/future/components/separator.tsx @@ -0,0 +1,25 @@ +'use client' + +import * as React from 'react' +import * as SeparatorPrimitive from '@radix-ui/react-separator' +import classNames from 'classnames' + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => ( + +)) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index b03ba2f4cf..518378a414 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -7,7 +7,6 @@ @tailwind utilities; @import './variables.css'; -@import './tooltip/styles.css'; @import './future/components/input/DatePicker.css'; @import './input/styles.css'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 3ec28b2197..58130099a2 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -24,7 +24,6 @@ export * from './link' export * from './loader' export * from './menu' export * from './mounted' -export * from './network' export * from './overlay' export * from './Page' export * from './progressbar' @@ -32,10 +31,8 @@ export * from './select' export * from './skeleton' export * from './stepper' export * from './switch' -export * from './table' export * from './tabs' export * from './theme' -export * from './tooltip' export * from './types' export * from './typography' export * from './widget' diff --git a/packages/ui/src/network/Selector.tsx b/packages/ui/src/network/Selector.tsx deleted file mode 100644 index eddf9d0e1e..0000000000 --- a/packages/ui/src/network/Selector.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { ChainId, chainName } from '@sushiswap/chain' -import { FC, ReactElement, useCallback, useMemo } from 'react' - -import { NetworkIcon } from '../icons' -import { classNames } from '../index' -import { Tooltip } from '../tooltip' - -export interface SelectorProps { - className?: string - networks: ChainId[] - selectedNetworks: ChainId[] - onChange(selectedNetworks: ChainId[]): void - exclusive?: boolean - renderer?: (node: JSX.Element) => ReactElement -} - -export const Selector: FC = ({ - className, - networks: _networks, - selectedNetworks, - onChange, - exclusive, - renderer = false, -}) => { - const networks = useMemo(() => Array.from(new Set(_networks)), [_networks]) - const handleClick = useCallback( - (chainId: ChainId) => { - if (exclusive) { - return onChange([chainId]) - } - - if (networks.every((network) => selectedNetworks.includes(network))) { - // If every network enabled, disable all but incoming chainId - onChange([chainId]) - } else if (selectedNetworks.length === 1 && selectedNetworks[0] === chainId) { - // If none selected, enable all - onChange(networks) - } else if (selectedNetworks.includes(chainId)) { - onChange(selectedNetworks.filter((el) => el !== chainId)) - } else { - onChange([...selectedNetworks, chainId]) - } - }, - [exclusive, networks, onChange, selectedNetworks] - ) - - return ( -
- {networks.map((chainId) => { - const button = ( -
handleClick(chainId)} - className={classNames( - className, - selectedNetworks.includes(chainId) ? 'bg-slate-700 border-transparent' : 'border-slate-800', - 'hover:ring-2 ring-slate-800 ring-offset-2 ring-offset-slate-900 border-2 rounded-xl overflow-hidden cursor-pointer p-2' - )} - > - -
- ) - - return ( - {chainName[chainId]}
} - /> - ) - })} -
- ) -} diff --git a/packages/ui/src/network/SelectorMenu.tsx b/packages/ui/src/network/SelectorMenu.tsx deleted file mode 100644 index df84f0cce9..0000000000 --- a/packages/ui/src/network/SelectorMenu.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { CheckIcon, XCircleIcon } from '@heroicons/react/20/solid' -import { ChainId, chainName } from '@sushiswap/chain' -import { FC } from 'react' - -import { classNames, NetworkIcon, Typography } from '..' -import { Select } from '../select' - -export interface SelectorMenuProps { - className?: string - networks: ChainId[] - selectedNetworks: ChainId[] - onChange(selectedNetworks: ChainId[]): void -} - -export const SelectorMenu: FC = ({ networks, selectedNetworks, onChange }) => { - const value = networks.length === selectedNetworks.length ? [] : selectedNetworks - - return ( - - ) -} diff --git a/packages/ui/src/network/index.ts b/packages/ui/src/network/index.ts deleted file mode 100644 index 35928437d1..0000000000 --- a/packages/ui/src/network/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { FC } from 'react' - -import { Selector, SelectorProps } from './Selector' -import { SelectorMenu, SelectorMenuProps } from './SelectorMenu' - -type Network = { - Selector: FC - SelectorMenu: FC -} - -/** - * @deprecated - */ -export const Network: Network = { - Selector, - SelectorMenu, -} diff --git a/packages/ui/src/table/Body.tsx b/packages/ui/src/table/Body.tsx deleted file mode 100644 index 3b5d461c63..0000000000 --- a/packages/ui/src/table/Body.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { FC } from 'react' - -const Body: FC, HTMLTableSectionElement>> = ({ - children, - ...props -}) => ( - - {children} - -) - -export default Body diff --git a/packages/ui/src/table/Cell.tsx b/packages/ui/src/table/Cell.tsx deleted file mode 100644 index 3e7dc1cf3f..0000000000 --- a/packages/ui/src/table/Cell.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import classNames from 'classnames' -import React, { FC } from 'react' - -const HeadCell: FC< - React.DetailedHTMLProps, HTMLTableDataCellElement> -> = ({ children, className, ...props }) => ( - - {children} - -) - -export default HeadCell diff --git a/packages/ui/src/table/Container.tsx b/packages/ui/src/table/Container.tsx deleted file mode 100644 index 7f66dfb2f5..0000000000 --- a/packages/ui/src/table/Container.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import classNames from 'classnames' - -export type TableContainerProps = { - children?: React.ReactNode - className?: string -} - -function Container({ children, className }: TableContainerProps): JSX.Element { - return
{children}
-} - -export default Container diff --git a/packages/ui/src/table/GenericTable.tsx b/packages/ui/src/table/GenericTable.tsx deleted file mode 100644 index 2f9c6496a1..0000000000 --- a/packages/ui/src/table/GenericTable.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/20/solid' -import { flexRender, RowData, Table as ReactTableType } from '@tanstack/react-table' -import React, { ReactNode, useState } from 'react' - -import { classNames, Link, Table } from '..' -import { LoadingOverlay } from '../loader' -import { Tooltip } from '../tooltip' -import { Typography } from '../typography' - -interface GenericTableProps { - table: ReactTableType - HoverElement?: React.FunctionComponent<{ row: C }> - loading?: boolean - placeholder: ReactNode - pageSize: number - linkFormatter?(row: C): string -} - -declare module '@tanstack/react-table' { - interface ColumnMeta { - className?: string - skeleton?: ReactNode - } -} - -/** - * @deprecated - */ -export const GenericTable = ({ - table, - HoverElement, - loading, - placeholder, - pageSize, - linkFormatter, -}: GenericTableProps) => { - const [showOverlay, setShowOverlay] = useState(false) - const [popupInvisible, setPopupInvisible] = useState(false) - - const headers = table.getFlatHeaders() - - return ( - <> - - - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - -
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: , - desc: , - }[header.column.getIsSorted() as string] ?? null} -
- - ))} - - ))} - - - {!loading && - table.getRowModel().rows.map((row) => { - if (HoverElement) { - return ( - { - if (!e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey) { - setPopupInvisible(true) - setTimeout(() => setShowOverlay(true), 250) - } - }} - className="cursor-pointer" - > - {row.getVisibleCells().map((cell, i) => { - return ( - - {linkFormatter ? ( - - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - - ) : ( -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- )} - - ) - })} - - } - panel={} - /> - ) - } - - return ( - { - if (!e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey && linkFormatter) { - setShowOverlay(true) - } - }} - className="cursor-pointer" - > - {row.getVisibleCells().map((cell, i) => { - return ( - - {linkFormatter ? ( - - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - - ) : ( -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- )} - - ) - })} - - ) - })} - {!loading && - table.getRowModel().rows.length !== 0 && - Array.from(Array(Math.max(pageSize - table.getRowModel().rows.length, 0))).map((el, index) => ( - - {table.getVisibleFlatColumns().map((column) => ( - - ))} - - ))} - {loading && - Array.from(Array(pageSize)).map((el, index) => ( - - {table.getVisibleFlatColumns().map((column) => { - return ( - - {column.columnDef.meta?.skeleton} - - ) - })} - - ))} - {!loading && table.getRowModel().rows.length === 0 && ( - - - - {placeholder} - - - - )} - - - - - ) -} diff --git a/packages/ui/src/table/Head.tsx b/packages/ui/src/table/Head.tsx deleted file mode 100644 index 725724bbe1..0000000000 --- a/packages/ui/src/table/Head.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '..' - -const Head: FC, HTMLTableSectionElement>> = ({ - children, - className, - ...props -}) => { - return ( - - {children} - - ) -} - -export default Head diff --git a/packages/ui/src/table/HeadCell.tsx b/packages/ui/src/table/HeadCell.tsx deleted file mode 100644 index 1b07f24a6e..0000000000 --- a/packages/ui/src/table/HeadCell.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '..' - -const HeadCell: FC< - React.DetailedHTMLProps, HTMLTableHeaderCellElement> -> = ({ children, className, ...props }) => ( - - {children} - -) - -export default HeadCell diff --git a/packages/ui/src/table/HeadRow.tsx b/packages/ui/src/table/HeadRow.tsx deleted file mode 100644 index 6bdabdea91..0000000000 --- a/packages/ui/src/table/HeadRow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { FC } from 'react' - -const HeadRow: FC, HTMLTableRowElement>> = ({ - children, - ...props -}) => ( - - {children} - -) - -export default HeadRow diff --git a/packages/ui/src/table/Paginator.tsx b/packages/ui/src/table/Paginator.tsx deleted file mode 100644 index 5c7cf0c30d..0000000000 --- a/packages/ui/src/table/Paginator.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline' -import { FC } from 'react' - -import { classNames } from '../index' -import { IconButton } from '../future/components/IconButton' - -export interface PaginatorProps { - hasPrev: boolean - hasNext: boolean - page: number - onPrev(): void - onNext(): void - onPage(page: number): void - pages?: number - pageSize: number - nextDisabled?: boolean -} - -export const Paginator: FC = ({ - onPrev, - onNext, - hasPrev, - hasNext, - page, - onPage, - pages, - nextDisabled, - pageSize, -}) => { - return ( -
- - Showing {page * pageSize + 1} to {(page + 1) * pageSize}{' '} - {pages ? ( - <> - of {pages * pageSize} - - ) : ( - '' - )} - -
-
- -
- {pages ? ( - - {page + 1} of {pages} - - ) : ( - '' - )} -
- -
-
-
- ) -} diff --git a/packages/ui/src/table/Root.tsx b/packages/ui/src/table/Root.tsx deleted file mode 100644 index d3682d55d9..0000000000 --- a/packages/ui/src/table/Root.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '../index' - -const Root: FC, HTMLTableElement>> = ({ - className, - children, - ...props -}) => ( -
- - {children} -
-
-) - -export default Root diff --git a/packages/ui/src/table/Row.tsx b/packages/ui/src/table/Row.tsx deleted file mode 100644 index e7b38c271c..0000000000 --- a/packages/ui/src/table/Row.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '../index' - -export interface RowProps - extends React.DetailedHTMLProps, HTMLTableRowElement> { - size?: 'default' | 'lg' -} - -const Row: FC = ({ children, className, size = 'default', ...props }) => ( - - {children} - -) - -export default Row diff --git a/packages/ui/src/table/Table.tsx b/packages/ui/src/table/Table.tsx deleted file mode 100644 index 22a14651f6..0000000000 --- a/packages/ui/src/table/Table.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { FC } from 'react' -import { default as tbody } from './Body' -import { default as td } from './Cell' -import { default as container, TableContainerProps } from './Container' -import { default as thead } from './Head' -import { default as th } from './HeadCell' -import { default as thr } from './HeadRow' -import { Paginator, PaginatorProps } from './Paginator' -import { default as table } from './Root' -import { default as tr, RowProps } from './Row' - -export type TableProps = { - container: FC - thead: FC, HTMLTableSectionElement>> - table: FC, HTMLTableElement>> - tr: FC - thr: FC, HTMLTableRowElement>> - th: FC, HTMLTableHeaderCellElement>> - td: FC, HTMLTableDataCellElement>> - tbody: FC, HTMLTableSectionElement>> - Paginator: FC -} - -export const Table: TableProps = { - container, - thead, - table, - tr, - thr, - th, - td, - tbody, - Paginator, -} diff --git a/packages/ui/src/table/index.ts b/packages/ui/src/table/index.ts deleted file mode 100644 index 6a09b8cf5d..0000000000 --- a/packages/ui/src/table/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Table' -export * from './GenericTable' diff --git a/packages/ui/src/tooltip/Tooltip.tsx b/packages/ui/src/tooltip/Tooltip.tsx deleted file mode 100644 index 3e68b543dd..0000000000 --- a/packages/ui/src/tooltip/Tooltip.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { default as RcTooltip } from 'rc-tooltip' -import { TooltipProps } from 'rc-tooltip/lib/Tooltip' -import { FC, ReactElement } from 'react' - -interface ExtendTooltipProps extends Omit { - button: ReactElement - panel: ReactElement - naked?: boolean -} - -/** - * @deprecated - */ -export const Tooltip: FC = ({ - button, - panel, - placement = 'top', - mouseEnterDelay = 0, - naked, - ...props -}) => { - const offset = [0, 0] - if (placement?.includes('left')) { - offset[0] -= 12 - } - - if (placement?.includes('top')) { - offset[1] -= 12 - } - - if (placement?.includes('bottom')) { - offset[1] += 12 - } - - if (placement?.includes('right')) { - offset[0] += 12 - } - - return ( - } - overlay={panel} - placement={placement} - {...props} - > - {button} - - ) -} diff --git a/packages/ui/src/tooltip/index.ts b/packages/ui/src/tooltip/index.ts deleted file mode 100644 index ba15f40737..0000000000 --- a/packages/ui/src/tooltip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Tooltip' diff --git a/packages/ui/src/tooltip/styles.css b/packages/ui/src/tooltip/styles.css deleted file mode 100644 index 450e1be294..0000000000 --- a/packages/ui/src/tooltip/styles.css +++ /dev/null @@ -1,185 +0,0 @@ -.rc-tooltip.rc-tooltip-zoom-appear, -.rc-tooltip.rc-tooltip-zoom-enter { - opacity: 0; -} -.rc-tooltip.rc-tooltip-zoom-enter, -.rc-tooltip.rc-tooltip-zoom-leave { - display: block; -} -.rc-tooltip-zoom-enter, -.rc-tooltip-zoom-appear { - opacity: 0; - animation-duration: 0.15s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); - animation-play-state: paused; -} -.rc-tooltip-zoom-leave { - animation-duration: 0.15s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); - animation-play-state: paused; -} -.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active, -.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active { - animation-name: rcToolTipZoomIn; - animation-play-state: running; -} -.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active { - animation-name: rcToolTipZoomOut; - animation-play-state: running; -} -@keyframes rcToolTipZoomIn { - 0% { - opacity: 0; - transform-origin: 50% 50%; - transform: scale(0.95, 0.95); - } - 100% { - opacity: 1; - transform-origin: 50% 50%; - transform: scale(1, 1); - } -} -@keyframes rcToolTipZoomOut { - 0% { - opacity: 1; - transform-origin: 50% 50%; - transform: scale(1, 1); - } - 100% { - opacity: 0; - transform-origin: 50% 50%; - transform: scale(0.95, 0.95); - } -} -.rc-tooltip { - position: absolute; - z-index: 1080; - display: block; - visibility: visible; - line-height: 1.5; - font-size: 12px; - @apply text-slate-200 bg-slate-800 rounded-lg; -} -.rc-tooltip-hidden { - display: none; -} -.rc-tooltip-inner { - padding: 8px 10px; - text-align: left; - text-decoration: none; - min-height: 34px; - @apply border border-slate-700 shadow-[0px_0px_30px_5px_rgba(0,0,0,0.30)] rounded-lg; -} -.rc-tooltip-arrow, -.rc-tooltip-arrow-inner { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.rc-tooltip-placement-top .rc-tooltip-arrow, -.rc-tooltip-placement-topLeft .rc-tooltip-arrow, -.rc-tooltip-placement-topRight .rc-tooltip-arrow { - bottom: -6px; - margin-left: -6px; - border-width: 6px 6px 0; - @apply border-t-slate-700; -} -.rc-tooltip-placement-top .rc-tooltip-arrow-inner, -.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, -.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { - bottom: 2px; - margin-left: -5px; - border-width: 5px 5px 0; - @apply border-t-slate-800; -} -.rc-tooltip-placement-top .rc-tooltip-arrow { - left: 50%; -} -.rc-tooltip-placement-topLeft .rc-tooltip-arrow { - left: 15%; -} -.rc-tooltip-placement-topRight .rc-tooltip-arrow { - right: 15%; -} -.rc-tooltip-placement-right .rc-tooltip-arrow, -.rc-tooltip-placement-rightTop .rc-tooltip-arrow, -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow { - left: -6px; - margin-top: -6px; - border-width: 6px 6px 6px 0; - @apply border-r-slate-700; -} -.rc-tooltip-placement-right .rc-tooltip-arrow-inner, -.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { - left: 2px; - margin-top: -5px; - border-width: 5px 5px 5px 0; - @apply border-r-slate-800; -} -.rc-tooltip-placement-right .rc-tooltip-arrow { - top: 50%; -} -.rc-tooltip-placement-rightTop .rc-tooltip-arrow { - top: 15%; - margin-top: 0; -} -.rc-tooltip-placement-rightBottom .rc-tooltip-arrow { - bottom: 15%; -} -.rc-tooltip-placement-left .rc-tooltip-arrow, -.rc-tooltip-placement-leftTop .rc-tooltip-arrow, -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow { - right: -6px; - margin-top: -6px; - border-width: 6px 0 6px 6px; - @apply border-l-slate-700; -} -.rc-tooltip-placement-left .rc-tooltip-arrow-inner, -.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { - right: 2px; - margin-top: -5px; - border-width: 5px 0 5px 5px; - @apply border-l-slate-800; -} -.rc-tooltip-placement-left .rc-tooltip-arrow { - top: 50%; -} -.rc-tooltip-placement-leftTop .rc-tooltip-arrow { - top: 15%; - margin-top: 0; -} -.rc-tooltip-placement-leftBottom .rc-tooltip-arrow { - bottom: 15%; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow, -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow { - top: -6px; - margin-left: -6px; - border-width: 0 6px 6px; - @apply border-b-slate-700; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { - top: 2px; - margin-left: -5px; - border-width: 0 5px 5px; - @apply border-b-slate-800; -} -.rc-tooltip-placement-bottom .rc-tooltip-arrow { - left: 50%; -} -.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { - left: 15%; -} -.rc-tooltip-placement-bottomRight .rc-tooltip-arrow { - right: 15%; -} diff --git a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx index ef6b925cfb..70b85503ba 100644 --- a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx +++ b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx @@ -1,14 +1,13 @@ -import { Popover } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/20/solid' -import { ChainId, chainName } from '@sushiswap/chain' -import { classNames } from '@sushiswap/ui' -import { Button } from '@sushiswap/ui/future/components/button' -import { NetworkIcon } from '@sushiswap/ui/future/components/icons' -import { NetworkSelector, NetworkSelectorOnSelectCallback } from '@sushiswap/ui/future/components/networkselector' -import { createErrorToast } from '@sushiswap/ui/future/components/toast' -import { useBreakpoint } from '@sushiswap/ui/future/lib/useBreakpoint' -import React, { FC, useCallback } from 'react' -import { ProviderRpcError, useNetwork, UserRejectedRequestError, useSwitchNetwork } from 'wagmi' +import {Chain, ChainId} from '@sushiswap/chain' +import {NetworkIcon} from '@sushiswap/ui/future/components/icons' +import {NetworkSelector, NetworkSelectorOnSelectCallback} from '@sushiswap/ui/future/components/networkselector' +import {createErrorToast} from '@sushiswap/ui/future/components/toast' +import {useBreakpoint} from '@sushiswap/ui/future/lib/useBreakpoint' +import React, {FC, useCallback} from 'react' +import {ProviderRpcError, useNetwork, UserRejectedRequestError, useSwitchNetwork} from 'wagmi' +import {SelectPrimitive} from "@sushiswap/ui/future/components/select"; +import {Button} from "@sushiswap/ui/future/components/button"; +import {ChevronDownIcon} from "@heroicons/react/20/solid"; export const HeaderNetworkSelector: FC<{ networks: ChainId[] @@ -51,17 +50,16 @@ export const HeaderNetworkSelector: FC<{ onSelect={onSwitchNetwork} networks={networks} > - {({ open }) => ( - + + + ) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06dd5fbea5..b50a486025 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2523,7 +2523,9 @@ importers: '@headlessui/react': 1.7.7 '@heroicons/react': 2.0.13 '@popperjs/core': 2.11.7 + '@radix-ui/react-scroll-area': ^1.0.4 '@radix-ui/react-select': ^1.2.2 + '@radix-ui/react-separator': ^1.0.3 '@react-hook/window-scroll': 1.3.0 '@sushiswap/chain': workspace:* '@sushiswap/currency': workspace:* @@ -2578,7 +2580,9 @@ importers: '@headlessui/react': 1.7.7_biqbaboplfbrettd7655fr4n2y '@heroicons/react': 2.0.13_react@18.2.0 '@popperjs/core': 2.11.7 + '@radix-ui/react-scroll-area': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-select': 1.2.2_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-separator': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@react-hook/window-scroll': 1.3.0_react@18.2.0 '@sushiswap/chain': link:../chain '@sushiswap/currency': link:../currency @@ -10776,6 +10780,28 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-presence/1.0.1_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-layout-effect': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-primitive/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -10797,6 +10823,35 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-scroll-area/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/number': 1.0.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-direction': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-presence': 1.0.1_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-use-callback-ref': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-layout-effect': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-select/1.2.2_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==} peerDependencies: @@ -10838,6 +10893,27 @@ packages: react-remove-scroll: 2.5.5_s3k22s5ab4eu26xuel7hiaraxy dev: false + /@radix-ui/react-separator/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-slot/1.0.2_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -14561,7 +14637,7 @@ packages: '@walletconnect/jsonrpc-provider': 1.0.13 '@walletconnect/jsonrpc-types': 1.0.3 '@walletconnect/jsonrpc-utils': 1.0.8 - '@walletconnect/modal': 2.4.5 + '@walletconnect/modal': 2.4.5_react@18.2.0 '@walletconnect/sign-client': 2.8.0 '@walletconnect/types': 2.8.0 '@walletconnect/universal-provider': 2.8.0 From e57f3013f3667d8a0dc015f40d78c20aa6d593c3 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Fri, 16 Jun 2023 12:21:33 +0100 Subject: [PATCH 02/59] fix(packages/ui): remove old components --- .../app/(landing)/components/BuildFuture.tsx | 21 +- .../app/(landing)/components/Ecosystem.tsx | 86 +++--- .../(landing)/components/ExpandableCard.tsx | 19 +- apps/_root/app/(landing)/components/Hero.tsx | 3 +- .../app/(landing)/components/NeedHelp.tsx | 32 +- .../_root/app/(landing)/components/Search.tsx | 12 +- apps/_root/app/(landing)/components/Stats.tsx | 43 +-- .../components/Story/Section1/Custody.tsx | 16 +- .../components/Story/Section2/Move.tsx | 11 +- .../components/Story/Section3/Guard.tsx | 16 +- .../internal/tokens/components/TokenAdder.tsx | 96 +++--- .../app/partner/components/NetworkModal.tsx | 14 +- apps/_root/app/partner/page.tsx | 32 +- apps/_root/ui/swap/search/SearchPanel.tsx | 3 +- .../common/components/ArticlesPageHeader.tsx | 45 +-- .../common/components/FilterButton.tsx | 12 +- .../common/components/PreviewBanner.tsx | 17 +- .../common/components/ViewAllButton.tsx | 11 +- .../components/product/ProductArticles.tsx | 7 +- .../common/components/product/ProductHero.tsx | 18 +- .../product/ProductTechnicalDoc.tsx | 11 +- apps/academy/pages/_app.tsx | 17 +- apps/academy/pages/articles/index.tsx | 156 ++++------ apps/academy/pages/index.tsx | 105 +------ .../components/PoolQuickHoverTooltip.tsx | 31 +- .../components/TokenSection/TokenHeader.tsx | 12 +- apps/analytics/pages/_app.tsx | 13 +- apps/blog/components/Categories.tsx | 4 +- apps/blog/components/Hero.tsx | 10 +- apps/blog/components/PreviewBanner.tsx | 13 +- .../blog/components/article/ArticleFooter.tsx | 4 +- apps/blog/pages/_app.tsx | 13 +- apps/blog/pages/index.tsx | 6 +- .../AddPage/AddSectionReviewModalTrident.tsx | 243 --------------- .../AddSectionReviewModalTridentCreate.tsx | 278 ------------------ .../AddSection/AddSectionStakeWidget.tsx | 70 ++--- .../SelectFeeConcentratedWidget.tsx | 23 +- .../RemoveSectionUnstakeWidget.tsx | 78 +++-- apps/earn/pages/_app.tsx | 17 +- apps/furo/pages/_app.tsx | 5 +- packages/ui/src/Page.tsx | 8 - packages/ui/src/app/Header.tsx | 221 -------------- packages/ui/src/app/Main.tsx | 7 - packages/ui/src/app/Nav.tsx | 7 - packages/ui/src/app/Shell.tsx | 7 - packages/ui/src/app/index.ts | 24 -- packages/ui/src/badge/Badge.tsx | 20 -- packages/ui/src/badge/index.ts | 1 - packages/ui/src/button/Button.tsx | 82 ------ packages/ui/src/button/index.tsx | 1 - packages/ui/src/button/styles.tsx | 73 ----- packages/ui/src/combobox/Combobox.tsx | 54 ---- packages/ui/src/combobox/ComboboxInput.tsx | 40 --- packages/ui/src/combobox/ComboboxLabel.tsx | 22 -- packages/ui/src/combobox/ComboboxOption.tsx | 35 --- packages/ui/src/combobox/ComboboxOptions.tsx | 18 -- packages/ui/src/combobox/index.ts | 1 - packages/ui/src/date/TimeAgo.tsx | 16 - packages/ui/src/date/index.ts | 1 - packages/ui/src/drawer/Drawer.tsx | 133 --------- packages/ui/src/drawer/index.ts | 1 - .../components/GlobalFooter.tsx} | 31 +- packages/ui/src/index.ts | 14 - packages/ui/src/menu/Menu.tsx | 58 ---- packages/ui/src/menu/MenuButton.tsx | 22 -- packages/ui/src/menu/MenuItem.tsx | 33 --- packages/ui/src/menu/MenuItems.tsx | 24 -- packages/ui/src/menu/index.ts | 1 - packages/ui/src/menu/usePopper.ts | 37 --- packages/ui/src/mounted/MountedController.tsx | 17 -- packages/ui/src/mounted/index.ts | 1 - packages/ui/src/select/Select.tsx | 67 ----- packages/ui/src/select/SelectButton.tsx | 52 ---- packages/ui/src/select/SelectLabel.tsx | 26 -- packages/ui/src/select/SelectOption.tsx | 52 ---- packages/ui/src/select/SelectOptions.tsx | 22 -- packages/ui/src/select/index.ts | 1 - packages/ui/src/skeleton/Box.tsx | 7 - packages/ui/src/skeleton/Circle.tsx | 22 -- packages/ui/src/skeleton/index.ts | 15 - packages/ui/src/stepper/index.ts | 10 - packages/ui/src/stepper/vertical/Step.tsx | 27 -- .../ui/src/stepper/vertical/StepButtons.tsx | 33 --- .../ui/src/stepper/vertical/StepContent.tsx | 46 --- .../src/stepper/vertical/StepDescription.tsx | 16 - .../ui/src/stepper/vertical/StepLabel.tsx | 36 --- packages/ui/src/stepper/vertical/Stepper.tsx | 68 ----- packages/ui/src/stepper/vertical/index.ts | 1 - packages/ui/src/switch/Switch.tsx | 79 ----- packages/ui/src/switch/index.ts | 1 - packages/ui/src/tabs/Tab.tsx | 43 --- packages/ui/src/tabs/TabGroup.tsx | 14 - packages/ui/src/tabs/TabList.tsx | 24 -- packages/ui/src/tabs/index.ts | 1 - .../components/UserProfile/Notification.tsx | 2 - 95 files changed, 421 insertions(+), 2877 deletions(-) delete mode 100644 apps/earn/components/AddPage/AddSectionReviewModalTrident.tsx delete mode 100644 apps/earn/components/AddPage/AddSectionReviewModalTridentCreate.tsx delete mode 100644 packages/ui/src/Page.tsx delete mode 100644 packages/ui/src/app/Header.tsx delete mode 100644 packages/ui/src/app/Main.tsx delete mode 100644 packages/ui/src/app/Nav.tsx delete mode 100644 packages/ui/src/app/Shell.tsx delete mode 100644 packages/ui/src/app/index.ts delete mode 100644 packages/ui/src/badge/Badge.tsx delete mode 100644 packages/ui/src/badge/index.ts delete mode 100644 packages/ui/src/button/Button.tsx delete mode 100644 packages/ui/src/button/index.tsx delete mode 100644 packages/ui/src/button/styles.tsx delete mode 100644 packages/ui/src/combobox/Combobox.tsx delete mode 100644 packages/ui/src/combobox/ComboboxInput.tsx delete mode 100644 packages/ui/src/combobox/ComboboxLabel.tsx delete mode 100644 packages/ui/src/combobox/ComboboxOption.tsx delete mode 100644 packages/ui/src/combobox/ComboboxOptions.tsx delete mode 100644 packages/ui/src/combobox/index.ts delete mode 100644 packages/ui/src/date/TimeAgo.tsx delete mode 100644 packages/ui/src/date/index.ts delete mode 100644 packages/ui/src/drawer/Drawer.tsx delete mode 100644 packages/ui/src/drawer/index.ts rename packages/ui/src/{app/Footer.tsx => future/components/GlobalFooter.tsx} (85%) delete mode 100644 packages/ui/src/menu/Menu.tsx delete mode 100644 packages/ui/src/menu/MenuButton.tsx delete mode 100644 packages/ui/src/menu/MenuItem.tsx delete mode 100644 packages/ui/src/menu/MenuItems.tsx delete mode 100644 packages/ui/src/menu/index.ts delete mode 100644 packages/ui/src/menu/usePopper.ts delete mode 100644 packages/ui/src/mounted/MountedController.tsx delete mode 100644 packages/ui/src/mounted/index.ts delete mode 100644 packages/ui/src/select/Select.tsx delete mode 100644 packages/ui/src/select/SelectButton.tsx delete mode 100644 packages/ui/src/select/SelectLabel.tsx delete mode 100644 packages/ui/src/select/SelectOption.tsx delete mode 100644 packages/ui/src/select/SelectOptions.tsx delete mode 100644 packages/ui/src/select/index.ts delete mode 100644 packages/ui/src/skeleton/Box.tsx delete mode 100644 packages/ui/src/skeleton/Circle.tsx delete mode 100644 packages/ui/src/skeleton/index.ts delete mode 100644 packages/ui/src/stepper/index.ts delete mode 100644 packages/ui/src/stepper/vertical/Step.tsx delete mode 100644 packages/ui/src/stepper/vertical/StepButtons.tsx delete mode 100644 packages/ui/src/stepper/vertical/StepContent.tsx delete mode 100644 packages/ui/src/stepper/vertical/StepDescription.tsx delete mode 100644 packages/ui/src/stepper/vertical/StepLabel.tsx delete mode 100644 packages/ui/src/stepper/vertical/Stepper.tsx delete mode 100644 packages/ui/src/stepper/vertical/index.ts delete mode 100644 packages/ui/src/switch/Switch.tsx delete mode 100644 packages/ui/src/switch/index.ts delete mode 100644 packages/ui/src/tabs/Tab.tsx delete mode 100644 packages/ui/src/tabs/TabGroup.tsx delete mode 100644 packages/ui/src/tabs/TabList.tsx delete mode 100644 packages/ui/src/tabs/index.ts diff --git a/apps/_root/app/(landing)/components/BuildFuture.tsx b/apps/_root/app/(landing)/components/BuildFuture.tsx index f6077a34dd..39899d8b2a 100644 --- a/apps/_root/app/(landing)/components/BuildFuture.tsx +++ b/apps/_root/app/(landing)/components/BuildFuture.tsx @@ -1,13 +1,14 @@ import { ChevronRightIcon } from '@heroicons/react-v1/solid' -import { Button, Container, Typography } from '@sushiswap/ui' import { motion } from 'framer-motion' import React, { FC } from 'react' import { ExpandableCard } from './ExpandableCard' import { AnimatedTitle } from './AnimatedTitle' -import { BentoBoxSVG } from './svgs/BentoBoxSVG' -import { SwitchSVG } from './svgs/SwitchSVG' +import { BentoBoxSVG } from './svgs' +import { SwitchSVG } from './svgs' +import { Button } from '@sushiswap/ui/future/components/button' +import { Container } from '@sushiswap/ui/future/components/Container' const DATA = [ { @@ -98,19 +99,11 @@ export const BuildFuture: FC = () => { >
- - {category} - + {category}
- + {title} - +
- - )} - - - ))} + +
+ {TABS.map(({ title, content, image, summary, link, linkText, caption }) => ( +
+
+
+ stellar +
+ + {({ setOpen, containerId, titleId }) => ( + + + {title} + + {summary} + + + )} +
- - + ))} +
diff --git a/apps/_root/app/(landing)/components/ExpandableCard.tsx b/apps/_root/app/(landing)/components/ExpandableCard.tsx index eacddd9fa8..431af04aca 100644 --- a/apps/_root/app/(landing)/components/ExpandableCard.tsx +++ b/apps/_root/app/(landing)/components/ExpandableCard.tsx @@ -1,8 +1,8 @@ import { ChevronRightIcon, ExternalLinkIcon } from '@heroicons/react-v1/solid' -import { Button, Link, Typography } from '@sushiswap/ui' import { AnimatePresence, AnimateSharedLayout, motion } from 'framer-motion' import { nanoid } from 'nanoid' import React, { FC, ReactNode, useCallback, useState } from 'react' +import { Button } from '@sushiswap/ui/future/components/button' interface ExpandableCardRenderProps { open: boolean @@ -43,7 +43,6 @@ export const ExpandableCard: FC = ({ children, title, capti setOpen(false)}> @@ -25,7 +27,7 @@ export const NetworkModal: FC = ({ chainId, setChainId }) => { {SUPPORTED_CHAINS.map((key) => ( ))} diff --git a/apps/_root/app/partner/page.tsx b/apps/_root/app/partner/page.tsx index 12a370d172..8eccfe361b 100644 --- a/apps/_root/app/partner/page.tsx +++ b/apps/_root/app/partner/page.tsx @@ -2,13 +2,15 @@ import { yupResolver } from '@hookform/resolvers/yup' import { ChainId } from '@sushiswap/chain' -import { Button, classNames, Loader, Typography } from '@sushiswap/ui' import { BackgroundImageMakerField, Form, ImageCanvas, NetworkModal, SizeSlider, UploadImageField } from './components' import stringify from 'fast-json-stable-stringify' import { addressValidator, useTokenData } from './lib' import React, { useRef, useState } from 'react' import { useForm } from 'react-hook-form' import * as yup from 'yup' +import { Loader } from '@sushiswap/ui/future/components/Loader' +import { classNames } from '@sushiswap/ui' +import { Button } from '@sushiswap/ui/future/components/button' enum SubmitState { Nothing = 'nothing', @@ -106,9 +108,7 @@ export default function Partner() { }>
- - Network - + Network
@@ -134,7 +134,7 @@ export default function Partner() { />
- Logo + Logo
@@ -147,7 +147,7 @@ export default function Partner() {
)}
- Background color + Background color
- Preview + Preview
{/*
@@ -182,7 +182,7 @@ export default function Partner() { disabled={(tokenAddress && !tokenData?.symbol) || !logoUri || !background} loading={submitState.state === SubmitState.Loading} variant="filled" - color="gray" + color="default" onClick={onSubmit} type="button" fullWidth @@ -191,31 +191,27 @@ export default function Partner() {
{submitState?.error && ( - - {submitState?.error} - + {submitState?.error} )} {submitState?.data && (
- - List pull request - - + List pull request + {submitState.data?.listPr} - +
)} - + I understand that filing an issue or adding liquidity does not guarantee addition to the Sushi default token list. I will not ping the Discord about this listing request. - +
) } diff --git a/apps/_root/ui/swap/search/SearchPanel.tsx b/apps/_root/ui/swap/search/SearchPanel.tsx index 3c40f7df1e..47096b9f04 100644 --- a/apps/_root/ui/swap/search/SearchPanel.tsx +++ b/apps/_root/ui/swap/search/SearchPanel.tsx @@ -7,7 +7,7 @@ import { List } from '@sushiswap/ui/future/components/list/List' import { usePrice, useTokenList, useTokenSearch } from '@sushiswap/react-query' import { Badge } from '@sushiswap/ui/future/components/Badge' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' -import { Button, classNames } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Skeleton } from '@sushiswap/ui/future/components/skeleton' import { Dialog } from '@sushiswap/ui/future/components/dialog' import { useSwapActions, useSwapState } from '../trade/TradeProvider' @@ -17,6 +17,7 @@ import { Currency } from '@sushiswap/ui/future/components/currency' import { COMMON_BASES } from '@sushiswap/router-config' import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' +import { Button } from '@sushiswap/ui/future/components/button' export const SearchPanel: FC = () => { const { network1 } = useSwapState() diff --git a/apps/academy/common/components/ArticlesPageHeader.tsx b/apps/academy/common/components/ArticlesPageHeader.tsx index acddf837e6..66366b4d6f 100644 --- a/apps/academy/common/components/ArticlesPageHeader.tsx +++ b/apps/academy/common/components/ArticlesPageHeader.tsx @@ -1,19 +1,17 @@ -import { Listbox } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/24/outline' import { useBreakpoint } from '@sushiswap/hooks' -import { classNames, Container, Select } from '@sushiswap/ui' +import { classNames, Container } from '@sushiswap/ui' import { LooperBg } from 'common/assets/LooperBg' import { FC, useLayoutEffect, useState } from 'react' import { DEFAULT_SIDE_PADDING } from '../helpers' -import { GradientWrapper, SelectOption } from './' import { DifficultyEntity, Maybe } from '.mesh' +import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' interface ArticlesPagesHeader { title: Maybe | undefined difficulties: DifficultyEntity[] - selectedDifficulty: Maybe | undefined - onSelect(difficulty: DifficultyEntity): void + selectedDifficulty: string | undefined + onSelect(index: string): void } const baseBg = [113, 285] @@ -40,35 +38,22 @@ export const ArticlesPageHeader: FC = ({ title, difficultie

{title}

- + + {selectedDifficulty ? difficulties[+selectedDifficulty]?.attributes?.label : ''} + + {difficulties?.map((difficulty, i) => ( - + > + {difficulty?.attributes?.name} + ))} - + diff --git a/apps/academy/common/components/FilterButton.tsx b/apps/academy/common/components/FilterButton.tsx index 2871446b0c..b0d203c933 100644 --- a/apps/academy/common/components/FilterButton.tsx +++ b/apps/academy/common/components/FilterButton.tsx @@ -1,7 +1,7 @@ -import { Button, classNames } from '@sushiswap/ui' import { FC } from 'react' import { Maybe } from '../../.mesh' +import { Button } from '@sushiswap/ui/future/components/button' interface FilterButton { isSelected: boolean @@ -11,15 +11,7 @@ interface FilterButton { export const FilterButton: FC = ({ title, isSelected, onClick }) => { return ( - ) diff --git a/apps/academy/common/components/PreviewBanner.tsx b/apps/academy/common/components/PreviewBanner.tsx index 25f9343e50..005cadbf99 100644 --- a/apps/academy/common/components/PreviewBanner.tsx +++ b/apps/academy/common/components/PreviewBanner.tsx @@ -1,6 +1,7 @@ -import { Button, Container, Typography } from '@sushiswap/ui' import Link from 'next/link' import { FC } from 'react' +import { Button } from '@sushiswap/ui/future/components/button' +import { Container } from '@sushiswap/ui/future/components/Container' interface PreviewBanner { show: boolean @@ -10,18 +11,14 @@ export const PreviewBanner: FC = ({ show }) => { if (!show) return <> return ( -
- +
+
- - Preview Mode - - - You are viewing an unpublished article - + Preview Mode + You are viewing an unpublished article
- diff --git a/apps/academy/common/components/ViewAllButton.tsx b/apps/academy/common/components/ViewAllButton.tsx index 3c3e404bb5..b9b0776492 100644 --- a/apps/academy/common/components/ViewAllButton.tsx +++ b/apps/academy/common/components/ViewAllButton.tsx @@ -1,17 +1,14 @@ import { PlusCircleIcon } from '@heroicons/react/24/solid' -import { Button, ButtonProps, classNames } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React, { ElementType, forwardRef, Ref } from 'react' +import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' export const ViewAllButton = forwardRef( ({ isSmall, className, ...rest }: ButtonProps, ref: Ref) => ( +
diff --git a/apps/academy/common/components/product/ProductHero.tsx b/apps/academy/common/components/product/ProductHero.tsx index ba43dbbb76..480b18cc6c 100644 --- a/apps/academy/common/components/product/ProductHero.tsx +++ b/apps/academy/common/components/product/ProductHero.tsx @@ -1,8 +1,9 @@ import { useBreakpoint } from '@sushiswap/hooks' -import { Button, classNames, Link, Typography } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { FC, ReactNode, useLayoutEffect, useState } from 'react' import { ProductStat, ProductStats } from './' +import { Button } from '@sushiswap/ui/future/components/button' interface ProductHero { productName: ReactNode @@ -55,11 +56,16 @@ export const ProductHero: FC = ({ {productDescription} - - - +
{image &&
{image}
}
diff --git a/apps/academy/common/components/product/ProductTechnicalDoc.tsx b/apps/academy/common/components/product/ProductTechnicalDoc.tsx index bc64d8e384..1dec4ca823 100644 --- a/apps/academy/common/components/product/ProductTechnicalDoc.tsx +++ b/apps/academy/common/components/product/ProductTechnicalDoc.tsx @@ -1,7 +1,8 @@ import { ArrowRightIcon } from '@heroicons/react/24/solid' -import { Button, classNames, Link, Typography } from '@sushiswap/ui' +import { classNames, Link } from '@sushiswap/ui' import { DocsIcon } from 'common/icons' import { FC } from 'react' +import { Button } from '@sushiswap/ui/future/components/button' interface ProductTechnicalDoc { color: string @@ -11,7 +12,7 @@ interface ProductTechnicalDoc { const DocsButton: FC<{ className: string; url: string }> = ({ className, url }) => ( - @@ -26,14 +27,14 @@ export const ProductTechnicalDoc: FC = ({ color, secondaryC
- Technical Documentation + Technical Documentation
- + { "Learn about the architecture of Sushi's smart contracts and how to build on top of the protocol, you can find implementations and explanations for each of our core smart contracts, broken out by product." } - +
diff --git a/apps/academy/pages/_app.tsx b/apps/academy/pages/_app.tsx index f0c4f5f537..753ed38b5a 100644 --- a/apps/academy/pages/_app.tsx +++ b/apps/academy/pages/_app.tsx @@ -3,7 +3,7 @@ import '../index.css' import '../variables.css' import { Cloudinary } from '@cloudinary/url-gen' -import { App, ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui' import type { AppContext, AppProps } from 'next/app' import { default as NextApp } from 'next/app' import { useRouter } from 'next/router' @@ -13,6 +13,7 @@ import { useEffect } from 'react' import { DefaultSeo, Header } from '../common/components' import { getGlobalSEO } from '../lib/api' import { Global } from '.mesh' +import { GlobalFooter } from '@sushiswap/ui/future/components/GlobalFooter' export const cld = new Cloudinary({ cloud: { @@ -58,14 +59,12 @@ const MyApp = ({ Component, seo, pageProps }: AppProps & { seo: Global }) => { }} /> - - -
-
- - -
- + +
+
+ + +
) diff --git a/apps/academy/pages/articles/index.tsx b/apps/academy/pages/articles/index.tsx index eb47187a69..18413d6db9 100644 --- a/apps/academy/pages/articles/index.tsx +++ b/apps/academy/pages/articles/index.tsx @@ -1,7 +1,5 @@ -import { Listbox } from '@headlessui/react' -import { ArrowsUpDownIcon, ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline' +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' import { useDebounce } from '@sushiswap/hooks' -import { classNames, Container, Select, Typography } from '@sushiswap/ui' import { DEFAULT_SIDE_PADDING, SORTING_OPTIONS } from 'common/helpers' import { InferGetServerSidePropsType } from 'next' import { useRouter } from 'next/router' @@ -9,7 +7,6 @@ import { FC, useEffect, useMemo, useState } from 'react' import useSWR, { SWRConfig } from 'swr' import { - DifficultyEntity, DifficultyEntityResponseCollection, Maybe, ProductEntity, @@ -17,16 +14,11 @@ import { TopicEntity, TopicEntityResponseCollection, } from '../../.mesh' -import { - ArticleList, - ArticlesPageHeader, - Card, - GradientWrapper, - Pagination, - SearchInput, - SelectOption, -} from '../../common/components' +import { ArticleList, ArticlesPageHeader, Card, Pagination, SearchInput } from '../../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../../lib/api' +import { Container } from '@sushiswap/ui/future/components/container' +import { classNames } from '@sushiswap/ui' +import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' export async function getStaticProps() { const [difficulties, topics, products] = await Promise.all([getDifficulties(), getTopics(), getProducts()]) @@ -54,9 +46,10 @@ const Articles: FC> = ({ fall const _Articles: FC = () => { const [query, setQuery] = useState('') const [page, setPage] = useState(1) - const [sortBy, setSortBy] = useState(SORTING_OPTIONS[0]) + const [sortByIndex, setSortByIndex] = useState('0') const debouncedQuery = useDebounce(query, 200) - const [selectedDifficulty, setSelectedDifficulty] = useState() + const [selectedDifficultyIndex, setSelectedDifficultyIndex] = useState() + const [selectedProduct, setSelectedProduct] = useState() const [selectedTopic, setSelectedTopic] = useState() const router = useRouter() @@ -67,15 +60,26 @@ const _Articles: FC = () => { search: string | undefined } const { difficulty: difficultyQuery, product: productQuery, topic: topicQuery, search: searchQuery } = queryParams - const { data: difficultiesData } = useSWR('/difficulties') const { data: topicsData } = useSWR('/topics') const { data: productsData } = useSWR('/products') + const selectedDifficulty = useMemo( + () => (selectedDifficultyIndex ? (difficultiesData?.data || [])[+selectedDifficultyIndex] : undefined), + [difficultiesData?.data, selectedDifficultyIndex] + ) + + const sortBy = SORTING_OPTIONS[+sortByIndex] + useEffect(() => { if (router.isReady && difficultyQuery) { - const searchedDifficulty = difficultiesData?.data?.find(({ attributes }) => attributes?.slug === difficultyQuery) - searchedDifficulty && setSelectedDifficulty(searchedDifficulty) + const searchedDifficulty = difficultiesData?.data?.findIndex( + ({ attributes }) => attributes?.slug === difficultyQuery + ) + + if (typeof searchedDifficulty === 'number') { + setSelectedDifficultyIndex(`${searchedDifficulty}`) + } } }, [difficultiesData?.data, difficultyQuery, router.isReady]) @@ -137,9 +141,6 @@ const _Articles: FC = () => { const articlesMeta = articlesData?.meta const clearInput = () => setQuery('') - const handleSelectDifficulty = (difficulty: DifficultyEntity) => { - setSelectedDifficulty((current) => (current?.id === difficulty.id ? undefined : difficulty)) - } const handleSelectTopic = (topic: TopicEntity) => { if (selectedProduct) setSelectedProduct(undefined) clearInput() @@ -167,65 +168,30 @@ const _Articles: FC = () => {
- + {selectedDifficulty?.attributes?.name} + {difficulties.map((difficulty, i) => ( - + + {difficulty.attributes?.name} + ))} - + - + {SORTING_OPTIONS[+sortByIndex].name} + + {SORTING_OPTIONS?.map((option, i) => ( + + {option.name} + ))} - +
@@ -245,7 +211,7 @@ const _Articles: FC = () => {
{products.map((product, i) => ( - { onClick={() => handleSelectProduct(product)} > {product.attributes?.longName} - + ))} {topics.map((topic, i) => ( - { onClick={() => handleSelectTopic(topic)} > {topic.attributes?.name} - + ))}
{articles && !articles.length ? ( - No articles found + No articles found ) : ( <>
- {articlesAmount} Results - + {SORTING_OPTIONS[+sortByIndex].name} + + {SORTING_OPTIONS?.map((option, i) => ( + + {option.name} + ))} - +
diff --git a/apps/academy/pages/index.tsx b/apps/academy/pages/index.tsx index 68e3dc8568..b6828b0158 100644 --- a/apps/academy/pages/index.tsx +++ b/apps/academy/pages/index.tsx @@ -1,13 +1,11 @@ -import { Disclosure, Listbox, Transition } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/24/outline' import { useDebounce } from '@sushiswap/hooks' -import { classNames, Container, Select, Typography } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { AcademySeo } from 'common/components/Seo/AcademySeo' import { DEFAULT_SIDE_PADDING } from 'common/helpers' import { InferGetServerSidePropsType } from 'next' import Link from 'next/link' import { useRouter } from 'next/router' -import { FC, Fragment, useMemo, useRef, useState } from 'react' +import { FC, useMemo, useRef, useState } from 'react' import useSWR, { SWRConfig } from 'swr' import { @@ -28,14 +26,13 @@ import { Difficulties, DifficultyCard, FilterButton, - GradientWrapper, Hero, HomeBackground, SearchInput, - SelectOption, ViewAllButton, } from '../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../lib/api' +import { Container } from '@sushiswap/ui/future/components/container' export async function getStaticProps() { const [articles, difficulties, topics, products] = await Promise.all([ @@ -161,95 +158,7 @@ const _Home: FC<{ seo: Global }> = ({ seo }) => {
- -
- Choose Topic - - - - -
- - - - - - - - - -
+
{products.map( (product) => product && ( @@ -274,10 +183,8 @@ const _Home: FC<{ seo: Global }> = ({ seo }) => { )}
-
- - Difficulty: - +
+ Difficulty:
= ({ row }) =
- + {token0.symbol} / {token1.symbol} - + {/* SushiSwap Farm */}
- + - +
- + APR: {formatPercent(row.totalApr1d)} - - + + Rewards: {formatPercent(row.incentiveApr)} - - + + Fees: {formatPercent(row.feeApr1d)} - +
{!!row?.incentives?.length && row.incentives.length > 0 && ( <>
- - Reward Emission - + Reward Emission {row.incentives.map((incentive) => (
= ({ row }) = width={18} height={18} /> - + {formatNumber(incentive.rewardPerDay)} {incentive.rewardToken.symbol} {' '} per day - +
))}
diff --git a/apps/analytics/components/TokenSection/TokenHeader.tsx b/apps/analytics/components/TokenSection/TokenHeader.tsx index 7d4f95de11..6b058e7ac9 100644 --- a/apps/analytics/components/TokenSection/TokenHeader.tsx +++ b/apps/analytics/components/TokenSection/TokenHeader.tsx @@ -1,12 +1,13 @@ import { getAddress } from '@ethersproject/address' import { formatUSD } from '@sushiswap/format' import { Bundle, Token as GraphToken } from '@sushiswap/graph-client' -import { Button, Chip, Currency, Typography } from '@sushiswap/ui' +import { Chip, Currency } from '@sushiswap/ui' import { useRouter } from 'next/router' import { FC } from 'react' import useSWR from 'swr' import { useTokenFromToken } from '../../lib/hooks' +import { Button } from '@sushiswap/ui/future/components/button' interface TokenHeader { token: GraphToken @@ -27,14 +28,10 @@ export const TokenHeader: FC = ({ token }) => {
- - {_token.name} - + {_token.name}
- - {price.includes('NaN') ? '$0.00' : price} - + {price.includes('NaN') ? '$0.00' : price}
diff --git a/apps/blog/components/PreviewBanner.tsx b/apps/blog/components/PreviewBanner.tsx index 6360f5b0b1..005cadbf99 100644 --- a/apps/blog/components/PreviewBanner.tsx +++ b/apps/blog/components/PreviewBanner.tsx @@ -1,6 +1,7 @@ -import { Button, Container, Typography } from '@sushiswap/ui' import Link from 'next/link' import { FC } from 'react' +import { Button } from '@sushiswap/ui/future/components/button' +import { Container } from '@sushiswap/ui/future/components/Container' interface PreviewBanner { show: boolean @@ -13,15 +14,11 @@ export const PreviewBanner: FC = ({ show }) => {
- - Preview Mode - - - You are viewing an unpublished article - + Preview Mode + You are viewing an unpublished article
- diff --git a/apps/blog/components/article/ArticleFooter.tsx b/apps/blog/components/article/ArticleFooter.tsx index 7dae09015e..4f44e412eb 100644 --- a/apps/blog/components/article/ArticleFooter.tsx +++ b/apps/blog/components/article/ArticleFooter.tsx @@ -1,5 +1,5 @@ import { ChevronRightIcon } from '@heroicons/react/solid' -import { Button } from '@sushiswap/ui' +import { Button } from '@sushiswap/ui/future/components/button' import { format } from 'date-fns' import { FC } from 'react' import { Article } from 'types' @@ -24,7 +24,7 @@ export const ArticleFooter: FC = ({ articles }) => {
)}
-
diff --git a/apps/earn/components/AddPage/AddSectionReviewModalTrident.tsx b/apps/earn/components/AddPage/AddSectionReviewModalTrident.tsx deleted file mode 100644 index 00e7635d7a..0000000000 --- a/apps/earn/components/AddPage/AddSectionReviewModalTrident.tsx +++ /dev/null @@ -1,243 +0,0 @@ -import { defaultAbiCoder } from '@ethersproject/abi' -import { Signature } from '@ethersproject/bytes' -import { AddressZero } from '@ethersproject/constants' -import { TransactionRequest } from '@ethersproject/providers' -import { calculateSlippageAmount, ConstantProductPool, StablePool } from '@sushiswap/amm' -import { BentoBoxV1ChainId } from '@sushiswap/bentobox' -import { Amount, Token, Type } from '@sushiswap/currency' -import { JSBI, Percent, ZERO } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' -import { Button } from '@sushiswap/ui/future/components/button' -import { - ConstantProductPoolState, - StablePoolState, - useBentoBoxTotals, - _useSendTransaction as useSendTransaction, - useTotalSupply, - useTridentRouterContract, - useAccount, -} from '@sushiswap/wagmi' -import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react' -import { SendTransactionResult } from '@sushiswap/wagmi/actions' - -import { approveMasterContractAction, batchAction, getAsEncodedAction, LiquidityInput } from '../../lib/actions' -import { AddSectionReviewModal } from './AddSectionReviewModal' -import { createToast } from '@sushiswap/ui/future/components/toast' -import { useSlippageTolerance } from '../../lib/hooks/useSlippageTolerance' -import { ChainId } from '@sushiswap/chain' - -interface AddSectionReviewModalTridentProps { - poolAddress: string - poolState: ConstantProductPoolState | StablePoolState | undefined - pool: ConstantProductPool | StablePool | null | undefined - chainId: BentoBoxV1ChainId - token0: Type | undefined - token1: Type | undefined - input0: Amount | undefined - input1: Amount | undefined - open: boolean - close(): void - permit: Signature | undefined -} - -const ZERO_PERCENT = new Percent('0') - -export const AddSectionReviewModalTrident: FC = ({ - poolAddress, - poolState, - pool, - chainId, - token0, - token1, - input0, - input1, - open, - close, - permit, -}) => { - const { address } = useAccount() - - const liquidityToken = useMemo(() => { - return new Token({ - address: poolAddress.includes(':') ? poolAddress.split(':')[1] : poolAddress, - name: 'SLP Token', - decimals: 18, - symbol: 'SLP', - chainId, - }) - }, [chainId, poolAddress]) - - const totalSupply = useTotalSupply(liquidityToken) - const tokens = useMemo(() => [token0, token1], [token0, token1]) - const rebases = useBentoBoxTotals(chainId, tokens) - const contract = useTridentRouterContract(chainId) - const [slippageTolerance] = useSlippageTolerance('addLiquidity') - const slippagePercent = useMemo(() => { - return new Percent(Math.floor(+(slippageTolerance === 'AUTO' ? '0.5' : slippageTolerance) * 100), 10_000) - }, [slippageTolerance]) - - const [minAmount0, minAmount1] = useMemo(() => { - return [ - input0 - ? poolState === ConstantProductPoolState.NOT_EXISTS || poolState === StablePoolState.NOT_EXISTS - ? input0 - : Amount.fromRawAmount(input0.currency, calculateSlippageAmount(input0, slippagePercent)[0]) - : undefined, - input1 - ? poolState === ConstantProductPoolState.NOT_EXISTS || poolState === StablePoolState.NOT_EXISTS - ? input1 - : Amount.fromRawAmount(input1.currency, calculateSlippageAmount(input1, slippagePercent)[0]) - : undefined, - ] - }, [poolState, input0, input1, slippagePercent]) - - const noLiquidity = useMemo(() => { - return ( - poolState === ConstantProductPoolState.NOT_EXISTS || - poolState === StablePoolState.NOT_EXISTS || - Boolean(totalSupply && JSBI.equal(totalSupply.quotient, ZERO)) || - Boolean(pool && JSBI.equal(pool.reserve0.quotient, ZERO) && JSBI.equal(pool.reserve1.quotient, ZERO)) - ) - }, [pool, poolState, totalSupply]) - - const liquidityMinted = useMemo(() => { - if ( - pool && - totalSupply && - token0 && - token1 && - input0 && - input1 && - rebases?.[token0.wrapped.address] && - rebases?.[token1.wrapped.address] - ) { - const amountA = input0.wrapped.toShare(rebases?.[token0.wrapped.address]) - const amountB = input1.wrapped.toShare(rebases?.[token1.wrapped.address]) - - // Both can't be zero - if (amountA.equalTo(ZERO) && amountB.equalTo(ZERO)) return undefined - - try { - const slp = pool.getLiquidityMinted(totalSupply, amountA, amountB) - const minSLP = calculateSlippageAmount(slp, noLiquidity ? ZERO_PERCENT : slippagePercent)[0] - return Amount.fromRawAmount(slp.currency, minSLP.toString()) - } catch (error) { - console.error(error) - } - } - - return undefined - }, [noLiquidity, input0, input1, pool, rebases, slippagePercent, token0, token1, totalSupply]) - - const onSettled = useCallback( - (data: SendTransactionResult | undefined) => { - if (!data || !chainId || !token0 || !token1) return - const ts = new Date().getTime() - void createToast({ - account: address, - type: 'mint', - chainId, - txHash: data.hash, - promise: data.wait(), - summary: { - pending: `Adding liquidity to the ${token0.symbol}/${token1.symbol} pair`, - completed: `Successfully added liquidity to the ${token0.symbol}/${token1.symbol} pair`, - failed: 'Something went wrong when adding liquidity', - }, - timestamp: ts, - groupTimestamp: ts, - }) - }, - [chainId, address, token0, token1] - ) - - const prepare = useCallback( - async (setRequest: Dispatch>) => { - try { - if ( - !chainId || - !pool || - !token0 || - !token1 || - !chainId || - !contract || - !input0 || - !input1 || - !address || - !minAmount0 || - !minAmount1 || - !liquidityMinted - ) - return - - let value - const liquidityInput: LiquidityInput[] = [] - const encoded = defaultAbiCoder.encode(['address'], [address]) - - if (input0) { - if (input0.currency.isNative) { - value = input0.quotient.toString() - } - - liquidityInput.push({ - token: input0.currency.isNative ? AddressZero : input0.currency.wrapped.address, - native: true, - amount: input0.quotient.toString(), - }) - } - - if (input1) { - if (input1.currency.isNative) { - value = input1.quotient.toString() - } - - liquidityInput.push({ - token: input1.currency.isNative ? AddressZero : input1.currency.wrapped.address, - native: true, - amount: input1.quotient.toString(), - }) - } - - if (liquidityInput.length === 0) return - - setRequest({ - from: address, - to: contract.address, - data: batchAction({ - contract, - actions: [ - approveMasterContractAction({ - router: contract, - signature: permit, - }), - getAsEncodedAction({ - contract, - fn: 'addLiquidity', - args: [liquidityInput, pool.liquidityToken.address, liquidityMinted.quotient.toString(), encoded], - }), - ], - }), - ...(value && { value }), - }) - } catch (e: unknown) { - // - } - }, - [chainId, pool, token0, token1, contract, input0, input1, address, minAmount0, minAmount1, liquidityMinted, permit] - ) - - const { sendTransaction, isLoading: isWritePending } = useSendTransaction({ - chainId, - prepare, - onSettled, - onSuccess: close, - }) - - return ( - - - - ) -} diff --git a/apps/earn/components/AddPage/AddSectionReviewModalTridentCreate.tsx b/apps/earn/components/AddPage/AddSectionReviewModalTridentCreate.tsx deleted file mode 100644 index f84dcab880..0000000000 --- a/apps/earn/components/AddPage/AddSectionReviewModalTridentCreate.tsx +++ /dev/null @@ -1,278 +0,0 @@ -import { defaultAbiCoder } from '@ethersproject/abi' -import { Signature } from '@ethersproject/bytes' -import { AddressZero } from '@ethersproject/constants' -import { TransactionRequest } from '@ethersproject/providers' -import { - computeConstantProductPoolAddress, - computeStablePoolAddress, - ConstantProductPool, - Fee, - StablePool, -} from '@sushiswap/amm' -import { BentoBoxV1ChainId } from '@sushiswap/bentobox' -import { Amount, Type } from '@sushiswap/currency' -import { Button, Dots } from '@sushiswap/ui' -import { - useBentoBoxTotals, - useConstantProductPoolFactoryContract, - _useSendTransaction as useSendTransaction, - useStablePoolFactoryContract, - useTridentRouterContract, - useAccount, - useNetwork, -} from '@sushiswap/wagmi' -import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react' -import { SendTransactionResult } from '@sushiswap/wagmi/actions' - -import { - approveMasterContractAction, - batchAction, - deployNewPoolAction, - getAsEncodedAction, - LiquidityInput, -} from '../../lib/actions' -import { AddSectionReviewModal } from '../AddSection' -import { PoolType } from '@sushiswap/wagmi/future/hooks' -import { createToast } from '@sushiswap/ui/future/components/toast' - -interface CreateSectionReviewModalTridentProps { - chainId: BentoBoxV1ChainId - token0: Type | undefined - token1: Type | undefined - input0: Amount | undefined - input1: Amount | undefined - fee: Fee - poolType: PoolType - open: boolean - close(): void - permit: Signature | undefined -} - -export const CreateSectionReviewModalTrident: FC = ({ - token0, - token1, - input0, - input1, - fee, - poolType, - chainId, - open, - close, - permit, -}) => { - const { address } = useAccount() - const { chain } = useNetwork() - const contract = useTridentRouterContract(chainId) - const constantProductPoolFactory = useConstantProductPoolFactoryContract(chainId) - const stablePoolFactory = useStablePoolFactoryContract(chainId) - - const totals = useBentoBoxTotals( - chainId, - useMemo(() => [token0, token1], [token0, token1]) - ) - - const pool = useMemo(() => { - if (!token0 || !token1 || !fee) return - if (poolType === PoolType.ConstantProduct) { - return new ConstantProductPool( - Amount.fromRawAmount(token0.wrapped, 0), - Amount.fromRawAmount(token1.wrapped, 0), - fee, - false - ) - } else if ( - poolType === PoolType.StablePool && - totals && - token0.wrapped.address in totals && - token1.wrapped.address in totals - ) { - return new StablePool( - Amount.fromRawAmount(token0.wrapped, 0), - Amount.fromRawAmount(token1.wrapped, 0), - fee, - totals[token0.wrapped.address], - totals[token1.wrapped.address] - ) - } - }, [fee, token0, token1, poolType, totals]) - - const totalSupply = useMemo(() => (pool ? Amount.fromRawAmount(pool?.liquidityToken, 0) : undefined), [pool]) - - const factory = useMemo(() => { - if (poolType === PoolType.ConstantProduct) { - return constantProductPoolFactory - } else if (poolType === PoolType.StablePool) { - return stablePoolFactory - } - }, [constantProductPoolFactory, poolType, stablePoolFactory]) - - const poolAddress = useMemo(() => { - if (!factory || !token0 || !token1 || !fee) return - if (poolType === PoolType.ConstantProduct) { - return computeConstantProductPoolAddress({ - factoryAddress: factory.address, - tokenA: token0.wrapped, - tokenB: token1.wrapped, - fee: fee, - twap: false, - }) - } else if (poolType === PoolType.StablePool) { - return computeStablePoolAddress({ - factoryAddress: factory.address, - tokenA: token0.wrapped, - tokenB: token1.wrapped, - fee: fee, - }) - } - }, [factory, fee, token0, token1, poolType]) - - const onSettled = useCallback( - (data: SendTransactionResult | undefined) => { - if (!data || !chain?.id || !token0 || !token1) return - const ts = new Date().getTime() - createToast({ - account: address, - type: 'mint', - chainId: chain.id, - txHash: data.hash, - promise: data.wait(), - summary: { - pending: `Adding liquidity to the ${token0.symbol}/${token1.symbol} pair`, - completed: `Successfully added liquidity to the ${token0.symbol}/${token1.symbol} pair`, - failed: 'Something went wrong when adding liquidity', - }, - timestamp: ts, - groupTimestamp: ts, - }) - }, - [chain?.id, address, token0, token1] - ) - - const prepare = useCallback( - async (setRequest: Dispatch>) => { - try { - if ( - !chain?.id || - !factory || - !token0 || - !token1 || - !poolAddress || - !input0 || - !input1 || - !totalSupply || - !pool || - !contract || - !totals?.[token0.wrapped.address] || - !totals?.[token1.wrapped.address] - ) { - return - } - - let value - const liquidityInput: LiquidityInput[] = [] - const encoded = defaultAbiCoder.encode(['address'], [address]) - - if (input0) { - if (input0.currency.isNative) { - value = input0.quotient.toString() - } - - liquidityInput.push({ - token: input0.currency.isNative ? AddressZero : input0.currency.wrapped.address, - native: true, - amount: input0.quotient.toString(), - }) - } - - if (input1) { - if (input1.currency.isNative) { - value = input1.quotient.toString() - } - - liquidityInput.push({ - token: input1.currency.isNative ? AddressZero : input1.currency.wrapped.address, - native: true, - amount: input1.quotient.toString(), - }) - } - - setRequest({ - from: address, - to: contract.address, - data: batchAction({ - contract, - actions: [ - approveMasterContractAction({ - router: contract, - signature: permit, - }), - deployNewPoolAction({ - assets: [input0.currency, input1.currency], - factory: factory.address, - router: contract, - feeTier: fee, - twap: false, - }), - getAsEncodedAction({ - contract, - fn: 'addLiquidity', - args: [ - liquidityInput, - poolAddress, - pool - .getLiquidityMinted( - totalSupply, - input0.wrapped.toShare(totals?.[token0.wrapped.address]), - input1.wrapped.toShare(totals?.[token1.wrapped.address]) - ) - .quotient.toString(), - encoded, - ], - }), - ], - }), - ...(value && { value }), - }) - } catch (e: unknown) { - // - } - }, - [ - address, - chain?.id, - contract, - factory, - fee, - input0, - input1, - permit, - pool, - poolAddress, - token0, - token1, - totalSupply, - totals, - ] - ) - - const { sendTransaction, isLoading: isWritePending } = useSendTransaction({ - chainId, - prepare, - onSettled, - onSuccess: close, - }) - - return ( - - - - ) -} diff --git a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx index b9290b9884..43d7a1ae0d 100644 --- a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx @@ -3,13 +3,14 @@ import { ChevronDownIcon } from '@heroicons/react/outline' import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource } from '@sushiswap/hooks' -import { Button, classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' +import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo } from 'react' import { useTokenAmountDollarValues, useUnderlyingTokenBalanceFromPool } from '../../lib/hooks' import { usePoolPosition } from '../PoolPositionProvider' +import { Button } from '@sushiswap/ui/future/components/button' interface AddSectionStakeWidgetProps { title?: string @@ -58,7 +59,7 @@ export const AddSectionStakeWidget: FC = ({ {({ open }) => ( <> - +
= ({ leaveTo="transform max-h-0" > - +
Stake your liquidity tokens to receive incentive rewards on top of your pool fee rewards - +
@@ -104,18 +105,22 @@ export const AddSectionStakeWidget: FC = ({ -
@@ -126,47 +131,18 @@ export const AddSectionStakeWidget: FC = ({
-
- + + {formatUSD(value0 + value1)} + +
{children}
diff --git a/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx b/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx index 9ebc2ff399..f6fa6008a4 100644 --- a/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx @@ -1,13 +1,12 @@ import { RadioGroup } from '@headlessui/react' -import { classNames, Skeleton } from '@sushiswap/ui' -import React, { Dispatch, FC, memo, SetStateAction, useMemo } from 'react' +import { classNames } from '@sushiswap/ui' +import React, { FC, memo, useMemo } from 'react' import { ContentBlock } from '../AddPage/ContentBlock' import { FeeAmount } from '@sushiswap/v3-sdk' -import { useConcentratedLiquidityURLState } from '../ConcentratedLiquidityURLStateProvider' import { Type } from '@sushiswap/currency' import { usePoolsByTokenPair } from 'lib/hooks/usePoolsByTokenPair' -import { formatPercent } from '@sushiswap/format' +import { Dots } from '@sushiswap/ui/future/components/Dots' export const FEE_OPTIONS = [ { @@ -91,19 +90,13 @@ export const SelectFeeConcentratedWidget: FC = memo
{option.value / 10000}% Fees
{' '} - {!isLoading ? ( - <> - {tvlDistribution.get(option.value) && ( -
- {(tvlDistribution.get(option.value)! * 100)?.toFixed(0)}% Selected -
- )} - - ) : ( - + {tvlDistribution.get(option.value) && ( +
+ {isLoading ? : `${(tvlDistribution.get(option.value)! * 100)?.toFixed(0)}% Selected`} +
)} - {option.subtitle} + {option.subtitle}
))} diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx index b6cfb81590..0a8c46cd92 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx @@ -4,13 +4,14 @@ import { ChainId } from '@sushiswap/chain' import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' -import { Button, classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' +import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo, useState } from 'react' import { useTokenAmountDollarValues, useUnderlyingTokenBalanceFromPool } from '../../lib/hooks' import { usePoolPositionStaked } from '../PoolPositionStakedProvider' +import { Button } from '@sushiswap/ui/future/components/button' interface RemoveSectionUnstakeWidget { chainId: ChainId @@ -64,9 +65,9 @@ export const RemoveSectionUnstakeWidget: FC = ({ leaveTo="transform opacity-0" >
- + No staked tokens found - +
@@ -74,7 +75,7 @@ export const RemoveSectionUnstakeWidget: FC = ({ {({ open }) => ( <> - +
= ({ leaveTo="transform max-h-0" > - +
Unstake your liquidity tokens first if you mean to remove your liquidity position - +
@@ -117,13 +118,25 @@ export const RemoveSectionUnstakeWidget: FC = ({ />
- - -
@@ -134,43 +147,18 @@ export const RemoveSectionUnstakeWidget: FC = ({
-
- - - {formatUSD(value0 + value1)} - - - + + {formatUSD(value0 + value1)} + +
{children}
diff --git a/apps/earn/pages/_app.tsx b/apps/earn/pages/_app.tsx index 5229942f18..35006131e2 100644 --- a/apps/earn/pages/_app.tsx +++ b/apps/earn/pages/_app.tsx @@ -1,6 +1,6 @@ import '@sushiswap/ui/index.css' -import { App, ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui' import { Analytics } from '@vercel/analytics/react' import { Header } from '../components' import { SUPPORTED_CHAIN_IDS } from '../config' @@ -11,6 +11,7 @@ import Script from 'next/script' import { DefaultSeo } from 'next-seo' import { FC, useEffect } from 'react' import { WagmiConfig, client } from '@sushiswap/wagmi' +import { GlobalFooter } from '@sushiswap/ui/future/components/GlobalFooter' import SEO from '../next-seo.config.mjs' import { Onramper } from '@sushiswap/wagmi/future/components/Onramper' @@ -56,14 +57,12 @@ const MyApp: FC = ({ Component, pageProps }) => { - - -
- - - - - + +
+ + + + diff --git a/apps/furo/pages/_app.tsx b/apps/furo/pages/_app.tsx index 2197dd6504..5cbf80cfb8 100644 --- a/apps/furo/pages/_app.tsx +++ b/apps/furo/pages/_app.tsx @@ -1,6 +1,6 @@ import '@sushiswap/ui/index.css' -import { App, ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui' import { client, WagmiConfig } from '@sushiswap/wagmi' import { Analytics } from '@vercel/analytics/react' import type { AppProps } from 'next/app' @@ -15,6 +15,7 @@ import SEO from '../next-seo.config.mjs' import { Onramper } from '@sushiswap/wagmi/future/components/Onramper' import { queryClient } from '@sushiswap/react-query' import { QueryClientProvider } from '@tanstack/react-query' +import { GlobalFooter } from '@sushiswap/ui/future/components/GlobalFooter' declare global { interface Window { @@ -72,7 +73,7 @@ const MyApp: FC = ({ Component, pageProps }) => {
- + diff --git a/packages/ui/src/Page.tsx b/packages/ui/src/Page.tsx deleted file mode 100644 index 42d7c5adf0..0000000000 --- a/packages/ui/src/Page.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import classNames from 'classnames' -import type { FC, HTMLAttributes } from 'react' - -export const Page: FC> = ({ children, className, ...props }) => ( -
- {children} -
-) diff --git a/packages/ui/src/app/Header.tsx b/packages/ui/src/app/Header.tsx deleted file mode 100644 index 1b3c3f989f..0000000000 --- a/packages/ui/src/app/Header.tsx +++ /dev/null @@ -1,221 +0,0 @@ -import { Listbox, Transition } from '@headlessui/react' -import { ChevronDownIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline' -import useScrollPosition from '@react-hook/window-scroll' -import { useBreakpoint, useIsMounted } from '@sushiswap/hooks' -import React, { Fragment } from 'react' - -import { AppType, classNames, Container, IconButton, Link, MaxWidth, Select, SushiIcon, Typography } from '..' - -export interface HeaderProps extends React.HTMLProps { - nav?: JSX.Element - withScrollBackground?: boolean - appType: AppType - maxWidth?: MaxWidth - bgColor?: string -} - -export function Header({ - children, - appType, - className, - nav, - withScrollBackground = false, - bgColor = 'bg-slate-900', - maxWidth = 'full', - ...props -}: HeaderProps): JSX.Element { - const isMounted = useIsMounted() - const scrollY = useScrollPosition() - - const { isMd } = useBreakpoint('md') - - // Show when: - // 1. We scroll down for 45px - // 2. When body has a negative top set for body lock for Dialogs on small screens - const showBackground = - (scrollY > 45 && withScrollBackground && isMounted) || - (typeof window !== 'undefined' && !isMd - ? Number(document.body.style.top.slice(0, -2)) < 0 && withScrollBackground - : false) - - return ( -
- -
- - -
- -
- -
- -
- -
-
{nav}
-
{children}
- -
- ) -} - -export default Header diff --git a/packages/ui/src/app/Main.tsx b/packages/ui/src/app/Main.tsx deleted file mode 100644 index c42484aa80..0000000000 --- a/packages/ui/src/app/Main.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export type MainProps = React.HTMLProps - -export function Main({ children, className }: MainProps): JSX.Element { - return
{children}
-} - -export default Main diff --git a/packages/ui/src/app/Nav.tsx b/packages/ui/src/app/Nav.tsx deleted file mode 100644 index c637b37f4d..0000000000 --- a/packages/ui/src/app/Nav.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export type NavProps = React.HTMLProps - -export function Nav({ children, className }: NavProps): JSX.Element { - return -} - -export default Nav diff --git a/packages/ui/src/app/Shell.tsx b/packages/ui/src/app/Shell.tsx deleted file mode 100644 index 66a41b86a3..0000000000 --- a/packages/ui/src/app/Shell.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export interface ShellProps { - children?: React.ReactNode -} - -export function Shell({ children }: ShellProps): JSX.Element { - return
{children}
-} diff --git a/packages/ui/src/app/index.ts b/packages/ui/src/app/index.ts deleted file mode 100644 index b9755350ff..0000000000 --- a/packages/ui/src/app/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { type FooterProps, Footer } from './Footer' -import { type HeaderProps, Header } from './Header' -import { type MainProps, Main } from './Main' -import { type NavProps, Nav } from './Nav' -import { type ShellProps, Shell } from './Shell' - -export type AppProps = { - Header: HeaderProps - Shell: ShellProps - Nav: NavProps - Main: MainProps - Footer: FooterProps -} - -/** - * @deprecated - */ -export const App = { - Header, - Shell, - Nav, - Main, - Footer, -} diff --git a/packages/ui/src/badge/Badge.tsx b/packages/ui/src/badge/Badge.tsx deleted file mode 100644 index 3ca6910c39..0000000000 --- a/packages/ui/src/badge/Badge.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import classNames from 'classnames' -import { FC, ReactElement } from 'react' - -interface Badge { - badgeContent: ReactElement - children: ReactElement - className?: string -} - -/** - * @deprecated - */ -export const Badge: FC = ({ badgeContent, children, className }) => { - return ( -
-
{badgeContent}
- {children} -
- ) -} diff --git a/packages/ui/src/badge/index.ts b/packages/ui/src/badge/index.ts deleted file mode 100644 index b9eff9e117..0000000000 --- a/packages/ui/src/badge/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Badge' diff --git a/packages/ui/src/button/Button.tsx b/packages/ui/src/button/Button.tsx deleted file mode 100644 index eddff2233f..0000000000 --- a/packages/ui/src/button/Button.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import classNames from 'classnames' -import React, { ReactNode } from 'react' - -import { Loader } from '../loader' -import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../types' -import { BUTTON_CLASSES, BUTTON_SIZES, BUTTON_STYLES, BUTTON_STYLES_VARIANT } from './styles' - -export type ButtonColor = 'red' | 'blue' | 'pink' | 'purple' | 'gradient' | 'gray' -export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'default' -export type ButtonVariant = 'outlined' | 'filled' | 'empty' - -interface Props { - children?: ReactNode - startIcon?: ReactNode - endIcon?: ReactNode - color?: ButtonColor - size?: ButtonSize - variant?: ButtonVariant - fullWidth?: boolean - loading?: boolean - href?: string -} - -export type ButtonProps = PolymorphicComponentPropsWithRef -export type ButtonComponent = ( - props: ButtonProps -) => React.ReactElement | null - -/** - * @deprecated use ui/future/button - */ -export const Button: ButtonComponent = React.forwardRef( - ( - { - as, - children, - className, - color = 'blue', - size = 'default', - variant = 'filled', - startIcon = undefined, - endIcon = undefined, - fullWidth = false, - loading, - disabled, - ...rest - }: ButtonProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'button' - - return ( - - {loading ? ( - - ) : ( - <> - {startIcon && startIcon} - {children} - {endIcon && endIcon} - - )} - - ) - } -) - -export default Button diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx deleted file mode 100644 index 8486fd6d62..0000000000 --- a/packages/ui/src/button/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Button' diff --git a/packages/ui/src/button/styles.tsx b/packages/ui/src/button/styles.tsx deleted file mode 100644 index b62e66dd13..0000000000 --- a/packages/ui/src/button/styles.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { ButtonColor, ButtonSize, ButtonVariant } from './Button' - -export const BUTTON_CLASSES: Record = { - btn: 'font-medium flex hover:ring-2 focus:ring-2 items-center justify-center gap-2 rounded-xl cursor-pointer', - 'btn-disabled': 'cursor-not-allowed opacity-40 !ring-0', - 'btn-filled': 'text-slate-50', - 'btn-empty': '!ring-0', - 'btn-outlined': 'border-2 hover:ring-2 border-opacity-20 ring-offset-2 ring-offset-slate-900 rounded-xl', - 'btn-outlined-red': 'border-2 hover:ring-2 border-opacity-20 ring-offset-2 ring-offset-slate-900 rounded-xl', - 'btn-outlined-pink': 'border-pink ring-pink-700 text-pink', - 'btn-outlined-blue': 'border-blue ring-blue-700 text-blue', - 'btn-outlined-purple': 'border-purple ring-purple-700 text-purple', - 'btn-outlined-gradient': - 'bg-gradient-to-r hover:ring-4 ring-slate-600 ring-purple/30 from-blue to-pink focus:border-blue-700', - 'btn-outlined-gray': 'border-slate-700 ring-slate-700 text-slate-400', - 'btn-filled-red': 'bg-red ring-red-700', - 'btn-filled-pink': 'bg-pink ring-pink-700', - 'btn-filled-blue': 'bg-blue ring-blue-700', - 'btn-filled-purple': 'bg-purple ring-purple-700', - 'btn-filled-gradient': 'bg-gradient-to-r hover:ring-4 !ring-pink/20 from-blue-600 to-pink-600 focus:border-blue-700', - 'btn-filled-gray': 'bg-slate-700 ring-slate-600', - 'btn-xs': 'px-2 h-[28px] text-xs', - 'btn-sm': 'px-3 h-[36px] text-sm font-semibold', - 'btn-default': 'px-3 h-[44px] text-sm font-semibold', - 'btn-md': 'px-4 h-[52px] rounded-2xl text-base font-semibold', - 'btn-lg': 'px-6 h-[60px] rounded-2xl text-base font-semibold', - 'btn-empty-red': 'text-red hover:text-red-300', - 'btn-empty-pink': 'text-pink hover:text-pink-300', - 'btn-empty-blue': 'text-blue hover:text-blue-300', - 'btn-empty-purple': 'text-purple hover:text-purple-300', - 'btn-empty-gray': 'text-slate-400 hover:text-slate-200', -} - -export const BUTTON_STYLES: Record> = { - outlined: { - red: 'btn-outlined-red', - pink: 'btn-outlined-pink', - blue: 'btn-outlined-blue', - purple: 'btn-outlined-purple', - gradient: 'btn-outlined-gradient', - gray: 'btn-outlined-gray', - }, - filled: { - red: 'btn-filled-red', - pink: 'btn-filled-pink', - blue: 'btn-filled-blue', - purple: 'btn-filled-purple', - gradient: 'btn-filled-gradient', - gray: 'btn-filled-gray', - }, - empty: { - red: 'btn-empty-red', - pink: 'btn-empty-pink', - blue: 'btn-empty-blue', - purple: 'btn-empty-purple', - gradient: 'btn-empty-gradient', - gray: 'btn-empty-gray', - }, -} - -export const BUTTON_STYLES_VARIANT: Record = { - outlined: 'btn-outlined', - filled: 'btn-filled', - empty: 'btn-empty', -} - -export const BUTTON_SIZES: Record = { - default: 'btn-default', - xs: 'btn-xs', - sm: 'btn-sm', - md: 'btn-md', - lg: 'btn-lg', -} diff --git a/packages/ui/src/combobox/Combobox.tsx b/packages/ui/src/combobox/Combobox.tsx deleted file mode 100644 index c694e8686c..0000000000 --- a/packages/ui/src/combobox/Combobox.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Combobox as HeadlessCombobox, Menu as HeadlessMenu, Transition } from '@headlessui/react' -import classNames from 'classnames' -import { FC, Fragment, FunctionComponent, ReactElement } from 'react' - -import { ExtractProps } from '../types' -import ComboboxInput, { ComboboxInputProps } from './ComboboxInput' -import ComboboxLabel, { ComboboxLabelProps } from './ComboboxLabel' -import ComboboxOption, { ComboboxOptionProps } from './ComboboxOption' -import ComboboxOptions, { ComboboxOptionsProps } from './ComboboxOptions' - -type ComboboxProps = ExtractProps & { - input: ReactElement> - label: ReactElement> - children: ReactElement> -} - -const ComboboxRoot: FC = ({ className, value, onChange, disabled, input, children, label }) => { - return ( - - {({ open }) => ( -
- {label} -
- {input} - - {children} - -
-
- )} - - ) -} - -/** - * @deprecated - */ -export const Combobox: FunctionComponent & { - Input: FC - Label: FC - Option: FC - Options: FC -} = Object.assign(ComboboxRoot, { - Input: ComboboxInput, - Label: ComboboxLabel, - Option: ComboboxOption, - Options: ComboboxOptions, -}) diff --git a/packages/ui/src/combobox/ComboboxInput.tsx b/packages/ui/src/combobox/ComboboxInput.tsx deleted file mode 100644 index 90cfa45c76..0000000000 --- a/packages/ui/src/combobox/ComboboxInput.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Combobox as HeadlessCombobox } from '@headlessui/react' -import { ChevronUpDownIcon } from '@heroicons/react/24/outline' -import classNames from 'classnames' -import React, { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' -import { Typography } from '../typography/Typography' - -export type ComboboxInputProps = ExtractProps & { - children?: string - standalone?: boolean -} - -const ComboboxInput: FC = forwardRef(({ className, standalone, children, ...props }, ref) => { - return React.createElement( - standalone ? 'div' : HeadlessCombobox.Input, - { - ...props, - ref, - className: classNames( - className, - 'relative w-full cursor-default rounded-xl bg-slate-800 py-3 pl-4 pr-10 text-left' - ), - }, - <> - - {children || 'Combobox a token'} - - - - - ) -}) - -export default ComboboxInput diff --git a/packages/ui/src/combobox/ComboboxLabel.tsx b/packages/ui/src/combobox/ComboboxLabel.tsx deleted file mode 100644 index 2afd6da3b1..0000000000 --- a/packages/ui/src/combobox/ComboboxLabel.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Combobox as HeadlessCombobox } from '@headlessui/react' -import classNames from 'classnames' -import { FC, Fragment } from 'react' - -import { ExtractProps } from '../types' -import { Typography } from '../typography' - -export type ComboboxLabelProps = ExtractProps & { - children: string -} - -const ComboboxLabel: FC = ({ className, children, ...props }) => { - return ( - - - {children} - - - ) -} - -export default ComboboxLabel diff --git a/packages/ui/src/combobox/ComboboxOption.tsx b/packages/ui/src/combobox/ComboboxOption.tsx deleted file mode 100644 index be5e29a7ad..0000000000 --- a/packages/ui/src/combobox/ComboboxOption.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Combobox as HeadlessCombobox } from '@headlessui/react' -import { CheckIcon } from '@heroicons/react/24/outline' -import classNames from 'classnames' -import { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' - -export type ComboboxOptionProps = ExtractProps & { - children?: string -} - -const ComboboxOption: FC = forwardRef(({ className, children, ...props }, ref) => { - return ( - - classNames( - active ? 'text-blue-100 bg-blue-500 bg-opacity-50' : 'text-high-emphesis', - 'font-medium text-sm cursor-default Combobox-none relative py-2 pl-4 pr-9 rounded-xl border-[3px] border-slate-800', - className - ) - } - > - {({ selected }: { selected: boolean }) => ( - <> - {selected && } - {children} - - )} - - ) -}) - -export default ComboboxOption diff --git a/packages/ui/src/combobox/ComboboxOptions.tsx b/packages/ui/src/combobox/ComboboxOptions.tsx deleted file mode 100644 index 9735ec5b1b..0000000000 --- a/packages/ui/src/combobox/ComboboxOptions.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Combobox as HeadlessCombobox } from '@headlessui/react' -import { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' - -export type ComboboxOptionsProps = ExtractProps - -const ComboboxOptions: FC = forwardRef(({ className, ...props }, ref) => { - return ( - - ) -}) - -export default ComboboxOptions diff --git a/packages/ui/src/combobox/index.ts b/packages/ui/src/combobox/index.ts deleted file mode 100644 index c164714633..0000000000 --- a/packages/ui/src/combobox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Combobox' diff --git a/packages/ui/src/date/TimeAgo.tsx b/packages/ui/src/date/TimeAgo.tsx deleted file mode 100644 index d0f80dbde0..0000000000 --- a/packages/ui/src/date/TimeAgo.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { useInterval } from '@sushiswap/hooks' -import formatDistanceToNow from 'date-fns/formatDistanceToNow' -import React, { FC, useState } from 'react' - -/** - * @deprecated - */ -export const TimeAgo: FC<{ date: Date }> = ({ date }) => { - const [distance, setDistance] = useState(formatDistanceToNow(date, { addSuffix: true, includeSeconds: true })) - - useInterval(() => { - setDistance(formatDistanceToNow(date, { addSuffix: true, includeSeconds: true })) - }, 1000) - - return <>{distance} -} diff --git a/packages/ui/src/date/index.ts b/packages/ui/src/date/index.ts deleted file mode 100644 index 5e33f4b78b..0000000000 --- a/packages/ui/src/date/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TimeAgo' diff --git a/packages/ui/src/drawer/Drawer.tsx b/packages/ui/src/drawer/Drawer.tsx deleted file mode 100644 index da07e72d39..0000000000 --- a/packages/ui/src/drawer/Drawer.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsMounted } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { - createContext, - Dispatch, - FC, - Fragment, - MouseEventHandler, - ReactNode, - SetStateAction, - useCallback, - useContext, - useEffect, - useRef, - useState, -} from 'react' -import ReactDOM from 'react-dom' - -import { ButtonComponent } from '../button' - -interface DrawerContext { - open: boolean - setOpen: Dispatch> - element: HTMLDivElement | null -} - -const DrawerContext = createContext(undefined) - -interface ProviderProps { - children: (({ open, setOpen }: { open: boolean; setOpen(open: boolean): void }) => ReactNode) | ReactNode -} - -/** - * @deprecated - */ -export const DrawerRoot: FC = ({ children }) => { - const ref = useRef(null) - const [open, setOpen] = useState(false) - const [, setRender] = useState(false) - - // Force render - useEffect(() => { - if (ref.current) setRender(true) - }, []) - - useEffect(() => { - if (open) { - document.body.parentElement?.classList.add('overflow-hidden') - } else { - document.body.parentElement?.classList.remove('overflow-hidden') - } - }, [open]) - - return ( - - {typeof children === 'function' ? children({ open, setOpen }) : children} - - ) -} - -export const useDrawer = () => { - const context = useContext(DrawerContext) - if (!context) { - throw new Error('Hook can only be used inside Drawer Context') - } - - return context -} - -interface PanelProps { - children: ReactNode - className?: string -} - -export const DrawerButton: ButtonComponent = (props) => { - const { setOpen } = useDrawer() - - const onClick = useCallback>( - (e) => { - setOpen((prev) => !prev) - props.onClick && props.onClick(e) - }, - [props, setOpen] - ) - - return
-} - -export const Panel: FC = ({ children, className }) => { - const { open, setOpen } = useDrawer() - const isMounted = useIsMounted() - - if (!isMounted) return <> - - return ReactDOM.createPortal( - -
- - - , - document.body - ) -} - -export const Drawer = { Root: DrawerRoot, Panel, Button: DrawerButton } diff --git a/packages/ui/src/drawer/index.ts b/packages/ui/src/drawer/index.ts deleted file mode 100644 index 04766cfab1..0000000000 --- a/packages/ui/src/drawer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Drawer' diff --git a/packages/ui/src/app/Footer.tsx b/packages/ui/src/future/components/GlobalFooter.tsx similarity index 85% rename from packages/ui/src/app/Footer.tsx rename to packages/ui/src/future/components/GlobalFooter.tsx index bfa2c2190e..c03739f063 100644 --- a/packages/ui/src/app/Footer.tsx +++ b/packages/ui/src/future/components/GlobalFooter.tsx @@ -2,10 +2,9 @@ import { ReactNode, useCallback } from 'react' -import { Container, DiscordIcon, GithubIcon, InstagramIcon, Link, SushiWithTextIcon, TwitterIcon, Typography } from '..' -import { MaxWidth } from '../future/components/Container' -import ReactDOM from 'react-dom' import dynamic from 'next/dynamic' +import { Container, MaxWidth } from './Container' +import { DiscordIcon, GithubIcon, InstagramIcon, SushiWithTextIcon, TwitterIcon } from './icons' export type FooterProps = React.HTMLProps & { children?: ReactNode @@ -116,9 +115,7 @@ const Component = ({ children, maxWidth = '5xl', ...props }: FooterProps) => { (title: string, items: Record) => { return (
- - {title} - + {title} {Object.entries(items).map(([item, { href, rel, target }]) => ( { @@ -215,6 +208,6 @@ const Component = ({ children, maxWidth = '5xl', ...props }: FooterProps) => { ) } -export const Footer = dynamic(() => Promise.resolve(Component), { +export const GlobalFooter = dynamic(() => Promise.resolve(Component), { ssr: false, }) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 58130099a2..b8ec12cffd 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,20 +1,14 @@ import './globals.css' export * from './animation' -export * from './app' -export * from './badge' export * from './breadcrumb' -export * from './button' export * from './checkbox' export * from './chip' -export * from './combobox' export * from './container' export * from './copy' export * from './currency' -export * from './date' export * from './dialog' export * from './dots' -export * from './drawer' export * from './dropzone' export * from './form' export * from './iconbutton' @@ -22,16 +16,8 @@ export * from './icons' export * from './input' export * from './link' export * from './loader' -export * from './menu' -export * from './mounted' export * from './overlay' -export * from './Page' export * from './progressbar' -export * from './select' -export * from './skeleton' -export * from './stepper' -export * from './switch' -export * from './tabs' export * from './theme' export * from './types' export * from './typography' diff --git a/packages/ui/src/menu/Menu.tsx b/packages/ui/src/menu/Menu.tsx deleted file mode 100644 index a4a67acaad..0000000000 --- a/packages/ui/src/menu/Menu.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { Menu as HeadlessMenu } from '@headlessui/react' -import classNames from 'classnames' -import React, { FC, FunctionComponent, ReactElement } from 'react' -import ReactDOM from 'react-dom' - -import { AppearOnMount } from '../animation' -import { MenuButton } from './MenuButton' -import { MenuItem } from './MenuItem' -import { MenuItems } from './MenuItems' -import { usePopper } from './usePopper' - -interface MenuProps { - className?: string - button: ReactElement - children: ReactElement - appearOnMount?: boolean -} - -const MenuRoot: FC = ({ className, button, appearOnMount = false, children }) => { - const [trigger, container] = usePopper({ - placement: 'bottom-end', - modifiers: [ - { name: 'flip', enabled: true, options: { padding: 8 } }, - { name: 'offset', options: { offset: [0, 10] } }, - ], - }) - - return ( - - {(mounted) => - mounted ? ( - - {React.cloneElement(button, { ref: trigger })} - {ReactDOM.createPortal(React.cloneElement(children, { ref: container }), document.body)} - - ) : ( - - {React.cloneElement(button, { ref: trigger })} - {React.cloneElement(children, { ref: container })} - - ) - } - - ) -} - -/** - * @deprecated - */ -export const Menu: FunctionComponent & { - Item: FC - Items: FC - Button: FC -} = Object.assign(MenuRoot, { - Item: MenuItem, - Items: MenuItems, - Button: MenuButton, -}) diff --git a/packages/ui/src/menu/MenuButton.tsx b/packages/ui/src/menu/MenuButton.tsx deleted file mode 100644 index cc933bcbc2..0000000000 --- a/packages/ui/src/menu/MenuButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Menu as HeadlessMenu } from '@headlessui/react' -import React, { forwardRef, ReactNode } from 'react' - -import { Button } from '..' -import { ExtractProps } from '../types' - -export type MenuButton = ExtractProps & { - children?: ReactNode -} - -export const MenuButton: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes -> = forwardRef(({ className, children, ...props }, ref) => { - return ( - // @ts-ignore - - - - ) -}) diff --git a/packages/ui/src/menu/MenuItem.tsx b/packages/ui/src/menu/MenuItem.tsx deleted file mode 100644 index 4a2e084a0d..0000000000 --- a/packages/ui/src/menu/MenuItem.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Menu as HeadlessMenu } from '@headlessui/react' -import classNames from 'classnames' -import { FC, forwardRef, ReactNode } from 'react' - -import { ExtractProps } from '../types' - -export type MenuItem = ExtractProps & { - children?: ReactNode | Array - className?: string - startIcon?: ReactNode -} - -export const MenuItem: FC = forwardRef( - ({ className, startIcon, children, as, ...props }, ref) => { - return ( - - classNames( - active ? 'text-white bg-blue-500' : 'text-high-emphesis', - 'whitespace-nowrap flex gap-2 items-center font-medium text-sm cursor-pointer select-none relative py-2 pl-4 pr-9 my-1 mx-1 rounded-xl', - className - ) - } - > - {startIcon && startIcon} - {children} - - ) - } -) diff --git a/packages/ui/src/menu/MenuItems.tsx b/packages/ui/src/menu/MenuItems.tsx deleted file mode 100644 index cca5d21f52..0000000000 --- a/packages/ui/src/menu/MenuItems.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Menu as HeadlessMenu } from '@headlessui/react' -import React, { forwardRef } from 'react' - -import { classNames } from '../index' -import { ExtractProps } from '../types' - -export type MenuItems = ExtractProps & { - className?: string -} - -export const MenuItems: React.ForwardRefExoticComponent< - React.PropsWithoutRef & React.RefAttributes -> = forwardRef(({ className, ...props }, ref) => { - return ( - - ) -}) diff --git a/packages/ui/src/menu/index.ts b/packages/ui/src/menu/index.ts deleted file mode 100644 index 67984a1ecf..0000000000 --- a/packages/ui/src/menu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Menu' diff --git a/packages/ui/src/menu/usePopper.ts b/packages/ui/src/menu/usePopper.ts deleted file mode 100644 index 52c4fdc23d..0000000000 --- a/packages/ui/src/menu/usePopper.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { createPopper, Options } from '@popperjs/core' -import { RefCallback, useCallback, useMemo, useRef } from 'react' - -/** - * Example implementation to use Popper: https://popper.js.org/ - */ -export function usePopper(options?: Partial): [RefCallback, RefCallback] { - const reference = useRef() - const popper = useRef() - - const cleanupCallback = useRef(() => {}) - - const instantiatePopper = useCallback(() => { - if (!reference.current) return - if (!popper.current) return - - if (cleanupCallback.current) { - cleanupCallback.current() - } - - cleanupCallback.current = createPopper(reference.current, popper.current, options).destroy - }, [reference, popper, cleanupCallback, options]) - - return useMemo( - () => [ - (referenceDomNode) => { - reference.current = referenceDomNode - instantiatePopper() - }, - (popperDomNode) => { - popper.current = popperDomNode - instantiatePopper() - }, - ], - [reference, popper, instantiatePopper] - ) -} diff --git a/packages/ui/src/mounted/MountedController.tsx b/packages/ui/src/mounted/MountedController.tsx deleted file mode 100644 index d9aa3a54b1..0000000000 --- a/packages/ui/src/mounted/MountedController.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useIsMounted } from '@sushiswap/hooks' -import { FC, ReactElement } from 'react' - -interface MountedController { - children: ReactElement - skeleton: ReactElement - - // For creating skeleton layouts more easily - showSkeleton?: boolean -} - -export const MountedController: FC = ({ children, skeleton, showSkeleton = false }) => { - const isMounted = useIsMounted() - - if (!isMounted || showSkeleton) return skeleton - return children -} diff --git a/packages/ui/src/mounted/index.ts b/packages/ui/src/mounted/index.ts deleted file mode 100644 index 6d1b5f314b..0000000000 --- a/packages/ui/src/mounted/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MountedController' diff --git a/packages/ui/src/select/Select.tsx b/packages/ui/src/select/Select.tsx deleted file mode 100644 index 29dfba02a0..0000000000 --- a/packages/ui/src/select/Select.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Listbox, Menu as HeadlessMenu, Transition } from '@headlessui/react' -import classNames from 'classnames' -import { cloneElement, FC, Fragment, ReactElement } from 'react' - -import { ExtractProps } from '../types' -import SelectButton, { SelectButtonProps } from './SelectButton' -import SelectLabel, { SelectLabelProps } from './SelectLabel' -import SelectOption, { SelectOptionProps } from './SelectOption' -import SelectOptions, { SelectOptionsProps } from './SelectOptions' - -type SelectProps = ExtractProps & { - button: ReactElement> - label?: ReactElement> - children: ReactElement> -} - -const SelectRoot: FC = ({ - className, - value, - onChange, - disabled, - horizontal, - button, - multiple, - children, - label, -}) => { - return ( - - {({ open }: { open: boolean }) => ( -
- {label && label} -
- {cloneElement(button, { open })} - - {children} - -
-
- )} - - ) -} - -/** - * @deprecated - */ -export const Select: FC & { - Button: FC - Label: FC - Option: FC - Options: FC -} = Object.assign(SelectRoot, { - Button: SelectButton, - Label: SelectLabel, - Option: SelectOption, - Options: SelectOptions, -}) diff --git a/packages/ui/src/select/SelectButton.tsx b/packages/ui/src/select/SelectButton.tsx deleted file mode 100644 index 0c9b64d6bb..0000000000 --- a/packages/ui/src/select/SelectButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Listbox } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/20/solid' -import classNames from 'classnames' -import React, { FC, forwardRef, ReactNode } from 'react' - -import { DEFAULT_INPUT_CLASSNAME, ERROR_INPUT_CLASSNAME } from '../input' -import { ExtractProps } from '../types' -import { Typography } from '../typography' - -export type SelectButtonProps = ExtractProps & { - children?: ReactNode - standalone?: boolean - error?: boolean -} - -const SelectButton: FC = forwardRef( - ({ className, children, standalone, error = false, open, ...props }, ref) => { - return React.createElement( - standalone ? 'div' : Listbox.Button, - { - open, - ...props, - ref, - className: classNames( - open ? 'ring-2 ring-offset-2 ring-blue !bg-slate-600' : '', - 'relative w-full pr-10', - DEFAULT_INPUT_CLASSNAME, - error ? ERROR_INPUT_CLASSNAME : '', - className - ), - }, - <> - - {children} - - - - - - ) - } -) - -export default SelectButton diff --git a/packages/ui/src/select/SelectLabel.tsx b/packages/ui/src/select/SelectLabel.tsx deleted file mode 100644 index 69b6f0ac95..0000000000 --- a/packages/ui/src/select/SelectLabel.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Listbox } from '@headlessui/react' -import classNames from 'classnames' -import React, { FC, Fragment } from 'react' - -import { ExtractProps } from '../types' -import { Typography } from '../typography' - -export type SelectLabelProps = ExtractProps & { - children: string - standalone?: boolean -} - -const SelectLabel: FC = ({ className, children, standalone, ...props }) => { - return React.createElement( - standalone ? 'div' : Listbox.Label, - { - ...props, - as: Fragment, - }, - - {children} - - ) -} - -export default SelectLabel diff --git a/packages/ui/src/select/SelectOption.tsx b/packages/ui/src/select/SelectOption.tsx deleted file mode 100644 index db0698dc78..0000000000 --- a/packages/ui/src/select/SelectOption.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Listbox, Transition } from '@headlessui/react' -import { ArrowRightIcon } from '@heroicons/react/20/solid' -import classNames from 'classnames' -import { FC, forwardRef, Fragment, ReactNode, useState } from 'react' - -import { ExtractProps } from '../types' - -export type SelectOptionProps = ExtractProps & { - children?: ReactNode - showArrow?: boolean -} - -const SelectOption: FC = forwardRef(({ className, children, showArrow = true, ...props }, ref) => { - const [hover, setHover] = useState(false) - - return ( - setHover(true)} - onMouseLeave={() => setHover(false)} - className={({ active }: { active: boolean }) => - classNames( - active ? 'text-white bg-white bg-opacity-[0.06]' : 'text-high-emphesis', - 'flex gap-2 px-2 items-center font-medium text-sm cursor-default select-none relative py-3 rounded-2xl whitespace-nowrap', - className - ) - } - > - {children} - -
-
- -
-
- - - ) -}) - -export default SelectOption diff --git a/packages/ui/src/select/SelectOptions.tsx b/packages/ui/src/select/SelectOptions.tsx deleted file mode 100644 index dc61e0f9ac..0000000000 --- a/packages/ui/src/select/SelectOptions.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Listbox } from '@headlessui/react' -import classNames from 'classnames' -import { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' - -export type SelectOptionsProps = ExtractProps - -const SelectOptions: FC = forwardRef(({ className, ...props }, ref) => { - return ( - - ) -}) - -export default SelectOptions diff --git a/packages/ui/src/select/index.ts b/packages/ui/src/select/index.ts deleted file mode 100644 index 3e383f0704..0000000000 --- a/packages/ui/src/select/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Select' diff --git a/packages/ui/src/skeleton/Box.tsx b/packages/ui/src/skeleton/Box.tsx deleted file mode 100644 index dbb3234e45..0000000000 --- a/packages/ui/src/skeleton/Box.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { FC, HTMLProps } from 'react' - -import { classNames } from '../index' - -export const Box: FC> = (props) => { - return
-} diff --git a/packages/ui/src/skeleton/Circle.tsx b/packages/ui/src/skeleton/Circle.tsx deleted file mode 100644 index 2073464512..0000000000 --- a/packages/ui/src/skeleton/Circle.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { FC, HTMLProps } from 'react' - -import { classNames } from '../index' - -export interface CircleProps extends HTMLProps { - radius: number -} - -export const Circle: FC = (props) => { - return ( -
- ) -} diff --git a/packages/ui/src/skeleton/index.ts b/packages/ui/src/skeleton/index.ts deleted file mode 100644 index 4982300c2f..0000000000 --- a/packages/ui/src/skeleton/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { FC, HTMLProps } from 'react' - -import { Box } from './Box' -import { Circle, CircleProps } from './Circle' - -/** - * @deprecated - */ -export const Skeleton: { - Box: FC> - Circle: FC -} = { - Box: Box, - Circle: Circle, -} diff --git a/packages/ui/src/stepper/index.ts b/packages/ui/src/stepper/index.ts deleted file mode 100644 index b2f1328d5d..0000000000 --- a/packages/ui/src/stepper/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { VerticalStepper } from './vertical' - -export type Stepper = { - Vertical: typeof VerticalStepper -} - -/** - * @deprecated - */ -export const Stepper: Stepper = { Vertical: VerticalStepper } diff --git a/packages/ui/src/stepper/vertical/Step.tsx b/packages/ui/src/stepper/vertical/Step.tsx deleted file mode 100644 index 76df737db6..0000000000 --- a/packages/ui/src/stepper/vertical/Step.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Children, cloneElement, FC, isValidElement } from 'react' - -import { StepContentInterface } from './StepContent' -import { StepLabelInterface } from './StepLabel' -import { StepDetails } from './Stepper' - -export interface StepInterface extends StepDetails { - children: Array> -} - -export const Step: FC = ({ _index, _active, _last, children }) => { - return ( -
-
- {Children.map(children, (child) => { - if (isValidElement(child)) { - return cloneElement(child, { - _index, - _active, - _last, - }) - } - })} -
-
- ) -} diff --git a/packages/ui/src/stepper/vertical/StepButtons.tsx b/packages/ui/src/stepper/vertical/StepButtons.tsx deleted file mode 100644 index ab7d2735c7..0000000000 --- a/packages/ui/src/stepper/vertical/StepButtons.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC } from 'react' - -import { Button } from '../../button' -import { StepDetails, useStepperContext } from './Stepper' - -export interface StepButtonsInterface extends StepDetails { - disabled?: boolean -} - -export const StepButtons: FC = ({ disabled, _index }) => { - const { setActiveStep, steps } = useStepperContext() - if (_index === undefined) return null - - return ( -
- {_index >= 0 && _index < steps - 1 && ( - - )} - {_index > 0 && ( - - )} -
- ) -} diff --git a/packages/ui/src/stepper/vertical/StepContent.tsx b/packages/ui/src/stepper/vertical/StepContent.tsx deleted file mode 100644 index 37393926f9..0000000000 --- a/packages/ui/src/stepper/vertical/StepContent.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Transition } from '@headlessui/react' -import classNames from 'classnames' -import React, { Children, cloneElement, FC, Fragment, isValidElement, ReactElement } from 'react' - -import { StepDescriptionInterface } from './StepDescription' -import { StepDetails } from './Stepper' - -export interface StepContentInterface extends StepDetails { - description: React.ReactElement - children: ReactElement | ReactElement[] -} - -export const StepContent: FC = ({ children, description, _index, _active, _last }) => { - return ( -
-
- - {/*Empty divs act a trick to make the transition smooth with margins*/} -
- {description} -
- {Children.map(children, (child) => { - if (isValidElement(child)) { - return cloneElement(child as any, { - _index, - _active, - _last, - }) - } - })} -
-
- -
- ) -} diff --git a/packages/ui/src/stepper/vertical/StepDescription.tsx b/packages/ui/src/stepper/vertical/StepDescription.tsx deleted file mode 100644 index 9f36619bcd..0000000000 --- a/packages/ui/src/stepper/vertical/StepDescription.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { FC } from 'react' - -import { Typography } from '../../typography' -import { StepDetails } from './Stepper' - -export interface StepDescriptionInterface extends StepDetails { - children: string -} - -export const StepDescription: FC = ({ children }) => { - return ( - - {children} - - ) -} diff --git a/packages/ui/src/stepper/vertical/StepLabel.tsx b/packages/ui/src/stepper/vertical/StepLabel.tsx deleted file mode 100644 index 79bf2d5e92..0000000000 --- a/packages/ui/src/stepper/vertical/StepLabel.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { CheckCircleIcon } from '@heroicons/react/20/solid' -import { FC } from 'react' - -import { CircleWithText } from '../../icons' -import { Typography } from '../../typography' -import { StepDetails, useStepperContext } from './Stepper' - -export interface StepLabelInterface extends StepDetails { - children: string -} - -export const StepLabel: FC = ({ children, _index }) => { - const { activeStep } = useStepperContext() - - return ( -
- {activeStep > Number(_index) ? ( - - ) : ( - - )} - - {children} - -
- ) -} diff --git a/packages/ui/src/stepper/vertical/Stepper.tsx b/packages/ui/src/stepper/vertical/Stepper.tsx deleted file mode 100644 index ff24b0ebce..0000000000 --- a/packages/ui/src/stepper/vertical/Stepper.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { Children, cloneElement, createContext, FC, isValidElement, useContext, useMemo } from 'react' - -import { Step, StepInterface } from './Step' -import { StepButtons } from './StepButtons' -import { StepContent } from './StepContent' -import { StepDescription } from './StepDescription' -import { StepLabel } from './StepLabel' - -export interface StepDetails { - _index?: number - _active?: boolean - _last?: boolean -} - -export interface VerticalStepperInterface { - children: React.ReactElement | Array> - activeStep: number - setActiveStep(x: number): void -} - -const StepperContext = createContext & { steps: number }>({ - steps: 0, - activeStep: 0, - setActiveStep(_: number) { - // - }, -}) - -export const useStepperContext = () => useContext(StepperContext) - -const StepperRoot: FC = ({ children, activeStep, setActiveStep }) => { - const contextValue = useMemo( - () => ({ - steps: Children.count(children), - activeStep, - setActiveStep, - }), - [activeStep, children, setActiveStep] - ) - - return ( - - {Children.map(children, (child, _index) => { - if (isValidElement(child)) { - return cloneElement(child, { - _index, - _active: _index === activeStep, - _last: _index === Children.count(children) - 1, - }) - } - })} - - ) -} - -export const VerticalStepper: typeof StepperRoot & { - Step: typeof Step - Content: typeof StepContent - Description: typeof StepDescription - Label: typeof StepLabel - Buttons: typeof StepButtons -} = Object.assign(StepperRoot, { - Step: Step, - Content: StepContent, - Description: StepDescription, - Label: StepLabel, - Buttons: StepButtons, -}) diff --git a/packages/ui/src/stepper/vertical/index.ts b/packages/ui/src/stepper/vertical/index.ts deleted file mode 100644 index eaed04e946..0000000000 --- a/packages/ui/src/stepper/vertical/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Stepper' diff --git a/packages/ui/src/switch/Switch.tsx b/packages/ui/src/switch/Switch.tsx deleted file mode 100644 index 089969da3e..0000000000 --- a/packages/ui/src/switch/Switch.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { Switch as HeadlessUiSwitch } from '@headlessui/react' -import classNames from 'classnames' -import { FC, ReactNode } from 'react' - -type SwitchColor = 'default' | 'gradient' - -type SwitchProps = { - checked: boolean - onChange(checked: boolean): void - size?: 'xs' | 'sm' | 'md' - checkedIcon?: ReactNode - uncheckedIcon?: ReactNode - color?: SwitchColor - id?: string -} - -const COLOR = { - default: (checked: boolean) => (checked ? 'bg-slate-100' : 'bg-slate-100'), - gradient: (checked: boolean) => (checked ? 'bg-gradient-to-r from-blue to-pink' : 'bg-slate-700'), -} - -const HEIGHT = { - xs: 20, - sm: 28, - md: 36, -} - -const WIDTH = { - xs: 49, - sm: 57, - md: 65, -} - -/** - * @deprecated - */ -export const Switch: FC = ({ - size = 'md', - checked, - onChange, - checkedIcon = '', - uncheckedIcon = '', - color = 'default', - id = '', -}: SwitchProps) => { - const height = HEIGHT[size] - const width = WIDTH[size] - - return ( - - - {checked ? checkedIcon : uncheckedIcon} - - - ) -} - -export default Switch diff --git a/packages/ui/src/switch/index.ts b/packages/ui/src/switch/index.ts deleted file mode 100644 index 865ddbb058..0000000000 --- a/packages/ui/src/switch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Switch' diff --git a/packages/ui/src/tabs/Tab.tsx b/packages/ui/src/tabs/Tab.tsx deleted file mode 100644 index 2595c461fa..0000000000 --- a/packages/ui/src/tabs/Tab.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Tab as HeadlessTab } from '@headlessui/react' -import classNames from 'classnames' -import React, { FC, forwardRef, Fragment, FunctionComponent } from 'react' - -import { Button } from '../button' -import { ExtractProps } from '../types' -import { TabGroup, TabGroupProps } from './TabGroup' -import { TabList, TabListProps } from './TabList' - -export type TabButton = ExtractProps - -const _Tab: React.ForwardRefExoticComponent & React.RefAttributes> = - forwardRef(({ children, className, ...props }, ref) => { - return ( - // @ts-ignore - - {({ selected }) => ( - - )} - - ) - }) - -export const Tab: FunctionComponent & { - Group: FC - List: FC - Panels: FC> - Panel: FC> -} = Object.assign(_Tab, { - Group: TabGroup, - List: TabList, - Panels: HeadlessTab.Panels, - Panel: HeadlessTab.Panel, -}) diff --git a/packages/ui/src/tabs/TabGroup.tsx b/packages/ui/src/tabs/TabGroup.tsx deleted file mode 100644 index 46a1f3557d..0000000000 --- a/packages/ui/src/tabs/TabGroup.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Tab as HeadlessTab } from '@headlessui/react' -import { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' - -export type TabGroupProps = ExtractProps - -export const TabGroup: FC = forwardRef(({ children, ...props }, ref) => { - return ( - - {children} - - ) -}) diff --git a/packages/ui/src/tabs/TabList.tsx b/packages/ui/src/tabs/TabList.tsx deleted file mode 100644 index 119b8bb7af..0000000000 --- a/packages/ui/src/tabs/TabList.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Tab as HeadlessTab } from '@headlessui/react' -import classNames from 'classnames' -import { FC, forwardRef } from 'react' - -import { ExtractProps } from '../types' - -export type TabListProps = ExtractProps - -export const TabList: FC = forwardRef( - ({ className, children, ...props }, ref) => { - return ( - - {children} - - ) - } -) diff --git a/packages/ui/src/tabs/index.ts b/packages/ui/src/tabs/index.ts deleted file mode 100644 index b113ad44db..0000000000 --- a/packages/ui/src/tabs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Tab' diff --git a/packages/wagmi/src/future/components/UserProfile/Notification.tsx b/packages/wagmi/src/future/components/UserProfile/Notification.tsx index 707b308a6e..0ad5031d77 100644 --- a/packages/wagmi/src/future/components/UserProfile/Notification.tsx +++ b/packages/wagmi/src/future/components/UserProfile/Notification.tsx @@ -15,10 +15,8 @@ import { import { Chain, ChainId } from '@sushiswap/chain' import { Token } from '@sushiswap/currency' import { classNames } from '@sushiswap/ui' -import { Badge } from '@sushiswap/ui/future/components/Badge' import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' import { ExternalLink } from '@sushiswap/ui/future/components/ExternalLink' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Loader } from '@sushiswap/ui/future/components/Loader' import { TimeAgo } from '@sushiswap/ui/future/components/TimeAgo' From e6279fcdf53cda7c8ffc29d4b52d290299a8e305 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Fri, 16 Jun 2023 12:42:56 +0100 Subject: [PATCH 03/59] fix(packages/ui): remove old components --- .../app/(landing)/components/BuildWealth.tsx | 3 +- .../app/(landing)/components/Partners.tsx | 3 +- apps/_root/app/claims/rp2/page.tsx | 2 +- .../common/components/ArticlesPageHeader.tsx | 3 +- apps/academy/common/components/Breadcrumb.tsx | 3 +- .../components/article/ArticleHeader.tsx | 3 +- apps/academy/pages/about.tsx | 3 +- apps/academy/pages/articles/[slug].tsx | 3 +- apps/academy/pages/products/bentobox.tsx | 3 +- apps/academy/pages/products/furo.tsx | 3 +- apps/academy/pages/products/kashi.tsx | 3 +- apps/academy/pages/products/miso.tsx | 3 +- apps/academy/pages/products/onsen.tsx | 3 +- apps/academy/pages/products/sushixswap.tsx | 3 +- apps/academy/pages/products/trident.tsx | 3 +- apps/analytics/components/Layout/index.tsx | 10 ++- .../TokenSection/TokenInformation.tsx | 15 ++-- apps/blog/components/Breadcrumb.tsx | 6 +- apps/blog/pages/[slug].tsx | 2 +- apps/blog/pages/archive.tsx | 3 +- .../AddSection/AddSectionStakeWidget.tsx | 2 +- .../AddSection/AddSectionWidget.tsx | 3 +- apps/earn/components/Layout/index.tsx | 7 +- .../RemoveSectionUnstakeWidget.tsx | 2 +- .../RemoveSection/RemoveSectionWidget.tsx | 26 +++++-- apps/earn/pages/[id]/add.tsx | 30 +------- apps/earn/pages/[id]/index.tsx | 14 +--- apps/earn/pages/[id]/remove.tsx | 20 ++---- apps/furo/components/Layout.tsx | 3 +- packages/ui/src/breadcrumb/Breadcrumb.tsx | 70 ------------------- packages/ui/src/breadcrumb/index.ts | 1 - packages/ui/src/container/Container.tsx | 58 --------------- packages/ui/src/container/index.ts | 1 - packages/ui/src/copy/Copy.tsx | 38 ---------- packages/ui/src/copy/index.ts | 1 - .../ui/src/future/components/GlobalNav.tsx | 3 +- packages/ui/src/index.ts | 4 -- packages/ui/src/widget/Widget.tsx | 39 ----------- packages/ui/src/widget/WidgetContent.tsx | 9 --- packages/ui/src/widget/WidgetHeader.tsx | 24 ------- packages/ui/src/widget/index.ts | 1 - 41 files changed, 88 insertions(+), 348 deletions(-) delete mode 100644 packages/ui/src/breadcrumb/Breadcrumb.tsx delete mode 100644 packages/ui/src/breadcrumb/index.ts delete mode 100644 packages/ui/src/container/Container.tsx delete mode 100644 packages/ui/src/container/index.ts delete mode 100644 packages/ui/src/copy/Copy.tsx delete mode 100644 packages/ui/src/copy/index.ts delete mode 100644 packages/ui/src/widget/Widget.tsx delete mode 100644 packages/ui/src/widget/WidgetContent.tsx delete mode 100644 packages/ui/src/widget/WidgetHeader.tsx delete mode 100644 packages/ui/src/widget/index.ts diff --git a/apps/_root/app/(landing)/components/BuildWealth.tsx b/apps/_root/app/(landing)/components/BuildWealth.tsx index 589ae91bc0..a62a2673cb 100644 --- a/apps/_root/app/(landing)/components/BuildWealth.tsx +++ b/apps/_root/app/(landing)/components/BuildWealth.tsx @@ -1,9 +1,10 @@ -import { Container, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import Image from 'next/legacy/image' import React, { FC } from 'react' import { ExpandableCard } from './ExpandableCard' import { AnimatedTitle } from './AnimatedTitle' +import { Container } from '@sushiswap/ui/future/components/Container' export const BuildWealth: FC = () => { return ( diff --git a/apps/_root/app/(landing)/components/Partners.tsx b/apps/_root/app/(landing)/components/Partners.tsx index 4bcabdc6f1..ee7d15448a 100644 --- a/apps/_root/app/(landing)/components/Partners.tsx +++ b/apps/_root/app/(landing)/components/Partners.tsx @@ -1,4 +1,4 @@ -import { Container, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' import { @@ -13,6 +13,7 @@ import { ZkSyncSVG, ThunderCoreSVG, } from './svgs' +import { Container } from '@sushiswap/ui/future/components/Container' const INCEPTION_DATE = new Date('08/26/2020') diff --git a/apps/_root/app/claims/rp2/page.tsx b/apps/_root/app/claims/rp2/page.tsx index e09f3c6cea..11814c26a1 100644 --- a/apps/_root/app/claims/rp2/page.tsx +++ b/apps/_root/app/claims/rp2/page.tsx @@ -2,7 +2,6 @@ import { useRP2ExploitCheck, useRP2ExploitClaimFinder } from '@sushiswap/wagmi/future/hooks' import { useAccount } from '@sushiswap/wagmi' -import { Container } from '@sushiswap/ui' import { List } from '@sushiswap/ui/future/components/list/List' import React, { Fragment } from 'react' import { ClaimItem } from '../components/ClaimItem' @@ -11,6 +10,7 @@ import { ConnectButton } from '@sushiswap/wagmi/future/components' import { RevokeItem } from '../components/RevokeItem' import { Disclosure } from '@headlessui/react' import { ChevronRightIcon } from '@heroicons/react-v1/solid' +import { Container } from '@sushiswap/ui/future/components/Container' const RP2ClaimPage = () => { const { address } = useAccount() diff --git a/apps/academy/common/components/ArticlesPageHeader.tsx b/apps/academy/common/components/ArticlesPageHeader.tsx index 66366b4d6f..c56669c5e3 100644 --- a/apps/academy/common/components/ArticlesPageHeader.tsx +++ b/apps/academy/common/components/ArticlesPageHeader.tsx @@ -1,11 +1,12 @@ import { useBreakpoint } from '@sushiswap/hooks' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { LooperBg } from 'common/assets/LooperBg' import { FC, useLayoutEffect, useState } from 'react' import { DEFAULT_SIDE_PADDING } from '../helpers' import { DifficultyEntity, Maybe } from '.mesh' import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' +import { Container } from '@sushiswap/ui/future/components/Container' interface ArticlesPagesHeader { title: Maybe | undefined diff --git a/apps/academy/common/components/Breadcrumb.tsx b/apps/academy/common/components/Breadcrumb.tsx index c79c015c06..cf3231a7fa 100644 --- a/apps/academy/common/components/Breadcrumb.tsx +++ b/apps/academy/common/components/Breadcrumb.tsx @@ -1,8 +1,9 @@ import { ArrowLeftIcon, ShareIcon } from '@heroicons/react/24/solid' -import { Container, IconButton, Typography } from '@sushiswap/ui' +import { IconButton, Typography } from '@sushiswap/ui' import { getShareText } from 'common/helpers' import Link from 'next/link' import { FC } from 'react' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/common/components/article/ArticleHeader.tsx b/apps/academy/common/components/article/ArticleHeader.tsx index ef724b1da9..0c2ab47616 100644 --- a/apps/academy/common/components/article/ArticleHeader.tsx +++ b/apps/academy/common/components/article/ArticleHeader.tsx @@ -1,10 +1,11 @@ -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { DEFAULT_SIDE_PADDING } from 'common/helpers' import { format } from 'date-fns' import { FC } from 'react' import { ArticleEntity } from '../../../.mesh' import { DifficultyLabel, Image } from '../' +import { Container } from '@sushiswap/ui/future/components/Container' interface ArticleHeader { article?: ArticleEntity diff --git a/apps/academy/pages/about.tsx b/apps/academy/pages/about.tsx index 3093cb2588..1742a1f3b3 100644 --- a/apps/academy/pages/about.tsx +++ b/apps/academy/pages/about.tsx @@ -1,5 +1,5 @@ import { Disclosure, Transition } from '@headlessui/react' -import { classNames, Container, Link } from '@sushiswap/ui' +import { classNames, Link } from '@sushiswap/ui' import sushiPulse from 'common/assets/sushi-pulse.png' import sushidilly from 'common/assets/sushidilly.png' import { DEFAULT_SIDE_PADDING } from 'common/helpers' @@ -8,6 +8,7 @@ import { roadmapSections } from 'common/roadmap' import { format } from 'date-fns' import { NextPage } from 'next' import Image from 'next/image' +import { Container } from '@sushiswap/ui/future/components/Container' const About: NextPage = () => { return ( diff --git a/apps/academy/pages/articles/[slug].tsx b/apps/academy/pages/articles/[slug].tsx index 1e85601d1e..0b2d0c544e 100644 --- a/apps/academy/pages/articles/[slug].tsx +++ b/apps/academy/pages/articles/[slug].tsx @@ -1,9 +1,10 @@ import { useBreakpoint } from '@sushiswap/hooks' -import { classNames, Container, LoadingOverlay } from '@sushiswap/ui' +import { classNames, LoadingOverlay } from '@sushiswap/ui' import { APP_HEADER_HEIGHT, DEFAULT_SIDE_PADDING } from 'common/helpers' import ErrorPage from 'next/error' import { useRouter } from 'next/router' import { FC, useCallback, useState } from 'react' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleBlocksDynamicZone, diff --git a/apps/academy/pages/products/bentobox.tsx b/apps/academy/pages/products/bentobox.tsx index ee095cd32a..89b8df1556 100644 --- a/apps/academy/pages/products/bentobox.tsx +++ b/apps/academy/pages/products/bentobox.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { ProductArticles, ProductBackground, @@ -14,6 +14,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity, GetLatestAndRelevantArticlesQuery } from '.mesh' diff --git a/apps/academy/pages/products/furo.tsx b/apps/academy/pages/products/furo.tsx index 4437e82f4a..66abffc5c4 100644 --- a/apps/academy/pages/products/furo.tsx +++ b/apps/academy/pages/products/furo.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import furoImg from 'common/assets/furo-img.png' import { ProductArticles, @@ -17,6 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ProductSeo } from '../../common/components/Seo/ProductSeo' diff --git a/apps/academy/pages/products/kashi.tsx b/apps/academy/pages/products/kashi.tsx index 6df1192e50..8a47320935 100644 --- a/apps/academy/pages/products/kashi.tsx +++ b/apps/academy/pages/products/kashi.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import kashiImg from 'common/assets/kashi-img.png' import { ProductArticles, @@ -16,6 +16,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/miso.tsx b/apps/academy/pages/products/miso.tsx index fafff9778d..ca032cd8f7 100644 --- a/apps/academy/pages/products/miso.tsx +++ b/apps/academy/pages/products/miso.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { CheckIcon, classNames, Container } from '@sushiswap/ui' +import { CheckIcon, classNames } from '@sushiswap/ui' import { ProductArticles, ProductBackground, @@ -14,6 +14,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/onsen.tsx b/apps/academy/pages/products/onsen.tsx index a20cb3d438..195eb3fd4c 100644 --- a/apps/academy/pages/products/onsen.tsx +++ b/apps/academy/pages/products/onsen.tsx @@ -1,5 +1,5 @@ import { ArrowRightCircleIcon } from '@heroicons/react/24/solid' -import { classNames, Container, Typography } from '@sushiswap/ui' +import { classNames, Typography } from '@sushiswap/ui' import onsenImg from 'common/assets/onsen-img.png' import { ProductArticles, @@ -17,6 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/sushixswap.tsx b/apps/academy/pages/products/sushixswap.tsx index 37df01ccb8..e8fd158722 100644 --- a/apps/academy/pages/products/sushixswap.tsx +++ b/apps/academy/pages/products/sushixswap.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import sushixswapImg from 'common/assets/sushixswap-img.png' import { ProductArticles, @@ -17,6 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/trident.tsx b/apps/academy/pages/products/trident.tsx index f43233c85a..5c1e25676a 100644 --- a/apps/academy/pages/products/trident.tsx +++ b/apps/academy/pages/products/trident.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { classNames, Container } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { ProductArticles, ProductBackground, @@ -15,6 +15,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import React, { FC } from 'react' import useSWR from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' diff --git a/apps/analytics/components/Layout/index.tsx b/apps/analytics/components/Layout/index.tsx index f0d371ec96..2a7e23d505 100644 --- a/apps/analytics/components/Layout/index.tsx +++ b/apps/analytics/components/Layout/index.tsx @@ -1,4 +1,4 @@ -import { classNames, Container, MaxWidth } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React from 'react' type Props = { @@ -7,14 +7,12 @@ type Props = { backdrop?: React.ReactNode className?: string } +import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' export function Layout({ children, maxWidth = 'full', className }: Props) { return ( - -
{children}
+ +
{children}
 ) } diff --git a/apps/analytics/components/TokenSection/TokenInformation.tsx b/apps/analytics/components/TokenSection/TokenInformation.tsx index f361fcb602..179a6e77d3 100644 --- a/apps/analytics/components/TokenSection/TokenInformation.tsx +++ b/apps/analytics/components/TokenSection/TokenInformation.tsx @@ -2,11 +2,12 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain } from '@sushiswap/chain' import { shortenAddress } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' -import { CopyHelper, Currency, Link, Typography } from '@sushiswap/ui' +import { Currency, Link, Typography } from '@sushiswap/ui' import { FC } from 'react' import { Table } from '@sushiswap/ui/future/components/Table' import { useTokenFromToken } from '../../lib/hooks' +import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' interface TokenInformation { token: GraphToken @@ -55,11 +56,13 @@ export const TokenInformation: FC = ({ token }) => {
- - - {shortenAddress(_token.wrapped.address)} - - + + {({ setCopied }) => ( + setCopied(_token.wrapped.address)} className="text-sm font-medium"> + {shortenAddress(_token.wrapped.address)} + + )} + { return ( @@ -9,9 +9,7 @@ export const Breadcrumb: FC = () => { - - Go Back - + Go Back diff --git a/apps/blog/pages/[slug].tsx b/apps/blog/pages/[slug].tsx index 3cb5a5363e..c9883cc62c 100644 --- a/apps/blog/pages/[slug].tsx +++ b/apps/blog/pages/[slug].tsx @@ -1,8 +1,8 @@ -import { Container } from '@sushiswap/ui' import ErrorPage from 'next/error' import { useRouter } from 'next/router' import { FC } from 'react' import { Article, MediaBlock as MediaBlockType, RichTextBlock as RichTextBlockType } from 'types' +import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleAuthors, diff --git a/apps/blog/pages/archive.tsx b/apps/blog/pages/archive.tsx index 94c01e1b8a..b3b841bce6 100644 --- a/apps/blog/pages/archive.tsx +++ b/apps/blog/pages/archive.tsx @@ -1,7 +1,7 @@ import { SearchIcon } from '@heroicons/react/outline' import { ChevronLeftIcon } from '@heroicons/react/outline' import { useDebounce } from '@sushiswap/hooks' -import { Container, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { InferGetServerSidePropsType } from 'next' import Link from 'next/link' import { FC, useState } from 'react' @@ -10,6 +10,7 @@ import { Article, Category, Collection } from 'types' import { ArticleList, ArticleListItem, Categories, Pagination } from '../components' import { getArticles, getCategories } from '../lib/api' +import { Container } from '@sushiswap/ui/future/components/Container' export async function getStaticProps() { const articles = await getArticles() diff --git a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx index 43d7a1ae0d..03b8ebc8ba 100644 --- a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx @@ -4,7 +4,7 @@ import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource } from '@sushiswap/hooks' import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui' +import { Widget } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo } from 'react' diff --git a/apps/earn/components/AddSection/AddSectionWidget.tsx b/apps/earn/components/AddSection/AddSectionWidget.tsx index 502e175cd0..d1e12a2185 100644 --- a/apps/earn/components/AddSection/AddSectionWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionWidget.tsx @@ -4,11 +4,12 @@ import { PlusIcon } from '@heroicons/react/solid' import { ChainId } from '@sushiswap/chain' import { Type } from '@sushiswap/currency' import { useIsMounted } from '@sushiswap/hooks' -import { classNames, Widget } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Web3Input } from '@sushiswap/wagmi/future/components/Web3Input' import React, { FC, ReactNode } from 'react' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { Button } from '@sushiswap/ui/future/components/button' +import { Widget } from '@sushiswap/ui/future/components/widget' interface AddSectionWidgetProps { isFarm: boolean diff --git a/apps/earn/components/Layout/index.tsx b/apps/earn/components/Layout/index.tsx index 87025d8e76..b0fbe7a564 100644 --- a/apps/earn/components/Layout/index.tsx +++ b/apps/earn/components/Layout/index.tsx @@ -1,17 +1,16 @@ -import { Breadcrumb, BreadcrumbLink, classNames, Container, MaxWidth } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React from 'react' +import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' type Props = { children?: React.ReactNode maxWidth?: MaxWidth className?: string - breadcrumbs?: BreadcrumbLink[] } -export function Layout({ children, maxWidth = '5xl', className, breadcrumbs }: Props) { +export function Layout({ children, maxWidth = '5xl', className }: Props) { return ( - {breadcrumbs && }
{children}
 ) diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx index 0a8c46cd92..4dfa4afcee 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx @@ -5,7 +5,7 @@ import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui' +import { Widget } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo, useState } from 'react' diff --git a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx index 66a55f921d..387dae846f 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx @@ -13,7 +13,7 @@ import { Input, Typography, } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui' +import { Widget } from '@sushiswap/ui/future/components/widget' import React, { FC, Fragment, ReactNode, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' @@ -154,16 +154,32 @@ export const RemoveSectionWidget: FC = ({ />
- - - -
diff --git a/apps/earn/pages/[id]/add.tsx b/apps/earn/pages/[id]/add.tsx index fb8408ff15..230af85f1b 100644 --- a/apps/earn/pages/[id]/add.tsx +++ b/apps/earn/pages/[id]/add.tsx @@ -1,11 +1,12 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { formatPercent } from '@sushiswap/format' -import { AppearOnMount, BreadcrumbLink, Container, Link, Typography } from '@sushiswap/ui' +import { AppearOnMount, Link, Typography } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import { FC } from 'react' import { SWRConfig, useSWRConfig } from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { AddSectionLegacy, @@ -15,37 +16,12 @@ import { Layout, PoolPositionProvider, PoolPositionStakedProvider, - UnknownTokenAlert, } from '../../components' -import { PROTOCOL_MAP } from '../../lib/constants' import { getPool, getPools, getPoolUrl, Pool, usePool } from '@sushiswap/client' import { ChainId } from '@sushiswap/chain' import { NextSeo } from 'next-seo' import { isTridentPoolProtocol } from '../../lib/functions' -const LINKS = (pool: Pool): BreadcrumbLink[] => [ - { - href: `/${pool.id}`, - label: `${pool.name} - ${[PROTOCOL_MAP[pool.protocol]]} - ${formatPercent(pool.swapFee)}`, - }, - { - href: `/${pool.id}/add`, - label: `Add Liquidity`, - }, -] - -// export const getServerSideProps: GetServerSideProps = async ({ query, res }) => { -// res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59') -// const [pair] = await Promise.all([getPool(query.id as string)]) -// return { -// props: { -// fallback: { -// [`/earn/api/pool/${query.id}`]: { pair }, -// }, -// }, -// } -// } - const Add: FC> = ({ fallback }) => { return ( @@ -71,7 +47,7 @@ const _Add = () => { - +
diff --git a/apps/earn/pages/[id]/index.tsx b/apps/earn/pages/[id]/index.tsx index 7bc665660c..cfec0313b6 100644 --- a/apps/earn/pages/[id]/index.tsx +++ b/apps/earn/pages/[id]/index.tsx @@ -1,7 +1,7 @@ import { formatPercent } from '@sushiswap/format' -import { AppearOnMount, BreadcrumbLink } from '@sushiswap/ui' +import { AppearOnMount } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' -import { getPool, usePool, getPools, getPoolUrl, Pool, Protocol } from '@sushiswap/client' +import { getPool, usePool, getPools, getPoolUrl, Protocol } from '@sushiswap/client' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import { FC } from 'react' @@ -24,18 +24,10 @@ import { UnknownTokenAlert, PoolTransactionsV2, } from '../../components' -import { PROTOCOL_MAP } from '../../lib/constants' import { ChainId } from '@sushiswap/chain' import { NextSeo } from 'next-seo' import { PoolPageV3 } from '../../components/PoolPageV3' -const LINKS = (pool: Pool): BreadcrumbLink[] => [ - { - href: `/${pool.id}`, - label: `${pool.name} - ${PROTOCOL_MAP[pool.protocol]} - ${formatPercent(pool.swapFee)}`, - }, -] - const Pool: FC> = ({ fallback }) => { return ( <> @@ -69,7 +61,7 @@ const _Pool = () => { - +
diff --git a/apps/earn/pages/[id]/remove.tsx b/apps/earn/pages/[id]/remove.tsx index 339e25f66f..fcfddb3413 100644 --- a/apps/earn/pages/[id]/remove.tsx +++ b/apps/earn/pages/[id]/remove.tsx @@ -1,11 +1,12 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { formatPercent } from '@sushiswap/format' -import { AppearOnMount, BreadcrumbLink, Container, Link, Typography } from '@sushiswap/ui' +import { AppearOnMount, Link, Typography } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import { FC } from 'react' import { SWRConfig } from 'swr' +import { Container } from '@sushiswap/ui/future/components/Container' import { AddSectionMyPosition, @@ -15,26 +16,13 @@ import { RemoveSectionLegacy, RemoveSectionTrident, RemoveSectionUnstake, - UnknownTokenAlert, } from '../../components' -import { PROTOCOL_MAP } from '../../lib/constants' -import { getPool, getPools, usePool, Pool, getPoolUrl } from '@sushiswap/client' +import { getPool, getPools, usePool, getPoolUrl } from '@sushiswap/client' import { ChainId } from '@sushiswap/chain' import { useSWRConfig } from 'swr/_internal' import { NextSeo } from 'next-seo' import { isTridentPoolProtocol } from '../../lib/functions' -const LINKS = (pool: Pool): BreadcrumbLink[] => [ - { - href: `/${pool.id}`, - label: `${pool.name} - ${PROTOCOL_MAP[pool.protocol]} - ${formatPercent(pool.swapFee)}`, - }, - { - href: `/${pool.id}/remove`, - label: `Remove Liquidity`, - }, -] - const Remove: FC> = ({ fallback }) => { return ( @@ -61,7 +49,7 @@ const _Remove = () => { - +
diff --git a/apps/furo/components/Layout.tsx b/apps/furo/components/Layout.tsx index 2927d2ce3e..b0fbe7a564 100644 --- a/apps/furo/components/Layout.tsx +++ b/apps/furo/components/Layout.tsx @@ -1,5 +1,6 @@ -import { classNames, Container, MaxWidth } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React from 'react' +import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' type Props = { children?: React.ReactNode diff --git a/packages/ui/src/breadcrumb/Breadcrumb.tsx b/packages/ui/src/breadcrumb/Breadcrumb.tsx deleted file mode 100644 index 9a4aa98fac..0000000000 --- a/packages/ui/src/breadcrumb/Breadcrumb.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { ChevronRightIcon, HomeIcon } from '@heroicons/react/20/solid' -import { FC } from 'react' - -import { Link, Typography } from '..' - -export type BreadcrumbLink = { - href: string - label: string -} - -interface Breadcrumb { - home: string - links: BreadcrumbLink[] -} - -/** - * @deprecated - */ -export const Breadcrumb: FC = ({ links, home }) => { - return ( -
- - - - - - {links - .map((link, index) => { - const last = links.length === index + 1 - if (last) { - return ( - - {link.label} - - ) - } - - return ( - - - - {link.label} - - - - ) - }) - .reduce( - (prev, cur, index) => [ - ...prev, - , - cur, - ], - [] - )} -
- ) -} diff --git a/packages/ui/src/breadcrumb/index.ts b/packages/ui/src/breadcrumb/index.ts deleted file mode 100644 index e01e180cbb..0000000000 --- a/packages/ui/src/breadcrumb/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Breadcrumb' diff --git a/packages/ui/src/container/Container.tsx b/packages/ui/src/container/Container.tsx deleted file mode 100644 index b75e240fcd..0000000000 --- a/packages/ui/src/container/Container.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import classNames from 'classnames' -import React, { forwardRef, ReactNode } from 'react' - -import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../types' - -export type MaxWidth = 'full' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' - -const TailwindMapper: Record = { - full: 'max-w-full', - '7xl': 'max-w-7xl', - '6xl': 'max-w-6xl', - '5xl': 'max-w-5xl', - '4xl': 'max-w-4xl', - '3xl': 'max-w-3xl', - '2xl': 'max-w-2xl', - xl: 'max-w-xl', - lg: 'max-w-lg', - md: 'max-w-md', - sm: 'max-w-sm', - xs: 'max-w-xs', -} - -interface Props { - children: ReactNode - maxWidth?: MaxWidth | number - className?: string - id?: string -} - -type ContainerProps = PolymorphicComponentPropsWithRef -type ContainerComponent = (props: ContainerProps) => React.ReactElement | null - -/** - * @deprecated - */ -export const Container: ContainerComponent = forwardRef( - ( - { as, children, maxWidth = '2xl', className = '', id, ...rest }: ContainerProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'div' - return ( - - {children} - - ) - } -) - -export default Container diff --git a/packages/ui/src/container/index.ts b/packages/ui/src/container/index.ts deleted file mode 100644 index fe8a50b15b..0000000000 --- a/packages/ui/src/container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Container' diff --git a/packages/ui/src/copy/Copy.tsx b/packages/ui/src/copy/Copy.tsx deleted file mode 100644 index 3b4c5f2177..0000000000 --- a/packages/ui/src/copy/Copy.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { CheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline' -import { useCopyClipboard } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { FC } from 'react' - -export interface CopyHelperProps { - className?: string - toCopy: string - children?: React.ReactNode | ((isCopied: boolean) => React.ReactNode) - hideIcon?: boolean -} - -/** - * @deprecated - */ -export const CopyHelper: FC = ({ className, toCopy, hideIcon = false, children }) => { - const [isCopied, setCopied] = useCopyClipboard() - - return ( -
setCopied(toCopy)}> - {isCopied && ( -
- {typeof children === 'function' ? children(isCopied) : children} - {!hideIcon && } -
- )} - - {!isCopied && ( -
- {typeof children === 'function' ? children(isCopied) : children} - {!hideIcon && } -
- )} -
- ) -} - -export default CopyHelper diff --git a/packages/ui/src/copy/index.ts b/packages/ui/src/copy/index.ts deleted file mode 100644 index 914ebfe718..0000000000 --- a/packages/ui/src/copy/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Copy' diff --git a/packages/ui/src/future/components/GlobalNav.tsx b/packages/ui/src/future/components/GlobalNav.tsx index 3585a16abb..d5dddd7fae 100644 --- a/packages/ui/src/future/components/GlobalNav.tsx +++ b/packages/ui/src/future/components/GlobalNav.tsx @@ -7,8 +7,7 @@ import { APP_TYPE_LINKS, HEADER_HEIGHT } from '../../constants' import { AppType } from '../../types' import { Button } from './button' import { SushiIcon } from './icons' -import { MaxWidth } from '../../container' -import Container from './Container' +import Container, { MaxWidth } from './Container' import { ArrowSmallRightIcon } from '@heroicons/react/20/solid' const ITEMS = [ diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b8ec12cffd..607fa6589b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,11 +1,8 @@ import './globals.css' export * from './animation' -export * from './breadcrumb' export * from './checkbox' export * from './chip' -export * from './container' -export * from './copy' export * from './currency' export * from './dialog' export * from './dots' @@ -21,7 +18,6 @@ export * from './progressbar' export * from './theme' export * from './types' export * from './typography' -export * from './widget' // Re-export classnames for convenience export { default as classNames } from 'classnames' diff --git a/packages/ui/src/widget/Widget.tsx b/packages/ui/src/widget/Widget.tsx deleted file mode 100644 index 3a375197d2..0000000000 --- a/packages/ui/src/widget/Widget.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { FC, ReactNode } from 'react' - -import { classNames, Container, MaxWidth } from '../index' -import { WidgetContent, WidgetContentProps } from './WidgetContent' -import { WidgetHeader, WidgetHeaderProps } from './WidgetHeader' - -interface WidgetRootProps { - id: string - className?: string - children: ReactNode - maxWidth: MaxWidth | number -} - -const WidgetRoot: FC = ({ id, className, maxWidth, children }) => { - return ( - - {children} - - ) -} - -export const Widget: FC & { - Header: FC - Content: FC -} = Object.assign(WidgetRoot, { - Header: WidgetHeader, - Content: WidgetContent, -}) diff --git a/packages/ui/src/widget/WidgetContent.tsx b/packages/ui/src/widget/WidgetContent.tsx deleted file mode 100644 index 8227b40ca2..0000000000 --- a/packages/ui/src/widget/WidgetContent.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { FC, ReactElement } from 'react' - -export interface WidgetContentProps { - children: ReactElement | Array -} - -export const WidgetContent: FC = ({ children }) => { - return
{children}
-} diff --git a/packages/ui/src/widget/WidgetHeader.tsx b/packages/ui/src/widget/WidgetHeader.tsx deleted file mode 100644 index 9a5abddf68..0000000000 --- a/packages/ui/src/widget/WidgetHeader.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC, ReactNode } from 'react' - -import { classNames } from '../index' -import { Typography } from '../typography' - -export interface WidgetHeaderProps { - title: ReactNode - children?: ReactNode - className?: string -} - -export const WidgetHeader: FC = ({ title, children, className }) => { - return ( -
- - {title} - -
{children}
-
- ) -} diff --git a/packages/ui/src/widget/index.ts b/packages/ui/src/widget/index.ts deleted file mode 100644 index 864c058956..0000000000 --- a/packages/ui/src/widget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Widget' From 73c09b2c68ff446cef1ef14e5f2e798f2aa5817a Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Fri, 16 Jun 2023 13:05:30 +0100 Subject: [PATCH 04/59] fix(packages/ui): build errors --- apps/_root/app/(landing)/components/Stats.tsx | 2 +- apps/_root/ui/swap/trade/TradeStats.tsx | 2 +- apps/academy/pages/articles/index.tsx | 2 +- apps/academy/pages/index.tsx | 2 +- apps/analytics/components/TokenSection/TokenInformation.tsx | 2 +- apps/earn/components/FarmRewardsAvailableTooltip.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/_root/app/(landing)/components/Stats.tsx b/apps/_root/app/(landing)/components/Stats.tsx index d34e215e5d..8fa56b4355 100644 --- a/apps/_root/app/(landing)/components/Stats.tsx +++ b/apps/_root/app/(landing)/components/Stats.tsx @@ -2,7 +2,7 @@ import { useIsMounted } from '@sushiswap/hooks' import React, { FC } from 'react' import { useQuery } from '@tanstack/react-query' import { Skeleton } from '@sushiswap/ui/future/components/skeleton' -import { Container } from '@sushiswap/ui/future/components/container' +import { Container } from '@sushiswap/ui/future/components/Container' export const Stats: FC = () => { const isMounted = useIsMounted() diff --git a/apps/_root/ui/swap/trade/TradeStats.tsx b/apps/_root/ui/swap/trade/TradeStats.tsx index 697b628197..0407ed6bbf 100644 --- a/apps/_root/ui/swap/trade/TradeStats.tsx +++ b/apps/_root/ui/swap/trade/TradeStats.tsx @@ -16,7 +16,7 @@ import { shortenAddress } from '@sushiswap/format' import { isAddress } from 'ethers/lib/utils' import { useAccount } from '@sushiswap/wagmi' import { Explainer } from '@sushiswap/ui/future/components/Explainer' -import { AddressToEnsResolver } from '@sushiswap/wagmi/components/Account/AddressToEnsResolver' +import { AddressToEnsResolver } from '@sushiswap/wagmi/future/components/Account/AddressToEnsResolver' export const TradeStats: FC = () => { const { address } = useAccount() diff --git a/apps/academy/pages/articles/index.tsx b/apps/academy/pages/articles/index.tsx index 18413d6db9..73e936faab 100644 --- a/apps/academy/pages/articles/index.tsx +++ b/apps/academy/pages/articles/index.tsx @@ -16,7 +16,7 @@ import { } from '../../.mesh' import { ArticleList, ArticlesPageHeader, Card, Pagination, SearchInput } from '../../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../../lib/api' -import { Container } from '@sushiswap/ui/future/components/container' +import { Container } from '@sushiswap/ui/future/components/Container' import { classNames } from '@sushiswap/ui' import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' diff --git a/apps/academy/pages/index.tsx b/apps/academy/pages/index.tsx index b6828b0158..03af9182d4 100644 --- a/apps/academy/pages/index.tsx +++ b/apps/academy/pages/index.tsx @@ -32,7 +32,7 @@ import { ViewAllButton, } from '../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../lib/api' -import { Container } from '@sushiswap/ui/future/components/container' +import { Container } from '@sushiswap/ui/future/components/Container' export async function getStaticProps() { const [articles, difficulties, topics, products] = await Promise.all([ diff --git a/apps/analytics/components/TokenSection/TokenInformation.tsx b/apps/analytics/components/TokenSection/TokenInformation.tsx index 179a6e77d3..111a711aa6 100644 --- a/apps/analytics/components/TokenSection/TokenInformation.tsx +++ b/apps/analytics/components/TokenSection/TokenInformation.tsx @@ -4,7 +4,7 @@ import { shortenAddress } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' import { Currency, Link, Typography } from '@sushiswap/ui' import { FC } from 'react' -import { Table } from '@sushiswap/ui/future/components/Table' +import { Table } from '@sushiswap/ui/future/components/table' import { useTokenFromToken } from '../../lib/hooks' import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' diff --git a/apps/earn/components/FarmRewardsAvailableTooltip.tsx b/apps/earn/components/FarmRewardsAvailableTooltip.tsx index 505378f24d..471396c555 100644 --- a/apps/earn/components/FarmRewardsAvailableTooltip.tsx +++ b/apps/earn/components/FarmRewardsAvailableTooltip.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@sushiswap/ui/future/components/tooltip' +import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { FC } from 'react' export const FarmRewardsAvailableTooltip: FC = () => { From 5749065ea2b0a51eb5e86dba99dbf84f3644679a Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Fri, 16 Jun 2023 13:07:44 +0100 Subject: [PATCH 05/59] fix(packages/ui): build errors --- apps/blog/components/Hero.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/blog/components/Hero.tsx b/apps/blog/components/Hero.tsx index 1d93df2f23..cd4158dfee 100644 --- a/apps/blog/components/Hero.tsx +++ b/apps/blog/components/Hero.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { Article } from 'types' import { Container } from '@sushiswap/ui/future/components/Container' -import { Button } from '@sushiswap/ui/future/components/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { ArticleAuthors, ArticleHeader } from './article' From 82e82ec8b52c6e484e879ba51517b2f3e44aad29 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Mon, 19 Jun 2023 13:02:58 +0100 Subject: [PATCH 06/59] fix(packages/ui): add more components --- apps/_root/app/internal/subgraphs/page.tsx | 5 +- packages/ui/package.json | 4 + packages/ui/src/checkbox/Checkbox.tsx | 29 ---- packages/ui/src/checkbox/index.ts | 1 - .../ui/src/future/components/checkbox.tsx | 27 ++++ packages/ui/src/future/components/form.tsx | 142 ++++++++++++++++++ packages/ui/src/future/components/label.tsx | 18 +++ packages/ui/src/index.ts | 1 - pnpm-lock.yaml | 57 +++++++ 9 files changed, 251 insertions(+), 33 deletions(-) delete mode 100644 packages/ui/src/checkbox/Checkbox.tsx delete mode 100644 packages/ui/src/checkbox/index.ts create mode 100644 packages/ui/src/future/components/checkbox.tsx create mode 100644 packages/ui/src/future/components/form.tsx create mode 100644 packages/ui/src/future/components/label.tsx diff --git a/apps/_root/app/internal/subgraphs/page.tsx b/apps/_root/app/internal/subgraphs/page.tsx index 320aa36a60..d99f9f6dd1 100644 --- a/apps/_root/app/internal/subgraphs/page.tsx +++ b/apps/_root/app/internal/subgraphs/page.tsx @@ -2,12 +2,13 @@ import { CHAIN_NAME } from '@sushiswap/graph-config' import { useDebounce } from '@sushiswap/hooks' -import { Checkbox, Loader } from '@sushiswap/ui' +import { Loader } from '@sushiswap/ui' import { SubgraphTable } from './components/SubgraphTable' import { getSubgraphs, Subgraph } from './lib' import { useMemo, useState } from 'react' import useSWR from 'swr' import stringify from 'fast-json-stable-stringify' +import { Checkbox } from '@sushiswap/ui/future/components/checkbox' const SubgraphsPage = () => { const [filterBy, setFilter] = useState('') @@ -50,7 +51,7 @@ const SubgraphsPage = () => { {(['chainId', 'category', 'type', 'status'] as const).map((group) => ( <>
{group}
- setGroupBy(group)} checked={groupBy === group} /> + setGroupBy(group)} checked={groupBy === group} /> ))}
diff --git a/packages/ui/package.json b/packages/ui/package.json index 0f9c4d8c9c..a20b4ca189 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -64,9 +64,12 @@ "@headlessui/react": "1.7.7", "@heroicons/react": "2.0.13", "@popperjs/core": "2.11.7", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-scroll-area": "^1.0.4", "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slot": "^1.0.2", "@react-hook/window-scroll": "1.3.0", "@sushiswap/chain": "workspace:*", "@sushiswap/currency": "workspace:*", @@ -88,6 +91,7 @@ "rc-tooltip": "5.2.2", "react-datepicker": "4.8.0", "react-dropzone": "14.2.2", + "react-hook-form": "7.41.2", "react-jazzicon": "1.0.4", "react-popper": "2.3.0", "react-spring": "9.6.1", diff --git a/packages/ui/src/checkbox/Checkbox.tsx b/packages/ui/src/checkbox/Checkbox.tsx deleted file mode 100644 index f9afa9144a..0000000000 --- a/packages/ui/src/checkbox/Checkbox.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -export interface CheckboxProps { - set?: (value: boolean) => void -} - -/** - * @deprecated - */ -export function Checkbox({ - set, - className = '', - checked, - ...rest -}: CheckboxProps & React.InputHTMLAttributes): JSX.Element { - return ( -
- (set ? set(event.target.checked) : null)} - className={`border border-slate-700 checked:bg-gradient-to-r checked:border-[3px] checked:from-blue checked:to-pink cursor-pointer appearance-none h-5 w-5 rounded-[4px] bg-slate-900 disabled:bg-slate-900 disabled:border-slate-800 ${className}`} - checked={checked} - {...rest} - /> -
- ) -} - -export default Checkbox diff --git a/packages/ui/src/checkbox/index.ts b/packages/ui/src/checkbox/index.ts deleted file mode 100644 index 0dab115630..0000000000 --- a/packages/ui/src/checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Checkbox' diff --git a/packages/ui/src/future/components/checkbox.tsx b/packages/ui/src/future/components/checkbox.tsx new file mode 100644 index 0000000000..ab5502970b --- /dev/null +++ b/packages/ui/src/future/components/checkbox.tsx @@ -0,0 +1,27 @@ +'use client' + +import * as React from 'react' +import * as CheckboxPrimitive from '@radix-ui/react-checkbox' +import { Check } from 'lucide-react' +import { classNames } from '../../index' + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/packages/ui/src/future/components/form.tsx b/packages/ui/src/future/components/form.tsx new file mode 100644 index 0000000000..c10f1bec9d --- /dev/null +++ b/packages/ui/src/future/components/form.tsx @@ -0,0 +1,142 @@ +import * as React from 'react' +import * as LabelPrimitive from '@radix-ui/react-label' +import { Slot } from '@radix-ui/react-slot' +import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form' +import { classNames } from '../../index' +import { Label } from './label' + +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName +} + +const FormFieldContext = React.createContext({} as FormFieldContextValue) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState, formState } = useFormContext() + + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error('useFormField should be used within ') + } + + const { id } = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} + +type FormItemContextValue = { + id: string +} + +const FormItemContext = React.createContext({} as FormItemContextValue) + +const FormItem = React.forwardRef>( + ({ className, ...props }, ref) => { + const id = React.useId() + + return ( + +
+ + ) + } +) +FormItem.displayName = 'FormItem' + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const { error, formItemId } = useFormField() + + return ( +
@@ -26,7 +27,7 @@ export const Stats: FC = () => { {data?.stats?.liquidity && isMounted ? ( {data?.stats?.liquidity.formatted} ) : ( - + )} Total Liquidity
@@ -36,7 +37,7 @@ export const Stats: FC = () => { {data?.stats?.volume && isMounted ? ( {data?.stats?.volume.formatted} ) : ( - + )} Total Volume
@@ -46,7 +47,7 @@ export const Stats: FC = () => { {data?.stats?.pairs && isMounted ? ( {data?.stats?.pairs.formatted} ) : ( - + )} Total Pairs
diff --git a/apps/_root/app/claims/components/ClaimItem.tsx b/apps/_root/app/claims/components/ClaimItem.tsx index d505e803c3..b996dc0339 100644 --- a/apps/_root/app/claims/components/ClaimItem.tsx +++ b/apps/_root/app/claims/components/ClaimItem.tsx @@ -11,7 +11,8 @@ import { useTokenRevokeApproval, useTokenWithCache, } from '@sushiswap/wagmi/future/hooks' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { Amount } from '@sushiswap/currency' import { BigNumber } from 'ethers' import { Button } from '@sushiswap/ui/future/components/button' @@ -59,8 +60,8 @@ export const ClaimItem: FC = ({ chainId, account, claim }) => { {isLoading ? (
- - + +
) : token ? (
@@ -80,7 +81,7 @@ export const ClaimItem: FC = ({ chainId, account, claim }) => {
{isLoading ? ( - + ) : token ? ( <> {amount?.toSignificant(6)} {token.symbol} @@ -91,7 +92,7 @@ export const ClaimItem: FC = ({ chainId, account, claim }) => {
{!allowance || isLoading ? ( - + ) : (
{!isClaimed ? ( diff --git a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx index 84ee6a225c..43347c5d14 100644 --- a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx +++ b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx @@ -7,8 +7,8 @@ import { CHAIN_NAME } from '@sushiswap/graph-config' import { CheckIcon, NetworkIcon } from '@sushiswap/ui' import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table' import { Subgraph } from '../lib' -import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' +import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' interface SubgraphTable { subgraphs: Subgraph[] @@ -41,13 +41,27 @@ const columns = [ cell: (info) => (
{info.getValue() === 'Current' ? ( - - - + + + + + + +

Synced

+ + + ) : ( - - - + + + + + + +

Syncing

+ + + )}
), diff --git a/apps/_root/ui/swap/ExploitApprovalAlert.tsx b/apps/_root/ui/swap/ExploitApprovalAlert.tsx deleted file mode 100644 index 1668671f80..0000000000 --- a/apps/_root/ui/swap/ExploitApprovalAlert.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { FC } from 'react' -import Button from '@sushiswap/ui/future/components/button/Button' -import { XMarkIcon } from '@heroicons/react/24/outline' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' -import { useLocalStorage } from '@sushiswap/hooks' -import { useAccount } from '@sushiswap/wagmi' - -export const ExploitApprovalAlert: FC = () => { - const { address } = useAccount() - const [value, setValue] = useLocalStorage('showRP2ExploitAlert', true) - - if (!address || !value) return <> - - return ( -
-
There was a vulnerability found in our RouteProcessor2 contract. Please check if you are affected.
- -
- setValue(false)} - className="absolute" - /> -
-
- ) -} diff --git a/apps/_root/ui/swap/NonSSRWrapper.tsx b/apps/_root/ui/swap/NonSSRWrapper.tsx deleted file mode 100644 index c54c6841f0..0000000000 --- a/apps/_root/ui/swap/NonSSRWrapper.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import dynamic from 'next/dynamic' -import { FC, ReactNode } from 'react' - -const NonSSRWrapper: FC<{ children: ReactNode }> = ({ children }) => <>{children} - -// Temp solution until app dir -export default dynamic(() => Promise.resolve(NonSSRWrapper), { - ssr: false, -}) diff --git a/apps/_root/ui/swap/search/SearchPanel.tsx b/apps/_root/ui/swap/search/SearchPanel.tsx index 47096b9f04..e17997c486 100644 --- a/apps/_root/ui/swap/search/SearchPanel.tsx +++ b/apps/_root/ui/swap/search/SearchPanel.tsx @@ -8,7 +8,8 @@ import { usePrice, useTokenList, useTokenSearch } from '@sushiswap/react-query' import { Badge } from '@sushiswap/ui/future/components/Badge' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { classNames } from '@sushiswap/ui' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { Dialog } from '@sushiswap/ui/future/components/dialog' import { useSwapActions, useSwapState } from '../trade/TradeProvider' import { Token } from '@sushiswap/currency' @@ -16,8 +17,8 @@ import { Chain } from '@sushiswap/chain' import { Currency } from '@sushiswap/ui/future/components/currency' import { COMMON_BASES } from '@sushiswap/router-config' import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' -import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { Button } from '@sushiswap/ui/future/components/button' +import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' export const SearchPanel: FC = () => { const { network1 } = useSwapState() @@ -162,9 +163,16 @@ const Row: FC<{ currency: Token; supported?: boolean }> = ({ currency, supported {currency.name} {!supported && ( - - - + + + + + + +

Not in official tokenlist

+ + + )}
@@ -194,18 +202,18 @@ const RowSkeleton = () => {
- }> - + }> +
- - + +
- - + +
) diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx index 05c9966f41..57c6a0da17 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx @@ -12,7 +12,8 @@ import { useSwapActions, useSwapState } from './TradeProvider' import { useTrade } from '../../../lib/swap/useTrade' import { Button } from '@sushiswap/ui/future/components/button' import { Dots } from '@sushiswap/ui/future/components/Dots' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { Badge } from '@sushiswap/ui/future/components/Badge' import { Collapsible, NetworkIcon } from '@sushiswap/ui' import { ConfirmationDialogCrossChain } from '../ConfirmationDialogCrossChain/ConfirmationDialogCrossChain' @@ -38,7 +39,7 @@ export const TradeReviewDialogCrossChain: FC = () => {
{isFetching ? ( - + ) : (

Receive {trade?.amountOut?.toSignificant(6)} {token1?.symbol} @@ -61,7 +62,7 @@ export const TradeReviewDialogCrossChain: FC = () => { {token1 ? ( ) : ( - + )}

@@ -83,7 +84,7 @@ export const TradeReviewDialogCrossChain: FC = () => { subtitle="The impact your trade has on the market price of this pool." > {isFetching ? ( - + ) : ( `${ trade?.priceImpact?.lessThan(ZERO) ? '+' : trade?.priceImpact?.greaterThan(ZERO) ? '-' : '' @@ -95,14 +96,14 @@ export const TradeReviewDialogCrossChain: FC = () => { subtitle="The minimum amount you are guaranteed to receive." > {isFetching ? ( - + ) : ( `${trade?.minAmountOut?.toSignificant(6)} ${token1?.symbol}` )} {/**/} {/* {isFetching ? (*/} - {/* */} + {/* */} {/* ) : (*/} {/* `~$${trade?.gasSpent ?? '0.00'}`*/} {/* )}*/} diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx index 4b6d11dd3f..a578c4ef5c 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx @@ -13,7 +13,8 @@ import { useTrade } from '../../../lib/swap/useTrade' import { Button } from '@sushiswap/ui/future/components/button' import { ConfirmationDialog } from '../ConfirmationDialog' import { Dots } from '@sushiswap/ui/future/components/Dots' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle, SkeletonBox } from '@sushiswap/ui/future/components/skeleton' + import { Badge } from '@sushiswap/ui/future/components/Badge' import { AppType } from '@sushiswap/ui/types' import { Native } from '@sushiswap/currency' @@ -49,7 +50,7 @@ export const TradeReviewDialogSameChain: FC = () => {
{isFetching ? ( - + ) : (

Buy {trade?.amountOut?.toSignificant(6)} {token1?.symbol} @@ -77,7 +78,7 @@ export const TradeReviewDialogSameChain: FC = () => { {token1 ? ( ) : ( - + )}

@@ -106,7 +107,7 @@ export const TradeReviewDialogSameChain: FC = () => { )} > {isFetching ? ( - + ) : ( `${ trade?.priceImpact?.lessThan(ZERO) ? '+' : trade?.priceImpact?.greaterThan(ZERO) ? '-' : '' @@ -121,7 +122,7 @@ export const TradeReviewDialogSameChain: FC = () => { subtitle="The minimum amount you are guaranteed to receive." > {isFetching ? ( - + ) : ( `${trade?.minAmountOut?.toSignificant(6)} ${token1?.symbol}` )} @@ -129,7 +130,7 @@ export const TradeReviewDialogSameChain: FC = () => { )} {isFetching ? ( - + ) : ( `~$${trade?.gasSpent ?? '0.00'}` )} @@ -137,7 +138,7 @@ export const TradeReviewDialogSameChain: FC = () => { {isSwap && ( {isFetching ? ( - + ) : ( - - - + + + + + + +

Coming soon!

+ - +
) } diff --git a/apps/_root/ui/swap/widget/WidgetTitleV2.tsx b/apps/_root/ui/swap/widget/WidgetTitleV2.tsx index 3079ee462a..ee5762a976 100644 --- a/apps/_root/ui/swap/widget/WidgetTitleV2.tsx +++ b/apps/_root/ui/swap/widget/WidgetTitleV2.tsx @@ -3,7 +3,8 @@ import React, { useMemo, useState } from 'react' import { useSwapState } from '../trade/TradeProvider' import { usePrice } from '@sushiswap/react-query' import { Amount, Price, Token, tryParseAmount } from '@sushiswap/currency' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' + import { ZERO } from '@sushiswap/math' export const WidgetTitleV2 = () => { @@ -49,7 +50,7 @@ export const WidgetTitleV2 = () => { Trade {tokensLoading || isPrice0Loading || isPrice1Loading || !token0 || !token1 ? ( - + ) : (
diff --git a/apps/analytics/components/TableSection/Pools/columns.tsx b/apps/analytics/components/TableSection/Pools/columns.tsx index 338e3f15b2..facd2b4e4e 100644 --- a/apps/analytics/components/TableSection/Pools/columns.tsx +++ b/apps/analytics/components/TableSection/Pools/columns.tsx @@ -1,7 +1,7 @@ import { ColumnDef } from '@tanstack/react-table' import React from 'react' -import { ChainCell } from '../Common/Cells/ChainCell' +import { ChainCell } from '../Common' import { PoolAPRCell, PoolFees1wCell, @@ -14,7 +14,8 @@ import { PoolVolume1mCell, } from './Cells' import { Pool } from '@sushiswap/client' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { ICON_SIZE } from './constants' export const NETWORK_COLUMN: ColumnDef = { @@ -23,7 +24,7 @@ export const NETWORK_COLUMN: ColumnDef = { cell: (props) => , size: 30, meta: { - skeleton: , + skeleton: , }, } @@ -36,11 +37,11 @@ export const NAME_COLUMN: ColumnDef = { skeleton: (
- - + +
- +
), @@ -55,7 +56,7 @@ export const TVL_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -67,7 +68,7 @@ export const VOLUME_1D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -79,7 +80,7 @@ export const VOLUME_7D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -91,7 +92,7 @@ export const VOLUME_1M_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -103,7 +104,7 @@ export const FEES_1D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -115,7 +116,7 @@ export const FEES_7D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -127,7 +128,7 @@ export const FEES_1M_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -139,6 +140,6 @@ export const APR_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } diff --git a/apps/analytics/components/TableSection/Tokens/columns.tsx b/apps/analytics/components/TableSection/Tokens/columns.tsx index 792763bbb2..10827e1597 100644 --- a/apps/analytics/components/TableSection/Tokens/columns.tsx +++ b/apps/analytics/components/TableSection/Tokens/columns.tsx @@ -2,9 +2,10 @@ import { Token } from '@sushiswap/graph-client' import { ColumnDef } from '@tanstack/react-table' import React from 'react' -import { ChainCell } from '../Common/Cells' +import { ChainCell } from '../Common' import { TokenLiquidityCell, TokenNameCell, TokenPriceCell, TokenVolumeCell } from './Cells' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { ICON_SIZE } from './constants' export const NETWORK_COLUMN: ColumnDef = { @@ -13,7 +14,7 @@ export const NETWORK_COLUMN: ColumnDef = { cell: (props) => , size: 30, meta: { - skeleton: , + skeleton: , }, } @@ -23,7 +24,7 @@ export const NAME_COLUMN: ColumnDef = { cell: (props) => , size: 160, meta: { - skeleton: , + skeleton: , }, } @@ -34,7 +35,7 @@ export const LIQUIDITY_COLUMN: ColumnDef = { size: 160, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -45,7 +46,7 @@ export const PRICE_COLUMN: ColumnDef = { size: 160, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -56,6 +57,6 @@ export const VOLUME_COLUMN: ColumnDef = { size: 160, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } diff --git a/apps/earn/components/ExploitInfo.tsx b/apps/earn/components/ExploitInfo.tsx index 495c408f25..7f021ab37e 100644 --- a/apps/earn/components/ExploitInfo.tsx +++ b/apps/earn/components/ExploitInfo.tsx @@ -1,4 +1,4 @@ -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { XIcon } from '@heroicons/react/solid' import React from 'react' import { useLocalStorage } from '@sushiswap/hooks' @@ -20,6 +20,7 @@ export const ExploitInfo = () => { iconProps={{ width: 20, height: 20 }} onClick={() => setValue(false)} className="absolute" + name="Close" />
diff --git a/apps/earn/components/FarmRewardsAvailableTooltip.tsx b/apps/earn/components/FarmRewardsAvailableTooltip.tsx index 471396c555..d8beaddb8c 100644 --- a/apps/earn/components/FarmRewardsAvailableTooltip.tsx +++ b/apps/earn/components/FarmRewardsAvailableTooltip.tsx @@ -1,6 +1,15 @@ -import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { FC } from 'react' +import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' export const FarmRewardsAvailableTooltip: FC = () => { - return ✨ + return ( + + + ✨ + +

Farm rewards available

+ + + + ) } diff --git a/apps/earn/components/LiquidityChartRangeInput/index.tsx b/apps/earn/components/LiquidityChartRangeInput/index.tsx index d430a216f3..0e779e3965 100644 --- a/apps/earn/components/LiquidityChartRangeInput/index.tsx +++ b/apps/earn/components/LiquidityChartRangeInput/index.tsx @@ -9,7 +9,7 @@ import { Chart } from './Chart' import { useDensityChartData } from './hooks' import { ZoomLevels } from './types' import { FeeAmount, V3ChainId } from '@sushiswap/v3-sdk' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonBox } from '@sushiswap/ui/future/components/skeleton' const ZOOM_LEVELS: Record = { [FeeAmount.LOWEST]: { @@ -153,7 +153,7 @@ export default function LiquidityChartRangeInput({ icon={} /> ) : isLoading ? ( - } /> + } /> ) : error ? ( { return (
- - + +
- - + +
- - + +
- +
) @@ -58,11 +58,18 @@ export const PositionCard: FC = ({ position }) => {
{position.pool.incentives && position.pool.incentives.length > 0 && ( - -
- 🧑‍🌾 {position.pool.incentives.length > 1 ? `x ${position.pool.incentives.length}` : ''}{' '} -
- + + + +
+ 🧑‍🌾 {position.pool.incentives.length > 1 ? `x ${position.pool.incentives.length}` : ''}{' '} +
+ + +

Farm rewards available

+ + + )}
diff --git a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx index f51678fc89..682da5bd48 100644 --- a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx @@ -17,7 +17,8 @@ import { useAccount } from '@sushiswap/wagmi' import { useTokenAmountDollarValues } from '../../lib/hooks' import { Button } from '@sushiswap/ui/future/components/button' import { useIsMounted } from '@sushiswap/hooks' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' + import { useConcentratedLiquidityPositionsFromTokenId } from '@sushiswap/wagmi/future/hooks' import { FeeAmount, V3ChainId } from '@sushiswap/v3-sdk' @@ -145,7 +146,7 @@ export const SelectPricesWidget: FC = ({
{isLoading || !pool || !token0 || !token1 ? ( - + ) : (
setInvert((prev) => !prev)} diff --git a/apps/earn/components/PoolPageV3.tsx b/apps/earn/components/PoolPageV3.tsx index 7eb7b7af6d..db2631e2c9 100644 --- a/apps/earn/components/PoolPageV3.tsx +++ b/apps/earn/components/PoolPageV3.tsx @@ -10,7 +10,7 @@ import { Button } from '@sushiswap/ui/future/components/button' import { RadioGroup } from '@headlessui/react' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { CogIcon } from '@heroicons/react/outline' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { useAccount } from '@sushiswap/wagmi' import { Currency } from '@sushiswap/ui/future/components/currency' import { List } from '@sushiswap/ui/future/components/list/List' @@ -132,6 +132,7 @@ const Pool: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to pools list diff --git a/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx b/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx index bdf50aa7e9..f7152c7535 100644 --- a/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx +++ b/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx @@ -11,7 +11,8 @@ import { useTheme } from 'next-themes' import { PoolChartPeriod, PoolChartType } from './types' import { chartPeriods } from './constants' import { ChainId } from '@sushiswap/chain' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonBox } from '@sushiswap/ui/future/components/skeleton' + import resolveConfig from 'tailwindcss/resolveConfig' interface PoolChartProps { @@ -201,7 +202,7 @@ export const PoolChartGraph: FC = ({ chart, period, address, cha )}
{isLoading ? ( - + ) : ( )} diff --git a/apps/earn/components/PoolSection/PoolStats.tsx b/apps/earn/components/PoolSection/PoolStats.tsx index bbf0818f2e..4cea895e09 100644 --- a/apps/earn/components/PoolSection/PoolStats.tsx +++ b/apps/earn/components/PoolSection/PoolStats.tsx @@ -3,7 +3,7 @@ import { Pool } from '@sushiswap/client' import { FC } from 'react' import { usePoolGraphData } from '../../lib/hooks' import { ChainId } from '@sushiswap/chain' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { classNames } from '@sushiswap/ui' interface PoolStats { @@ -21,7 +21,7 @@ export const PoolStats: FC = ({ pool }) => {
Liquidity {isLoading ? ( - + ) : data ? ( {formatUSD(data.liquidityUSD ?? 0)} ) : ( @@ -33,7 +33,7 @@ export const PoolStats: FC = ({ pool }) => { {formatPercent(Math.abs(data.liquidity1dChange))} ) : isLoading ? ( - + ) : ( <> )} @@ -43,7 +43,7 @@ export const PoolStats: FC = ({ pool }) => { {data ? ( {formatUSD(data.volume1d ?? 0)} ) : isLoading ? ( - + ) : ( <> )} @@ -53,7 +53,7 @@ export const PoolStats: FC = ({ pool }) => { {formatPercent(Math.abs(data.volume1dChange))} ) : isLoading ? ( - + ) : ( <> )} @@ -64,7 +64,7 @@ export const PoolStats: FC = ({ pool }) => { {data ? ( {formatUSD(data.fees1d ?? 0)} ) : isLoading ? ( - + ) : ( <> )} @@ -74,7 +74,7 @@ export const PoolStats: FC = ({ pool }) => { {formatPercent(Math.abs(data.fees1dChange))} ) : isLoading ? ( - + ) : ( <> )} @@ -87,7 +87,7 @@ export const PoolStats: FC = ({ pool }) => { {formatNumber(data.txCount1d).replace('.00', '')} ) : isLoading ? ( - + ) : ( <> )} @@ -97,7 +97,7 @@ export const PoolStats: FC = ({ pool }) => { {formatPercent(Math.abs(data.txCount1dChange))} ) : isLoading ? ( - + ) : ( <> )} diff --git a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/columns.tsx b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/columns.tsx index adc40c303f..a71f177800 100644 --- a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/columns.tsx +++ b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/columns.tsx @@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table' import { Transaction, TransactionType, useTransactionsV2 } from './useTransactionsV2' import { formatUSD } from '@sushiswap/format' import formatDistance from 'date-fns/formatDistance/index.js' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' import React from 'react' export const TYPE_COLUMN: ColumnDef = { @@ -14,7 +14,7 @@ export const TYPE_COLUMN: ColumnDef = { ), meta: { - skeleton: , + skeleton: , }, } @@ -28,7 +28,7 @@ export const SENDER_COLUMN: ColumnDef = { )}..${props.row.original.sender.slice(-4)}`} ), meta: { - skeleton: , + skeleton: , }, } @@ -43,7 +43,7 @@ export const AMOUNT_IN_COLUMN = ( case TransactionType.Swap: return ( - {(row.amountIn).toPrecision(2)}{' '} + {row.amountIn.toPrecision(2)}{' '} {row.tokenIn.symbol} ) @@ -58,7 +58,7 @@ export const AMOUNT_IN_COLUMN = ( } }, meta: { - skeleton: , + skeleton: , }, }) @@ -88,7 +88,7 @@ export const AMOUNT_OUT_COLUMN = ( } }, meta: { - skeleton: , + skeleton: , }, }) @@ -102,7 +102,7 @@ export const AMOUNT_USD_COLUMN: ColumnDef = { ), meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -116,6 +116,6 @@ export const TIME_COLUMN: ColumnDef = { ), meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } diff --git a/apps/earn/components/PoolSection/V3/PoolDepthWidget/PoolDepthWidget.tsx b/apps/earn/components/PoolSection/V3/PoolDepthWidget/PoolDepthWidget.tsx index ba8e0a153f..10569fd23d 100644 --- a/apps/earn/components/PoolSection/V3/PoolDepthWidget/PoolDepthWidget.tsx +++ b/apps/earn/components/PoolSection/V3/PoolDepthWidget/PoolDepthWidget.tsx @@ -7,7 +7,8 @@ import { FeeAmount, V3ChainId } from '@sushiswap/v3-sdk' import { Chart } from 'components/LiquidityChartRangeInput/Chart' import { useDensityChartData } from 'components/LiquidityChartRangeInput/hooks' import { ZoomLevels } from 'components/LiquidityChartRangeInput/types' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonBox } from '@sushiswap/ui/future/components/skeleton' + import { useConcentratedLiquidityPoolStats } from '@sushiswap/react-query' import AutoSizer from 'react-virtualized-auto-sizer' @@ -71,7 +72,7 @@ export const PoolDepthWidget: FC = ({ id = 'PoolDepthWidget', a {({ height, width }) => (
- {isLoading && } + {isLoading && } {isMounted && !noLiquidity && !isLoading && formattedData && price && ( = { @@ -14,7 +15,7 @@ export const TYPE_COLUMN: ColumnDef = { ), meta: { - skeleton: , + skeleton: , }, } @@ -28,7 +29,7 @@ export const SENDER_COLUMN: ColumnDef = { )}..${props.row.original.origin.slice(-4)}`} ), meta: { - skeleton: , + skeleton: , }, } @@ -63,7 +64,7 @@ export const AMOUNT_IN_COLUMN = ( } }, meta: { - skeleton: , + skeleton: , }, }) @@ -98,7 +99,7 @@ export const AMOUNT_OUT_COLUMN = ( } }, meta: { - skeleton: , + skeleton: , }, }) @@ -112,7 +113,7 @@ export const AMOUNT_USD_COLUMN: ColumnDef = { ), meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -126,6 +127,6 @@ export const TIME_COLUMN: ColumnDef = { ), meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx index 204c392906..b50f75781a 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx @@ -5,7 +5,8 @@ import React from 'react' import { PoolFees1dCell } from './PoolFees1dCell' import { PoolNameCell, PoolChainCell, PoolAPRCell, PoolVolume1dCell } from '../../SharedCells' import { PoolTVLCell } from './PoolTVLCell' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { Explainer } from '@sushiswap/ui/future/components/Explainer' import { ChainId } from '@sushiswap/chain' import { PoolVolume1hCell } from '../../SharedCells/PoolVolume1hCell' @@ -20,7 +21,7 @@ export const NETWORK_COLUMN: ColumnDef = { cell: (props) => , size: 50, meta: { - skeleton: , + skeleton: , }, } @@ -33,11 +34,11 @@ export const NAME_COLUMN: ColumnDef = { skeleton: (
- - + +
- +
), @@ -52,7 +53,7 @@ export const TVL_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -71,7 +72,7 @@ export const APR_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -83,7 +84,7 @@ export const VOLUME_1H_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -95,7 +96,7 @@ export const VOLUME_1D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -107,7 +108,7 @@ export const VOLUME_7D_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -119,7 +120,7 @@ export const VOLUME_1M_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -131,6 +132,6 @@ export const FEES_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } diff --git a/apps/earn/components/PoolsSection/Tables/PositionsTable/Cells/columns.tsx b/apps/earn/components/PoolsSection/Tables/PositionsTable/Cells/columns.tsx index ecf57404c9..55c2131001 100644 --- a/apps/earn/components/PoolsSection/Tables/PositionsTable/Cells/columns.tsx +++ b/apps/earn/components/PoolsSection/Tables/PositionsTable/Cells/columns.tsx @@ -4,10 +4,11 @@ import { PositionWithPool } from '../../../../../types' import { PoolAPRCell, PoolChainCell, PoolNameCell, PoolVolume1dCell } from '../../SharedCells' import { PairValueCell } from './PoolValueCell' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { ICON_SIZE } from '../../PoolsTable/Cells/columns' import { PoolNameCellV3 } from '../../SharedCells/PoolNameCellV3' -import { ConcentratedLiquidityPosition, ConcentratedLiquidityPositionWithV3Pool } from '@sushiswap/wagmi/future/hooks' +import { ConcentratedLiquidityPositionWithV3Pool } from '@sushiswap/wagmi/future/hooks' import { PriceRangeCell } from './PriceRangeCell' import { PositionSizeCell } from './PositionSizeCell' import { UnclaimedCell } from './UnclaimedCell' @@ -21,7 +22,7 @@ export const NETWORK_COLUMN: ColumnDef = { cell: (props) => , size: 50, meta: { - skeleton: , + skeleton: , }, } @@ -34,11 +35,11 @@ export const NAME_COLUMN: ColumnDef = { skeleton: (
- - + +
- +
), @@ -53,7 +54,7 @@ export const APR_COLUMN: ColumnDef = { size: 150, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -65,7 +66,7 @@ export const VALUE_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -76,7 +77,7 @@ export const VOLUME_COLUMN: ColumnDef = { size: 100, meta: { className: 'justify-end', - skeleton: , + skeleton: , }, } @@ -89,11 +90,11 @@ export const NAME_COLUMN_V3: ColumnDef
- - + +
- +
), @@ -107,7 +108,7 @@ export const PRICE_RANGE_COLUMN: ColumnDef, + skeleton: , }, } @@ -119,7 +120,7 @@ export const POSITION_SIZE_CELL: ColumnDef, + skeleton: , }, } @@ -131,6 +132,6 @@ export const POSITION_UNCLAIMED_CELL: ColumnDef, + skeleton: , }, } diff --git a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx index 13875f5609..5150a5f609 100644 --- a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx +++ b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx @@ -8,8 +8,8 @@ import { useTokensFromPool } from '../../../../lib/hooks' import { ICON_SIZE } from '../contants' import { Row } from './types' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { ChainId } from '@sushiswap/chain' +import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' export const PoolNameCell: FC> = ({ row }) => { const { token0, token1 } = useTokensFromPool(row) @@ -56,11 +56,18 @@ export const PoolNameCell: FC> = ({ row }) => { {formatNumber(row.swapFee * 100)}%
{row.incentives && row.incentives.length > 0 && ( - -
- 🧑‍🌾 {row.incentives.length > 1 ? `x ${row.incentives.length}` : ''}{' '} -
- + + + +
+ 🧑‍🌾 {row.incentives.length > 1 ? `x ${row.incentives.length}` : ''}{' '} +
+ + +

Farm rewards available

+ + + )}
diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx index bd89ecc62d..ace96002c9 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx @@ -1,5 +1,6 @@ import { ColumnDef } from '@tanstack/react-table' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import React from 'react' import { RewardsV3NameCell } from './RewardsV3NameCell' import { AngleRewardsPool } from '@sushiswap/react-query' @@ -17,11 +18,11 @@ export const REWARDS_V3_NAME_COLUMN: ColumnDef = { skeleton: (
- - + +
- +
), @@ -39,7 +40,7 @@ export const REWARDS_V3_POSITION_SIZE_COLUMN: ColumnDef, + skeleton: , }, } @@ -61,7 +62,7 @@ export const REWARDS_V3_APR_COLUMN: ColumnDef = { ), size: 100, meta: { - skeleton: , + skeleton: , }, } @@ -72,6 +73,6 @@ export const REWARDS_V3_CLAIMABLE_COLUMN: ColumnDef = cell: (props) => , size: 100, meta: { - skeleton: , + skeleton: , }, } diff --git a/apps/earn/components/future/PoolHeader.tsx b/apps/earn/components/future/PoolHeader.tsx index 7afa43a209..1d571be856 100644 --- a/apps/earn/components/future/PoolHeader.tsx +++ b/apps/earn/components/future/PoolHeader.tsx @@ -2,12 +2,12 @@ import React, { FC, useMemo } from 'react' import { Badge } from '@sushiswap/ui/future/components/Badge' import { NetworkIcon } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { ChainId } from '@sushiswap/chain' import { Pool } from '@sushiswap/v3-sdk' import { unwrapToken } from '../../lib/functions' -import { Tooltip } from '@sushiswap/ui/future/components/Tooltip' import { formatPercent } from '@sushiswap/format' +import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' type PoolHeader = { title?: string @@ -31,12 +31,12 @@ export const PoolHeader: FC = ({ title, isLoading, pool, chainId, ap return (
- - + +
- - + +
) @@ -65,12 +65,14 @@ export const PoolHeader: FC = ({ title, isLoading, pool, chainId, ap
{apy ? ( <> - - - {formatPercent((apy.fees || 0) + (apy.rewards || 0))} APR - {' '} - - + + + {formatPercent((apy.fees || 0) + (apy.rewards || 0))} APR + +

{`${formatPercent(apy.fees)} fee APR + ${formatPercent(apy.rewards)} reward APR`}

+ + + • ) : ( diff --git a/apps/earn/pages/[id]/migrate.tsx b/apps/earn/pages/[id]/migrate.tsx index 8835279c01..7d1264dff3 100644 --- a/apps/earn/pages/[id]/migrate.tsx +++ b/apps/earn/pages/[id]/migrate.tsx @@ -12,12 +12,12 @@ import { Currency } from '@sushiswap/ui/future/components/currency' import { formatPercent } from '@sushiswap/format' import { Layout, PoolPositionProvider, PoolPositionRewardsProvider, PoolPositionStakedProvider } from '../../components' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' import { unwrapToken } from '../../lib/functions' import { ChainId } from '@sushiswap/chain' import { MigrateTab } from '../../components/PoolPage/MigrateTab' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle, SkeletonBox } from '@sushiswap/ui/future/components/skeleton' import { ConcentratedLiquidityProvider } from '../../components/ConcentratedLiquidityProvider' import { Token } from '@sushiswap/currency' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' @@ -94,6 +94,7 @@ export const Migrate = () => { height: 24, transparent: true, }} + name="Back" /> Go back to pool list @@ -103,12 +104,12 @@ export const Migrate = () => { {isLoading ? (
- - + +
- - + +
) : pool && token0 && token1 ? ( @@ -162,22 +163,22 @@ export const Migrate = () => { {isLoading ? ( <>
- +
- +
- - - - + + + +
- - - + + +
diff --git a/apps/earn/pages/add/index.tsx b/apps/earn/pages/add/index.tsx index a902d51b53..971b385dd6 100644 --- a/apps/earn/pages/add/index.tsx +++ b/apps/earn/pages/add/index.tsx @@ -18,10 +18,10 @@ import { useConcentratedLiquidityPool, useConcentratedPositionInfo } from '@sush import { Badge } from '@sushiswap/ui/future/components/Badge' import { Currency } from '@sushiswap/ui/future/components/currency' import { List } from '@sushiswap/ui/future/components/list/List' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { tryParseAmount } from '@sushiswap/currency' import { useTokenAmountDollarValues } from '../../lib/hooks' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { computePoolAddress } from '@sushiswap/v3-sdk' import { getV3FactoryContractConfig } from '@sushiswap/wagmi/future/hooks/contracts/useV3FactoryContract' import { SplashController } from '@sushiswap/ui/future/components/SplashController' @@ -42,6 +42,7 @@ export function AddPage() { height: 24, transparent: true, }} + name="Back" /> Go back to pools list @@ -153,8 +154,8 @@ const _Add: FC = () => { ) : tokensLoading ? ( <> - - + + ) : ( <> @@ -180,7 +181,7 @@ const _Add: FC = () => { {!isInitialLoading && !pool ? ( N/A ) : isInitialLoading ? ( - + ) : token0 && token1 && pool ? (
setInvert((prev) => !prev)} diff --git a/apps/earn/pages/add/trident/[chainId]/index.tsx b/apps/earn/pages/add/trident/[chainId]/index.tsx index 16c977676f..8dad866f61 100644 --- a/apps/earn/pages/add/trident/[chainId]/index.tsx +++ b/apps/earn/pages/add/trident/[chainId]/index.tsx @@ -31,7 +31,7 @@ import { isConstantProductPoolFactoryChainId, isStablePoolFactoryChainId } from import { ContentBlock } from '../../../../components/AddPage/ContentBlock' import { Web3Input } from '@sushiswap/wagmi/future/components/Web3Input' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { Checker } from '@sushiswap/wagmi/future/systems' import { Button } from '@sushiswap/ui/future/components/button' import { Signature } from '@ethersproject/bytes' @@ -94,6 +94,7 @@ export function Add(props: InferGetStaticPropsType) { height: 24, transparent: true, }} + name="Back" /> Go back to pools list diff --git a/apps/earn/pages/add/v2/[chainId]/index.tsx b/apps/earn/pages/add/v2/[chainId]/index.tsx index c8a95a6155..c0082cbb7b 100644 --- a/apps/earn/pages/add/v2/[chainId]/index.tsx +++ b/apps/earn/pages/add/v2/[chainId]/index.tsx @@ -16,7 +16,7 @@ import { useRouter } from 'next/router' import { ContentBlock } from '../../../../components/AddPage/ContentBlock' import { Web3Input } from '@sushiswap/wagmi/future/components/Web3Input' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { Checker } from '@sushiswap/wagmi/future/systems' import { Button } from '@sushiswap/ui/future/components/button' import { APPROVE_TAG_ADD_LEGACY } from '../../../../lib/constants' @@ -76,6 +76,7 @@ export function Add(props: InferGetStaticPropsType) { height: 24, transparent: true, }} + name="Back" /> Go back to pools list diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index a4ec5d2800..b00ece68ae 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -13,7 +13,7 @@ import { } from '@sushiswap/wagmi/future/hooks' import { useConcentratedLiquidityPoolStats } from '@sushiswap/react-query' import { Currency } from '@sushiswap/ui/future/components/currency' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { classNames } from '@sushiswap/ui' import { List } from '@sushiswap/ui/future/components/list/List' import { Amount } from '@sushiswap/currency' @@ -33,7 +33,7 @@ import { ConcentratedLiquidityCollectButton } from '../../../components/Concentr import { Bound } from '../../../lib/constants' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { CogIcon } from '@heroicons/react/outline' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { PoolHeader } from '../../../components/future/PoolHeader' import { isV3ChainId, V3ChainId } from '@sushiswap/v3-sdk' import useIsTickAtLimit from '../../../lib/hooks/useIsTickAtLimit' @@ -170,6 +170,7 @@ const Position: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to pool @@ -463,7 +464,7 @@ const Position: FC = () => { ) : ( - + )}
@@ -482,7 +483,7 @@ const Position: FC = () => { {unwrapToken(currencyQuote)?.symbol} ) : ( - + )}
{currencyBase && ( @@ -506,7 +507,7 @@ const Position: FC = () => { {unwrapToken(currencyQuote).symbol} ) : ( - + )}
{currencyQuote && ( diff --git a/apps/furo/components/Table/constants.tsx b/apps/furo/components/Table/constants.tsx index 08f271c9c8..78e099e025 100644 --- a/apps/furo/components/Table/constants.tsx +++ b/apps/furo/components/Table/constants.tsx @@ -1,4 +1,5 @@ -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { ColumnDef } from '@tanstack/react-table' import React from 'react' @@ -19,7 +20,7 @@ export const NETWORK_COLUMN: ColumnDef = { cell: (props) => , size: 40, meta: { - skeleton: , + skeleton: , }, } @@ -29,7 +30,7 @@ export const STREAMED_COLUMN: ColumnDef = { cell: (props) => , size: 170, meta: { - skeleton: , + skeleton: , }, } @@ -38,7 +39,7 @@ export const AMOUNT_COLUMN: ColumnDef = { header: 'Amount', cell: (props) => , meta: { - skeleton: , + skeleton: , }, } @@ -47,7 +48,7 @@ export const FROM_COLUMN = (tableType: FuroTableType): ColumnDef , meta: { - skeleton: , + skeleton: , className: 'justify-end', }, }) @@ -57,7 +58,7 @@ export const START_DATE_COLUMN: ColumnDef = { header: 'Start Date', cell: (props) => , meta: { - skeleton: , + skeleton: , className: 'justify-end', }, } @@ -67,7 +68,7 @@ export const END_DATE_COLUMN: ColumnDef = { header: 'End Date', cell: (props) => , meta: { - skeleton: , + skeleton: , className: 'justify-end', }, } @@ -77,7 +78,7 @@ export const STATUS_COLUMN: ColumnDef = { header: 'Status', cell: (props) => , meta: { - skeleton: , + skeleton: , }, } @@ -86,7 +87,7 @@ export const TYPE_COLUMN: ColumnDef = { header: 'Type', cell: (props) => , meta: { - skeleton: , + skeleton: , className: 'justify-end', }, } diff --git a/apps/furo/components/stream/CreateMultipleForm/CreateMultipleForm.tsx b/apps/furo/components/stream/CreateMultipleForm/CreateMultipleForm.tsx index 608b2cb322..3f3054d333 100644 --- a/apps/furo/components/stream/CreateMultipleForm/CreateMultipleForm.tsx +++ b/apps/furo/components/stream/CreateMultipleForm/CreateMultipleForm.tsx @@ -7,7 +7,7 @@ import { CREATE_STREAM_DEFAULT_VALUES, StreamForm } from '../CreateForm' import Button from '@sushiswap/ui/future/components/button/Button' import { DuplicateIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid' import { nanoid } from 'nanoid' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { CreateMultipleStreamBaseSchemaFormErrorsType, CreateMultipleStreamFormSchemaType, @@ -71,6 +71,7 @@ export const CreateMultipleForm: FC<{ chainId: FuroStreamRouterChainId }> = ({ c icon={DuplicateIcon} iconProps={{ width: 16, height: 16 }} onClick={() => append(el)} + name="Duplicate" />
{(i > 0 || (formData.streams || []).length > 1) && ( @@ -79,6 +80,7 @@ export const CreateMultipleForm: FC<{ chainId: FuroStreamRouterChainId }> = ({ c icon={TrashIcon} iconProps={{ width: 16, height: 16, className: 'text-red' }} onClick={() => remove(i)} + name="Delete" />
)} diff --git a/apps/furo/components/vesting/CreateMultipleForm/CreateMultipleForm.tsx b/apps/furo/components/vesting/CreateMultipleForm/CreateMultipleForm.tsx index 34ffe6c521..f351359b0d 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/CreateMultipleForm.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/CreateMultipleForm.tsx @@ -5,7 +5,7 @@ import { CREATE_VEST_DEFAULT_VALUES } from '../CreateForm' import { zodResolver } from '@hookform/resolvers/zod' import { nanoid } from 'nanoid' import { ImportZoneSection } from './ImportZoneSection' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { DuplicateIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid' import { VestingForm } from '../CreateForm/VestingForm' import { Button } from '@sushiswap/ui/future/components/button' @@ -85,6 +85,7 @@ export const CreateMultipleForm: FC<{ chainId: FuroVestingRouterChainId }> = ({ icon={DuplicateIcon} iconProps={{ width: 16, height: 16 }} onClick={() => append(el)} + name="Duplicate" />
{(i > 0 || (formData.vestings || []).length > 1) && ( @@ -93,6 +94,7 @@ export const CreateMultipleForm: FC<{ chainId: FuroVestingRouterChainId }> = ({ icon={TrashIcon} iconProps={{ width: 16, height: 16, className: 'text-red' }} onClick={() => remove(i)} + name="Remove" />
)} diff --git a/apps/furo/pages/create.tsx b/apps/furo/pages/create.tsx index b77b59f15a..9b05cb5309 100644 --- a/apps/furo/pages/create.tsx +++ b/apps/furo/pages/create.tsx @@ -10,7 +10,7 @@ import { useAccount, useEnsName } from '@sushiswap/wagmi' import { Button } from '@sushiswap/ui/future/components/button' import { SplashController } from '@sushiswap/ui/future/components/SplashController' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' enum Type { @@ -45,6 +45,7 @@ export default function CreatePage() { height: 24, transparent: true, }} + name="Back" /> Go back diff --git a/apps/furo/pages/stream/[id].tsx b/apps/furo/pages/stream/[id].tsx index 93fe4bc437..e18d60bee6 100644 --- a/apps/furo/pages/stream/[id].tsx +++ b/apps/furo/pages/stream/[id].tsx @@ -1,6 +1,5 @@ import { getFuroStreamContractConfig } from '@sushiswap/wagmi' import { useRouter } from 'next/router' -import dynamic from 'next/dynamic' import { NextSeo } from 'next-seo' import React, { FC, useMemo } from 'react' import { BalancePredictor, CancelModal, FuroTimer, Layout, TransferModal, UpdateModal } from '../../components' @@ -14,20 +13,19 @@ import { List } from '@sushiswap/ui/future/components/list/List' import { format } from 'date-fns' import { Button } from '@sushiswap/ui/future/components/button' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon, ArrowRightIcon, ArrowDownIcon, ArrowUpIcon, RefreshIcon } from '@heroicons/react/solid' import { DownloadIcon, XIcon } from '@heroicons/react/outline' import { Badge } from '@sushiswap/ui/future/components/Badge' import { classNames, NetworkIcon } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { Address } from '@sushiswap/wagmi' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonBox, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { SplashController } from '@sushiswap/ui/future/components/SplashController' import { Blink } from '@sushiswap/ui/future/components/Blink' import { Percent } from '@sushiswap/math' import { queryParamsSchema } from '../../lib/zod' -import { BentoBoxV1ChainId } from '@sushiswap/bentobox' - const Streams = () => { const { isReady } = useRouter() @@ -98,6 +96,7 @@ const _Streams: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to dashboard @@ -105,24 +104,24 @@ const _Streams: FC = () => {
- +
- - + +
- - + +
- +
@@ -177,6 +176,7 @@ const _Streams: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to dashboard diff --git a/apps/furo/pages/stream/create/multiple.tsx b/apps/furo/pages/stream/create/multiple.tsx index a081b85001..64698edc41 100644 --- a/apps/furo/pages/stream/create/multiple.tsx +++ b/apps/furo/pages/stream/create/multiple.tsx @@ -6,7 +6,7 @@ import { useNetwork } from '@sushiswap/wagmi' import { Layout } from '../../../components' import { CreateMultipleForm } from '../../../components/stream/CreateMultipleForm' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' import React from 'react' @@ -32,6 +32,7 @@ const MultipleStream = () => { height: 24, transparent: true, }} + name="Back" /> Go back diff --git a/apps/furo/pages/stream/create/single.tsx b/apps/furo/pages/stream/create/single.tsx index 3a2f58663d..5b353e8919 100644 --- a/apps/furo/pages/stream/create/single.tsx +++ b/apps/furo/pages/stream/create/single.tsx @@ -6,7 +6,7 @@ import { useNetwork } from '@sushiswap/wagmi' import { Layout } from '../../../components' import { CreateForm } from '../../../components/stream' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' import React from 'react' @@ -32,6 +32,7 @@ const SingleStream = () => { height: 24, transparent: true, }} + name="Back" /> Go back diff --git a/apps/furo/pages/vesting/[id].tsx b/apps/furo/pages/vesting/[id].tsx index 4047b5ff07..e4d7d98f3a 100644 --- a/apps/furo/pages/vesting/[id].tsx +++ b/apps/furo/pages/vesting/[id].tsx @@ -6,9 +6,10 @@ import { CancelModal, FuroTimer, Layout, TransferModal } from '../../components' import { createScheduleRepresentation, NextPaymentTimer, WithdrawModal } from '../../components/vesting' import { SplashController } from '@sushiswap/ui/future/components/SplashController' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckCircleIcon } from '@heroicons/react/solid' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonBox, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { List } from '@sushiswap/ui/future/components/list/List' import { Badge } from '@sushiswap/ui/future/components/Badge' import { Currency } from '@sushiswap/ui/future/components/currency' @@ -111,6 +112,7 @@ const _VestingPage: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to dashboard @@ -118,24 +120,24 @@ const _VestingPage: FC = () => {
- +
- - + +
- - + +
- +
@@ -190,6 +192,7 @@ const _VestingPage: FC = () => { height: 24, transparent: true, }} + name="Back" /> Go back to dashboard diff --git a/apps/furo/pages/vesting/create/multiple.tsx b/apps/furo/pages/vesting/create/multiple.tsx index 289cb63b2c..d878247a2f 100644 --- a/apps/furo/pages/vesting/create/multiple.tsx +++ b/apps/furo/pages/vesting/create/multiple.tsx @@ -6,7 +6,7 @@ import { useNetwork } from '@sushiswap/wagmi' import { Layout } from '../../../components' import { CreateMultipleForm } from '../../../components/vesting/CreateMultipleForm' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' import React from 'react' @@ -32,6 +32,7 @@ const MultipleStream = () => { height: 24, transparent: true, }} + name="Back" /> Go back diff --git a/apps/furo/pages/vesting/create/single.tsx b/apps/furo/pages/vesting/create/single.tsx index 109fd0202f..f8568db4f5 100644 --- a/apps/furo/pages/vesting/create/single.tsx +++ b/apps/furo/pages/vesting/create/single.tsx @@ -6,7 +6,7 @@ import { useNetwork } from '@sushiswap/wagmi' import { Layout } from '../../../components' import { CreateForm } from '../../../components/vesting' import Link from 'next/link' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon } from '@heroicons/react/solid' import React from 'react' @@ -32,6 +32,7 @@ const SingleVesting = () => { height: 24, transparent: true, }} + name="Back" /> Go back diff --git a/config/tailwindcss/package.json b/config/tailwindcss/package.json index 85baf0aa76..344ff51a70 100644 --- a/config/tailwindcss/package.json +++ b/config/tailwindcss/package.json @@ -43,6 +43,7 @@ "@tailwindcss/forms": "0.5.3", "@tailwindcss/typography": "0.5.9", "tailwindcss": "3.3.2", + "tailwindcss-animate": "^1.0.5", "tsup": "6.5.0", "typescript": "5.0.4" }, diff --git a/config/tailwindcss/src/index.ts b/config/tailwindcss/src/index.ts index fe274ab0e7..f73bc463a7 100644 --- a/config/tailwindcss/src/index.ts +++ b/config/tailwindcss/src/index.ts @@ -20,7 +20,7 @@ const config = { // // include packages if not transpiling // '../../packages/**/*.{js,ts,jsx,tsx}', // ], - plugins: [forms, aspectRatio, typography], + plugins: [forms, aspectRatio, typography, require('tailwindcss-animate')], theme: { screens: { ...defaultTheme.screens, @@ -59,44 +59,6 @@ const config = { yellow: { DEFAULT: '#eab308', }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - }, - borderRadius: { - lg: `var(--radius)`, - md: `calc(var(--radius) - 2px)`, - sm: 'calc(var(--radius) - 4px)', }, animation: { ellipsis: 'ellipsis 1.25s infinite', diff --git a/packages/ui/package.json b/packages/ui/package.json index 308c7bee82..7decc7f9e1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -64,13 +64,14 @@ "@headlessui/react": "1.7.7", "@heroicons/react": "2.0.13", "@popperjs/core": "2.11.7", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.6", - "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-scroll-area": "^1.0.4", "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tooltip": "^1.0.6", "@react-hook/window-scroll": "1.3.0", "@sushiswap/chain": "workspace:*", "@sushiswap/currency": "workspace:*", diff --git a/packages/ui/src/future/components/IconButton.tsx b/packages/ui/src/future/components/IconButton.tsx deleted file mode 100644 index 10f594fe5d..0000000000 --- a/packages/ui/src/future/components/IconButton.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import classNames from 'classnames' -import React from 'react' -import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../types' - -interface Props { - className?: string - description?: string - padding?: number - icon(props: React.ComponentProps<'svg'>): JSX.Element | null - iconProps: Omit, 'width' | 'height'> & { - width: number - height: number - transparent?: boolean - } -} - -export type IconButtonProps = PolymorphicComponentPropsWithRef -export type IconButtonComponent = ( - props: IconButtonProps -) => React.ReactElement | null - -export const IconButton: IconButtonComponent = React.forwardRef( - ( - { - as, - icon: Icon, - iconProps: { transparent, ...iconProps }, - className, - padding = 16, - description, - ...rest - }: IconButtonProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'button' - return ( - - - {description && ( -
-
- - {description} - -
-
- )} - - - - ) - } -) diff --git a/packages/ui/src/future/components/Tooltip.tsx b/packages/ui/src/future/components/Tooltip.tsx index 0d6ef77b63..766a885a54 100644 --- a/packages/ui/src/future/components/Tooltip.tsx +++ b/packages/ui/src/future/components/Tooltip.tsx @@ -1,59 +1,31 @@ -import classNames from 'classnames' -import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react' -import ReactDOM from 'react-dom' -import { usePopper } from 'react-popper' +'use client' -interface TooltipProps { - children: ReactNode - description: string - transitionDelay?: number - className?: string -} +import * as React from 'react' +import * as TooltipPrimitive from '@radix-ui/react-tooltip' +import { classNames } from '../../index' -export const Tooltip: FC = ({ children, description, transitionDelay = 0, className }) => { - const [open, setOpen] = useState(false) - const [referenceElement, setReferenceElement] = useState(null) - const [popperElement, setPopperElement] = useState(null) - const timeout = useRef>() +const TooltipProvider = TooltipPrimitive.Provider - const { styles, attributes, update } = usePopper(referenceElement, popperElement, { - placement: 'bottom', - modifiers: [{ name: 'offset', options: { offset: [0, 8] } }], - }) +const Tooltip = TooltipPrimitive.Root - useEffect(() => { - if (open && update) { - void update() - } - }, [open, update]) +const TooltipTrigger = TooltipPrimitive.Trigger - const onMouseEnter = useCallback(() => { - timeout.current = setTimeout(() => setOpen(true), transitionDelay) - }, [transitionDelay]) - - const onMouseLeave = useCallback(() => { - clearTimeout(timeout.current) - setOpen(false) - }, []) - - return ( - <> -
- {children} -
- {ReactDOM.createPortal( -
- - {description} - -
, - document.body +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + - ) -} + {...props} + /> + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/packages/ui/src/future/components/buttonnew.tsx b/packages/ui/src/future/components/buttonnew.tsx index 0ba2cdcab0..d11aebca55 100644 --- a/packages/ui/src/future/components/buttonnew.tsx +++ b/packages/ui/src/future/components/buttonnew.tsx @@ -8,11 +8,12 @@ const buttonVariants = cva( { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - outline: 'border border-input hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', + default: 'bg-blue text-white', + destructive: 'bg-red text-white', + outline: 'border dark:border-slate-200/5 border-gray-900/5', + secondary: 'bg-white dark:bg-slate-800', + ghost: + 'bg-black/[0.04] hover:bg-black/[0.06] focus:bg-black/[0.12] dark:bg-white/[0.08] dark:hover:bg-white/[0.12] dark:focus:bg-white/[0.16]', link: 'underline-offset-4 hover:underline text-primary', }, size: { diff --git a/packages/ui/src/future/components/dialog/DialogHeader.tsx b/packages/ui/src/future/components/dialog/DialogHeader.tsx index 24c94f1676..00430dd6ba 100644 --- a/packages/ui/src/future/components/dialog/DialogHeader.tsx +++ b/packages/ui/src/future/components/dialog/DialogHeader.tsx @@ -2,8 +2,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid' import { ChevronLeftIcon } from '@heroicons/react/24/outline' import classNames from 'classnames' import React, { FC, ReactNode } from 'react' - -import { IconButton } from '../IconButton' +import { IconButton } from '../iconbutton' export interface DialogHeaderProps { title: string | ReactNode @@ -21,10 +20,10 @@ const DialogHeader: FC = ({ title, onBack, onClose, className iconProps={{ width: 24, height: 24, - className: 'hover:text-slate-50 dark:text-slate-100 text-gray-400 hover:text-gray-900', }} className="flex items-center justify-center w-6 h-6 gap-2 cursor-pointer" onClick={onBack} + name="Back" /> )} @@ -38,10 +37,10 @@ const DialogHeader: FC = ({ title, onBack, onClose, className iconProps={{ width: 24, height: 24, - className: 'hover:text-slate-50 dark:text-slate-100 text-gray-600 hover:text-gray-900', }} className="cursor-pointer" onClick={onClose} + name="Close" /> )}
diff --git a/packages/ui/src/future/components/drawer/Drawer.tsx b/packages/ui/src/future/components/drawer/Drawer.tsx index 0c1eeff9ae..7104177c91 100644 --- a/packages/ui/src/future/components/drawer/Drawer.tsx +++ b/packages/ui/src/future/components/drawer/Drawer.tsx @@ -19,7 +19,7 @@ import ReactDOM from 'react-dom' import { ButtonComponent } from '../button' import { XMarkIcon } from '@heroicons/react/20/solid' -import { IconButton } from '../IconButton' +import { IconButton } from '../iconbutton' interface DrawerContext { open: boolean @@ -107,7 +107,12 @@ export const Panel: FC = ({ children, className }) => { >
- setOpen(false)} /> + setOpen(false)} + />
{children}
diff --git a/packages/ui/src/future/components/iconbutton.tsx b/packages/ui/src/future/components/iconbutton.tsx new file mode 100644 index 0000000000..c720c40a9e --- /dev/null +++ b/packages/ui/src/future/components/iconbutton.tsx @@ -0,0 +1,64 @@ +import * as React from 'react' +import { Slot } from '@radix-ui/react-slot' +import { type VariantProps } from 'class-variance-authority' +import { buttonVariants } from './buttonnew' +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip' +import { classNames } from '../../index' + +export interface IconButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + icon(props: React.ComponentProps<'svg'>): JSX.Element | null + iconProps: Omit, 'width' | 'height'> & { + width: number + height: number + transparent?: boolean + } + name: string + asChild?: boolean + description?: string +} + +const IconButton = React.forwardRef( + ({ className, icon: Icon, iconProps, description, size = 'sm', name, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button' + const icon = ( + + + {name} + + ) + + if (description) { + return ( + + + {icon} + +

{description}

+ + + + ) + } + + return icon + } +) +IconButton.displayName = 'ButtonNew' + +export { IconButton } diff --git a/packages/ui/src/future/components/input/Numeric.tsx b/packages/ui/src/future/components/input/Numeric.tsx index ffd28218d5..d357b74578 100644 --- a/packages/ui/src/future/components/input/Numeric.tsx +++ b/packages/ui/src/future/components/input/Numeric.tsx @@ -8,16 +8,19 @@ interface NumericInput extends Omit { maxDecimals?: number } -function Component({ onUserInput, variant = 'default', ...props }: NumericInput, ref: ForwardedRef) { +function Component( + { onUserInput, variant = 'default', maxDecimals, ...props }: NumericInput, + ref: ForwardedRef +) { const enforcer = (nextUserInput: string | number | undefined) => { if (typeof nextUserInput === 'undefined') return const val = `${nextUserInput}`.replace(/,/g, '.') if (onUserInput && val === '') onUserInput('') if (inputRegex.test(escapeRegExp(val))) { if (onUserInput) { - if (props.maxDecimals && val?.includes('.')) { + if (maxDecimals && val?.includes('.')) { const [, decimals] = val.split('.') - if (decimals.length <= props.maxDecimals) { + if (decimals.length <= maxDecimals) { onUserInput(val) } } else { @@ -28,10 +31,21 @@ function Component({ onUserInput, variant = 'default', ...props }: NumericInput, } if (variant === 'unstyled') { - return enforcer(e.target.value)} /> + return ( + enforcer(e.target.value)} + autoCorrect="off" + autoCapitalize="off" + spellCheck="false" + autoComplete="off" + /> + ) } - return enforcer(val)} /> + return enforcer(val)} /> } export const Numeric = forwardRef(Component) diff --git a/packages/ui/src/future/components/list/ListItem.tsx b/packages/ui/src/future/components/list/ListItem.tsx index 10cc292a58..26cbce11e7 100644 --- a/packages/ui/src/future/components/list/ListItem.tsx +++ b/packages/ui/src/future/components/list/ListItem.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import React, { ReactNode } from 'react' import { PolymorphicComponentProps } from '../../../types' -import { Skeleton } from '../skeleton' +import { SkeletonText, SkeletonCircle } from '../skeleton' interface Props { title: ReactNode @@ -47,10 +47,10 @@ export const ListItem: ListItemComponent = ({ > {loading ? ( <> - {Icon && } + {Icon && }
- - {subtitle && } + + {subtitle && }
) : ( diff --git a/packages/ui/src/future/components/list/ListKeyValue.tsx b/packages/ui/src/future/components/list/ListKeyValue.tsx index 3bf56302fc..2a999b617a 100644 --- a/packages/ui/src/future/components/list/ListKeyValue.tsx +++ b/packages/ui/src/future/components/list/ListKeyValue.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react' -import { Skeleton } from '../skeleton' +import { SkeletonText } from '../skeleton' import classNames from 'classnames' export type ListKeyValueProps = @@ -25,11 +25,11 @@ export const ListKeyValue: FC = ({ return (
- - {subtitle && } + + {subtitle && }
- +
) diff --git a/packages/ui/src/future/components/overlay/Header.tsx b/packages/ui/src/future/components/overlay/Header.tsx index 517c263025..30a2cba0f7 100644 --- a/packages/ui/src/future/components/overlay/Header.tsx +++ b/packages/ui/src/future/components/overlay/Header.tsx @@ -1,10 +1,9 @@ -import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/24/solid' +import { XMarkIcon } from '@heroicons/react/24/solid' import classNames from 'classnames' import React, { FC } from 'react' -import { Button } from '../button' -import { IconButton } from '../IconButton' import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon } from '@heroicons/react/20/solid' +import { IconButton } from '../iconbutton' export interface Header { title: string @@ -31,10 +30,10 @@ export const Header: FC
= ({ className, title, onBack, onClose, arrowDir iconProps={{ width: 24, height: 24, - className: 'hover:text-slate-50 dark:text-slate-100 text-gray-400 hover:text-gray-900', }} className="flex items-center justify-center w-6 h-6 gap-2 cursor-pointer" onClick={onBack} + name="Back" /> )}

= ({ className, title, onBack, onClose, arrowDir iconProps={{ width: 24, height: 24, - className: 'hover:text-slate-50 dark:text-slate-100 text-gray-400 hover:text-gray-900', }} className="cursor-pointer" onClick={onClose} + name="close" /> )}

diff --git a/packages/ui/src/future/components/skeleton.tsx b/packages/ui/src/future/components/skeleton.tsx new file mode 100644 index 0000000000..427ffc5c31 --- /dev/null +++ b/packages/ui/src/future/components/skeleton.tsx @@ -0,0 +1,80 @@ +import { classNames } from '../../index' +import { cva, type VariantProps } from 'class-variance-authority' +import * as React from 'react' + +function SkeletonBox(props: React.HTMLAttributes) { + return ( +
+ ) +} + +export interface CircleProps extends React.HTMLAttributes { + radius: number +} + +function SkeletonCircle(props: CircleProps) { + return ( +
+ ) +} + +const skeletonTextVariants = cva('flex w-full', { + variants: { + fontSize: { + xs: 'h-[18px] py-[3px]', + sm: 'h-5 py-[3px]', + default: 'h-6 py-[3px]', + lg: 'h-[28px] py-[3px]', + xl: 'h-[28px]', + '2xl': 'h-[44px] py-[6px]', + '3xl': 'h-[36px] py-[3px]', + }, + align: { + left: '', + center: 'justify-center', + right: 'justify-end', + }, + }, + defaultVariants: { + fontSize: 'default', + align: 'left', + }, +}) + +export interface TextProps + extends Omit, 'size'>, + VariantProps {} + +function SkeletonText({ className, align, fontSize, ...props }: TextProps) { + return ( +
+
+
+ ) +} + +export { SkeletonBox, SkeletonCircle, SkeletonText } diff --git a/packages/ui/src/future/components/skeleton/Box.tsx b/packages/ui/src/future/components/skeleton/Box.tsx deleted file mode 100644 index 170b7b2271..0000000000 --- a/packages/ui/src/future/components/skeleton/Box.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import classNames from 'classnames' -import { FC, HTMLProps } from 'react' - -export const Box: FC> = (props) => { - return ( -
- ) -} diff --git a/packages/ui/src/future/components/skeleton/Circle.tsx b/packages/ui/src/future/components/skeleton/Circle.tsx deleted file mode 100644 index e06643c838..0000000000 --- a/packages/ui/src/future/components/skeleton/Circle.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import classNames from 'classnames' -import { FC, HTMLProps } from 'react' - -export interface CircleProps extends HTMLProps { - radius: number -} - -export const Circle: FC = (props) => { - return ( -
- ) -} diff --git a/packages/ui/src/future/components/skeleton/Text.tsx b/packages/ui/src/future/components/skeleton/Text.tsx deleted file mode 100644 index e086534bb8..0000000000 --- a/packages/ui/src/future/components/skeleton/Text.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { FC, HTMLProps } from 'react' -import classNames from 'classnames' - -export interface TextProps extends Omit, 'size'> { - align?: 'left' | 'right' | 'center' - fontSize?: - | 'text-xs' - | 'text-sm' - | 'text-base' - | 'text-lg' - | 'text-xl' - | 'text-2xl' - | 'text-3xl' - | 'text-4xl' - | 'text-5xl' - | 'text-6xl' - | 'text-7xl' - | 'text-8xl' - | 'text-9x;' -} - -const STYLES = { - 'text-xs': 'h-[18px]', - 'text-sm': 'h-5', - 'text-base': 'h-[24px]', - 'text-lg': 'h-[28px]', - 'text-xl': 'h-[28px]', - 'text-2xl': 'h-[44px]', - 'text-3xl': 'h-[36px]', - 'text-4xl': 'h-[40px]', - 'text-5xl': 'h-[34px]', - 'text-6xl': 'h-9', - 'text-7xl': 'h-[38px]', - 'text-8xl': 'h-10', - 'text-9x;': 'h-[42px]', -} - -const PADDING = { - 'text-xs': 'py-[3px]', - 'text-sm': 'py-[3px]', - 'text-base': 'py-[3px]', - 'text-lg': 'py-[3px]', - 'text-xl': 'py-[3px]', - 'text-2xl': 'py-[6px]', - 'text-3xl': 'py-[3px]', - 'text-4xl': 'py-[3px]', - 'text-5xl': 'py-[3px]', - 'text-6xl': 'py-[3px]', - 'text-7xl': 'py-[3px]', - 'text-8xl': 'py-[3px]', - 'text-9x;': 'py-[3px]', -} - -const ALIGN = { - left: '', - center: 'justify-center', - right: 'justify-end', -} - -export const Text: FC = ({ align = 'left', className, fontSize = 'text-base', ...props }) => { - return ( -
-
-
- ) -} diff --git a/packages/ui/src/future/components/skeleton/index.ts b/packages/ui/src/future/components/skeleton/index.ts deleted file mode 100644 index 2ef44f25d3..0000000000 --- a/packages/ui/src/future/components/skeleton/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { FC, HTMLProps } from 'react' - -import { Box } from './Box' -import { Text } from './Text' -import { Circle, CircleProps } from './Circle' -import { TextProps } from './Text' - -export const Skeleton: { - Box: FC> - Circle: FC - Text: FC -} = { - Box: Box, - Circle: Circle, - Text: Text, -} diff --git a/packages/ui/src/future/components/table/Paginator.tsx b/packages/ui/src/future/components/table/Paginator.tsx index 98138266d0..dab5a9478e 100644 --- a/packages/ui/src/future/components/table/Paginator.tsx +++ b/packages/ui/src/future/components/table/Paginator.tsx @@ -1,8 +1,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline' import { FC } from 'react' import { Typography } from '../../../typography' -import { IconButton } from '../IconButton' import classNames from 'classnames' +import { IconButton } from '../iconbutton' export interface PaginatorProps { hasPrev: boolean @@ -43,9 +43,10 @@ export const Paginator: FC = ({
{pages ? ( @@ -57,10 +58,11 @@ export const Paginator: FC = ({ )}
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index 7806e1222e..b5c61c9567 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -1,81 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - - --ring: 215 20.2% 65.1%; - - --radius: 0.5rem; - } - - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; - - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; - - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; - - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; - - --border: 216 34% 17%; - --input: 216 34% 17%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; - - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; - - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; - - --ring: 216 34% 17%; - - --radius: 0.5rem; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - font-feature-settings: "rlig" 1, "calt" 1; - } -} diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx index 5175333518..5a39d480ed 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx @@ -4,7 +4,6 @@ import { useBalances, usePrices, useTokens } from '@sushiswap/react-query' import { SlideIn } from '@sushiswap/ui/future/components/animation' import { Dialog } from '@sushiswap/ui/future/components/dialog' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' -import { Input } from '@sushiswap/ui/future/components/input' import { Search } from '@sushiswap/ui/future/components/input/Search' import { List } from '@sushiswap/ui/future/components/list/List' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' @@ -16,7 +15,8 @@ import { TokenSelectorCustomTokensOverlay } from './TokenSelectorCustomTokensOve import { Button } from '@sushiswap/ui/future/components/button' import { Currency } from '@sushiswap/ui/future/components/currency' import { COMMON_BASES } from '@sushiswap/router-config' -import { Skeleton } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' + import { useCustomTokens } from '@sushiswap/hooks' import { useSortedTokenList } from './hooks/useSortedTokenList' import { useTokenWithCache } from '../../hooks' @@ -114,16 +114,16 @@ export const TokenSelector: FC = ({ id, selected, onSelect,
- +
- - + +
- - + +
diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx index fc49a38b71..fd913db11e 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx @@ -2,7 +2,7 @@ import { LinkIcon, XCircleIcon } from '@heroicons/react/24/outline' import chain from '@sushiswap/chain' import { Type } from '@sushiswap/currency' import { Icon } from '@sushiswap/ui/future/components/currency/Icon' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import React, { CSSProperties, FC } from 'react' @@ -32,18 +32,17 @@ export const TokenSelectorCustomTokenRow: FC<{ iconProps={{ width: 20, height: 20, - className: 'text-gray-500 dark:text-slate-500', }} onClick={onRemove} + name="Remove" /> - + + +
diff --git a/packages/wagmi/src/future/components/UserProfile/DefaultView.tsx b/packages/wagmi/src/future/components/UserProfile/DefaultView.tsx index 50cef34fd3..0bad3377b4 100644 --- a/packages/wagmi/src/future/components/UserProfile/DefaultView.tsx +++ b/packages/wagmi/src/future/components/UserProfile/DefaultView.tsx @@ -10,7 +10,7 @@ import chains, { ChainId } from '@sushiswap/chain' import { Amount, Native } from '@sushiswap/currency' import { shortenAddress } from '@sushiswap/format' import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { JazzIcon } from '@sushiswap/ui/future/components/icons/JazzIcon' import { List } from '@sushiswap/ui/future/components/list/List' import React, { Dispatch, FC, SetStateAction, useMemo } from 'react' @@ -50,29 +50,14 @@ export const DefaultView: FC = ({ chainId, address, setView }) => return ( <>
-
-
- {avatar ? ( -
- ens-avatar -
- ) : ( - - )} - - {({ setCopied }) => ( - setCopied(address)}> - {shortenAddress(address)} - - )} - -
-
+
+
setView(ProfileView.Settings)} description="Settings" + name="Settings" /> {({ setCopied, isCopied }) => ( @@ -81,22 +66,25 @@ export const DefaultView: FC = ({ chainId, address, setView }) => iconProps={{ width: 18, height: 18 }} onClick={() => setCopied(address)} description={isCopied ? 'Copied!' : 'Copy Address'} + name="Copy" /> )} - + + + + disconnect()} description="Disconnect" + name="Disconnect" />
diff --git a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx index fc20a56973..a6f6e8017a 100644 --- a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx +++ b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx @@ -3,7 +3,7 @@ import { List } from '@sushiswap/ui/future/components/list/List' import React, { Dispatch, FC, Fragment, SetStateAction } from 'react' import { ProfileView } from './index' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { RadioGroup } from '@headlessui/react' import { classNames } from '@sushiswap/ui' import { MoonIcon, SunIcon } from '@heroicons/react/24/outline' @@ -36,8 +36,8 @@ export const SettingsView: FC = ({ setView }) => { strokeWidth: 4, width: 20, height: 20, - transparent: true, }} + name="Back" />
Settings diff --git a/packages/wagmi/src/future/components/UserProfile/TransactionsView.tsx b/packages/wagmi/src/future/components/UserProfile/TransactionsView.tsx index 5675644e48..b80d624feb 100644 --- a/packages/wagmi/src/future/components/UserProfile/TransactionsView.tsx +++ b/packages/wagmi/src/future/components/UserProfile/TransactionsView.tsx @@ -6,7 +6,7 @@ import React, { Dispatch, FC, SetStateAction } from 'react' import { ProfileView } from './index' import { NotificationGroup } from './NotificationGroup' import { useClearNotifications, useNotifications } from '@sushiswap/dexie' -import { IconButton } from '@sushiswap/ui/future/components/IconButton' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' interface TransactionsProps { address: `0x${string}` @@ -29,6 +29,7 @@ export const TransactionsView: FC = ({ setView, address }) => height: 20, transparent: true, }} + name="Back" />
diff --git a/apps/blog/components/Card/Card.tsx b/apps/blog/components/Card/Card.tsx index e7db18ace8..c9df8d5b16 100644 --- a/apps/blog/components/Card/Card.tsx +++ b/apps/blog/components/Card/Card.tsx @@ -1,11 +1,12 @@ import { ChevronRightIcon } from '@heroicons/react/solid' -import { Chip, classNames, Typography } from '@sushiswap/ui' +import { classNames, Typography } from '@sushiswap/ui' import { format } from 'date-fns' import { FC } from 'react' import { Article } from 'types' import { isMediaVideo } from '../../lib/media' import { Image } from '../Image' +import { Chip } from '@sushiswap/ui/future/components/chip' interface Card { article: Article @@ -33,7 +34,9 @@ export const Card: FC = ({ article }) => { {(article?.attributes?.categories?.data || []).length > 0 && (
{article?.attributes?.categories?.data.map((category) => ( - + + {category?.attributes?.name} + ))}
)} diff --git a/apps/blog/components/Hero.tsx b/apps/blog/components/Hero.tsx index cd4158dfee..7da0378178 100644 --- a/apps/blog/components/Hero.tsx +++ b/apps/blog/components/Hero.tsx @@ -16,9 +16,11 @@ export const Hero: FC = ({ article }) => {
- +
+ +
diff --git a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx index 9a99e3cbac..182cd104ca 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx @@ -1,5 +1,5 @@ import { Amount, tryParseAmount, Type } from '@sushiswap/currency' -import { Collapsible, Dots } from '@sushiswap/ui' +import { Collapsible } from '@sushiswap/ui' import { Button } from '@sushiswap/ui/future/components/button' import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react' import { Dialog } from '@sushiswap/ui/future/components/dialog' @@ -12,6 +12,7 @@ import { Bound } from '../../lib/constants' import { useConcentratedDerivedMintInfo } from '../ConcentratedLiquidityProvider' import { FeeAmount, Position } from '@sushiswap/v3-sdk' import { useTokenAmountDollarValues } from '../../lib/hooks' +import { Dots } from '@sushiswap/ui/future/components/Dots' interface AddSectionReviewModalConcentratedProps extends Pick< diff --git a/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx b/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx index 599e30380a..a50b6d69b0 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx @@ -3,12 +3,12 @@ import { calculateSlippageAmount } from '@sushiswap/amm' import { Amount, Type } from '@sushiswap/currency' import { calculateGasMargin } from '@sushiswap/gas' import { Percent } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' import { PairState, _useSendTransaction as useSendTransaction, useSushiSwapRouterContract } from '@sushiswap/wagmi' import { BigNumber } from 'ethers' import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react' import { Address, useAccount, useNetwork } from '@sushiswap/wagmi' import { SendTransactionResult } from '@sushiswap/wagmi/actions' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { useTransactionDeadline } from '../../lib/hooks' import { AddSectionReviewModal } from './AddSectionReviewModal' diff --git a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx index 978bae919a..cbe6e80281 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx @@ -1,9 +1,8 @@ import { TransactionRequest } from '@ethersproject/providers' import { calculateSlippageAmount } from '@sushiswap/amm' import { Amount, Type } from '@sushiswap/currency' -import { calculateGasMargin } from '@sushiswap/gas' import { Percent } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { _useSendTransaction as useSendTransaction, Address, diff --git a/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx b/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx index bcf5a1b911..dafb14ece1 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx @@ -6,7 +6,7 @@ import { calculateSlippageAmount, ConstantProductPool, StablePool } from '@sushi import { BentoBoxV1ChainId } from '@sushiswap/bentobox' import { Amount, Token, Type } from '@sushiswap/currency' import { JSBI, Percent, ZERO } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { _useSendTransaction as useSendTransaction, ConstantProductPoolState, diff --git a/apps/earn/components/AddSection/AddSectionStake.tsx b/apps/earn/components/AddSection/AddSectionStake.tsx index ddb5c49d70..e6e23092f6 100644 --- a/apps/earn/components/AddSection/AddSectionStake.tsx +++ b/apps/earn/components/AddSection/AddSectionStake.tsx @@ -3,10 +3,11 @@ import { tryParseAmount } from '@sushiswap/currency' import { ChefType, Pool, usePool } from '@sushiswap/client' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { ZERO } from '@sushiswap/math' -import { Dots, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { getMasterChefContractConfig, useMasterChefDeposit } from '@sushiswap/wagmi' import { FC, Fragment, useMemo, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { useGraphPool } from '../../lib/hooks' import { usePoolPosition } from '../PoolPositionProvider' @@ -121,7 +122,7 @@ const _AddSectionStake: FC = withCheckerRoot(({ pool, chef size="xl" variant="filled" disabled={!approved || isWritePending} - testId='stake-liquidity' + testId="stake-liquidity" > {isWritePending ? Confirm transaction : 'Stake Liquidity'} diff --git a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx index 8a92b535e2..b1b45868ac 100644 --- a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx +++ b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx @@ -11,7 +11,7 @@ import { } from '@sushiswap/amm' import { BentoBoxV1ChainId } from '@sushiswap/bentobox' import { Amount, Type } from '@sushiswap/currency' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { _useSendTransaction as useSendTransaction, PoolFinderType, diff --git a/apps/earn/components/PoolPage/MigrateTab.tsx b/apps/earn/components/PoolPage/MigrateTab.tsx index a25d14be14..e71b2a4119 100644 --- a/apps/earn/components/PoolPage/MigrateTab.tsx +++ b/apps/earn/components/PoolPage/MigrateTab.tsx @@ -1,7 +1,7 @@ import { List } from '@sushiswap/ui/future/components/list/List' import { Fraction, JSBI, Percent, ZERO } from '@sushiswap/math' import { RadioGroup } from '@headlessui/react' -import { classNames, Dots } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { formatUSD } from '@sushiswap/format' import { Currency } from '@sushiswap/ui/future/components/currency' import { unwrapToken } from '../../lib/functions' @@ -32,6 +32,7 @@ import { useTransactionDeadline } from '@sushiswap/wagmi/future/hooks' import { TxStatusModalContent } from '@sushiswap/wagmi/future/components/TxStatusModal' import { UniswapV2Router02ChainId } from '@sushiswap/v2-core/exports/exports' import { useRouter } from 'next/router' +import { Dots } from '@sushiswap/ui/future/components/Dots' export const MODAL_MIGRATE_ID = 'migrate-modal' diff --git a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx index b43d680ae2..c7015981bd 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx @@ -7,7 +7,7 @@ import { Pool } from '@sushiswap/client' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { Percent } from '@sushiswap/math' import { UniswapV2Router02ChainId } from '@sushiswap/v2-core' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { getSushiSwapRouterContractConfig, PairState, diff --git a/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx b/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx index d9909c7342..5d94eda40c 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx @@ -5,7 +5,7 @@ import { Amount, Native } from '@sushiswap/currency' import { Pool, Protocol } from '@sushiswap/client' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { Percent } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { ConstantProductPoolState, getTridentRouterContractConfig, diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx index 2d5ec650a2..fda5acc61f 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx @@ -1,9 +1,10 @@ import { tryParseAmount } from '@sushiswap/currency' import { ChefType, Pool, usePool } from '@sushiswap/client' import { useIsMounted } from '@sushiswap/hooks' -import { AppearOnMount, Dots } from '@sushiswap/ui' +import { AppearOnMount } from '@sushiswap/ui' import { getMasterChefContractConfig, useMasterChefWithdraw } from '@sushiswap/wagmi' import { FC, useMemo, useState } from 'react' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { useGraphPool } from '../../lib/hooks' import { usePoolPositionStaked } from '../PoolPositionStakedProvider' diff --git a/packages/ui/src/chip/Chip.tsx b/packages/ui/src/chip/Chip.tsx deleted file mode 100644 index 229e2236c5..0000000000 --- a/packages/ui/src/chip/Chip.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { XMarkIcon } from '@heroicons/react/24/outline' -import classNames from 'classnames' -import { FC, ReactNode } from 'react' - -const SIZE = { - default: 'h-[24px]', - sm: 'h-5 !text-[10px]', - lg: 'h-12 text-[14px]', -} - -const FILLED = { - default: 'bg-gray-700 text-white', - white: 'bg-high-emphesis text-slate-700', - purple: 'bg-purple-500 bg-opacity-20 text-purple', - yellow: 'bg-yellow-500 bg-opacity-20 text-yellow', - blue: 'bg-blue-500 bg-opacity-20 text-blue', - green: 'bg-green-500 bg-opacity-20 text-green', - pink: 'bg-pink-500 bg-opacity-20 text-pink', - red: 'bg-red-500 bg-opacity-20 text-red', - gray: 'bg-white bg-opacity-10 text-slate-300', -} - -const VARIANT = { - filled: FILLED, -} - -export type ChipColor = 'default' | 'purple' | 'yellow' | 'blue' | 'green' | 'white' | 'pink' | 'red' | 'gray' -export type ChipSize = 'default' | 'sm' -export type ChipVariant = 'filled' - -export interface ChipProps { - label: ReactNode - color?: ChipColor - variant?: ChipVariant - size?: ChipSize - opaque?: boolean - className?: string - // @ts-ignore TYPE NEEDS FIXING - onClick?: (e) => void - icon?: ReactNode - endIcon?: ReactNode - id?: string -} - -/** - * @deprecated - */ -export const Chip: FC = ({ - label, - color = 'default', - variant = 'filled', - size = 'default', - className = '', - onClick, - icon = undefined, - opaque, - endIcon = , - id = '', -}) => { - return ( -
- {icon && ( - - )} - - {label} - {onClick && ( - - )} -
- ) -} diff --git a/packages/ui/src/chip/index.ts b/packages/ui/src/chip/index.ts deleted file mode 100644 index 1a33f6a175..0000000000 --- a/packages/ui/src/chip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Chip' diff --git a/packages/ui/src/dots/Dots.tsx b/packages/ui/src/dots/Dots.tsx deleted file mode 100644 index ae35704fc7..0000000000 --- a/packages/ui/src/dots/Dots.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { FC } from 'react' - -import { classNames } from '../index' - -interface DotsProps { - children?: any - className?: string -} - -/** - * @deprecated - */ -export const Dots: FC = ({ children = , className }) => { - return ( - - {children} - - ) -} - -export default Dots diff --git a/packages/ui/src/dots/index.ts b/packages/ui/src/dots/index.ts deleted file mode 100644 index 54eafe8e33..0000000000 --- a/packages/ui/src/dots/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Dots' diff --git a/packages/ui/src/future/components/SplashController.tsx b/packages/ui/src/future/components/SplashController.tsx index a6fc5a03cc..41ea33aa54 100644 --- a/packages/ui/src/future/components/SplashController.tsx +++ b/packages/ui/src/future/components/SplashController.tsx @@ -14,10 +14,10 @@ const Component: FC<{ children: ReactNode; show?: boolean }> = ({ children, show show={true} unmount={false} static - enter="ease-in-out duration-[1000ms]" + enter="ease-in-out duration-1000" enterFrom="scale-1 saturate-0" enterTo="scale-[0.75] saturate-100" - leave="ease-in-out duration-[1000ms]" + leave="ease-in-out duration-1000" leaveFrom="scale-[0.75]" leaveTo="scale-1" > diff --git a/packages/ui/src/future/components/chip.tsx b/packages/ui/src/future/components/chip.tsx new file mode 100644 index 0000000000..417a3957f2 --- /dev/null +++ b/packages/ui/src/future/components/chip.tsx @@ -0,0 +1,30 @@ +import * as React from 'react' +import { cva, type VariantProps } from 'class-variance-authority' +import { classNames } from '../../index' + +const chipVariants = cva( + 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + { + variants: { + variant: { + default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground', + secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground', + destructive: 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground', + ghost: + 'bg-black/[0.04] hover:bg-black/[0.06] focus:bg-black/[0.12] dark:bg-white/[0.08] dark:hover:bg-white/[0.12] dark:focus:bg-white/[0.16]', + outline: 'text-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, + } +) + +export interface BadgeProps extends React.HTMLAttributes, VariantProps {} + +function Chip({ className, variant, ...props }: BadgeProps) { + return
+} + +export { Chip, chipVariants } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index a0d8f68faf..a902f53ef0 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,10 +1,8 @@ import './globals.css' export * from './animation' -export * from './chip' export * from './currency' export * from './dialog' -export * from './dots' export * from './dropzone' export * from './iconbutton' export * from './icons' From 46e3ad5f36690cdcaa11d34354f2b82d431184b0 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 12:35:13 +0100 Subject: [PATCH 12/59] fix(packages/ui): remove iconbutton animation dialog and overlay --- apps/_root/ui/swap/ConfirmationDialog.tsx | 2 +- .../trade/TradeReviewDialogCrossChain.tsx | 3 +- .../swap/trade/TradeReviewDialogSameChain.tsx | 3 +- apps/academy/common/components/Breadcrumb.tsx | 7 +- apps/academy/common/components/Drawer.tsx | 13 ++- .../academy/common/components/SearchInput.tsx | 20 ++-- apps/blog/components/ArticleListItem.tsx | 7 +- .../AddSectionConfirmModalConcentrated.tsx | 2 +- .../AddPage/AddSectionReviewModal.tsx | 5 +- .../AddSectionReviewModalConcentrated.tsx | 2 +- .../NewPositionSection/SelectPricesWidget.tsx | 3 +- .../PoolActionBar/PoolActionBar.tsx | 3 +- .../PoolActionBarPositionDialog.tsx | 3 +- .../PoolActionBarPositionRewards.tsx | 3 +- .../PoolSection/PoolChart/PoolChartGraph.tsx | 3 +- .../components/PoolSection/PoolHeader.tsx | 3 +- .../RemoveSection/RemoveSectionUnstake.tsx | 2 +- .../RemoveSection/RemoveSectionWidget.tsx | 10 +- apps/earn/pages/[id]/add.tsx | 3 +- apps/earn/pages/[id]/index.tsx | 2 +- apps/earn/pages/[id]/remove.tsx | 3 +- apps/furo/components/CancelModal.tsx | 3 +- apps/furo/components/Table/StatusCell.tsx | 22 +---- apps/furo/components/TransferModal.tsx | 21 +++-- .../stream/CreateForm/ExecuteSection.tsx | 2 +- .../ExecuteMultipleSection.tsx | 4 +- apps/furo/components/stream/UpdateModal.tsx | 3 +- apps/furo/components/stream/WithdrawModal.tsx | 12 ++- .../CreateForm/CreateFormReviewModal.tsx | 2 +- .../ExecuteMultipleSection.tsx | 4 +- .../furo/components/vesting/WithdrawModal.tsx | 15 +-- .../animation/AppearOnMount/AppearOnMount.tsx | 42 --------- .../ui/src/animation/AppearOnMount/index.ts | 1 - .../src/animation/Collapsible/Collapsible.tsx | 42 --------- .../ui/src/animation/Collapsible/index.ts | 1 - .../ui/src/animation/SlideIn/FromBottom.tsx | 85 ----------------- .../ui/src/animation/SlideIn/FromLeft.tsx | 85 ----------------- .../ui/src/animation/SlideIn/FromRight.tsx | 85 ----------------- packages/ui/src/animation/SlideIn/FromTop.tsx | 85 ----------------- packages/ui/src/animation/SlideIn/SlideIn.tsx | 47 ---------- packages/ui/src/animation/SlideIn/index.ts | 1 - .../src/animation/SlideIn/useEscapeClose.ts | 17 ---- packages/ui/src/animation/index.ts | 3 - packages/ui/src/dialog/Dialog.tsx | 91 ------------------- packages/ui/src/dialog/DialogActions.tsx | 22 ----- packages/ui/src/dialog/DialogContent.tsx | 25 ----- packages/ui/src/dialog/DialogDescription.tsx | 18 ---- packages/ui/src/dialog/DialogHeader.tsx | 53 ----------- packages/ui/src/dialog/index.ts | 1 - .../components}/dialog/ConfirmationDialog.tsx | 22 ++--- packages/ui/src/iconbutton/IconButton.tsx | 42 --------- packages/ui/src/iconbutton/index.ts | 1 - packages/ui/src/index.ts | 4 - packages/ui/src/overlay/Actions.tsx | 20 ---- packages/ui/src/overlay/Content.tsx | 16 ---- packages/ui/src/overlay/Header.tsx | 67 -------------- packages/ui/src/overlay/index.ts | 8 -- 57 files changed, 111 insertions(+), 963 deletions(-) delete mode 100644 packages/ui/src/animation/AppearOnMount/AppearOnMount.tsx delete mode 100644 packages/ui/src/animation/AppearOnMount/index.ts delete mode 100644 packages/ui/src/animation/Collapsible/Collapsible.tsx delete mode 100644 packages/ui/src/animation/Collapsible/index.ts delete mode 100644 packages/ui/src/animation/SlideIn/FromBottom.tsx delete mode 100644 packages/ui/src/animation/SlideIn/FromLeft.tsx delete mode 100644 packages/ui/src/animation/SlideIn/FromRight.tsx delete mode 100644 packages/ui/src/animation/SlideIn/FromTop.tsx delete mode 100644 packages/ui/src/animation/SlideIn/SlideIn.tsx delete mode 100644 packages/ui/src/animation/SlideIn/index.ts delete mode 100644 packages/ui/src/animation/SlideIn/useEscapeClose.ts delete mode 100644 packages/ui/src/animation/index.ts delete mode 100644 packages/ui/src/dialog/Dialog.tsx delete mode 100644 packages/ui/src/dialog/DialogActions.tsx delete mode 100644 packages/ui/src/dialog/DialogContent.tsx delete mode 100644 packages/ui/src/dialog/DialogDescription.tsx delete mode 100644 packages/ui/src/dialog/DialogHeader.tsx delete mode 100644 packages/ui/src/dialog/index.ts rename packages/ui/src/{ => future/components}/dialog/ConfirmationDialog.tsx (86%) delete mode 100644 packages/ui/src/iconbutton/IconButton.tsx delete mode 100644 packages/ui/src/iconbutton/index.ts delete mode 100644 packages/ui/src/overlay/Actions.tsx delete mode 100644 packages/ui/src/overlay/Content.tsx delete mode 100644 packages/ui/src/overlay/Header.tsx delete mode 100644 packages/ui/src/overlay/index.ts diff --git a/apps/_root/ui/swap/ConfirmationDialog.tsx b/apps/_root/ui/swap/ConfirmationDialog.tsx index be5d3a3158..454e2d9d8d 100644 --- a/apps/_root/ui/swap/ConfirmationDialog.tsx +++ b/apps/_root/ui/swap/ConfirmationDialog.tsx @@ -14,7 +14,7 @@ import { useApproved } from '@sushiswap/wagmi/future/systems/Checker/Provider' import { ConfirmationDialog as UIConfirmationDialog, ConfirmationDialogState, -} from '@sushiswap/ui/dialog/ConfirmationDialog' +} from '@sushiswap/ui/future/components/dialog/ConfirmationDialog' import { useSlippageTolerance } from '@sushiswap/hooks' import { isRouteProcessor3ChainId, diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx index 57c6a0da17..fd8b69aae2 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx @@ -15,11 +15,12 @@ import { Dots } from '@sushiswap/ui/future/components/Dots' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { Collapsible, NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui' import { ConfirmationDialogCrossChain } from '../ConfirmationDialogCrossChain/ConfirmationDialogCrossChain' import { warningSeverity } from '../../../lib/swap/warningSeverity' import { ZERO } from '@sushiswap/math' import { useSlippageTolerance } from '@sushiswap/hooks' +import { Collapsible } from '@sushiswap/ui/future/components/animation/Collapsible' export const TradeReviewDialogCrossChain: FC = () => { const { review, token0, token1, recipient, network0, network1, amount, value } = useSwapState() diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx index a578c4ef5c..3bdd36744c 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx @@ -18,11 +18,12 @@ import { SkeletonText, SkeletonCircle, SkeletonBox } from '@sushiswap/ui/future/ import { Badge } from '@sushiswap/ui/future/components/Badge' import { AppType } from '@sushiswap/ui/types' import { Native } from '@sushiswap/currency' -import { classNames, Collapsible } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { warningSeverity, warningSeverityClassName } from '../../../lib/swap/warningSeverity' import { TradeRoute } from './TradeRoute' import { ZERO } from '@sushiswap/math' import { useSlippageTolerance } from '@sushiswap/hooks' +import { Collapsible } from '@sushiswap/ui/future/components/animation/Collapsible' export const TradeReviewDialogSameChain: FC = () => { const [open, setOpen] = useState(false) diff --git a/apps/academy/common/components/Breadcrumb.tsx b/apps/academy/common/components/Breadcrumb.tsx index cf3231a7fa..fadd8ca403 100644 --- a/apps/academy/common/components/Breadcrumb.tsx +++ b/apps/academy/common/components/Breadcrumb.tsx @@ -1,11 +1,12 @@ import { ArrowLeftIcon, ShareIcon } from '@heroicons/react/24/solid' -import { IconButton, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { getShareText } from 'common/helpers' import Link from 'next/link' import { FC } from 'react' import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' interface Breadcrumb { article?: ArticleEntity @@ -36,9 +37,7 @@ export const Breadcrumb: FC = ({ article }) => { - - - + ) } diff --git a/apps/academy/common/components/Drawer.tsx b/apps/academy/common/components/Drawer.tsx index e528865c92..5a115310ab 100644 --- a/apps/academy/common/components/Drawer.tsx +++ b/apps/academy/common/components/Drawer.tsx @@ -1,9 +1,10 @@ import { Transition } from '@headlessui/react' import { XMarkIcon } from '@heroicons/react/24/outline' import { useIsMounted } from '@sushiswap/hooks' -import { classNames, IconButton } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React, { FC, Fragment, ReactNode } from 'react' import ReactDOM from 'react-dom' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' interface Drawer { isOpen: boolean @@ -49,9 +50,13 @@ export const Drawer: FC = ({ children, isOpen, onClose, className, heade
{header}
- - - +
{children}
diff --git a/apps/academy/common/components/SearchInput.tsx b/apps/academy/common/components/SearchInput.tsx index 5907e7a3c8..3adbb0e838 100644 --- a/apps/academy/common/components/SearchInput.tsx +++ b/apps/academy/common/components/SearchInput.tsx @@ -1,11 +1,12 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/solid' import { useBreakpoint } from '@sushiswap/hooks' -import { classNames, IconButton } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { getTrendingSearch } from 'lib/api' import { ChangeEvent, FC, FormEvent, RefObject, useLayoutEffect, useState } from 'react' import useSWR from 'swr' import { APP_HEADER_HEIGHT } from '../helpers' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' interface SearchInput { handleSearch: (value: string) => void @@ -72,7 +73,7 @@ export const SearchInput: FC = ({ ref, handleSearch, isTopOfPage, s
@@ -91,13 +92,16 @@ export const SearchInput: FC = ({ ref, handleSearch, isTopOfPage, s type="submit" className={classNames( 'sm:bg-[#3B7EF6] rounded-full', - isMobileAndSticky ? 'sm:order-2 order-1' : 'order-2 ml-2 p-2.5 sm:p-[14px]' + isMobileAndSticky ? 'sm:order-2 order-1' : 'order-2 ml-2 p-2.5' )} - > - - + icon={MagnifyingGlassIcon} + iconProps={{ + width: 20, + height: 20, + className: isMobileAndSticky ? 'fill-slate-500' : 'fill-[#3B7EF6] sm:fill-white', + }} + name="Search" + />
{showTopics && ( diff --git a/apps/blog/components/ArticleListItem.tsx b/apps/blog/components/ArticleListItem.tsx index 39c63066ba..909b83af3b 100644 --- a/apps/blog/components/ArticleListItem.tsx +++ b/apps/blog/components/ArticleListItem.tsx @@ -1,9 +1,10 @@ -import { Chip, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { format } from 'date-fns' import { FC } from 'react' import { Article } from 'types' import { Image } from './Image' +import { Chip } from '@sushiswap/ui/future/components/chip' interface ArticleListItem { article: Article @@ -28,7 +29,9 @@ export const ArticleListItem: FC = ({ article }) => { {(article?.attributes?.categories?.data || []).length > 0 && (
{article?.attributes?.categories?.data.map((category) => ( - + + {category?.attributes?.name} + ))}
)} diff --git a/apps/earn/components/AddPage/AddSectionConfirmModalConcentrated.tsx b/apps/earn/components/AddPage/AddSectionConfirmModalConcentrated.tsx index 4d2bfb6024..311a617512 100644 --- a/apps/earn/components/AddPage/AddSectionConfirmModalConcentrated.tsx +++ b/apps/earn/components/AddPage/AddSectionConfirmModalConcentrated.tsx @@ -11,7 +11,7 @@ import { useTransactionDeadline } from '@sushiswap/wagmi/future/hooks' import { ConfirmationDialog as UIConfirmationDialog, ConfirmationDialogState, -} from '@sushiswap/ui/dialog/ConfirmationDialog' +} from '@sushiswap/ui/future/components/dialog/ConfirmationDialog' import { useConcentratedDerivedMintInfo } from '../ConcentratedLiquidityProvider' import { ChainId } from '@sushiswap/chain' import { Type } from '@sushiswap/currency' diff --git a/apps/earn/components/AddPage/AddSectionReviewModal.tsx b/apps/earn/components/AddPage/AddSectionReviewModal.tsx index 1d6e92f6ea..45bbe9fca0 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModal.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModal.tsx @@ -1,11 +1,12 @@ import { PlusIcon } from '@heroicons/react/solid' import { ChainId } from '@sushiswap/chain' import { Amount, Price, Type } from '@sushiswap/currency' -import { Currency, Dialog, Typography } from '@sushiswap/ui' +import { Currency, Typography } from '@sushiswap/ui' import { FC, ReactNode, useMemo } from 'react' import { useTokenAmountDollarValues } from '../../lib/hooks' import { Rate } from '../Rate' +import { Dialog } from '@sushiswap/ui/future/components/dialog' interface AddSectionReviewModal { chainId: ChainId @@ -37,7 +38,7 @@ export const AddSectionReviewModal: FC = ({ return ( - +
diff --git a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx index 182cd104ca..624538358b 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx @@ -1,5 +1,4 @@ import { Amount, tryParseAmount, Type } from '@sushiswap/currency' -import { Collapsible } from '@sushiswap/ui' import { Button } from '@sushiswap/ui/future/components/button' import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react' import { Dialog } from '@sushiswap/ui/future/components/dialog' @@ -13,6 +12,7 @@ import { useConcentratedDerivedMintInfo } from '../ConcentratedLiquidityProvider import { FeeAmount, Position } from '@sushiswap/v3-sdk' import { useTokenAmountDollarValues } from '../../lib/hooks' import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Collapsible } from '@sushiswap/ui/future/components/animation/Collapsible' interface AddSectionReviewModalConcentratedProps extends Pick< diff --git a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx index 682da5bd48..74d3e53fc9 100644 --- a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx @@ -1,6 +1,6 @@ import { MinusIcon, PlusIcon, SwitchHorizontalIcon } from '@heroicons/react/solid' import { tryParseAmount, Type } from '@sushiswap/currency' -import { classNames, Collapsible } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react' import { Bound } from '../../lib/constants' @@ -21,6 +21,7 @@ import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { useConcentratedLiquidityPositionsFromTokenId } from '@sushiswap/wagmi/future/hooks' import { FeeAmount, V3ChainId } from '@sushiswap/v3-sdk' +import { Collapsible } from '@sushiswap/ui/future/components/animation/Collapsible' interface SelectPricesWidget { chainId: V3ChainId diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBar.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBar.tsx index 706e7b048c..2b163d5881 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBar.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBar.tsx @@ -1,10 +1,11 @@ import { Pool } from '@sushiswap/client' import { useBreakpoint } from '@sushiswap/hooks' -import { AppearOnMount, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC, Fragment, useState } from 'react' import { PoolActionBarPositionDialog } from './PoolActionBarPositionDialog' import { PoolActionBarPositionRewards } from './PoolActionBarPositionRewards' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' interface PoolActionBarProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx index 2983491e04..e0f92e045b 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx @@ -1,13 +1,14 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' import { FundSource } from '@sushiswap/hooks' -import { Currency, Dialog, Typography } from '@sushiswap/ui' +import { Currency, Typography } from '@sushiswap/ui' import { FC, useCallback } from 'react' import { useTokensFromPool } from '../../../lib/hooks' import { usePoolPosition } from '../../PoolPositionProvider' import { usePoolPositionStaked } from '../../PoolPositionStakedProvider' import { PoolButtons } from '../PoolButtons' +import { Dialog } from '@sushiswap/ui/future/components/dialog' interface PoolActionBarPositionDialogProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx index a57cf6052a..f607bc3f14 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx @@ -1,11 +1,12 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency, Dialog, Typography } from '@sushiswap/ui' +import { Currency, Typography } from '@sushiswap/ui' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { FC, useCallback } from 'react' import { usePoolPositionRewards } from '../../PoolPositionRewardsProvider' import Button from '@sushiswap/ui/future/components/button/Button' +import { Dialog } from '@sushiswap/ui/future/components/dialog' interface PoolActionBarPositionRewardsProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx b/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx index f7152c7535..c1b027043e 100644 --- a/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx +++ b/apps/earn/components/PoolSection/PoolChart/PoolChartGraph.tsx @@ -1,5 +1,5 @@ import { formatPercent, formatUSD } from '@sushiswap/format' -import { AppearOnMount, Typography, classNames } from '@sushiswap/ui' +import { Typography, classNames } from '@sushiswap/ui' import { format } from 'date-fns' import { EChartsOption } from 'echarts-for-react/lib/types' import { FC, useCallback, useMemo } from 'react' @@ -14,6 +14,7 @@ import { ChainId } from '@sushiswap/chain' import { SkeletonBox } from '@sushiswap/ui/future/components/skeleton' import resolveConfig from 'tailwindcss/resolveConfig' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' interface PoolChartProps { chart: PoolChartType.Volume | PoolChartType.Fees | PoolChartType.TVL | PoolChartType.APR diff --git a/apps/earn/components/PoolSection/PoolHeader.tsx b/apps/earn/components/PoolSection/PoolHeader.tsx index ae255000b0..26aaf527e9 100644 --- a/apps/earn/components/PoolSection/PoolHeader.tsx +++ b/apps/earn/components/PoolSection/PoolHeader.tsx @@ -2,12 +2,13 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import chains, { ChainId } from '@sushiswap/chain' import { formatPercent, formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { AppearOnMount, Currency, Link, NetworkIcon, Typography } from '@sushiswap/ui' +import { Currency, Link, NetworkIcon, Typography } from '@sushiswap/ui' import { usePrices } from '@sushiswap/react-query' import { FC } from 'react' import { useGraphPool } from '../../lib/hooks' import { FarmRewardsAvailableTooltip } from '../FarmRewardsAvailableTooltip' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' interface PoolHeader { pool: Pool diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx index fda5acc61f..69707fbefe 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx @@ -1,7 +1,7 @@ import { tryParseAmount } from '@sushiswap/currency' import { ChefType, Pool, usePool } from '@sushiswap/client' import { useIsMounted } from '@sushiswap/hooks' -import { AppearOnMount } from '@sushiswap/ui' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' import { getMasterChefContractConfig, useMasterChefWithdraw } from '@sushiswap/wagmi' import { FC, useMemo, useState } from 'react' import { Dots } from '@sushiswap/ui/future/components/Dots' diff --git a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx index 387dae846f..ba61e0a1fb 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx @@ -5,14 +5,7 @@ import { Amount, Native, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { ZERO } from '@sushiswap/math' -import { - AppearOnMount, - classNames, - Currency as UICurrency, - DEFAULT_INPUT_UNSTYLED, - Input, - Typography, -} from '@sushiswap/ui' +import { classNames, Currency as UICurrency, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui/future/components/widget' import React, { FC, Fragment, ReactNode, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' @@ -20,6 +13,7 @@ import { useAccount } from '@sushiswap/wagmi' import { usePoolPosition } from '../PoolPositionProvider' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { Button } from '@sushiswap/ui/future/components/button' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' interface RemoveSectionWidgetProps { isFarm: boolean diff --git a/apps/earn/pages/[id]/add.tsx b/apps/earn/pages/[id]/add.tsx index 230af85f1b..d8ddf1f6e3 100644 --- a/apps/earn/pages/[id]/add.tsx +++ b/apps/earn/pages/[id]/add.tsx @@ -1,6 +1,6 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { formatPercent } from '@sushiswap/format' -import { AppearOnMount, Link, Typography } from '@sushiswap/ui' +import { Link, Typography } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' @@ -21,6 +21,7 @@ import { getPool, getPools, getPoolUrl, Pool, usePool } from '@sushiswap/client' import { ChainId } from '@sushiswap/chain' import { NextSeo } from 'next-seo' import { isTridentPoolProtocol } from '../../lib/functions' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' const Add: FC> = ({ fallback }) => { return ( diff --git a/apps/earn/pages/[id]/index.tsx b/apps/earn/pages/[id]/index.tsx index cfec0313b6..a2c6bba8db 100644 --- a/apps/earn/pages/[id]/index.tsx +++ b/apps/earn/pages/[id]/index.tsx @@ -1,5 +1,4 @@ import { formatPercent } from '@sushiswap/format' -import { AppearOnMount } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' import { getPool, usePool, getPools, getPoolUrl, Protocol } from '@sushiswap/client' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' @@ -27,6 +26,7 @@ import { import { ChainId } from '@sushiswap/chain' import { NextSeo } from 'next-seo' import { PoolPageV3 } from '../../components/PoolPageV3' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' const Pool: FC> = ({ fallback }) => { return ( diff --git a/apps/earn/pages/[id]/remove.tsx b/apps/earn/pages/[id]/remove.tsx index fcfddb3413..fda9483d12 100644 --- a/apps/earn/pages/[id]/remove.tsx +++ b/apps/earn/pages/[id]/remove.tsx @@ -1,6 +1,6 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { formatPercent } from '@sushiswap/format' -import { AppearOnMount, Link, Typography } from '@sushiswap/ui' +import { Link, Typography } from '@sushiswap/ui' import { SUPPORTED_CHAIN_IDS } from '../../config' import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' @@ -22,6 +22,7 @@ import { ChainId } from '@sushiswap/chain' import { useSWRConfig } from 'swr/_internal' import { NextSeo } from 'next-seo' import { isTridentPoolProtocol } from '../../lib/functions' +import { AppearOnMount } from '@sushiswap/ui/future/components/animation' const Remove: FC> = ({ fallback }) => { return ( diff --git a/apps/furo/components/CancelModal.tsx b/apps/furo/components/CancelModal.tsx index 79d4b91e81..6899eba671 100644 --- a/apps/furo/components/CancelModal.tsx +++ b/apps/furo/components/CancelModal.tsx @@ -1,7 +1,7 @@ import { TransactionRequest } from '@ethersproject/providers' import { TrashIcon } from '@heroicons/react/outline' import { Chain, ChainId } from '@sushiswap/chain' -import { Dots, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { useSendTransaction } from '@sushiswap/wagmi/hooks/useSendTransaction' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' import { useAccount, useContract } from '@sushiswap/wagmi' @@ -12,6 +12,7 @@ import { createToast } from '@sushiswap/ui/future/components/toast' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { Dialog } from '@sushiswap/ui/future/components/dialog/Dialog' import { shortenAddress } from '@sushiswap/format' +import { Dots } from '@sushiswap/ui/future/components/Dots' interface CancelModalProps { title: string diff --git a/apps/furo/components/Table/StatusCell.tsx b/apps/furo/components/Table/StatusCell.tsx index 4be7feb026..f3b412d712 100644 --- a/apps/furo/components/Table/StatusCell.tsx +++ b/apps/furo/components/Table/StatusCell.tsx @@ -1,27 +1,13 @@ -import { Chip } from '@sushiswap/ui' import React, { FC } from 'react' import { FuroStatus } from '../../lib' import { CellProps } from './types' +import { Chip } from '@sushiswap/ui/future/components/chip' export const StatusCell: FC = ({ row }) => { return ( - + + {row.status === FuroStatus.EXTENDED ? 'Active' : row.status.toLowerCase()} + ) } diff --git a/apps/furo/components/TransferModal.tsx b/apps/furo/components/TransferModal.tsx index 6213d466af..8287671585 100644 --- a/apps/furo/components/TransferModal.tsx +++ b/apps/furo/components/TransferModal.tsx @@ -3,7 +3,7 @@ import { PaperAirplaneIcon } from '@heroicons/react/outline' import { ChainId } from '@sushiswap/chain' import { shortenAddress } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui' +import { Dots } from '@sushiswap/ui/future/components/Dots' import { _useSendTransaction as useSendTransaction, useAccount, useContract, useEnsAddress } from '@sushiswap/wagmi' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' import { SendTransactionResult } from '@sushiswap/wagmi/actions' @@ -36,7 +36,7 @@ export const TransferModal: FC = ({ const [recipient, setRecipient] = useState('') const type = stream instanceof Vesting ? 'Vest' : 'Stream' - + const contract = useContract({ address: contractAddress, abi: abi, @@ -118,11 +118,17 @@ export const TransferModal: FC = ({ {' '} to the entered recipient.

- Please note that this will transfer ownership of the entire {type.toLowerCase()} to the recipient. You will not be able - to withdraw from this {type.toLowerCase()} after transferring + Please note that this will transfer ownership of the entire {type.toLowerCase()} to the recipient. You + will not be able to withdraw from this {type.toLowerCase()} after transferring

- setRecipient(`${val}`)} id="ens-input" testdata-id="transfer-recipient-input"/> + setRecipient(`${val}`)} + id="ens-input" + testdata-id="transfer-recipient-input" + /> diff --git a/packages/ui/src/animation/AppearOnMount/AppearOnMount.tsx b/packages/ui/src/animation/AppearOnMount/AppearOnMount.tsx deleted file mode 100644 index af6232b22f..0000000000 --- a/packages/ui/src/animation/AppearOnMount/AppearOnMount.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsMounted } from '@sushiswap/hooks' -import { ElementType, FC, Fragment, ReactNode } from 'react' - -interface AppearOnMount { - as?: ElementType - show?: boolean - children: ((mounted: boolean) => ReactNode) | ReactNode - enabled?: boolean - className?: string -} - -/** - * @deprecated - */ -export const AppearOnMount: FC = ({ as = 'div', show, children, enabled = true, className }) => { - const isMounted = useIsMounted() - - if (!enabled) { - return <>{typeof children === 'function' ? children(isMounted) : children} - } - - if (isMounted) - return ( - - {typeof children === 'function' ? children(isMounted) : children} - - ) - - return <> -} diff --git a/packages/ui/src/animation/AppearOnMount/index.ts b/packages/ui/src/animation/AppearOnMount/index.ts deleted file mode 100644 index f0d74d6c0e..0000000000 --- a/packages/ui/src/animation/AppearOnMount/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './AppearOnMount' diff --git a/packages/ui/src/animation/Collapsible/Collapsible.tsx b/packages/ui/src/animation/Collapsible/Collapsible.tsx deleted file mode 100644 index 94cdaad07a..0000000000 --- a/packages/ui/src/animation/Collapsible/Collapsible.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { FC, ReactNode } from 'react' -import { animated, useSpring } from 'react-spring' -import useResizeObserver from 'use-resize-observer' - -interface Collapsible { - open: boolean - children: ReactNode - className?: string -} - -/** - * @deprecated - */ -export const Collapsible: FC = ({ className, open, children }) => { - const { ref, height } = useResizeObserver() - - const props = useSpring({ - height: open ? height ?? 0 : 0, - config: { - mass: 1.2, - tension: 300, - friction: 20, - clamp: true, - velocity: 0.01, - }, - }) - - return ( - -
- {children} -
- - ) -} diff --git a/packages/ui/src/animation/Collapsible/index.ts b/packages/ui/src/animation/Collapsible/index.ts deleted file mode 100644 index c9bf93fcc7..0000000000 --- a/packages/ui/src/animation/Collapsible/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Collapsible' diff --git a/packages/ui/src/animation/SlideIn/FromBottom.tsx b/packages/ui/src/animation/SlideIn/FromBottom.tsx deleted file mode 100644 index 025d340e80..0000000000 --- a/packages/ui/src/animation/SlideIn/FromBottom.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsSmScreen } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { FC, Fragment, ReactElement } from 'react' -import ReactDOM from 'react-dom' - -import { Dialog } from '../../dialog' -import { useSlideInContext } from './SlideIn' -import { useEscapeClose } from './useEscapeClose' - -export type FromBottom = { - show: boolean - onClose(): void - afterEnter?(): void - beforeEnter?(): void - beforeLeave?(): void - afterLeave?(): void - children: ReactElement - className?: string -} - -export const FromBottom: FC = ({ - show, - beforeLeave, - beforeEnter, - afterEnter, - afterLeave, - onClose, - children, - className, -}) => { - const isSmallScreen = useIsSmScreen() - useEscapeClose(onClose) - - const portal = useSlideInContext() - if (!portal) return <> - - if (isSmallScreen) { - return ( - -
{children}
- - ) - } - - return ReactDOM.createPortal( - -
- - - , - portal - ) -} diff --git a/packages/ui/src/animation/SlideIn/FromLeft.tsx b/packages/ui/src/animation/SlideIn/FromLeft.tsx deleted file mode 100644 index 009c98836c..0000000000 --- a/packages/ui/src/animation/SlideIn/FromLeft.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsSmScreen } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { FC, Fragment, ReactElement } from 'react' -import ReactDOM from 'react-dom' - -import { Dialog } from '../../dialog' -import { useSlideInContext } from './SlideIn' -import { useEscapeClose } from './useEscapeClose' - -export type FromLeft = { - show: boolean - onClose(): void - afterEnter?(): void - beforeEnter?(): void - beforeLeave?(): void - afterLeave?(): void - children: ReactElement - className?: string -} - -export const FromLeft: FC = ({ - show, - beforeLeave, - beforeEnter, - afterEnter, - afterLeave, - onClose, - children, - className, -}) => { - const isSmallScreen = useIsSmScreen() - useEscapeClose(onClose) - - const portal = useSlideInContext() - if (!portal) return <> - - if (isSmallScreen) { - return ( - -
{children}
- - ) - } - - return ReactDOM.createPortal( - -
- - - , - portal - ) -} diff --git a/packages/ui/src/animation/SlideIn/FromRight.tsx b/packages/ui/src/animation/SlideIn/FromRight.tsx deleted file mode 100644 index f32e771d4b..0000000000 --- a/packages/ui/src/animation/SlideIn/FromRight.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsSmScreen } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { FC, Fragment, ReactElement } from 'react' -import ReactDOM from 'react-dom' - -import { Dialog } from '../../dialog' -import { useSlideInContext } from './SlideIn' -import { useEscapeClose } from './useEscapeClose' - -export type FromRight = { - show: boolean - onClose(): void - afterEnter?(): void - beforeEnter?(): void - beforeLeave?(): void - afterLeave?(): void - children: ReactElement - className?: string -} - -export const FromRight: FC = ({ - show, - beforeLeave, - beforeEnter, - afterEnter, - afterLeave, - onClose, - children, - className, -}) => { - const isSmallScreen = useIsSmScreen() - useEscapeClose(onClose) - - const portal = useSlideInContext() - if (!portal) return <> - - if (isSmallScreen) { - return ( - -
{children}
- - ) - } - - return ReactDOM.createPortal( - -
- - - , - portal - ) -} diff --git a/packages/ui/src/animation/SlideIn/FromTop.tsx b/packages/ui/src/animation/SlideIn/FromTop.tsx deleted file mode 100644 index 5b135f12ae..0000000000 --- a/packages/ui/src/animation/SlideIn/FromTop.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Transition } from '@headlessui/react' -import { useIsSmScreen } from '@sushiswap/hooks' -import classNames from 'classnames' -import React, { FC, Fragment, ReactElement } from 'react' -import ReactDOM from 'react-dom' - -import { Dialog } from '../../dialog' -import { useSlideInContext } from './SlideIn' -import { useEscapeClose } from './useEscapeClose' - -export type FromTop = { - show: boolean - onClose(): void - afterEnter?(): void - beforeEnter?(): void - beforeLeave?(): void - afterLeave?(): void - children: ReactElement - className?: string -} - -export const FromTop: FC = ({ - show, - beforeLeave, - beforeEnter, - afterEnter, - afterLeave, - onClose, - children, - className, -}) => { - const isSmallScreen = useIsSmScreen() - useEscapeClose(onClose) - - const portal = useSlideInContext() - if (!portal) return <> - - if (isSmallScreen) { - return ( - -
{children}
- - ) - } - - return ReactDOM.createPortal( - -
- - - , - portal - ) -} diff --git a/packages/ui/src/animation/SlideIn/SlideIn.tsx b/packages/ui/src/animation/SlideIn/SlideIn.tsx deleted file mode 100644 index a7d58e498e..0000000000 --- a/packages/ui/src/animation/SlideIn/SlideIn.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { createContext, FC, ReactElement, useContext, useEffect, useRef, useState } from 'react' - -import { FromBottom } from './FromBottom' -import { FromLeft } from './FromLeft' -import { FromRight } from './FromRight' -import { FromTop } from './FromTop' - -interface RootProps { - children: ReactElement | Array -} - -const SlideInContext = createContext(undefined) - -export const Root: FC = ({ children }) => { - const ref = useRef(null) - const [render, setRender] = useState(false) - - useEffect(() => { - if (ref.current) setRender(true) - }, []) - - return ( - - {render && children} -
- - ) -} - -export const useSlideInContext = () => { - return useContext(SlideInContext) -} - -/** - * @deprecated - */ -export const SlideIn: FC & { - FromLeft: FC - FromRight: FC - FromBottom: FC - FromTop: FC -} = Object.assign(Root, { - FromLeft: FromLeft, - FromRight: FromRight, - FromBottom: FromBottom, - FromTop: FromTop, -}) diff --git a/packages/ui/src/animation/SlideIn/index.ts b/packages/ui/src/animation/SlideIn/index.ts deleted file mode 100644 index 6c911462fa..0000000000 --- a/packages/ui/src/animation/SlideIn/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './SlideIn' diff --git a/packages/ui/src/animation/SlideIn/useEscapeClose.ts b/packages/ui/src/animation/SlideIn/useEscapeClose.ts deleted file mode 100644 index a4792190fe..0000000000 --- a/packages/ui/src/animation/SlideIn/useEscapeClose.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect } from 'react' - -type UseEscapeClose = (cb: () => void) => void -export const useEscapeClose: UseEscapeClose = (cb) => { - useEffect(() => { - function handleEscapeKey(event: KeyboardEvent) { - if (event.code === 'Escape') { - cb() - } - } - - document.addEventListener('keydown', handleEscapeKey) - return () => document.removeEventListener('keydown', handleEscapeKey) - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) -} diff --git a/packages/ui/src/animation/index.ts b/packages/ui/src/animation/index.ts deleted file mode 100644 index dff63947fe..0000000000 --- a/packages/ui/src/animation/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './AppearOnMount' -export * from './Collapsible' -export * from './SlideIn' diff --git a/packages/ui/src/dialog/Dialog.tsx b/packages/ui/src/dialog/Dialog.tsx deleted file mode 100644 index cc03fefe0e..0000000000 --- a/packages/ui/src/dialog/Dialog.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Dialog as HeadlessDialog, Transition } from '@headlessui/react' -import { useBreakpoint } from '@sushiswap/hooks' -import React, { FC, Fragment, FunctionComponent, useEffect } from 'react' - -import { ExtractProps } from '../types' -import DialogActions, { DialogActionProps } from './DialogActions' -import DialogContent, { DialogContentProps } from './DialogContent' -import DialogDescription, { DialogDescriptionProps } from './DialogDescription' -import DialogHeader, { DialogHeaderProps } from './DialogHeader' - -export type DialogRootProps = ExtractProps & { - afterLeave?(): void - children?: React.ReactNode -} - -const DialogRoot: FC = ({ open, onClose, children, afterLeave, ...rest }) => { - const { unmount } = rest - const { isMd } = useBreakpoint('md') - - // iOS body lock fix - // This gets the current scroll position and sets it as negative top margin before setting position fixed on body - // This is necessary because adding position fixed to body scrolls the page to the top - useEffect(() => { - if (!isMd) { - if (open) { - document.body.style.top = `-${window.scrollY}px` - document.body.style.position = 'fixed' - document.body.style.left = '0' - document.body.style.right = '0' - } else { - const scrollY = document.body.style.top - document.body.style.position = '' - document.body.style.top = '' - document.body.style.left = '' - document.body.style.right = '' - window.scrollTo(0, parseInt(scrollY || '0') * -1) - } - } - }, [isMd, open]) - - return ( - - - -
- - -
-
- - {children} - -
-
- - - ) -} - -/** - * @deprecated - */ -export const Dialog: FunctionComponent & { - Description: FunctionComponent - Header: FunctionComponent - Actions: FunctionComponent - Content: FunctionComponent -} = Object.assign(DialogRoot, { - Content: DialogContent, - Header: DialogHeader, - Description: DialogDescription, - Actions: DialogActions, -}) diff --git a/packages/ui/src/dialog/DialogActions.tsx b/packages/ui/src/dialog/DialogActions.tsx deleted file mode 100644 index 2c3eacccbd..0000000000 --- a/packages/ui/src/dialog/DialogActions.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import classNames from 'classnames' -import React, { FC, ReactNode } from 'react' - -export interface DialogActionProps { - className?: string - children: ReactNode | ReactNode[] -} - -const DialogActions: FC = ({ children, className }) => { - return ( -
- {children} -
- ) -} - -export default DialogActions diff --git a/packages/ui/src/dialog/DialogContent.tsx b/packages/ui/src/dialog/DialogContent.tsx deleted file mode 100644 index a95d51ffbd..0000000000 --- a/packages/ui/src/dialog/DialogContent.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import classNames from 'classnames' -import React, { FC, forwardRef } from 'react' - -export interface DialogContentProps { - className?: string - children?: React.ReactNode -} - -const DialogContent: FC = forwardRef( - ({ className, children }, ref) => { - return ( -
- {children} -
- ) - } -) - -export default DialogContent diff --git a/packages/ui/src/dialog/DialogDescription.tsx b/packages/ui/src/dialog/DialogDescription.tsx deleted file mode 100644 index bdb8adf417..0000000000 --- a/packages/ui/src/dialog/DialogDescription.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Dialog as HeadlessDialog } from '@headlessui/react' -import classNames from 'classnames' -import React, { FC } from 'react' - -import { ExtractProps } from '../types' - -export type DialogDescriptionProps = ExtractProps - -const DialogDescription: FC = ({ className, ...props }) => { - return ( - - ) -} - -export default DialogDescription diff --git a/packages/ui/src/dialog/DialogHeader.tsx b/packages/ui/src/dialog/DialogHeader.tsx deleted file mode 100644 index ef2acf6a95..0000000000 --- a/packages/ui/src/dialog/DialogHeader.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/24/outline' -import classNames from 'classnames' -import React, { FC, ReactNode } from 'react' - -import { Typography } from '..' -import { IconButton } from '../iconbutton' - -export interface DialogHeaderProps { - title: string | ReactNode - onClose?(): void - onBack?(): void - className?: string - border?: boolean - children?: ReactNode | Array -} - -const DialogHeader: FC = ({ title, onBack, onClose, border = true, className, children }) => { - return ( -
- {onBack ? ( - - - - ) : ( -
- )} - - - {title} - - -
- {children ? ( - children - ) : onClose ? ( - - - - ) : ( - - )} -
-
- ) -} - -export default DialogHeader diff --git a/packages/ui/src/dialog/index.ts b/packages/ui/src/dialog/index.ts deleted file mode 100644 index 8390808a2a..0000000000 --- a/packages/ui/src/dialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Dialog' diff --git a/packages/ui/src/dialog/ConfirmationDialog.tsx b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx similarity index 86% rename from packages/ui/src/dialog/ConfirmationDialog.tsx rename to packages/ui/src/future/components/dialog/ConfirmationDialog.tsx index b0236e6a64..6328c4bc4c 100644 --- a/packages/ui/src/dialog/ConfirmationDialog.tsx +++ b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx @@ -1,13 +1,13 @@ -import { Dispatch, FC, ReactNode, SetStateAction } from 'react' -import { Dialog } from '../future/components/dialog' -import { BarLoader } from '../future/components/BarLoader' -import { Loader } from '../future/components/Loader' -import { CheckMarkIcon } from '../future/components/icons/CheckmarkIcon' -import { FailedMarkIcon } from '../future/components/icons/FailedMarkIcon' import { Chain, ChainId } from '@sushiswap/chain' -import { Dots } from '../future/components/Dots' -import { Button } from '../future/components/button' -import Link from 'next/link' +import { Dialog } from './Dialog' +import { BarLoader } from '../BarLoader' +import * as React from 'react' +import { Loader } from '../Loader' +import { Dots } from '../Dots' +import { Button } from '../button' +import { CheckMarkIcon } from '../icons/CheckmarkIcon' +import { FailedMarkIcon } from '../icons/FailedMarkIcon' +import { FC } from 'react' export enum ConfirmationDialogState { Undefined, @@ -25,7 +25,7 @@ interface ConfirmationDialog { setOpen(open: boolean): void onComplete(): void isWritePending: boolean - successMessage: ReactNode + successMessage: React.ReactNode buttonSuccessMessage: string buttonSuccessLink?: string testId?: string @@ -42,7 +42,7 @@ export const ConfirmationDialog: FC = ({ successMessage, buttonSuccessMessage, buttonSuccessLink, - testId + testId, }) => { return ( setOpen(false)}> diff --git a/packages/ui/src/iconbutton/IconButton.tsx b/packages/ui/src/iconbutton/IconButton.tsx deleted file mode 100644 index c37af7bfa1..0000000000 --- a/packages/ui/src/iconbutton/IconButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { ReactNode } from 'react' - -import { classNames, PolymorphicComponentPropsWithRef, PolymorphicRef } from '../index' - -interface Props { - children: ReactNode - className?: string - description?: string -} - -export type IconButtonProps = PolymorphicComponentPropsWithRef -export type IconButtonComponent = ( - props: IconButtonProps -) => React.ReactElement | null - -/** - * @deprecated - */ -export const IconButton: IconButtonComponent = React.forwardRef( - ( - { as, children, className, description, ...rest }: IconButtonProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'button' - return ( - - - {children} - {description && ( - - {description} - - )} - - ) - } -) diff --git a/packages/ui/src/iconbutton/index.ts b/packages/ui/src/iconbutton/index.ts deleted file mode 100644 index a37a7fc4ae..0000000000 --- a/packages/ui/src/iconbutton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './IconButton' diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index a902f53ef0..3eef62f1fe 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,15 +1,11 @@ import './globals.css' -export * from './animation' export * from './currency' -export * from './dialog' export * from './dropzone' -export * from './iconbutton' export * from './icons' export * from './input' export * from './link' export * from './loader' -export * from './overlay' export * from './progressbar' export * from './theme' export * from './types' diff --git a/packages/ui/src/overlay/Actions.tsx b/packages/ui/src/overlay/Actions.tsx deleted file mode 100644 index 413367a09b..0000000000 --- a/packages/ui/src/overlay/Actions.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import classNames from 'classnames' -import React, { FC, ReactNode } from 'react' - -export interface OverlayActionProps { - className?: string - children: ReactNode | ReactNode[] -} - -export const Actions: FC = ({ children, className }) => { - return ( -
- {children} -
- ) -} diff --git a/packages/ui/src/overlay/Content.tsx b/packages/ui/src/overlay/Content.tsx deleted file mode 100644 index 6d589f4138..0000000000 --- a/packages/ui/src/overlay/Content.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef, ReactNode } from 'react' - -import { classNames } from '../index' - -export interface Content { - className?: string - children: ReactNode | ReactNode[] -} - -export const Content = forwardRef(({ className, children }, ref) => { - return ( -
- {children} -
- ) -}) diff --git a/packages/ui/src/overlay/Header.tsx b/packages/ui/src/overlay/Header.tsx deleted file mode 100644 index 87cd77c011..0000000000 --- a/packages/ui/src/overlay/Header.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronUpIcon, - XMarkIcon, -} from '@heroicons/react/24/outline' -import { FC } from 'react' - -import { classNames, IconButton } from '../index' -import { Typography } from '../typography' - -export interface Header { - title: string - onBack?(): void - onClose?(): void - border?: boolean - arrowDirection?: 'top' | 'bottom' | 'left' | 'right' - className?: string -} - -export const Header: FC
= ({ className, title, border = true, onBack, onClose, arrowDirection = 'left' }) => { - return ( -
- {onBack ? ( - - {arrowDirection === 'left' && ( - - )} - {arrowDirection === 'bottom' && ( - - )} - {arrowDirection === 'top' && ( - - )} - {arrowDirection === 'right' && ( - - )} - - ) : ( -
- )} - - {title} - - {onClose ? ( -
- - - -
- ) : ( -
- )} -
- ) -} diff --git a/packages/ui/src/overlay/index.ts b/packages/ui/src/overlay/index.ts deleted file mode 100644 index dd6fcae3d1..0000000000 --- a/packages/ui/src/overlay/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Actions } from './Actions' -import { Content } from './Content' -import { Header } from './Header' - -/** - * @deprecated - */ -export const Overlay = { Content, Header, Actions } From 67269311bc93fd6c1ba4407e4422b9fe34b0ad83 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 12:52:08 +0100 Subject: [PATCH 13/59] fix(packages/ui): remove Currency and fix errors --- .../_root/app/(landing)/components/Search.tsx | 3 +- .../_root/app/claims/components/ClaimItem.tsx | 3 +- .../ConfirmationDialogContent.tsx | 3 +- .../components/PoolQuickHoverTooltip.tsx | 2 +- .../BentoBoxTokens/Cells/TokenNameCell.tsx | 3 +- .../FuroTokens/Cells/TokenNameCell.tsx | 3 +- .../Tokens/Cells/TokenNameCell.tsx | 3 +- .../components/TokenSection/TokenHeader.tsx | 2 +- .../TokenSection/TokenInformation.tsx | 3 +- .../components/TokenSection/TokenPairs.tsx | 3 +- .../AddPage/AddSectionReviewModal.tsx | 3 +- .../AddSectionMyPosition.tsx | 3 +- .../AddSectionMyPositionStaked.tsx | 3 +- .../AddSectionMyPositionUnstaked.tsx | 3 +- .../AddSection/AddSectionReviewModal.tsx | 3 +- .../AddSection/AddSectionStakeWidget.tsx | 15 +- .../NewPositionSection/SelectTokensWidget.tsx | 3 +- .../PoolActionBarPositionDialog.tsx | 3 +- .../PoolActionBarPositionRewards.tsx | 3 +- .../PoolSection/PoolComposition.tsx | 2 +- .../components/PoolSection/PoolHeader.tsx | 3 +- .../components/PoolSection/PoolMyRewards.tsx | 3 +- .../PoolPosition/PoolPositionDesktop.tsx | 3 +- .../PoolPositionStakedDesktop.tsx | 3 +- .../components/PoolSection/PoolRewards.tsx | 2 +- .../PoolsSection/Tables/PoolRewardsCell.tsx | 2 +- .../PoolsTable/PoolQuickHoverTooltip.tsx | 3 +- .../PositionQuickHoverTooltip.tsx | 119 ++++++------ .../RemoveSectionUnstakeWidget.tsx | 13 +- .../RemoveSection/RemoveSectionWidget.tsx | 3 +- apps/furo/components/Table/NetworkCell.tsx | 2 +- .../CreateMultipleForm/ReviewSection.tsx | 2 +- .../CreateMultipleForm/ReviewSection.tsx | 2 +- packages/ui/src/currency/Icon.tsx | 174 ------------------ packages/ui/src/currency/IconList.tsx | 32 ---- packages/ui/src/currency/List.tsx | 49 ----- packages/ui/src/currency/index.ts | 20 -- packages/ui/src/index.ts | 1 - 38 files changed, 133 insertions(+), 372 deletions(-) delete mode 100644 packages/ui/src/currency/Icon.tsx delete mode 100644 packages/ui/src/currency/IconList.tsx delete mode 100644 packages/ui/src/currency/List.tsx delete mode 100644 packages/ui/src/currency/index.ts diff --git a/apps/_root/app/(landing)/components/Search.tsx b/apps/_root/app/(landing)/components/Search.tsx index c1c0d04302..b178de46de 100644 --- a/apps/_root/app/(landing)/components/Search.tsx +++ b/apps/_root/app/(landing)/components/Search.tsx @@ -2,12 +2,13 @@ import { ChevronDownIcon, SearchIcon, StarIcon } from '@heroicons/react-v1/solid import chains, { ChainId, chainShortName } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { useDebounce, useOnClickOutside } from '@sushiswap/hooks' -import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, NetworkIcon, Typography } from '@sushiswap/ui' +import { classNames, DEFAULT_INPUT_UNSTYLED, NetworkIcon, Typography } from '@sushiswap/ui' import type { TokenList } from '@uniswap/token-lists' import { isAddress } from 'ethers/lib/utils' import { FC, useEffect, useMemo, useRef, useState } from 'react' import { useQuery, useToken } from '@sushiswap/wagmi' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { Currency } from '@sushiswap/ui/future/components/currency' import { SUPPORTED_CHAIN_IDS } from '../../../config' diff --git a/apps/_root/app/claims/components/ClaimItem.tsx b/apps/_root/app/claims/components/ClaimItem.tsx index b996dc0339..aefffe4e1d 100644 --- a/apps/_root/app/claims/components/ClaimItem.tsx +++ b/apps/_root/app/claims/components/ClaimItem.tsx @@ -1,6 +1,6 @@ 'use client' -import { classNames, Currency, NetworkIcon } from '@sushiswap/ui' +import { classNames, NetworkIcon } from '@sushiswap/ui' import React, { FC, useMemo } from 'react' import { RP2MerkleTreeClaimSchema } from '@sushiswap/wagmi/future/hooks/exploits/constants' import { z } from 'zod' @@ -23,6 +23,7 @@ import { Address } from 'wagmi' import { routeProcessor2Address } from '@sushiswap/route-processor/exports/exports' import { ZERO } from '@sushiswap/math' import { Badge } from '@sushiswap/ui/future/components/Badge' +import { Currency } from '@sushiswap/ui/future/components/currency' interface ClaimItem { account: Address diff --git a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx index 103530e5f2..bbc9b67836 100644 --- a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx +++ b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx @@ -1,13 +1,14 @@ import { FC } from 'react' import { Chain } from '@sushiswap/chain' import { Dots } from '@sushiswap/ui/future/components/Dots' -import { classNames, Currency, NetworkIcon } from '@sushiswap/ui' +import { classNames, NetworkIcon } from '@sushiswap/ui' import { useSwapState } from '../trade/TradeProvider' import { isStargateBridgeToken, STARGATE_BRIDGE_TOKENS, STARGATE_TOKEN } from '@sushiswap/stargate' import { useTrade } from '../../../lib/swap/useTrade' import { StepState } from './StepStates' import { shortenAddress } from '@sushiswap/format' import { ArrowLongRightIcon } from '@heroicons/react/20/solid' +import { Currency } from '@sushiswap/ui/future/components/currency' interface ConfirmationDialogContent { txHash?: string diff --git a/apps/analytics/components/PoolQuickHoverTooltip.tsx b/apps/analytics/components/PoolQuickHoverTooltip.tsx index 08f35e688d..1c769d6435 100644 --- a/apps/analytics/components/PoolQuickHoverTooltip.tsx +++ b/apps/analytics/components/PoolQuickHoverTooltip.tsx @@ -1,6 +1,6 @@ import { Pool } from '@sushiswap/client' import { formatNumber, formatPercent } from '@sushiswap/format' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import { FC } from 'react' import { incentiveRewardToToken } from '../lib/functions' diff --git a/apps/analytics/components/TableSection/BentoBoxTokens/Cells/TokenNameCell.tsx b/apps/analytics/components/TableSection/BentoBoxTokens/Cells/TokenNameCell.tsx index ed1c75b8eb..1e893faf6e 100644 --- a/apps/analytics/components/TableSection/BentoBoxTokens/Cells/TokenNameCell.tsx +++ b/apps/analytics/components/TableSection/BentoBoxTokens/Cells/TokenNameCell.tsx @@ -1,5 +1,6 @@ -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { ICON_SIZE } from '../constants' import { Token } from '@sushiswap/currency' diff --git a/apps/analytics/components/TableSection/FuroTokens/Cells/TokenNameCell.tsx b/apps/analytics/components/TableSection/FuroTokens/Cells/TokenNameCell.tsx index ed1c75b8eb..c5e9ed31e5 100644 --- a/apps/analytics/components/TableSection/FuroTokens/Cells/TokenNameCell.tsx +++ b/apps/analytics/components/TableSection/FuroTokens/Cells/TokenNameCell.tsx @@ -1,8 +1,9 @@ -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' import { ICON_SIZE } from '../constants' import { Token } from '@sushiswap/currency' +import { Currency } from '@sushiswap/ui/future/components/currency' export const TokenNameCell: FC<{ token: Token }> = ({ token }) => { return ( diff --git a/apps/analytics/components/TableSection/Tokens/Cells/TokenNameCell.tsx b/apps/analytics/components/TableSection/Tokens/Cells/TokenNameCell.tsx index 5cd829fed0..0a11ff3f73 100644 --- a/apps/analytics/components/TableSection/Tokens/Cells/TokenNameCell.tsx +++ b/apps/analytics/components/TableSection/Tokens/Cells/TokenNameCell.tsx @@ -1,10 +1,11 @@ -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' import { ICON_SIZE } from '../constants' import { Token } from '@sushiswap/graph-client' import { Row } from 'components/TableSection/Common' import { useTokenFromToken } from 'lib/hooks' +import { Currency } from '@sushiswap/ui/future/components/currency' export const TokenNameCell: FC> = ({ row }) => { const token = useTokenFromToken(row) diff --git a/apps/analytics/components/TokenSection/TokenHeader.tsx b/apps/analytics/components/TokenSection/TokenHeader.tsx index 5789c3813e..041e3b90ca 100644 --- a/apps/analytics/components/TokenSection/TokenHeader.tsx +++ b/apps/analytics/components/TokenSection/TokenHeader.tsx @@ -1,7 +1,7 @@ import { getAddress } from '@ethersproject/address' import { formatUSD } from '@sushiswap/format' import { Bundle, Token as GraphToken } from '@sushiswap/graph-client' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useRouter } from 'next/router' import { FC } from 'react' import useSWR from 'swr' diff --git a/apps/analytics/components/TokenSection/TokenInformation.tsx b/apps/analytics/components/TokenSection/TokenInformation.tsx index 111a711aa6..932a4f07ae 100644 --- a/apps/analytics/components/TokenSection/TokenInformation.tsx +++ b/apps/analytics/components/TokenSection/TokenInformation.tsx @@ -2,9 +2,10 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain } from '@sushiswap/chain' import { shortenAddress } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' -import { Currency, Link, Typography } from '@sushiswap/ui' +import { Link, Typography } from '@sushiswap/ui' import { FC } from 'react' import { Table } from '@sushiswap/ui/future/components/table' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokenFromToken } from '../../lib/hooks' import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' diff --git a/apps/analytics/components/TokenSection/TokenPairs.tsx b/apps/analytics/components/TokenSection/TokenPairs.tsx index 285574c2f4..bef2e120bd 100644 --- a/apps/analytics/components/TokenSection/TokenPairs.tsx +++ b/apps/analytics/components/TokenSection/TokenPairs.tsx @@ -3,13 +3,14 @@ import { usePools } from '@sushiswap/client' import { Native, Token } from '@sushiswap/currency' import { formatPercent, formatUSD } from '@sushiswap/format' import { Token as GraphToken } from '@sushiswap/graph-client' -import { Currency, Link, Typography } from '@sushiswap/ui' +import { Link, Typography } from '@sushiswap/ui' import React, { FC } from 'react' import { useSWRConfig } from 'swr' import { Table } from '@sushiswap/ui/future/components/table' import { FarmRewardsAvailableTooltip } from '../FarmRewardsAvailableTooltip' import { PoolQuickHoverTooltip } from '../PoolQuickHoverTooltip' import { Popover } from '@sushiswap/ui/future/components/Popover' +import { Currency } from '@sushiswap/ui/future/components/currency' interface TokenPairs { token: GraphToken diff --git a/apps/earn/components/AddPage/AddSectionReviewModal.tsx b/apps/earn/components/AddPage/AddSectionReviewModal.tsx index 45bbe9fca0..67e6bd16d1 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModal.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModal.tsx @@ -1,8 +1,9 @@ import { PlusIcon } from '@heroicons/react/solid' import { ChainId } from '@sushiswap/chain' import { Amount, Price, Type } from '@sushiswap/currency' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC, ReactNode, useMemo } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokenAmountDollarValues } from '../../lib/hooks' import { Rate } from '../Rate' diff --git a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPosition.tsx b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPosition.tsx index 61bd664887..c4757230e9 100644 --- a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPosition.tsx +++ b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPosition.tsx @@ -1,7 +1,8 @@ import { formatPercent } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { classNames, Currency as UICurrency, Typography } from '@sushiswap/ui' +import { classNames, Typography } from '@sushiswap/ui' import React, { FC } from 'react' +import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' import { incentiveRewardToToken } from '../../../lib/functions' import { AddSectionMyPositionStaked } from './AddSectionMyPositionStaked' diff --git a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionStaked.tsx b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionStaked.tsx index 44da54293a..46b71979a7 100644 --- a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionStaked.tsx +++ b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionStaked.tsx @@ -1,6 +1,7 @@ import { formatUSD } from '@sushiswap/format' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import React, { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { usePoolPositionStaked } from '../../PoolPositionStakedProvider' diff --git a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionUnstaked.tsx b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionUnstaked.tsx index 84ac1ddb42..0161e7d43f 100644 --- a/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionUnstaked.tsx +++ b/apps/earn/components/AddSection/AddSectionMyPosition/AddSectionMyPositionUnstaked.tsx @@ -1,6 +1,7 @@ import { formatUSD } from '@sushiswap/format' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import React, { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { usePoolPosition } from '../../PoolPositionProvider' diff --git a/apps/earn/components/AddSection/AddSectionReviewModal.tsx b/apps/earn/components/AddSection/AddSectionReviewModal.tsx index 69d1e9c7ee..c6b558a5f0 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModal.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModal.tsx @@ -1,8 +1,9 @@ import { PlusIcon } from '@heroicons/react/solid' import { Amount, Price, Type } from '@sushiswap/currency' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { Dialog } from '@sushiswap/ui/future/components/dialog' import { FC, ReactNode, useMemo } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokenAmountDollarValues } from '../../lib/hooks' import { Rate } from '../Rate' diff --git a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx index 03b8ebc8ba..bdd1e8b68e 100644 --- a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx @@ -3,10 +3,11 @@ import { ChevronDownIcon } from '@heroicons/react/outline' import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource } from '@sushiswap/hooks' -import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' +import { classNames, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' -import { FC, Fragment, ReactNode, useMemo } from 'react' +import { FC, ReactNode, useMemo } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokenAmountDollarValues, useUnderlyingTokenBalanceFromPool } from '../../lib/hooks' import { usePoolPosition } from '../PoolPositionProvider' @@ -125,10 +126,12 @@ export const AddSectionStakeWidget: FC = ({
- - - - + {reserve0 && reserve1 && ( + + + + + )}
diff --git a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx index 68d9fa6aa5..dbab1c8b08 100644 --- a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx @@ -1,11 +1,12 @@ import { ChevronDownIcon } from '@heroicons/react/solid' -import { classNames, Currency } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React, { FC } from 'react' import { ChainId } from '@sushiswap/chain' import { Type } from '@sushiswap/currency' import { TokenSelector } from '@sushiswap/wagmi/future/components/TokenSelector/TokenSelector' import { Button } from '@sushiswap/ui/future/components/button' import { ContentBlock } from '../AddPage/ContentBlock' +import { Currency } from '@sushiswap/ui/future/components/currency' interface SelectTokensWidget { chainId: ChainId diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx index e0f92e045b..c76e3a16c1 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionDialog.tsx @@ -1,7 +1,7 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' import { FundSource } from '@sushiswap/hooks' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC, useCallback } from 'react' import { useTokensFromPool } from '../../../lib/hooks' @@ -9,6 +9,7 @@ import { usePoolPosition } from '../../PoolPositionProvider' import { usePoolPositionStaked } from '../../PoolPositionStakedProvider' import { PoolButtons } from '../PoolButtons' import { Dialog } from '@sushiswap/ui/future/components/dialog' +import { Currency } from '@sushiswap/ui/future/components/currency' interface PoolActionBarPositionDialogProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx index f607bc3f14..bfb7ef1945 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx @@ -1,12 +1,13 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { FC, useCallback } from 'react' import { usePoolPositionRewards } from '../../PoolPositionRewardsProvider' import Button from '@sushiswap/ui/future/components/button/Button' import { Dialog } from '@sushiswap/ui/future/components/dialog' +import { Currency } from '@sushiswap/ui/future/components/currency' interface PoolActionBarPositionRewardsProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolComposition.tsx b/apps/earn/components/PoolSection/PoolComposition.tsx index 5676ca0fdc..4674fdae79 100644 --- a/apps/earn/components/PoolSection/PoolComposition.tsx +++ b/apps/earn/components/PoolSection/PoolComposition.tsx @@ -1,6 +1,6 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import React, { FC } from 'react' import { List } from '@sushiswap/ui/future/components/list/List' diff --git a/apps/earn/components/PoolSection/PoolHeader.tsx b/apps/earn/components/PoolSection/PoolHeader.tsx index 26aaf527e9..f83a7ab98e 100644 --- a/apps/earn/components/PoolSection/PoolHeader.tsx +++ b/apps/earn/components/PoolSection/PoolHeader.tsx @@ -2,13 +2,14 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import chains, { ChainId } from '@sushiswap/chain' import { formatPercent, formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency, Link, NetworkIcon, Typography } from '@sushiswap/ui' +import { Link, NetworkIcon, Typography } from '@sushiswap/ui' import { usePrices } from '@sushiswap/react-query' import { FC } from 'react' import { useGraphPool } from '../../lib/hooks' import { FarmRewardsAvailableTooltip } from '../FarmRewardsAvailableTooltip' import { AppearOnMount } from '@sushiswap/ui/future/components/animation' +import { Currency } from '@sushiswap/ui/future/components/currency' interface PoolHeader { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolMyRewards.tsx b/apps/earn/components/PoolSection/PoolMyRewards.tsx index 6be5bcc017..b73cd237ab 100644 --- a/apps/earn/components/PoolSection/PoolMyRewards.tsx +++ b/apps/earn/components/PoolSection/PoolMyRewards.tsx @@ -1,11 +1,12 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' import { useBreakpoint } from '@sushiswap/hooks' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { usePoolPositionRewards } from '../PoolPositionRewardsProvider' import { Button } from '@sushiswap/ui/future/components/button' +import { Currency } from '@sushiswap/ui/future/components/currency' interface PoolMyRewardsProps { pool: Pool diff --git a/apps/earn/components/PoolSection/PoolPosition/PoolPositionDesktop.tsx b/apps/earn/components/PoolSection/PoolPosition/PoolPositionDesktop.tsx index 6692baab24..87da10227d 100644 --- a/apps/earn/components/PoolSection/PoolPosition/PoolPositionDesktop.tsx +++ b/apps/earn/components/PoolSection/PoolPosition/PoolPositionDesktop.tsx @@ -1,7 +1,8 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokensFromPool } from '../../../lib/hooks' import { usePoolPosition } from '../../PoolPositionProvider' diff --git a/apps/earn/components/PoolSection/PoolPosition/PoolPositionStakedDesktop.tsx b/apps/earn/components/PoolSection/PoolPosition/PoolPositionStakedDesktop.tsx index 71af20f9ab..7718f16aef 100644 --- a/apps/earn/components/PoolSection/PoolPosition/PoolPositionStakedDesktop.tsx +++ b/apps/earn/components/PoolSection/PoolPosition/PoolPositionStakedDesktop.tsx @@ -1,7 +1,8 @@ import { formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency, Typography } from '@sushiswap/ui' +import { Typography } from '@sushiswap/ui' import { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokensFromPool } from '../../../lib/hooks' import { usePoolPositionStaked } from '../../PoolPositionStakedProvider' diff --git a/apps/earn/components/PoolSection/PoolRewards.tsx b/apps/earn/components/PoolSection/PoolRewards.tsx index f5d21e7a7b..b7d18aadd7 100644 --- a/apps/earn/components/PoolSection/PoolRewards.tsx +++ b/apps/earn/components/PoolSection/PoolRewards.tsx @@ -1,6 +1,6 @@ import { formatNumber, formatPercent } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import React, { FC } from 'react' import { incentiveRewardToToken } from '../../lib/functions' diff --git a/apps/earn/components/PoolsSection/Tables/PoolRewardsCell.tsx b/apps/earn/components/PoolsSection/Tables/PoolRewardsCell.tsx index 3bb347f6f7..b2a5b2c988 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolRewardsCell.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolRewardsCell.tsx @@ -1,6 +1,6 @@ import { ChainId } from '@sushiswap/chain' import { SUSHI } from '@sushiswap/currency' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import { FC } from 'react' import { ICON_SIZE } from './contants' diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx index 9b2add7b0f..af2c5ed906 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx @@ -1,7 +1,8 @@ import { formatNumber, formatPercent } from '@sushiswap/format' import { Pool, Protocol } from '@sushiswap/client' -import { Currency, Link } from '@sushiswap/ui' +import { Link } from '@sushiswap/ui' import React, { FC } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { incentiveRewardToToken } from '../../../../lib/functions' import { List } from '@sushiswap/ui/future/components/list/List' diff --git a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx index 4fb156e8ee..e875183074 100644 --- a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx @@ -1,5 +1,5 @@ import { formatPercent, formatUSD } from '@sushiswap/format' -import { Currency, Link } from '@sushiswap/ui' +import { Link } from '@sushiswap/ui' import React, { FC, useCallback } from 'react' import { PositionWithPool } from '../../../../types' import { PoolPositionProvider, usePoolPosition } from '../../../PoolPositionProvider' @@ -10,6 +10,7 @@ import { Button } from '@sushiswap/ui/future/components/button' import { ArrowDownIcon, MinusIcon, PlusIcon } from '@heroicons/react/solid' import { useNetwork, useSwitchNetwork } from '@sushiswap/wagmi' import { ZERO } from '@sushiswap/math' +import { Currency } from '@sushiswap/ui/future/components/currency' interface PositionQuickHoverTooltipProps { row: PositionWithPool @@ -83,26 +84,30 @@ const _PositionQuickHoverTooltip: FC = ({ row }) Pending rewards - {pendingRewards.map((reward, index) => ( - - {reward?.toSignificant(6) || '0.00'} {rewardTokens[index]?.symbol} - - {' '} - {formatUSD(values[index])} - -
- } - /> - ))} + {pendingRewards.map((reward, index) => + reward?.currency ? ( + + {reward?.toSignificant(6) || '0.00'} {rewardTokens[index]?.symbol} + + {' '} + {formatUSD(values[index])} + +
+ } + /> + ) : ( + <> + ) + )} @@ -114,40 +119,44 @@ const _PositionQuickHoverTooltip: FC = ({ row }) {formatUSD(value0 + value1)}
- - {underlying0?.toSignificant(6)} {underlying0?.currency.symbol} - - {formatUSD(value0)} - -
- } - /> - - {underlying1?.toSignificant(6)} {underlying1?.currency.symbol} - - {formatUSD(value1)} - -
- } - /> + {underlying0 && ( + + {underlying0?.toSignificant(6)} {underlying0?.currency.symbol} + + {formatUSD(value0)} + +
+ } + /> + )} + {underlying1 && ( + + {underlying1?.toSignificant(6)} {underlying1?.currency.symbol} + + {formatUSD(value1)} + +
+ } + /> + )} diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx index 4dfa4afcee..1e94dddf60 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx @@ -4,10 +4,11 @@ import { ChainId } from '@sushiswap/chain' import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' -import { classNames, Currency, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' +import { classNames, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo, useState } from 'react' +import { Currency } from '@sushiswap/ui/future/components/currency' import { useTokenAmountDollarValues, useUnderlyingTokenBalanceFromPool } from '../../lib/hooks' import { usePoolPositionStaked } from '../PoolPositionStakedProvider' @@ -141,10 +142,12 @@ export const RemoveSectionUnstakeWidget: FC = ({
- - - - + {reserve0 && reserve1 && ( + + + + + )}
diff --git a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx index ba61e0a1fb..258c1c32f3 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx @@ -5,10 +5,11 @@ import { Amount, Native, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { ZERO } from '@sushiswap/math' -import { classNames, Currency as UICurrency, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' +import { classNames, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' import { Widget } from '@sushiswap/ui/future/components/widget' import React, { FC, Fragment, ReactNode, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' +import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' import { usePoolPosition } from '../PoolPositionProvider' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' diff --git a/apps/furo/components/Table/NetworkCell.tsx b/apps/furo/components/Table/NetworkCell.tsx index dc5277848d..5001b382d0 100644 --- a/apps/furo/components/Table/NetworkCell.tsx +++ b/apps/furo/components/Table/NetworkCell.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react' import { CellProps } from './types' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' export const NetworkCell: FC = ({ row }) => { return ( diff --git a/apps/furo/components/stream/CreateMultipleForm/ReviewSection.tsx b/apps/furo/components/stream/CreateMultipleForm/ReviewSection.tsx index 0959cc1f0a..3156268eb0 100644 --- a/apps/furo/components/stream/CreateMultipleForm/ReviewSection.tsx +++ b/apps/furo/components/stream/CreateMultipleForm/ReviewSection.tsx @@ -4,7 +4,7 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain, ChainId } from '@sushiswap/chain' import { Amount, tryParseAmount, Type } from '@sushiswap/currency' import { shortenAddress } from '@sushiswap/format' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import { usePrices } from '@sushiswap/react-query' import { format } from 'date-fns' import React, { FC, useMemo } from 'react' diff --git a/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx b/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx index b5ce0a86dc..9ec952cf00 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/ReviewSection.tsx @@ -3,7 +3,7 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import { Chain, ChainId } from '@sushiswap/chain' import { Amount, Type } from '@sushiswap/currency' import { shortenAddress } from '@sushiswap/format' -import { Currency } from '@sushiswap/ui' +import { Currency } from '@sushiswap/ui/future/components/currency' import { usePrices } from '@sushiswap/react-query' import { format } from 'date-fns' import React, { FC, useMemo } from 'react' diff --git a/packages/ui/src/currency/Icon.tsx b/packages/ui/src/currency/Icon.tsx deleted file mode 100644 index a26d95866a..0000000000 --- a/packages/ui/src/currency/Icon.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid' -import chains, { ChainId } from '@sushiswap/chain' -import { Currency } from '@sushiswap/currency' -// import { WrappedTokenInfo } from '@sushiswap/token-lists' -import Image, { ImageProps } from 'next/image' -import { FC, useEffect, useMemo, useState } from 'react' -import { cloudinaryImageLoader } from '../cloudinary' - -import { GradientCircleIcon } from '../icons' -import { Link } from '../link' - -const AvaxLogo = 'avax.svg' -const BnbLogo = 'bnb.svg' -const EthereumLogo = 'ethereum.svg' -const FtmLogo = 'ftm.svg' -const OneLogo = 'one.svg' -const HtLogo = 'ht.svg' -const MaticLogo = 'matic.svg' -const GlmrLogo = 'glmr.svg' -const OktLogo = 'okt.svg' -const xDaiLogo = 'xdai.svg' -const CeloLogo = 'celo.svg' -const PalmLogo = 'plam.svg' -const MovrLogo = 'movr.svg' -const FuseLogo = 'fuse.svg' -const TelosLogo = 'telos.svg' -const KavaLogo = 'kava.svg' -const MetisLogo = 'metis.svg' -const BobaLogo = 'boba.svg' -const BttcLogo = 'bttc.svg' -const ThundercoreLogo = 'thundercore.svg' - -const LOGO: Record = { - [ChainId.ETHEREUM]: EthereumLogo, - [ChainId.KOVAN]: EthereumLogo, - [ChainId.RINKEBY]: EthereumLogo, - [ChainId.ROPSTEN]: EthereumLogo, - [ChainId.GÖRLI]: EthereumLogo, - [ChainId.FANTOM]: FtmLogo, - [ChainId.FANTOM_TESTNET]: FtmLogo, - [ChainId.POLYGON]: MaticLogo, - [ChainId.POLYGON_TESTNET]: MaticLogo, - [ChainId.GNOSIS]: xDaiLogo, - [ChainId.BSC]: BnbLogo, - [ChainId.BSC_TESTNET]: BnbLogo, - [ChainId.AVALANCHE]: AvaxLogo, - [ChainId.AVALANCHE_TESTNET]: AvaxLogo, - [ChainId.HECO]: HtLogo, - [ChainId.HECO_TESTNET]: HtLogo, - [ChainId.HARMONY]: OneLogo, - [ChainId.HARMONY_TESTNET]: OneLogo, - [ChainId.OKEX]: OktLogo, - [ChainId.OKEX_TESTNET]: OktLogo, - [ChainId.ARBITRUM]: EthereumLogo, - [ChainId.ARBITRUM_TESTNET]: EthereumLogo, - [ChainId.CELO]: CeloLogo, - [ChainId.PALM]: PalmLogo, - [ChainId.MOONRIVER]: MovrLogo, - [ChainId.FUSE]: FuseLogo, - [ChainId.TELOS]: TelosLogo, - [ChainId.MOONBEAM]: GlmrLogo, - [ChainId.OPTIMISM]: EthereumLogo, - [ChainId.KAVA]: KavaLogo, - [ChainId.ARBITRUM_NOVA]: EthereumLogo, - [ChainId.METIS]: MetisLogo, - [ChainId.BOBA]: EthereumLogo, - [ChainId.BOBA_AVAX]: BobaLogo, - [ChainId.BOBA_BNB]: BobaLogo, - [ChainId.BTTC]: BttcLogo, - [ChainId.POLYGON_ZKEVM]: EthereumLogo, - [ChainId.THUNDERCORE]: ThundercoreLogo, -} - -export interface IconProps extends Omit { - currency: Currency | undefined - disableLink?: boolean -} - -export const Icon: FC = ({ currency, disableLink, ...rest }) => { - const [error, setError] = useState(false) - const [loading, setLoading] = useState(false) - - const src = useMemo(() => { - if (!currency) return null - if (currency.isNative) return `native-currency/${LOGO[currency.chainId]}` - return `tokens/${currency.chainId}/${currency.wrapped.address}.jpg` - }, [currency]) - - useEffect(() => { - setError(false) - }, [src]) - - const placeholder = useMemo(() => { - if (!rest.width || !rest.height) return 'empty' - if ((rest.width as number) < 40 || (rest.height as number) < 40) return 'empty' - return 'blur' - }, [rest?.width, rest?.height]) - - if (!currency) { - return ( - = 40 && (rest?.height as number) >= 40 - ? 'blur' - : 'empty' - } - src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAADhUlEQVRIx6VXz48UVRD+qmb6DXhQNoYYsy6rrFGMUSCYrDvgwauJ2cOGMTHGmzcjuAZiSNCOgWhUMGjixT9AYCFkb8aDMSQLRpCbF91FZRFcLuuvDUq26/PQs83rntc9PdJJJ/XmVb/6ql59VTWCGs/u3WzIpp92NgWTrcTazrDZJTbkjHDGZZfwsktsLjLMPrjy/bnOTCfpd6ZUbU68vrh+aN3qnpZh2hk3uoRwRkSpQaytC/KNKMGRe2/9+Ulnpn1zYMPPHvylExmOOuNwzkCJwQCYxWiV0y/NbD0VOl97fiFlV7wYC+S4AsPKVEkBKAFhilZ8ubuX6ZJQckSFJ09PXXovjqnVHsfUp/Hr547sREm1h84sWwdD761bCU9c2Lb9xTgWC3q8Q68dFqAjBBRcQ57KIISEoPt6Hue8LUaDAIAXdn536Z1gqLcevtpR8M3MgBfGtYO0J6Sop5fuHzj73IWpnOEHji6uV8qHuQ8LH0vISKmeH5n0VVAUcuzi8xfvygxvuNnYK8SIIpA4JWD8QwsGKkBzmLeSV9PkOsnGEz9ev+7zNE0My+SonLM5uVKvu24Zl+bv/nlYt8z/tkvJjVpA7odUWfQ2H+4yvVAEQd73+PKmCRXhZI6LA3PWA3M7pJkTGSu6cpe/k9ok2mVGipmp/sHM08unXX/Q0lYQm8Nc7M3MzECNyJSDBpQcUyHvCad/Pc6WFpBSPULADdqXs+zH2aIR9la93LV0E1GIPyo5G+S2z9m8kZqgf1cFFsLpX56ZtQsNSiM4r2qcC6f/nXO2t3avRcXmVERn74yzRTA+Z72E9e5XKLM6uuX+cwLcqEr/XjD5+83X676gl0bPTnyjMx1J1HBEAvdb7Mfql9OanO0FLR8IxBQApLH6sQJX/PutxdkBuJ3q8mr0r32atcWv44f+AfiGEByIswgNByyremyAr42cTyfPbAL58tDoKRW8q31p4nO2tx9XgD708FftM8GZa3tr9KASJ3qKQrFdDsZZNCDHH3tmPO4zV1Nenr78dmR8yxnlfzX92zKbhvd3TDx1QLwJs3Kgf2XPwpQz+ygyjtQf6M3fu+IS2zv+xfiZegN99/ns2Njplb+ajwiwX4ElzXeXcD8moJAlBfatrvz9aJnRvv+dsjk/puLaD+1mYpOthG1HG3MJh7oeL0fGBWecW0fMfvvktvNxIayh5z//1nKmShHglAAAAABJRU5ErkJggg==" - onErrorCapture={() => setError(true)} - alt="Loading..." - className="rounded-full" - {...rest} - /> - ) - } - - if (error) { - if (disableLink) { - return - } - - return ( - - - - ) - } - - if (!src) { - return ( - - ) - } - - if (disableLink) { - return ( - setError(true)} - src={src} - alt={currency.name || currency.symbol || currency.wrapped.address} - className="rounded-full" - loader={cloudinaryImageLoader} - {...rest} - /> - ) - } - - return ( - - = 40 && (rest?.height as number) >= 40 - ? 'blur' - : 'empty' - } - blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAADhUlEQVRIx6VXz48UVRD+qmb6DXhQNoYYsy6rrFGMUSCYrDvgwauJ2cOGMTHGmzcjuAZiSNCOgWhUMGjixT9AYCFkb8aDMSQLRpCbF91FZRFcLuuvDUq26/PQs83rntc9PdJJJ/XmVb/6ql59VTWCGs/u3WzIpp92NgWTrcTazrDZJTbkjHDGZZfwsktsLjLMPrjy/bnOTCfpd6ZUbU68vrh+aN3qnpZh2hk3uoRwRkSpQaytC/KNKMGRe2/9+Ulnpn1zYMPPHvylExmOOuNwzkCJwQCYxWiV0y/NbD0VOl97fiFlV7wYC+S4AsPKVEkBKAFhilZ8ubuX6ZJQckSFJ09PXXovjqnVHsfUp/Hr547sREm1h84sWwdD761bCU9c2Lb9xTgWC3q8Q68dFqAjBBRcQ57KIISEoPt6Hue8LUaDAIAXdn536Z1gqLcevtpR8M3MgBfGtYO0J6Sop5fuHzj73IWpnOEHji6uV8qHuQ8LH0vISKmeH5n0VVAUcuzi8xfvygxvuNnYK8SIIpA4JWD8QwsGKkBzmLeSV9PkOsnGEz9ev+7zNE0My+SonLM5uVKvu24Zl+bv/nlYt8z/tkvJjVpA7odUWfQ2H+4yvVAEQd73+PKmCRXhZI6LA3PWA3M7pJkTGSu6cpe/k9ok2mVGipmp/sHM08unXX/Q0lYQm8Nc7M3MzECNyJSDBpQcUyHvCad/Pc6WFpBSPULADdqXs+zH2aIR9la93LV0E1GIPyo5G+S2z9m8kZqgf1cFFsLpX56ZtQsNSiM4r2qcC6f/nXO2t3avRcXmVERn74yzRTA+Z72E9e5XKLM6uuX+cwLcqEr/XjD5+83X676gl0bPTnyjMx1J1HBEAvdb7Mfql9OanO0FLR8IxBQApLH6sQJX/PutxdkBuJ3q8mr0r32atcWv44f+AfiGEByIswgNByyremyAr42cTyfPbAL58tDoKRW8q31p4nO2tx9XgD708FftM8GZa3tr9KASJ3qKQrFdDsZZNCDHH3tmPO4zV1Nenr78dmR8yxnlfzX92zKbhvd3TDx1QLwJs3Kgf2XPwpQz+ygyjtQf6M3fu+IS2zv+xfiZegN99/ns2Njplb+ajwiwX4ElzXeXcD8moJAlBfatrvz9aJnRvv+dsjk/puLaD+1mYpOthG1HG3MJh7oeL0fGBWecW0fMfvvktvNxIayh5z//1nKmShHglAAAAABJRU5ErkJggg==" - onErrorCapture={() => setError(true)} - src={src} - alt={currency.name || currency.symbol || currency.wrapped.address} - className="rounded-full" - loader={cloudinaryImageLoader} - {...rest} - /> - - ) -} diff --git a/packages/ui/src/currency/IconList.tsx b/packages/ui/src/currency/IconList.tsx deleted file mode 100644 index 67137eb99d..0000000000 --- a/packages/ui/src/currency/IconList.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import classNames from 'classnames' -import { Children, cloneElement, FC, isValidElement, ReactNode } from 'react' - -export interface IconListProps { - children: ReactNode - iconWidth: number - iconHeight: number -} - -export const IconList: FC = ({ children, iconWidth, iconHeight }) => { - return ( -
-
- {Children.map(children, (child) => { - if (isValidElement(child)) { - return ( -
- {cloneElement(child, { - ...child.props, - width: iconWidth || child.props.width, - height: iconHeight || child.props.height, - minWidth: iconWidth || child.props.minWidth, - minHeight: iconHeight || child.props.height, - })} -
- ) - } - })} -
-
- ) -} diff --git a/packages/ui/src/currency/List.tsx b/packages/ui/src/currency/List.tsx deleted file mode 100644 index 67ce6c1e74..0000000000 --- a/packages/ui/src/currency/List.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Type } from '@sushiswap/currency' -import React, { CSSProperties, FC, memo, ReactElement, useCallback } from 'react' -import AutoSizer from 'react-virtualized-auto-sizer' -import { FixedSizeList } from 'react-window' - -interface RendererPayload { - currency: Type - style: CSSProperties -} - -export interface ListProps { - className?: string - currencies: Type[] - rowHeight?: number - rowRenderer(payload: RendererPayload): ReactElement - deps?: any[] -} - -export const List: FC = memo( - ({ className, currencies, rowHeight, rowRenderer }) => { - const Row = useCallback( - ({ index, style }: { index: number; style: CSSProperties }) => { - const currency = currencies[index] - return rowRenderer({ currency, style }) - }, - [currencies, rowRenderer] - ) - - return ( - - {({ height }: { height: number }) => ( - - {Row} - - )} - - ) - }, - (prevProps, nextProps) => - prevProps.className === nextProps.className && - prevProps.currencies === nextProps.currencies && - prevProps.rowHeight === nextProps.rowHeight -) diff --git a/packages/ui/src/currency/index.ts b/packages/ui/src/currency/index.ts deleted file mode 100644 index f5a14322bd..0000000000 --- a/packages/ui/src/currency/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { FC } from 'react' - -import { Icon, IconProps } from './Icon' -import { IconList, IconListProps } from './IconList' -import { List, ListProps } from './List' - -type Currency = { - List: FC - Icon: FC - IconList: FC -} - -/** - * @deprecated - */ -export const Currency: Currency = { - List, - Icon, - IconList, -} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 3eef62f1fe..f733bd1fe7 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,6 +1,5 @@ import './globals.css' -export * from './currency' export * from './dropzone' export * from './icons' export * from './input' From ee870e9ad46e58830a4d0fb11440ec575754c0c2 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 13:39:48 +0100 Subject: [PATCH 14/59] fix(packages/ui): remove icons and loader --- .../_root/app/(landing)/components/Search.tsx | 4 +- apps/_root/app/(landing)/loading.tsx | 2 +- .../_root/app/claims/components/ClaimItem.tsx | 3 +- .../app/claims/components/RevokeItem.tsx | 2 +- .../subgraphs/components/SubgraphTable.tsx | 2 +- apps/_root/app/internal/subgraphs/page.tsx | 2 +- .../internal/tokens/components/TokenTable.tsx | 3 +- apps/_root/app/swap/loading.tsx | 2 +- .../ConfirmationDialogContent.tsx | 3 +- apps/_root/ui/swap/TokenNotFoundDialog.tsx | 2 +- .../trade/TradeReviewDialogCrossChain.tsx | 2 +- .../common/components/Difficulties.tsx | 2 +- .../common/components/DifficultyCard.tsx | 2 +- .../common/components/DifficultyLabel.tsx | 3 +- apps/academy/common/components/Hero.tsx | 3 +- apps/academy/common/components/MobileMenu.tsx | 4 +- .../components/article/ArticleLinks.tsx | 2 +- apps/academy/common/productsData.tsx | 2 +- apps/academy/pages/articles/[slug].tsx | 3 +- apps/academy/pages/products/miso.tsx | 3 +- .../TableSection/Common/Cells/ChainCell.tsx | 2 +- .../TableSection/Pools/Cells/PoolNameCell.tsx | 3 +- .../TableSection/Pools/PoolTable.tsx | 2 +- apps/blog/components/article/ArticleLinks.tsx | 2 +- .../SelectNetworkWidget.tsx | 2 +- .../SelectPoolTypeWidget.tsx | 3 +- .../components/PoolSection/PoolHeader.tsx | 3 +- .../Tables/SharedCells/PoolNameCell.tsx | 3 +- .../Tables/SharedCells/PoolNameCellV3.tsx | 3 +- .../Cells/RewardsV3NameCell.tsx | 2 +- .../RewardsTableV3RowPopover.tsx | 2 +- apps/earn/components/future/PoolHeader.tsx | 2 +- apps/earn/pages/[id]/migrate.tsx | 2 +- apps/earn/pages/add/index.tsx | 2 +- .../pages/add/trident/[chainId]/index.tsx | 2 +- apps/earn/pages/add/v2/[chainId]/index.tsx | 2 +- .../CreateMultipleForm/ImportZoneSection.tsx | 3 +- .../CreateMultipleForm/ImportZoneSection.tsx | 3 +- apps/furo/pages/stream/[id].tsx | 3 +- apps/furo/pages/vesting/[id].tsx | 3 +- packages/ui/src/future/components/Loader.tsx | 30 ++++++- .../components}/icons/DangerousIcon.tsx | 0 .../components}/icons/GoPlusLabsIcon.tsx | 0 .../components}/icons/PepeIcon.tsx | 0 .../ui/src/future/components/icons/index.ts | 8 +- .../future/components/table/GenericTable.tsx | 2 +- packages/ui/src/icons/ArrowFlatLinesUp.tsx | 29 ------- packages/ui/src/icons/BentoboxIcon.tsx | 14 ---- packages/ui/src/icons/CalendarIcon.tsx | 15 ---- packages/ui/src/icons/CarbonIcon.tsx | 16 ---- packages/ui/src/icons/CheckIcon.tsx | 16 ---- packages/ui/src/icons/CircleIcon.tsx | 28 ------- packages/ui/src/icons/CircleWithText.tsx | 27 ------ packages/ui/src/icons/CoinbaseWalletIcon.tsx | 29 ------- packages/ui/src/icons/DiscordIcon.tsx | 19 ----- packages/ui/src/icons/EtherscanIcon.tsx | 16 ---- packages/ui/src/icons/GasIcon.tsx | 10 --- packages/ui/src/icons/GithubIcon.tsx | 18 ---- packages/ui/src/icons/GnosisSafeIcon.tsx | 10 --- packages/ui/src/icons/GradientCircleIcon.tsx | 20 ----- packages/ui/src/icons/HalfCircleIcon.tsx | 10 --- packages/ui/src/icons/HistoryIcon.tsx | 36 -------- packages/ui/src/icons/InstagramIcon.tsx | 10 --- packages/ui/src/icons/JazzIcon.tsx | 11 --- packages/ui/src/icons/MediumIcon.tsx | 10 --- packages/ui/src/icons/MetamaskIcon.tsx | 76 ----------------- packages/ui/src/icons/NetworkIcon.tsx | 22 ----- packages/ui/src/icons/NotepadIcon.tsx | 20 ----- packages/ui/src/icons/OnsenIcon.tsx | 16 ---- packages/ui/src/icons/SushiIcon.tsx | 42 ---------- packages/ui/src/icons/SushiWithTextIcon.tsx | 46 ---------- packages/ui/src/icons/TrustWalletIcon.tsx | 20 ----- packages/ui/src/icons/TwitterIcon.tsx | 10 --- packages/ui/src/icons/WalletConnectIcon.tsx | 16 ---- packages/ui/src/icons/WalletIcon.tsx | 14 ---- packages/ui/src/icons/YoutubeIcon.tsx | 10 --- packages/ui/src/icons/index.ts | 33 -------- .../icons/network/circle/ArbitrumCircle.tsx | 23 ----- .../network/circle/ArbitrumNovaCircle.tsx | 11 --- .../icons/network/circle/AvalancheCircle.tsx | 14 ---- .../icons/network/circle/BinanceCircle.tsx | 11 --- .../icons/network/circle/BobaAvaxCircle.tsx | 66 --------------- .../icons/network/circle/BobaBNBCircle.tsx | 74 ---------------- .../src/icons/network/circle/BobaCircle.tsx | 63 -------------- .../src/icons/network/circle/BttcCircle.tsx | 32 ------- .../src/icons/network/circle/CeloCircle.tsx | 19 ----- .../icons/network/circle/EthereumCircle.tsx | 13 --- .../src/icons/network/circle/FantomCircle.tsx | 13 --- .../src/icons/network/circle/FuseCircle.tsx | 77 ----------------- .../src/icons/network/circle/GnosisCircle.tsx | 28 ------- .../icons/network/circle/HarmonyCircle.tsx | 25 ------ .../src/icons/network/circle/HecoCircle.tsx | 15 ---- .../src/icons/network/circle/KavaCircle.tsx | 16 ---- .../src/icons/network/circle/MetisCircle.tsx | 11 --- .../icons/network/circle/MoonbeamCircle.tsx | 28 ------- .../icons/network/circle/MoonriverCircle.tsx | 37 -------- .../src/icons/network/circle/OkexCircle.tsx | 27 ------ .../icons/network/circle/OptimismCircle.tsx | 11 --- .../src/icons/network/circle/PalmCircle.tsx | 30 ------- .../icons/network/circle/PolygonCircle.tsx | 18 ---- .../src/icons/network/circle/TelosCircle.tsx | 13 --- .../network/circle/ThunderCoreCircle.tsx | 19 ----- .../ui/src/icons/network/circle/index.tsx | 84 ------------------- packages/ui/src/icons/network/index.ts | 2 - .../src/icons/network/naked/ArbitrumNaked.tsx | 22 ----- .../icons/network/naked/ArbitrumNovaNaked.tsx | 10 --- .../icons/network/naked/AvalancheNaked.tsx | 14 ---- .../src/icons/network/naked/BinanceNaked.tsx | 10 --- .../src/icons/network/naked/BobaAvaxNaked.tsx | 61 -------------- .../src/icons/network/naked/BobaBNBNaked.tsx | 69 --------------- .../ui/src/icons/network/naked/BobaNaked.tsx | 61 -------------- .../ui/src/icons/network/naked/BttcNaked.tsx | 32 ------- .../ui/src/icons/network/naked/CeloNaked.tsx | 18 ---- .../src/icons/network/naked/EthereumNaked.tsx | 12 --- .../src/icons/network/naked/FantomNaked.tsx | 12 --- .../ui/src/icons/network/naked/FuseNaked.tsx | 53 ------------ .../src/icons/network/naked/GnosisNaked.tsx | 16 ---- .../src/icons/network/naked/HarmonyNaked.tsx | 27 ------ .../ui/src/icons/network/naked/HecoNaked.tsx | 14 ---- .../ui/src/icons/network/naked/KavaNaked.tsx | 15 ---- .../ui/src/icons/network/naked/MetisNaked.tsx | 10 --- .../src/icons/network/naked/MoonbeamNaked.tsx | 14 ---- .../icons/network/naked/MoonriverNaked.tsx | 25 ------ .../ui/src/icons/network/naked/OkexNaked.tsx | 26 ------ .../src/icons/network/naked/OptimismNaked.tsx | 10 --- .../ui/src/icons/network/naked/PalmNaked.tsx | 29 ------- .../src/icons/network/naked/PolygonNaked.tsx | 17 ---- .../ui/src/icons/network/naked/TelosNaked.tsx | 12 --- .../icons/network/naked/ThunderCoreNaked.tsx | 31 ------- packages/ui/src/icons/network/naked/index.tsx | 82 ------------------ packages/ui/src/index.ts | 2 - packages/ui/src/loader/Loader.tsx | 28 ------- packages/ui/src/loader/LogoLoader.tsx | 11 --- packages/ui/src/loader/LogoOverlay.tsx | 26 ------ packages/ui/src/loader/index.tsx | 3 - packages/ui/src/loader/types.ts | 6 -- .../src/future/components/ConnectButton.tsx | 6 +- .../TokenSelector/TokenSelectorImportRow.tsx | 2 +- 138 files changed, 97 insertions(+), 2278 deletions(-) rename packages/ui/src/{ => future/components}/icons/DangerousIcon.tsx (100%) rename packages/ui/src/{ => future/components}/icons/GoPlusLabsIcon.tsx (100%) rename packages/ui/src/{ => future/components}/icons/PepeIcon.tsx (100%) delete mode 100644 packages/ui/src/icons/ArrowFlatLinesUp.tsx delete mode 100644 packages/ui/src/icons/BentoboxIcon.tsx delete mode 100644 packages/ui/src/icons/CalendarIcon.tsx delete mode 100644 packages/ui/src/icons/CarbonIcon.tsx delete mode 100644 packages/ui/src/icons/CheckIcon.tsx delete mode 100644 packages/ui/src/icons/CircleIcon.tsx delete mode 100644 packages/ui/src/icons/CircleWithText.tsx delete mode 100644 packages/ui/src/icons/CoinbaseWalletIcon.tsx delete mode 100644 packages/ui/src/icons/DiscordIcon.tsx delete mode 100644 packages/ui/src/icons/EtherscanIcon.tsx delete mode 100644 packages/ui/src/icons/GasIcon.tsx delete mode 100644 packages/ui/src/icons/GithubIcon.tsx delete mode 100644 packages/ui/src/icons/GnosisSafeIcon.tsx delete mode 100644 packages/ui/src/icons/GradientCircleIcon.tsx delete mode 100644 packages/ui/src/icons/HalfCircleIcon.tsx delete mode 100644 packages/ui/src/icons/HistoryIcon.tsx delete mode 100644 packages/ui/src/icons/InstagramIcon.tsx delete mode 100644 packages/ui/src/icons/JazzIcon.tsx delete mode 100644 packages/ui/src/icons/MediumIcon.tsx delete mode 100644 packages/ui/src/icons/MetamaskIcon.tsx delete mode 100644 packages/ui/src/icons/NetworkIcon.tsx delete mode 100644 packages/ui/src/icons/NotepadIcon.tsx delete mode 100644 packages/ui/src/icons/OnsenIcon.tsx delete mode 100644 packages/ui/src/icons/SushiIcon.tsx delete mode 100644 packages/ui/src/icons/SushiWithTextIcon.tsx delete mode 100644 packages/ui/src/icons/TrustWalletIcon.tsx delete mode 100644 packages/ui/src/icons/TwitterIcon.tsx delete mode 100644 packages/ui/src/icons/WalletConnectIcon.tsx delete mode 100644 packages/ui/src/icons/WalletIcon.tsx delete mode 100644 packages/ui/src/icons/YoutubeIcon.tsx delete mode 100644 packages/ui/src/icons/index.ts delete mode 100644 packages/ui/src/icons/network/circle/ArbitrumCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/ArbitrumNovaCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/AvalancheCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/BinanceCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/BobaAvaxCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/BobaBNBCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/BobaCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/BttcCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/CeloCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/EthereumCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/FantomCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/FuseCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/GnosisCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/HarmonyCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/HecoCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/KavaCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/MetisCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/MoonbeamCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/MoonriverCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/OkexCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/OptimismCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/PalmCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/PolygonCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/TelosCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/ThunderCoreCircle.tsx delete mode 100644 packages/ui/src/icons/network/circle/index.tsx delete mode 100644 packages/ui/src/icons/network/index.ts delete mode 100644 packages/ui/src/icons/network/naked/ArbitrumNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/ArbitrumNovaNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/AvalancheNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/BinanceNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/BobaAvaxNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/BobaBNBNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/BobaNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/BttcNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/CeloNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/EthereumNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/FantomNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/FuseNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/GnosisNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/HarmonyNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/HecoNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/KavaNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/MetisNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/MoonbeamNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/MoonriverNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/OkexNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/OptimismNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/PalmNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/PolygonNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/TelosNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/ThunderCoreNaked.tsx delete mode 100644 packages/ui/src/icons/network/naked/index.tsx delete mode 100644 packages/ui/src/loader/Loader.tsx delete mode 100644 packages/ui/src/loader/LogoLoader.tsx delete mode 100644 packages/ui/src/loader/LogoOverlay.tsx delete mode 100644 packages/ui/src/loader/index.tsx delete mode 100644 packages/ui/src/loader/types.ts diff --git a/apps/_root/app/(landing)/components/Search.tsx b/apps/_root/app/(landing)/components/Search.tsx index b178de46de..d35b8e36d1 100644 --- a/apps/_root/app/(landing)/components/Search.tsx +++ b/apps/_root/app/(landing)/components/Search.tsx @@ -2,14 +2,14 @@ import { ChevronDownIcon, SearchIcon, StarIcon } from '@heroicons/react-v1/solid import chains, { ChainId, chainShortName } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { useDebounce, useOnClickOutside } from '@sushiswap/hooks' -import { classNames, DEFAULT_INPUT_UNSTYLED, NetworkIcon, Typography } from '@sushiswap/ui' +import { classNames, DEFAULT_INPUT_UNSTYLED, Typography } from '@sushiswap/ui' import type { TokenList } from '@uniswap/token-lists' import { isAddress } from 'ethers/lib/utils' import { FC, useEffect, useMemo, useRef, useState } from 'react' import { useQuery, useToken } from '@sushiswap/wagmi' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { Currency } from '@sushiswap/ui/future/components/currency' - +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { SUPPORTED_CHAIN_IDS } from '../../../config' const EXAMPLE_CURRENCIES = [ diff --git a/apps/_root/app/(landing)/loading.tsx b/apps/_root/app/(landing)/loading.tsx index 71f3477da2..4d901b760a 100644 --- a/apps/_root/app/(landing)/loading.tsx +++ b/apps/_root/app/(landing)/loading.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Transition } from '@headlessui/react' -import { SushiIcon } from '@sushiswap/ui' +import { SushiIcon } from '@sushiswap/ui/future/components/icons' export default function Loading() { return ( diff --git a/apps/_root/app/claims/components/ClaimItem.tsx b/apps/_root/app/claims/components/ClaimItem.tsx index aefffe4e1d..f03a055391 100644 --- a/apps/_root/app/claims/components/ClaimItem.tsx +++ b/apps/_root/app/claims/components/ClaimItem.tsx @@ -1,6 +1,6 @@ 'use client' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import React, { FC, useMemo } from 'react' import { RP2MerkleTreeClaimSchema } from '@sushiswap/wagmi/future/hooks/exploits/constants' import { z } from 'zod' @@ -24,6 +24,7 @@ import { routeProcessor2Address } from '@sushiswap/route-processor/exports/expor import { ZERO } from '@sushiswap/math' import { Badge } from '@sushiswap/ui/future/components/Badge' import { Currency } from '@sushiswap/ui/future/components/currency' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' interface ClaimItem { account: Address diff --git a/apps/_root/app/claims/components/RevokeItem.tsx b/apps/_root/app/claims/components/RevokeItem.tsx index e9e952ca5a..ecd2823d6c 100644 --- a/apps/_root/app/claims/components/RevokeItem.tsx +++ b/apps/_root/app/claims/components/RevokeItem.tsx @@ -3,7 +3,6 @@ import { Token } from '@sushiswap/currency' import { useTokenAllowance, useTokenRevokeApproval } from '@sushiswap/wagmi/future/hooks' import { List } from '@sushiswap/ui/future/components/list/List' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { Checker } from '@sushiswap/wagmi/future/systems' import Button from '@sushiswap/ui/future/components/button/Button' @@ -11,6 +10,7 @@ import { ZERO } from '@sushiswap/math' import { routeProcessor2Address, RouteProcessor2ChainId } from '@sushiswap/route-processor/exports/exports' import { CheckIcon } from '@heroicons/react-v1/solid' import { Address } from 'wagmi' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' export const RevokeItem: FC<{ token: Token; account: Address }> = ({ account, token }) => { const { data: allowance, isLoading } = useTokenAllowance({ diff --git a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx index 43347c5d14..466b0b28c2 100644 --- a/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx +++ b/apps/_root/app/internal/subgraphs/components/SubgraphTable.tsx @@ -4,11 +4,11 @@ import { RefreshIcon } from '@heroicons/react-v1/solid' import { ChainId, chainName } from '@sushiswap/chain' import { formatNumber, formatPercent } from '@sushiswap/format' import { CHAIN_NAME } from '@sushiswap/graph-config' -import { CheckIcon, NetworkIcon } from '@sushiswap/ui' import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table' import { Subgraph } from '../lib' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' +import { NetworkIcon, CheckIcon } from '@sushiswap/ui/future/components/icons' interface SubgraphTable { subgraphs: Subgraph[] diff --git a/apps/_root/app/internal/subgraphs/page.tsx b/apps/_root/app/internal/subgraphs/page.tsx index d99f9f6dd1..18db29d683 100644 --- a/apps/_root/app/internal/subgraphs/page.tsx +++ b/apps/_root/app/internal/subgraphs/page.tsx @@ -2,7 +2,7 @@ import { CHAIN_NAME } from '@sushiswap/graph-config' import { useDebounce } from '@sushiswap/hooks' -import { Loader } from '@sushiswap/ui' +import { Loader } from '@sushiswap/ui/future/components/loader' import { SubgraphTable } from './components/SubgraphTable' import { getSubgraphs, Subgraph } from './lib' import { useMemo, useState } from 'react' diff --git a/apps/_root/app/internal/tokens/components/TokenTable.tsx b/apps/_root/app/internal/tokens/components/TokenTable.tsx index dcba22d112..cb51edf09f 100644 --- a/apps/_root/app/internal/tokens/components/TokenTable.tsx +++ b/apps/_root/app/internal/tokens/components/TokenTable.tsx @@ -3,13 +3,14 @@ import { Token } from '../lib' import { FC } from 'react' import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table' -import { CheckIcon, Loader, NetworkIcon } from '@sushiswap/ui' import { CHAIN_NAME } from '@sushiswap/graph-config' import { ChainId, chainName } from '@sushiswap/chain' import { formatUSD } from '@sushiswap/format' import { XIcon } from '@heroicons/react-v1/outline' import { TokenAdder } from './TokenAdder' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' +import { NetworkIcon, CheckIcon } from '@sushiswap/ui/future/components/icons' +import { Loader } from '@sushiswap/ui/future/components/loader' interface TokenTable { tokens: Token[] diff --git a/apps/_root/app/swap/loading.tsx b/apps/_root/app/swap/loading.tsx index b024294a18..ea2416157e 100644 --- a/apps/_root/app/swap/loading.tsx +++ b/apps/_root/app/swap/loading.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Transition } from '@headlessui/react' -import { SushiIcon } from '@sushiswap/ui' +import { SushiIcon } from '@sushiswap/ui/future/components/icons' export default function Loading() { return ( diff --git a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx index bbc9b67836..49d139ad30 100644 --- a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx +++ b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { Chain } from '@sushiswap/chain' import { Dots } from '@sushiswap/ui/future/components/Dots' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { useSwapState } from '../trade/TradeProvider' import { isStargateBridgeToken, STARGATE_BRIDGE_TOKENS, STARGATE_TOKEN } from '@sushiswap/stargate' import { useTrade } from '../../../lib/swap/useTrade' @@ -9,6 +9,7 @@ import { StepState } from './StepStates' import { shortenAddress } from '@sushiswap/format' import { ArrowLongRightIcon } from '@heroicons/react/20/solid' import { Currency } from '@sushiswap/ui/future/components/currency' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' interface ConfirmationDialogContent { txHash?: string diff --git a/apps/_root/ui/swap/TokenNotFoundDialog.tsx b/apps/_root/ui/swap/TokenNotFoundDialog.tsx index 2ba59ac08a..678e5b9fbc 100644 --- a/apps/_root/ui/swap/TokenNotFoundDialog.tsx +++ b/apps/_root/ui/swap/TokenNotFoundDialog.tsx @@ -11,7 +11,7 @@ import { useCustomTokens } from '@sushiswap/hooks' import { queryParamsSchema } from '../../lib/swap/queryParamsSchema' import { useTokenWithCache } from '@sushiswap/wagmi/future/hooks' import { useTokenSecurity } from '@sushiswap/react-query' -import { DangerousIcon, GoPlusLabsIcon } from '@sushiswap/ui/icons' +import { DangerousIcon, GoPlusLabsIcon } from '@sushiswap/ui/future/components/icons' import { Link } from '@sushiswap/ui' export const TokenNotFoundDialog = () => { diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx index fd8b69aae2..9a5bb92fc5 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx @@ -15,7 +15,7 @@ import { Dots } from '@sushiswap/ui/future/components/Dots' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { ConfirmationDialogCrossChain } from '../ConfirmationDialogCrossChain/ConfirmationDialogCrossChain' import { warningSeverity } from '../../../lib/swap/warningSeverity' import { ZERO } from '@sushiswap/math' diff --git a/apps/academy/common/components/Difficulties.tsx b/apps/academy/common/components/Difficulties.tsx index a7f15cc36e..91f560d3ad 100644 --- a/apps/academy/common/components/Difficulties.tsx +++ b/apps/academy/common/components/Difficulties.tsx @@ -1,8 +1,8 @@ -import { CircleIcon } from '@sushiswap/ui' import { DIFFICULTY_ELEMENTS } from 'common/helpers' import { FC } from 'react' import { DifficultyEntity } from '../../.mesh' +import { CircleIcon } from '@sushiswap/ui/future/components/icons' interface Difficulties { selected: DifficultyEntity diff --git a/apps/academy/common/components/DifficultyCard.tsx b/apps/academy/common/components/DifficultyCard.tsx index 84df2d2908..41531bebae 100644 --- a/apps/academy/common/components/DifficultyCard.tsx +++ b/apps/academy/common/components/DifficultyCard.tsx @@ -1,12 +1,12 @@ import { Transition } from '@headlessui/react' import { ArrowRightIcon } from '@heroicons/react/24/outline' -import { CircleIcon } from '@sushiswap/ui' import { DIFFICULTY_ELEMENTS, DOCS_URL } from 'common/helpers' import { AcademyIcon } from 'common/icons' import { FC, Fragment, useState } from 'react' import { DifficultyEntity } from '.mesh' import { Chip } from '@sushiswap/ui/future/components/chip' +import { CircleIcon } from '@sushiswap/ui/future/components/icons' interface DifficultyCard { difficulty: DifficultyEntity diff --git a/apps/academy/common/components/DifficultyLabel.tsx b/apps/academy/common/components/DifficultyLabel.tsx index 8f5ff358b6..d04ed083ac 100644 --- a/apps/academy/common/components/DifficultyLabel.tsx +++ b/apps/academy/common/components/DifficultyLabel.tsx @@ -1,8 +1,9 @@ -import { CircleIcon, classNames } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { DIFFICULTY_ELEMENTS } from 'common/helpers' import { FC } from 'react' import { ArticleEntity } from '.mesh' +import { CircleIcon } from '@sushiswap/ui/future/components/icons' interface DifficultyLabel { article: ArticleEntity diff --git a/apps/academy/common/components/Hero.tsx b/apps/academy/common/components/Hero.tsx index ee59f6256f..08a88c74c7 100644 --- a/apps/academy/common/components/Hero.tsx +++ b/apps/academy/common/components/Hero.tsx @@ -1,7 +1,8 @@ -import { classNames, DiscordIcon, GithubIcon, TwitterIcon, YoutubeIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { FC } from 'react' import { DEFAULT_SIDE_PADDING } from '../helpers' +import { DiscordIcon, GithubIcon, TwitterIcon, YoutubeIcon } from '@sushiswap/ui/future/components/icons' const heroIconProps = { width: 24, diff --git a/apps/academy/common/components/MobileMenu.tsx b/apps/academy/common/components/MobileMenu.tsx index 942f56001e..584c1bd7a1 100644 --- a/apps/academy/common/components/MobileMenu.tsx +++ b/apps/academy/common/components/MobileMenu.tsx @@ -1,7 +1,7 @@ import { Disclosure, Transition } from '@headlessui/react' import { Bars3Icon } from '@heroicons/react/24/solid' -import { classNames, Link, SushiIcon, Typography } from '@sushiswap/ui' -import { SushiTransparentIcon, TriangleIcon } from 'common/icons' +import { classNames, Link, Typography } from '@sushiswap/ui' +import { SushiIcon, SushiTransparentIcon, TriangleIcon } from 'common/icons' import { FC, useCallback, useState } from 'react' import { Drawer } from './Drawer' diff --git a/apps/academy/common/components/article/ArticleLinks.tsx b/apps/academy/common/components/article/ArticleLinks.tsx index 5e3f17a959..ba79e6c16e 100644 --- a/apps/academy/common/components/article/ArticleLinks.tsx +++ b/apps/academy/common/components/article/ArticleLinks.tsx @@ -1,10 +1,10 @@ import { EnvelopeIcon, LinkIcon } from '@heroicons/react/24/outline' -import { TwitterIcon } from '@sushiswap/ui' import { getShareText } from 'common/helpers' import { FC } from 'react' import { ArticleEntity } from '../../../.mesh' import { ClipboardController } from '@sushiswap/ui/future/components/ClipboardController' +import { TwitterIcon } from '@sushiswap/ui/future/components/icons' interface ArticleLinks { article?: ArticleEntity diff --git a/apps/academy/common/productsData.tsx b/apps/academy/common/productsData.tsx index 3b06d5cbae..6b74243595 100644 --- a/apps/academy/common/productsData.tsx +++ b/apps/academy/common/productsData.tsx @@ -6,7 +6,7 @@ import { FantomCircle, OptimismCircle, PolygonCircle, -} from '@sushiswap/ui' +} from '@sushiswap/ui/future/components/icons' import { AcademyIcon, diff --git a/apps/academy/pages/articles/[slug].tsx b/apps/academy/pages/articles/[slug].tsx index 0b2d0c544e..3d45c0f43f 100644 --- a/apps/academy/pages/articles/[slug].tsx +++ b/apps/academy/pages/articles/[slug].tsx @@ -1,5 +1,5 @@ import { useBreakpoint } from '@sushiswap/hooks' -import { classNames, LoadingOverlay } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { APP_HEADER_HEIGHT, DEFAULT_SIDE_PADDING } from 'common/helpers' import ErrorPage from 'next/error' import { useRouter } from 'next/router' @@ -26,6 +26,7 @@ import { } from '../../common/components' import { Image } from '../../common/components' import { getAllArticlesBySlug, getArticleAndMoreArticles } from '../../lib/api' +import { LoadingOverlay } from '@sushiswap/ui/future/components/Loader' export async function getStaticPaths() { const allArticles = await getAllArticlesBySlug() diff --git a/apps/academy/pages/products/miso.tsx b/apps/academy/pages/products/miso.tsx index ca032cd8f7..9b99b8b01f 100644 --- a/apps/academy/pages/products/miso.tsx +++ b/apps/academy/pages/products/miso.tsx @@ -1,5 +1,5 @@ import { LinkIcon } from '@heroicons/react/24/outline' -import { CheckIcon, classNames } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { ProductArticles, ProductBackground, @@ -17,6 +17,7 @@ import useSWR from 'swr' import { Container } from '@sushiswap/ui/future/components/Container' import { ArticleEntity } from '.mesh' +import { CheckIcon } from '@sushiswap/ui/future/components/icons' const PRODUCT_SLUG = 'miso' const { color, usps, productStats, buttonText, cards, faq } = PRODUCTS_DATA[PRODUCT_SLUG] diff --git a/apps/analytics/components/TableSection/Common/Cells/ChainCell.tsx b/apps/analytics/components/TableSection/Common/Cells/ChainCell.tsx index b101577b4d..1e84c4e638 100644 --- a/apps/analytics/components/TableSection/Common/Cells/ChainCell.tsx +++ b/apps/analytics/components/TableSection/Common/Cells/ChainCell.tsx @@ -1,5 +1,5 @@ import { ChainId } from '@sushiswap/chain' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { FC } from 'react' import { CommonCell } from '../types' diff --git a/apps/analytics/components/TableSection/Pools/Cells/PoolNameCell.tsx b/apps/analytics/components/TableSection/Pools/Cells/PoolNameCell.tsx index c293ae870c..6e05593935 100644 --- a/apps/analytics/components/TableSection/Pools/Cells/PoolNameCell.tsx +++ b/apps/analytics/components/TableSection/Pools/Cells/PoolNameCell.tsx @@ -1,6 +1,6 @@ import { formatNumber } from '@sushiswap/format' import { Pool, Protocol } from '@sushiswap/client' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { FC } from 'react' @@ -10,6 +10,7 @@ import { Row } from './types' import { Badge } from '@sushiswap/ui/future/components/Badge' import { ChainId } from '@sushiswap/chain' import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from '@sushiswap/ui/future/components/tooltip' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' export const PoolNameCell: FC> = ({ row }) => { const { token0, token1 } = useTokensFromPool(row) diff --git a/apps/analytics/components/TableSection/Pools/PoolTable.tsx b/apps/analytics/components/TableSection/Pools/PoolTable.tsx index a8b38ceef9..1970479b08 100644 --- a/apps/analytics/components/TableSection/Pools/PoolTable.tsx +++ b/apps/analytics/components/TableSection/Pools/PoolTable.tsx @@ -1,6 +1,6 @@ import { GetPoolsArgs, Pool, usePoolCount, usePoolsInfinite } from '@sushiswap/client' import { useBreakpoint } from '@sushiswap/hooks' -import { Loader } from '@sushiswap/ui' +import { Loader } from '@sushiswap/ui/future/components/loader' import { getCoreRowModel, getSortedRowModel, PaginationState, SortingState, useReactTable } from '@tanstack/react-table' import React, { FC, useCallback, useEffect, useMemo, useState } from 'react' import InfiniteScroll from 'react-infinite-scroll-component' diff --git a/apps/blog/components/article/ArticleLinks.tsx b/apps/blog/components/article/ArticleLinks.tsx index cb0575ca4c..8bec174a29 100644 --- a/apps/blog/components/article/ArticleLinks.tsx +++ b/apps/blog/components/article/ArticleLinks.tsx @@ -1,7 +1,7 @@ import { LinkIcon, MailIcon } from '@heroicons/react/outline' -import { TwitterIcon } from '@sushiswap/ui' import { FC } from 'react' import { Article } from 'types' +import { TwitterIcon } from '@sushiswap/ui/future/components/icons' interface ArticleLinks { article?: Article diff --git a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx index 7fca8d26a9..01e25f3b98 100644 --- a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx @@ -1,5 +1,5 @@ import { ChainId, chainName } from '@sushiswap/chain' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import React, { FC, memo } from 'react' import { V3_SUPPORTED_CHAIN_IDS } from '@sushiswap/v3-sdk' diff --git a/apps/earn/components/NewPositionSection/SelectPoolTypeWidget.tsx b/apps/earn/components/NewPositionSection/SelectPoolTypeWidget.tsx index 60e8e23275..de52565d7d 100644 --- a/apps/earn/components/NewPositionSection/SelectPoolTypeWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectPoolTypeWidget.tsx @@ -1,9 +1,10 @@ import { RadioGroup } from '@headlessui/react' import { StarIcon } from '@heroicons/react/solid' -import { CheckIcon, classNames } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { PoolFinderType } from '@sushiswap/wagmi' import React, { FC, memo } from 'react' import { ContentBlock } from '../AddPage/ContentBlock' +import { CheckIcon } from '@sushiswap/ui/future/components/icons' const POOL_OPTIONS = [ { diff --git a/apps/earn/components/PoolSection/PoolHeader.tsx b/apps/earn/components/PoolSection/PoolHeader.tsx index f83a7ab98e..b122ccc8cd 100644 --- a/apps/earn/components/PoolSection/PoolHeader.tsx +++ b/apps/earn/components/PoolSection/PoolHeader.tsx @@ -2,9 +2,10 @@ import { ExternalLinkIcon } from '@heroicons/react/solid' import chains, { ChainId } from '@sushiswap/chain' import { formatPercent, formatUSD } from '@sushiswap/format' import { Pool } from '@sushiswap/client' -import { Link, NetworkIcon, Typography } from '@sushiswap/ui' +import { Link, Typography } from '@sushiswap/ui' import { usePrices } from '@sushiswap/react-query' import { FC } from 'react' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { useGraphPool } from '../../lib/hooks' import { FarmRewardsAvailableTooltip } from '../FarmRewardsAvailableTooltip' diff --git a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx index 5150a5f609..882d02036d 100644 --- a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx +++ b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCell.tsx @@ -1,8 +1,9 @@ import { formatNumber } from '@sushiswap/format' import { Pool, Protocol } from '@sushiswap/client' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { FC } from 'react' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { useTokensFromPool } from '../../../../lib/hooks' import { ICON_SIZE } from '../contants' diff --git a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCellV3.tsx b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCellV3.tsx index ad7badd56f..ec2ff6ef86 100644 --- a/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCellV3.tsx +++ b/apps/earn/components/PoolsSection/Tables/SharedCells/PoolNameCellV3.tsx @@ -1,7 +1,8 @@ import { formatNumber } from '@sushiswap/format' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { FC, useMemo } from 'react' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { ICON_SIZE } from '../contants' import { Row } from './types' diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/RewardsV3NameCell.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/RewardsV3NameCell.tsx index 7dbf6a85c7..ef0967ade0 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/RewardsV3NameCell.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/RewardsV3NameCell.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react' import { RewardTableV3CellProps } from './types' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Currency } from '@sushiswap/ui/future/components/currency' import { unwrapToken } from '../../../../../lib/functions' diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx index cea9227bd1..634b1aee91 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' import { RewardTableV3CellProps } from './Cells' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Currency } from '@sushiswap/ui/future/components/currency' import { unwrapToken } from '../../../../lib/functions' import { List } from '@sushiswap/ui/future/components/list/List' diff --git a/apps/earn/components/future/PoolHeader.tsx b/apps/earn/components/future/PoolHeader.tsx index 1d571be856..d6b934be58 100644 --- a/apps/earn/components/future/PoolHeader.tsx +++ b/apps/earn/components/future/PoolHeader.tsx @@ -1,6 +1,6 @@ import React, { FC, useMemo } from 'react' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Currency } from '@sushiswap/ui/future/components/currency' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { ChainId } from '@sushiswap/chain' diff --git a/apps/earn/pages/[id]/migrate.tsx b/apps/earn/pages/[id]/migrate.tsx index 7d1264dff3..de84026ecd 100644 --- a/apps/earn/pages/[id]/migrate.tsx +++ b/apps/earn/pages/[id]/migrate.tsx @@ -7,7 +7,7 @@ import { useAccount } from '@sushiswap/wagmi' import { SplashController } from '@sushiswap/ui/future/components/SplashController' import React, { useMemo } from 'react' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Currency } from '@sushiswap/ui/future/components/currency' import { formatPercent } from '@sushiswap/format' import { Layout, PoolPositionProvider, PoolPositionRewardsProvider, PoolPositionStakedProvider } from '../../components' diff --git a/apps/earn/pages/add/index.tsx b/apps/earn/pages/add/index.tsx index 971b385dd6..e55da99298 100644 --- a/apps/earn/pages/add/index.tsx +++ b/apps/earn/pages/add/index.tsx @@ -1,6 +1,6 @@ import { ArrowLeftIcon, SwitchHorizontalIcon } from '@heroicons/react/solid' import { Chain } from '@sushiswap/chain' -import { NetworkIcon } from '@sushiswap/ui' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Layout, SelectNetworkWidget, SelectPricesWidget, SelectTokensWidget } from '../../components' import React, { FC, useMemo, useState } from 'react' import { SWRConfig } from 'swr' diff --git a/apps/earn/pages/add/trident/[chainId]/index.tsx b/apps/earn/pages/add/trident/[chainId]/index.tsx index 8dad866f61..ec20a2de4b 100644 --- a/apps/earn/pages/add/trident/[chainId]/index.tsx +++ b/apps/earn/pages/add/trident/[chainId]/index.tsx @@ -2,7 +2,7 @@ import { ArrowLeftIcon, PlusIcon } from '@heroicons/react/solid' import { ConstantProductPool, Fee, StablePool } from '@sushiswap/amm' import { ChainId } from '@sushiswap/chain' import { defaultQuoteCurrency, Native, tryParseAmount, Type } from '@sushiswap/currency' -import { Loader } from '@sushiswap/ui' +import { Loader } from '@sushiswap/ui/future/components/loader' import { ConstantProductPoolState, getTridentRouterContractConfig, diff --git a/apps/earn/pages/add/v2/[chainId]/index.tsx b/apps/earn/pages/add/v2/[chainId]/index.tsx index c0082cbb7b..739912f6cc 100644 --- a/apps/earn/pages/add/v2/[chainId]/index.tsx +++ b/apps/earn/pages/add/v2/[chainId]/index.tsx @@ -2,7 +2,7 @@ import { ArrowLeftIcon, PlusIcon } from '@heroicons/react/solid' import { Pair } from '@sushiswap/amm' import { ChainId } from '@sushiswap/chain' import { defaultQuoteCurrency, Native, tryParseAmount, Type } from '@sushiswap/currency' -import { Loader } from '@sushiswap/ui' +import { Loader } from '@sushiswap/ui/future/components/loader' import { Address, getSushiSwapRouterContractConfig, PairState, PoolFinder } from '@sushiswap/wagmi' import { AddSectionReviewModalLegacy, Layout, SelectNetworkWidget, SelectTokensWidget } from '../../../../components' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react' diff --git a/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx b/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx index 45bdd412de..bccfc2d5f2 100644 --- a/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx +++ b/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx @@ -5,10 +5,11 @@ import { nanoid } from 'nanoid' import { ChainId } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dropzone, NetworkIcon } from '@sushiswap/ui' +import { Dropzone } from '@sushiswap/ui' import { Address, fetchToken, FetchTokenResult } from '@sushiswap/wagmi' import { FC, useCallback } from 'react' import { useFieldArray, useFormContext } from 'react-hook-form' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Button } from '@sushiswap/ui/future/components/button' import dynamic from 'next/dynamic' diff --git a/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx b/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx index 9a43d9503b..e1b03f8510 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx @@ -5,10 +5,11 @@ import { nanoid } from 'nanoid' import { ChainId } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dropzone, NetworkIcon } from '@sushiswap/ui' +import { Dropzone } from '@sushiswap/ui' import { Address, fetchToken, FetchTokenResult } from '@sushiswap/wagmi' import { FC, useCallback } from 'react' import { useFieldArray, useFormContext } from 'react-hook-form' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Button } from '@sushiswap/ui/future/components/button' import { CreateMultipleVestingFormSchemaType, CreateVestingFormSchemaType } from '../schema' diff --git a/apps/furo/pages/stream/[id].tsx b/apps/furo/pages/stream/[id].tsx index e18d60bee6..c231043a74 100644 --- a/apps/furo/pages/stream/[id].tsx +++ b/apps/furo/pages/stream/[id].tsx @@ -17,10 +17,11 @@ import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowLeftIcon, ArrowRightIcon, ArrowDownIcon, ArrowUpIcon, RefreshIcon } from '@heroicons/react/solid' import { DownloadIcon, XIcon } from '@heroicons/react/outline' import { Badge } from '@sushiswap/ui/future/components/Badge' -import { classNames, NetworkIcon } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { Currency } from '@sushiswap/ui/future/components/currency' import { Address } from '@sushiswap/wagmi' import { SkeletonText, SkeletonBox, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { SplashController } from '@sushiswap/ui/future/components/SplashController' import { Blink } from '@sushiswap/ui/future/components/Blink' diff --git a/apps/furo/pages/vesting/[id].tsx b/apps/furo/pages/vesting/[id].tsx index e4d7d98f3a..4fbb5f5e07 100644 --- a/apps/furo/pages/vesting/[id].tsx +++ b/apps/furo/pages/vesting/[id].tsx @@ -1,4 +1,4 @@ -import { classNames, NetworkIcon, ProgressColor } from '@sushiswap/ui' +import { classNames, ProgressColor } from '@sushiswap/ui' import { useRouter } from 'next/router' import { NextSeo } from 'next-seo' import React, { FC, useMemo } from 'react' @@ -9,6 +9,7 @@ import Link from 'next/link' import { IconButton } from '@sushiswap/ui/future/components/iconbutton' import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckCircleIcon } from '@heroicons/react/solid' import { SkeletonText, SkeletonBox, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { List } from '@sushiswap/ui/future/components/list/List' import { Badge } from '@sushiswap/ui/future/components/Badge' diff --git a/packages/ui/src/future/components/Loader.tsx b/packages/ui/src/future/components/Loader.tsx index cae4e01fd5..2b0456e069 100644 --- a/packages/ui/src/future/components/Loader.tsx +++ b/packages/ui/src/future/components/Loader.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames' -import React, { FC } from 'react' +import { Transition } from '@headlessui/react' +import React, { FC, Fragment } from 'react' +import { SushiIcon } from './icons' interface LoaderProps extends React.ComponentProps<'svg'> { size?: number @@ -41,3 +43,29 @@ export const Loader: FC = ({ size = 16, strokeWidth = 2, circleClas ) } + +/** + * @deprecated + */ +export const LoadingOverlay: FC<{ show?: boolean }> = ({ show }) => { + return ( + +
+ +
+ + ) +} + +export const LogoLoader: FC = (props) => { + return +} diff --git a/packages/ui/src/icons/DangerousIcon.tsx b/packages/ui/src/future/components/icons/DangerousIcon.tsx similarity index 100% rename from packages/ui/src/icons/DangerousIcon.tsx rename to packages/ui/src/future/components/icons/DangerousIcon.tsx diff --git a/packages/ui/src/icons/GoPlusLabsIcon.tsx b/packages/ui/src/future/components/icons/GoPlusLabsIcon.tsx similarity index 100% rename from packages/ui/src/icons/GoPlusLabsIcon.tsx rename to packages/ui/src/future/components/icons/GoPlusLabsIcon.tsx diff --git a/packages/ui/src/icons/PepeIcon.tsx b/packages/ui/src/future/components/icons/PepeIcon.tsx similarity index 100% rename from packages/ui/src/icons/PepeIcon.tsx rename to packages/ui/src/future/components/icons/PepeIcon.tsx diff --git a/packages/ui/src/future/components/icons/index.ts b/packages/ui/src/future/components/icons/index.ts index f88aa5bcce..8d6e735c6d 100644 --- a/packages/ui/src/future/components/icons/index.ts +++ b/packages/ui/src/future/components/icons/index.ts @@ -6,14 +6,17 @@ export * from './CheckIcon' export * from './CircleIcon' export * from './CircleWithText' export * from './CoinbaseWalletIcon' +export * from './DangerousIcon' export * from './DiscordIcon' export * from './EtherscanIcon' export * from './GasIcon' export * from './GithubIcon' export * from './GnosisSafeIcon' +export * from './GoPlusLabsIcon' export * from './GradientCircleIcon' export * from './HalfCircleIcon' export * from './HistoryIcon' +export * from './JazzIcon' export * from './InstagramIcon' export * from './MediumIcon' export * from './MetamaskIcon' @@ -28,8 +31,7 @@ export * from './TwitterIcon' export * from './WalletConnectIcon' export * from './WalletIcon' export * from './YoutubeIcon' -export * from './ShuffleIcon' -export * from './ClassicPoolIcon' -export * from './RabbyIcon' export * from './FrameIcon' +export * from './RabbyIcon' export * from './LedgerIcon' +export * from './ShuffleIcon' diff --git a/packages/ui/src/future/components/table/GenericTable.tsx b/packages/ui/src/future/components/table/GenericTable.tsx index e31481357b..05ac3675ee 100644 --- a/packages/ui/src/future/components/table/GenericTable.tsx +++ b/packages/ui/src/future/components/table/GenericTable.tsx @@ -3,11 +3,11 @@ import { flexRender, RowData, Table as ReactTableType } from '@tanstack/react-ta import React, { ReactNode, useCallback, useState } from 'react' import { Table } from '.' import { Link } from '../../../link' -import { LoadingOverlay } from '../../../loader' import { Typography } from '../../../typography' import classNames from 'classnames' import { Popover } from '../Popover' import { useIsMounted } from '@sushiswap/hooks' +import { LoadingOverlay } from '../Loader' interface GenericTableProps { table: ReactTableType diff --git a/packages/ui/src/icons/ArrowFlatLinesUp.tsx b/packages/ui/src/icons/ArrowFlatLinesUp.tsx deleted file mode 100644 index 40211367ba..0000000000 --- a/packages/ui/src/icons/ArrowFlatLinesUp.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -export const ArrowFlatLinesUp = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - ) -} diff --git a/packages/ui/src/icons/BentoboxIcon.tsx b/packages/ui/src/icons/BentoboxIcon.tsx deleted file mode 100644 index 61d26e10ea..0000000000 --- a/packages/ui/src/icons/BentoboxIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -export const BentoboxIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/CalendarIcon.tsx b/packages/ui/src/icons/CalendarIcon.tsx deleted file mode 100644 index 1483389636..0000000000 --- a/packages/ui/src/icons/CalendarIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' - -export const CalendarIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/CarbonIcon.tsx b/packages/ui/src/icons/CarbonIcon.tsx deleted file mode 100644 index 8ba9e6ca86..0000000000 --- a/packages/ui/src/icons/CarbonIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -export const CarbonIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/CheckIcon.tsx b/packages/ui/src/icons/CheckIcon.tsx deleted file mode 100644 index 1c840486aa..0000000000 --- a/packages/ui/src/icons/CheckIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -export const CheckIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/CircleIcon.tsx b/packages/ui/src/icons/CircleIcon.tsx deleted file mode 100644 index 048708ef80..0000000000 --- a/packages/ui/src/icons/CircleIcon.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '../index' - -interface CircleWithText extends React.ComponentProps<'svg'> { - text?: string | number -} - -export const CircleIcon: FC = ({ text, className, ...props }) => { - return ( - - - {typeof text !== undefined && ( - - {text} - - )} - - ) -} diff --git a/packages/ui/src/icons/CircleWithText.tsx b/packages/ui/src/icons/CircleWithText.tsx deleted file mode 100644 index 1b0051e00f..0000000000 --- a/packages/ui/src/icons/CircleWithText.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { FC } from 'react' - -import { classNames } from '../index' - -interface CircleWithText extends React.ComponentProps<'svg'> { - text?: string | number -} - -export const CircleWithText: FC = ({ text, className, ...props }) => { - return ( - - - {typeof text !== undefined && ( - - {text} - - )} - - ) -} diff --git a/packages/ui/src/icons/CoinbaseWalletIcon.tsx b/packages/ui/src/icons/CoinbaseWalletIcon.tsx deleted file mode 100644 index 461cbdb4f6..0000000000 --- a/packages/ui/src/icons/CoinbaseWalletIcon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -export const CoinbaseWalletIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - ) -} diff --git a/packages/ui/src/icons/DiscordIcon.tsx b/packages/ui/src/icons/DiscordIcon.tsx deleted file mode 100644 index e614254af0..0000000000 --- a/packages/ui/src/icons/DiscordIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -export const DiscordIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - ) -} diff --git a/packages/ui/src/icons/EtherscanIcon.tsx b/packages/ui/src/icons/EtherscanIcon.tsx deleted file mode 100644 index 6ecf54bbdd..0000000000 --- a/packages/ui/src/icons/EtherscanIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' - -export const EtherscanIcon = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/GasIcon.tsx b/packages/ui/src/icons/GasIcon.tsx deleted file mode 100644 index 18c50b11d7..0000000000 --- a/packages/ui/src/icons/GasIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' - -export const GasIcon = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/GithubIcon.tsx b/packages/ui/src/icons/GithubIcon.tsx deleted file mode 100644 index b20f9737eb..0000000000 --- a/packages/ui/src/icons/GithubIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -export const GithubIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - ) -} diff --git a/packages/ui/src/icons/GnosisSafeIcon.tsx b/packages/ui/src/icons/GnosisSafeIcon.tsx deleted file mode 100644 index 6a23e1efd4..0000000000 --- a/packages/ui/src/icons/GnosisSafeIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const GnosisSafeIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/GradientCircleIcon.tsx b/packages/ui/src/icons/GradientCircleIcon.tsx deleted file mode 100644 index 1d3acf349a..0000000000 --- a/packages/ui/src/icons/GradientCircleIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -export const GradientCircleIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/HalfCircleIcon.tsx b/packages/ui/src/icons/HalfCircleIcon.tsx deleted file mode 100644 index 2b537c1070..0000000000 --- a/packages/ui/src/icons/HalfCircleIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const HalfCircleIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/HistoryIcon.tsx b/packages/ui/src/icons/HistoryIcon.tsx deleted file mode 100644 index cf44506682..0000000000 --- a/packages/ui/src/icons/HistoryIcon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' - -export const HistoryIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - ) -} diff --git a/packages/ui/src/icons/InstagramIcon.tsx b/packages/ui/src/icons/InstagramIcon.tsx deleted file mode 100644 index b48e86eba6..0000000000 --- a/packages/ui/src/icons/InstagramIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const InstagramIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/JazzIcon.tsx b/packages/ui/src/icons/JazzIcon.tsx deleted file mode 100644 index 179812335c..0000000000 --- a/packages/ui/src/icons/JazzIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC } from 'react' -import Jazzicon, { jsNumberForAddress } from 'react-jazzicon' - -interface JazzIconProps { - diameter: number - address: string -} - -export const JazzIcon: FC = ({ diameter, address }) => { - return -} diff --git a/packages/ui/src/icons/MediumIcon.tsx b/packages/ui/src/icons/MediumIcon.tsx deleted file mode 100644 index 0325991437..0000000000 --- a/packages/ui/src/icons/MediumIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const MediumIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/MetamaskIcon.tsx b/packages/ui/src/icons/MetamaskIcon.tsx deleted file mode 100644 index d1d1d57ee4..0000000000 --- a/packages/ui/src/icons/MetamaskIcon.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react' - -export const MetamaskIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/NetworkIcon.tsx b/packages/ui/src/icons/NetworkIcon.tsx deleted file mode 100644 index 51a0ade23c..0000000000 --- a/packages/ui/src/icons/NetworkIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ChainId } from '@sushiswap/chain' -import React, { FC, useMemo } from 'react' - -import { NETWORK_CIRCLE_ICON, NETWORK_NAKED_ICON } from './network' - -interface Props extends React.ComponentProps<'svg'> { - type?: 'naked' | 'circle' - chainId: ChainId -} - -export const NetworkIcon: FC = ({ type = 'circle', chainId, ...props }) => { - const Icon = useMemo(() => { - if (type === 'naked') { - return NETWORK_NAKED_ICON[chainId] - } - - return NETWORK_CIRCLE_ICON[chainId] - }, [chainId, type]) - - if (Icon) return - return <> -} diff --git a/packages/ui/src/icons/NotepadIcon.tsx b/packages/ui/src/icons/NotepadIcon.tsx deleted file mode 100644 index 19517256ee..0000000000 --- a/packages/ui/src/icons/NotepadIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -export const NotepadIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/OnsenIcon.tsx b/packages/ui/src/icons/OnsenIcon.tsx deleted file mode 100644 index 69761d00f9..0000000000 --- a/packages/ui/src/icons/OnsenIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -export const OnsenIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - ) -} diff --git a/packages/ui/src/icons/SushiIcon.tsx b/packages/ui/src/icons/SushiIcon.tsx deleted file mode 100644 index c3b5a02177..0000000000 --- a/packages/ui/src/icons/SushiIcon.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -export const SushiIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/SushiWithTextIcon.tsx b/packages/ui/src/icons/SushiWithTextIcon.tsx deleted file mode 100644 index d6048b34ee..0000000000 --- a/packages/ui/src/icons/SushiWithTextIcon.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' - -export const SushiWithTextIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/TrustWalletIcon.tsx b/packages/ui/src/icons/TrustWalletIcon.tsx deleted file mode 100644 index 0545ac03c6..0000000000 --- a/packages/ui/src/icons/TrustWalletIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -export const TrustWalletIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - ) -} diff --git a/packages/ui/src/icons/TwitterIcon.tsx b/packages/ui/src/icons/TwitterIcon.tsx deleted file mode 100644 index abd3a6522e..0000000000 --- a/packages/ui/src/icons/TwitterIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const TwitterIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/WalletConnectIcon.tsx b/packages/ui/src/icons/WalletConnectIcon.tsx deleted file mode 100644 index e7f4b29145..0000000000 --- a/packages/ui/src/icons/WalletConnectIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -export const WalletConnectIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - ) -} diff --git a/packages/ui/src/icons/WalletIcon.tsx b/packages/ui/src/icons/WalletIcon.tsx deleted file mode 100644 index cb5a3c4e59..0000000000 --- a/packages/ui/src/icons/WalletIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -export const WalletIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/YoutubeIcon.tsx b/packages/ui/src/icons/YoutubeIcon.tsx deleted file mode 100644 index 85750a1612..0000000000 --- a/packages/ui/src/icons/YoutubeIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const YoutubeIcon = (props: React.ComponentProps<'svg'>) => { - return ( - - - - ) -} diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts deleted file mode 100644 index f2c0536a0e..0000000000 --- a/packages/ui/src/icons/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -export * from './ArrowFlatLinesUp' -export * from './BentoboxIcon' -export * from './CalendarIcon' -export * from './CarbonIcon' -export * from './CheckIcon' -export * from './CircleIcon' -export * from './CircleWithText' -export * from './CoinbaseWalletIcon' -export * from './DangerousIcon' -export * from './DiscordIcon' -export * from './EtherscanIcon' -export * from './GasIcon' -export * from './GithubIcon' -export * from './GnosisSafeIcon' -export * from './GoPlusLabsIcon' -export * from './GradientCircleIcon' -export * from './HalfCircleIcon' -export * from './HistoryIcon' -export * from './JazzIcon' -export * from './InstagramIcon' -export * from './MediumIcon' -export * from './MetamaskIcon' -export * from './network' -export * from './NetworkIcon' -export * from './NotepadIcon' -export * from './OnsenIcon' -export * from './SushiIcon' -export * from './SushiWithTextIcon' -export * from './TrustWalletIcon' -export * from './TwitterIcon' -export * from './WalletConnectIcon' -export * from './WalletIcon' -export * from './YoutubeIcon' diff --git a/packages/ui/src/icons/network/circle/ArbitrumCircle.tsx b/packages/ui/src/icons/network/circle/ArbitrumCircle.tsx deleted file mode 100644 index 14c82d6f76..0000000000 --- a/packages/ui/src/icons/network/circle/ArbitrumCircle.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' - -export const ArbitrumCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/ArbitrumNovaCircle.tsx b/packages/ui/src/icons/network/circle/ArbitrumNovaCircle.tsx deleted file mode 100644 index f252c2f189..0000000000 --- a/packages/ui/src/icons/network/circle/ArbitrumNovaCircle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' - -export const ArbitrumNovaCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/AvalancheCircle.tsx b/packages/ui/src/icons/network/circle/AvalancheCircle.tsx deleted file mode 100644 index 8100333c61..0000000000 --- a/packages/ui/src/icons/network/circle/AvalancheCircle.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' - -export const AvalancheCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - -) diff --git a/packages/ui/src/icons/network/circle/BinanceCircle.tsx b/packages/ui/src/icons/network/circle/BinanceCircle.tsx deleted file mode 100644 index 74651a8cdb..0000000000 --- a/packages/ui/src/icons/network/circle/BinanceCircle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' - -export const BinanceCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/BobaAvaxCircle.tsx b/packages/ui/src/icons/network/circle/BobaAvaxCircle.tsx deleted file mode 100644 index 14f1ab7d3d..0000000000 --- a/packages/ui/src/icons/network/circle/BobaAvaxCircle.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react' - -export const BobaAvaxCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/BobaBNBCircle.tsx b/packages/ui/src/icons/network/circle/BobaBNBCircle.tsx deleted file mode 100644 index 25dab64478..0000000000 --- a/packages/ui/src/icons/network/circle/BobaBNBCircle.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react' - -export const BobaBNBCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/BobaCircle.tsx b/packages/ui/src/icons/network/circle/BobaCircle.tsx deleted file mode 100644 index a51b22c070..0000000000 --- a/packages/ui/src/icons/network/circle/BobaCircle.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react' - -export const BobaCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/BttcCircle.tsx b/packages/ui/src/icons/network/circle/BttcCircle.tsx deleted file mode 100644 index 4faef50200..0000000000 --- a/packages/ui/src/icons/network/circle/BttcCircle.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react' - -export const BttcCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/CeloCircle.tsx b/packages/ui/src/icons/network/circle/CeloCircle.tsx deleted file mode 100644 index f03e97f610..0000000000 --- a/packages/ui/src/icons/network/circle/CeloCircle.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' - -export const CeloCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/EthereumCircle.tsx b/packages/ui/src/icons/network/circle/EthereumCircle.tsx deleted file mode 100644 index 3580b2a86f..0000000000 --- a/packages/ui/src/icons/network/circle/EthereumCircle.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' - -export const EthereumCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/FantomCircle.tsx b/packages/ui/src/icons/network/circle/FantomCircle.tsx deleted file mode 100644 index 3e6da9845f..0000000000 --- a/packages/ui/src/icons/network/circle/FantomCircle.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' - -export const FantomCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/FuseCircle.tsx b/packages/ui/src/icons/network/circle/FuseCircle.tsx deleted file mode 100644 index 7193856715..0000000000 --- a/packages/ui/src/icons/network/circle/FuseCircle.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react' - -export const FuseCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/GnosisCircle.tsx b/packages/ui/src/icons/network/circle/GnosisCircle.tsx deleted file mode 100644 index e2d621f114..0000000000 --- a/packages/ui/src/icons/network/circle/GnosisCircle.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react' - -export const GnosisCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/HarmonyCircle.tsx b/packages/ui/src/icons/network/circle/HarmonyCircle.tsx deleted file mode 100644 index b52a972499..0000000000 --- a/packages/ui/src/icons/network/circle/HarmonyCircle.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' - -export const HarmonyCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/HecoCircle.tsx b/packages/ui/src/icons/network/circle/HecoCircle.tsx deleted file mode 100644 index 836217346d..0000000000 --- a/packages/ui/src/icons/network/circle/HecoCircle.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' - -export const HecoCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - -) diff --git a/packages/ui/src/icons/network/circle/KavaCircle.tsx b/packages/ui/src/icons/network/circle/KavaCircle.tsx deleted file mode 100644 index 42ea727d6e..0000000000 --- a/packages/ui/src/icons/network/circle/KavaCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' - -export const KavaCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/MetisCircle.tsx b/packages/ui/src/icons/network/circle/MetisCircle.tsx deleted file mode 100644 index db9fb0e3f3..0000000000 --- a/packages/ui/src/icons/network/circle/MetisCircle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' - -export const MetisCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/MoonbeamCircle.tsx b/packages/ui/src/icons/network/circle/MoonbeamCircle.tsx deleted file mode 100644 index 998df6da62..0000000000 --- a/packages/ui/src/icons/network/circle/MoonbeamCircle.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react' - -export const MoonbeamCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/MoonriverCircle.tsx b/packages/ui/src/icons/network/circle/MoonriverCircle.tsx deleted file mode 100644 index 00a51fb3a9..0000000000 --- a/packages/ui/src/icons/network/circle/MoonriverCircle.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react' - -export const MoonriverCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/OkexCircle.tsx b/packages/ui/src/icons/network/circle/OkexCircle.tsx deleted file mode 100644 index 3873210e86..0000000000 --- a/packages/ui/src/icons/network/circle/OkexCircle.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' - -export const OkexCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/OptimismCircle.tsx b/packages/ui/src/icons/network/circle/OptimismCircle.tsx deleted file mode 100644 index 378cd0004d..0000000000 --- a/packages/ui/src/icons/network/circle/OptimismCircle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' - -export const OptimismCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/PalmCircle.tsx b/packages/ui/src/icons/network/circle/PalmCircle.tsx deleted file mode 100644 index 06dff9c217..0000000000 --- a/packages/ui/src/icons/network/circle/PalmCircle.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react' - -export const PalmCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/PolygonCircle.tsx b/packages/ui/src/icons/network/circle/PolygonCircle.tsx deleted file mode 100644 index d12da7b605..0000000000 --- a/packages/ui/src/icons/network/circle/PolygonCircle.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' - -export const PolygonCircle = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/circle/TelosCircle.tsx b/packages/ui/src/icons/network/circle/TelosCircle.tsx deleted file mode 100644 index 4eebb935b9..0000000000 --- a/packages/ui/src/icons/network/circle/TelosCircle.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' - -export const TelosCircle = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/circle/ThunderCoreCircle.tsx b/packages/ui/src/icons/network/circle/ThunderCoreCircle.tsx deleted file mode 100644 index 052988dbbb..0000000000 --- a/packages/ui/src/icons/network/circle/ThunderCoreCircle.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -export const ThunderCoreCircle = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/network/circle/index.tsx b/packages/ui/src/icons/network/circle/index.tsx deleted file mode 100644 index 4e425c0ee6..0000000000 --- a/packages/ui/src/icons/network/circle/index.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ChainId } from '@sushiswap/chain' -import * as React from 'react' - -import { ArbitrumCircle } from './ArbitrumCircle' -import { ArbitrumNovaCircle } from './ArbitrumNovaCircle' -import { AvalancheCircle } from './AvalancheCircle' -import { BinanceCircle } from './BinanceCircle' -import { BobaCircle } from './BobaCircle' -import { BobaBNBCircle } from './BobaBNBCircle' -import { BobaAvaxCircle } from './BobaAvaxCircle' -import { BttcCircle } from './BttcCircle' -import { CeloCircle } from './CeloCircle' -import { EthereumCircle } from './EthereumCircle' -import { FantomCircle } from './FantomCircle' -import { FuseCircle } from './FuseCircle' -import { GnosisCircle } from './GnosisCircle' -import { HarmonyCircle } from './HarmonyCircle' -import { HecoCircle } from './HecoCircle' -import { KavaCircle } from './KavaCircle' -import { MetisCircle } from './MetisCircle' -import { MoonbeamCircle } from './MoonbeamCircle' -import { MoonriverCircle } from './MoonriverCircle' -import { OkexCircle } from './OkexCircle' -import { OptimismCircle } from './OptimismCircle' -import { PalmCircle } from './PalmCircle' -import { PolygonCircle } from './PolygonCircle' -import { TelosCircle } from './TelosCircle' -import { ThunderCoreCircle } from './ThunderCoreCircle' -import { PolygonZKCircle } from '../../../future/components/icons' - -export * from './ArbitrumCircle' -export * from './ArbitrumNovaCircle' -export * from './AvalancheCircle' -export * from './BinanceCircle' -export * from './BobaCircle' -export * from './BobaBNBCircle' -export * from './BobaAvaxCircle' -export * from './BttcCircle' -export * from './CeloCircle' -export * from './EthereumCircle' -export * from './FantomCircle' -export * from './FuseCircle' -export * from './GnosisCircle' -export * from './HarmonyCircle' -export * from './HecoCircle' -export * from './KavaCircle' -export * from './MetisCircle' -export * from './MoonbeamCircle' -export * from './MoonriverCircle' -export * from './OkexCircle' -export * from './OptimismCircle' -export * from './PalmCircle' -export * from './PolygonCircle' -export * from './TelosCircle' -export * from './ThunderCoreCircle' - -export const NETWORK_CIRCLE_ICON: Record) => JSX.Element> = { - [ChainId.ETHEREUM]: EthereumCircle, - [ChainId.FANTOM]: FantomCircle, - [ChainId.POLYGON]: PolygonCircle, - [ChainId.GNOSIS]: GnosisCircle, - [ChainId.BSC]: BinanceCircle, - [ChainId.ARBITRUM]: ArbitrumCircle, - [ChainId.AVALANCHE]: AvalancheCircle, - [ChainId.HARMONY]: HarmonyCircle, - [ChainId.CELO]: CeloCircle, - [ChainId.MOONRIVER]: MoonriverCircle, - [ChainId.FUSE]: FuseCircle, - [ChainId.TELOS]: TelosCircle, - [ChainId.MOONBEAM]: MoonbeamCircle, - [ChainId.OPTIMISM]: OptimismCircle, - [ChainId.METIS]: MetisCircle, - [ChainId.KAVA]: KavaCircle, - [ChainId.ARBITRUM_NOVA]: ArbitrumNovaCircle, - [ChainId.HECO]: HecoCircle, - [ChainId.OKEX]: OkexCircle, - [ChainId.PALM]: PalmCircle, - [ChainId.BOBA]: BobaCircle, - [ChainId.BOBA_AVAX]: BobaAvaxCircle, - [ChainId.BOBA_BNB]: BobaBNBCircle, - [ChainId.BTTC]: BttcCircle, - [ChainId.POLYGON_ZKEVM]: PolygonZKCircle, - [ChainId.THUNDERCORE]: ThunderCoreCircle, -} diff --git a/packages/ui/src/icons/network/index.ts b/packages/ui/src/icons/network/index.ts deleted file mode 100644 index 573616f415..0000000000 --- a/packages/ui/src/icons/network/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './circle' -export * from './naked' diff --git a/packages/ui/src/icons/network/naked/ArbitrumNaked.tsx b/packages/ui/src/icons/network/naked/ArbitrumNaked.tsx deleted file mode 100644 index c3eb95b51e..0000000000 --- a/packages/ui/src/icons/network/naked/ArbitrumNaked.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react' - -export const ArbitrumNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/ArbitrumNovaNaked.tsx b/packages/ui/src/icons/network/naked/ArbitrumNovaNaked.tsx deleted file mode 100644 index c7988f57c2..0000000000 --- a/packages/ui/src/icons/network/naked/ArbitrumNovaNaked.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' - -export const ArbitrumNovaNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/AvalancheNaked.tsx b/packages/ui/src/icons/network/naked/AvalancheNaked.tsx deleted file mode 100644 index f82dac54ee..0000000000 --- a/packages/ui/src/icons/network/naked/AvalancheNaked.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' - -export const AvalancheNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/BinanceNaked.tsx b/packages/ui/src/icons/network/naked/BinanceNaked.tsx deleted file mode 100644 index 46a2baa131..0000000000 --- a/packages/ui/src/icons/network/naked/BinanceNaked.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' - -export const BinanceNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/BobaAvaxNaked.tsx b/packages/ui/src/icons/network/naked/BobaAvaxNaked.tsx deleted file mode 100644 index 0df175e22a..0000000000 --- a/packages/ui/src/icons/network/naked/BobaAvaxNaked.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react' - -export const BobaAvaxNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/BobaBNBNaked.tsx b/packages/ui/src/icons/network/naked/BobaBNBNaked.tsx deleted file mode 100644 index d9c4a91b62..0000000000 --- a/packages/ui/src/icons/network/naked/BobaBNBNaked.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react' - -export const BobaBNBNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/BobaNaked.tsx b/packages/ui/src/icons/network/naked/BobaNaked.tsx deleted file mode 100644 index 5abff8942c..0000000000 --- a/packages/ui/src/icons/network/naked/BobaNaked.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react' - -export const BobaNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/BttcNaked.tsx b/packages/ui/src/icons/network/naked/BttcNaked.tsx deleted file mode 100644 index 353cda44d5..0000000000 --- a/packages/ui/src/icons/network/naked/BttcNaked.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react' - -export const BttcNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/CeloNaked.tsx b/packages/ui/src/icons/network/naked/CeloNaked.tsx deleted file mode 100644 index 2d6596e7a5..0000000000 --- a/packages/ui/src/icons/network/naked/CeloNaked.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' - -export const CeloNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - -) diff --git a/packages/ui/src/icons/network/naked/EthereumNaked.tsx b/packages/ui/src/icons/network/naked/EthereumNaked.tsx deleted file mode 100644 index a27aef894f..0000000000 --- a/packages/ui/src/icons/network/naked/EthereumNaked.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' - -export const EthereumNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/FantomNaked.tsx b/packages/ui/src/icons/network/naked/FantomNaked.tsx deleted file mode 100644 index 6e096ed7a0..0000000000 --- a/packages/ui/src/icons/network/naked/FantomNaked.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' - -export const FantomNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/FuseNaked.tsx b/packages/ui/src/icons/network/naked/FuseNaked.tsx deleted file mode 100644 index d09af5500d..0000000000 --- a/packages/ui/src/icons/network/naked/FuseNaked.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react' - -export const FuseNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/GnosisNaked.tsx b/packages/ui/src/icons/network/naked/GnosisNaked.tsx deleted file mode 100644 index 916d39465f..0000000000 --- a/packages/ui/src/icons/network/naked/GnosisNaked.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' - -export const GnosisNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/HarmonyNaked.tsx b/packages/ui/src/icons/network/naked/HarmonyNaked.tsx deleted file mode 100644 index e4793c5a5a..0000000000 --- a/packages/ui/src/icons/network/naked/HarmonyNaked.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' - -export const HarmonyNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/HecoNaked.tsx b/packages/ui/src/icons/network/naked/HecoNaked.tsx deleted file mode 100644 index 9d9370816c..0000000000 --- a/packages/ui/src/icons/network/naked/HecoNaked.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' - -export const HecoNaked = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/naked/KavaNaked.tsx b/packages/ui/src/icons/network/naked/KavaNaked.tsx deleted file mode 100644 index d3157d8bd9..0000000000 --- a/packages/ui/src/icons/network/naked/KavaNaked.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' - -export const KavaNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/MetisNaked.tsx b/packages/ui/src/icons/network/naked/MetisNaked.tsx deleted file mode 100644 index 2b4d03f67d..0000000000 --- a/packages/ui/src/icons/network/naked/MetisNaked.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' - -export const MetisNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/MoonbeamNaked.tsx b/packages/ui/src/icons/network/naked/MoonbeamNaked.tsx deleted file mode 100644 index 9739829a8a..0000000000 --- a/packages/ui/src/icons/network/naked/MoonbeamNaked.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' - -export const MoonbeamNaked = (props: React.ComponentProps<'svg'>) => ( - - - - -) diff --git a/packages/ui/src/icons/network/naked/MoonriverNaked.tsx b/packages/ui/src/icons/network/naked/MoonriverNaked.tsx deleted file mode 100644 index d98d8cdd0e..0000000000 --- a/packages/ui/src/icons/network/naked/MoonriverNaked.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react' - -export const MoonriverNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/OkexNaked.tsx b/packages/ui/src/icons/network/naked/OkexNaked.tsx deleted file mode 100644 index f7dfebd743..0000000000 --- a/packages/ui/src/icons/network/naked/OkexNaked.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react' - -export const OkexNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/OptimismNaked.tsx b/packages/ui/src/icons/network/naked/OptimismNaked.tsx deleted file mode 100644 index 6c5f649af0..0000000000 --- a/packages/ui/src/icons/network/naked/OptimismNaked.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react' - -export const OptimismNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/PalmNaked.tsx b/packages/ui/src/icons/network/naked/PalmNaked.tsx deleted file mode 100644 index 768e33853c..0000000000 --- a/packages/ui/src/icons/network/naked/PalmNaked.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react' - -export const PalmNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/PolygonNaked.tsx b/packages/ui/src/icons/network/naked/PolygonNaked.tsx deleted file mode 100644 index 00d54d396d..0000000000 --- a/packages/ui/src/icons/network/naked/PolygonNaked.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react' - -export const PolygonNaked = (props: React.ComponentProps<'svg'>) => ( - - - - - - - - - - -) diff --git a/packages/ui/src/icons/network/naked/TelosNaked.tsx b/packages/ui/src/icons/network/naked/TelosNaked.tsx deleted file mode 100644 index 9eb39b0581..0000000000 --- a/packages/ui/src/icons/network/naked/TelosNaked.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' - -export const TelosNaked = (props: React.ComponentProps<'svg'>) => ( - - - -) diff --git a/packages/ui/src/icons/network/naked/ThunderCoreNaked.tsx b/packages/ui/src/icons/network/naked/ThunderCoreNaked.tsx deleted file mode 100644 index dfa5bb75e1..0000000000 --- a/packages/ui/src/icons/network/naked/ThunderCoreNaked.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -export const ThunderCoreNaked = (props: React.ComponentProps<'svg'>) => { - return ( - - - - - - - - - - - - - - - - ) -} diff --git a/packages/ui/src/icons/network/naked/index.tsx b/packages/ui/src/icons/network/naked/index.tsx deleted file mode 100644 index 126cc10608..0000000000 --- a/packages/ui/src/icons/network/naked/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { ChainId } from '@sushiswap/chain' -import React from 'react' - -import { ArbitrumNaked } from './ArbitrumNaked' -import { ArbitrumNovaNaked } from './ArbitrumNovaNaked' -import { AvalancheNaked } from './AvalancheNaked' -import { BinanceNaked } from './BinanceNaked' -import { BobaNaked } from './BobaNaked' -import { BobaBNBNaked } from './BobaBNBNaked' -import { BobaAvaxNaked } from './BobaAvaxNaked' -import { BttcNaked } from './BttcNaked' -import { CeloNaked } from './CeloNaked' -import { EthereumNaked } from './EthereumNaked' -import { FantomNaked } from './FantomNaked' -import { FuseNaked } from './FuseNaked' -import { GnosisNaked } from './GnosisNaked' -import { HarmonyNaked } from './HarmonyNaked' -import { HecoNaked } from './HecoNaked' -import { KavaNaked } from './KavaNaked' -import { MetisNaked } from './MetisNaked' -import { MoonbeamNaked } from './MoonbeamNaked' -import { MoonriverNaked } from './MoonriverNaked' -import { OkexNaked } from './OkexNaked' -import { OptimismNaked } from './OptimismNaked' -import { PalmNaked } from './PalmNaked' -import { PolygonNaked } from './PolygonNaked' -import { TelosNaked } from './TelosNaked' -import { ThunderCoreNaked } from './ThunderCoreNaked' - -export * from './ArbitrumNaked' -export * from './ArbitrumNovaNaked' -export * from './AvalancheNaked' -export * from './BinanceNaked' -export * from './BobaNaked' -export * from './BobaBNBNaked' -export * from './BobaAvaxNaked' -export * from './BttcNaked' -export * from './CeloNaked' -export * from './EthereumNaked' -export * from './FantomNaked' -export * from './FuseNaked' -export * from './GnosisNaked' -export * from './HarmonyNaked' -export * from './HecoNaked' -export * from './KavaNaked' -export * from './MetisNaked' -export * from './MoonbeamNaked' -export * from './MoonriverNaked' -export * from './OkexNaked' -export * from './OptimismNaked' -export * from './PalmNaked' -export * from './PolygonNaked' -export * from './TelosNaked' -export * from './ThunderCoreNaked' - -export const NETWORK_NAKED_ICON: Record) => JSX.Element> = { - [ChainId.ETHEREUM]: EthereumNaked, - [ChainId.FANTOM]: FantomNaked, - [ChainId.POLYGON]: PolygonNaked, - [ChainId.GNOSIS]: GnosisNaked, - [ChainId.BSC]: BinanceNaked, - [ChainId.ARBITRUM]: ArbitrumNaked, - [ChainId.AVALANCHE]: AvalancheNaked, - [ChainId.HARMONY]: HarmonyNaked, - [ChainId.CELO]: CeloNaked, - [ChainId.MOONRIVER]: MoonriverNaked, - [ChainId.FUSE]: FuseNaked, - [ChainId.TELOS]: TelosNaked, - [ChainId.MOONBEAM]: MoonbeamNaked, - [ChainId.OPTIMISM]: OptimismNaked, - [ChainId.KAVA]: KavaNaked, - [ChainId.METIS]: MetisNaked, - [ChainId.ARBITRUM_NOVA]: ArbitrumNovaNaked, - [ChainId.HECO]: HecoNaked, - [ChainId.OKEX]: OkexNaked, - [ChainId.PALM]: PalmNaked, - [ChainId.BOBA]: BobaNaked, - [ChainId.BOBA_AVAX]: BobaAvaxNaked, - [ChainId.BOBA_BNB]: BobaBNBNaked, - [ChainId.BTTC]: BttcNaked, - [ChainId.THUNDERCORE]: ThunderCoreNaked, -} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index f733bd1fe7..8db14db23d 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,10 +1,8 @@ import './globals.css' export * from './dropzone' -export * from './icons' export * from './input' export * from './link' -export * from './loader' export * from './progressbar' export * from './theme' export * from './types' diff --git a/packages/ui/src/loader/Loader.tsx b/packages/ui/src/loader/Loader.tsx deleted file mode 100644 index 8fe6964924..0000000000 --- a/packages/ui/src/loader/Loader.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FC } from 'react' - -import { LoaderProps } from './types' - -/** - * @deprecated - */ -export const Loader: FC = ({ size = 16 }) => { - return ( - - - - - ) -} diff --git a/packages/ui/src/loader/LogoLoader.tsx b/packages/ui/src/loader/LogoLoader.tsx deleted file mode 100644 index 200fee33f3..0000000000 --- a/packages/ui/src/loader/LogoLoader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { FC } from 'react' - -import { SushiIcon } from '../icons' -import { LoaderProps } from './types' - -/** - * @deprecated - */ -export const LogoLoader: FC = (props) => { - return -} diff --git a/packages/ui/src/loader/LogoOverlay.tsx b/packages/ui/src/loader/LogoOverlay.tsx deleted file mode 100644 index 557a0432d4..0000000000 --- a/packages/ui/src/loader/LogoOverlay.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Transition } from '@headlessui/react' -import React, { FC, Fragment } from 'react' - -import { LogoLoader } from './LogoLoader' - -/** - * @deprecated - */ -export const LoadingOverlay: FC<{ show?: boolean }> = ({ show }) => { - return ( - -
- -
- - ) -} diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx deleted file mode 100644 index 5eefbf92fb..0000000000 --- a/packages/ui/src/loader/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './Loader' -export * from './LogoLoader' -export * from './LogoOverlay' diff --git a/packages/ui/src/loader/types.ts b/packages/ui/src/loader/types.ts deleted file mode 100644 index bd05b40a39..0000000000 --- a/packages/ui/src/loader/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react' - -export interface LoaderProps extends React.ComponentProps<'svg'> { - size?: number - stroke?: string -} diff --git a/packages/wagmi/src/future/components/ConnectButton.tsx b/packages/wagmi/src/future/components/ConnectButton.tsx index a640665e43..eeeed8f3c7 100644 --- a/packages/wagmi/src/future/components/ConnectButton.tsx +++ b/packages/wagmi/src/future/components/ConnectButton.tsx @@ -4,13 +4,13 @@ import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline' import { Button, ButtonComponent } from '@sushiswap/ui/future/components/button' import { CoinbaseWalletIcon, - FrameIcon, GnosisSafeIcon, MetamaskIcon, - RabbyIcon, TrustWalletIcon, WalletConnectIcon, - LedgerIcon, + RabbyIcon, + FrameIcon, + LedgerIcon } from '@sushiswap/ui/future/components/icons' import { List } from '@sushiswap/ui/future/components/list/List' import { Loader } from '@sushiswap/ui/future/components/Loader' diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx index d75c121d18..5e189f63b6 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx @@ -9,7 +9,7 @@ import { Overlay } from '@sushiswap/ui/future/components/overlay' import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react' import { shortenAddress } from '@sushiswap/format' import { useTokenSecurity } from '@sushiswap/react-query' -import { DangerousIcon, GoPlusLabsIcon } from '@sushiswap/ui/icons' +import { DangerousIcon, GoPlusLabsIcon } from '@sushiswap/ui/future/components/icons' import { Link } from '@sushiswap/ui' interface TokenSelectorImportRow { From 317fdb221d6e582f7f3f37530b51d4fe19ef3479 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 13:56:12 +0100 Subject: [PATCH 15/59] fix(packages/ui): progressbar --- apps/_root/app/(landing)/providers.tsx | 2 +- apps/_root/app/swap/providers.tsx | 2 +- apps/academy/pages/_app.tsx | 2 +- apps/analytics/pages/_app.tsx | 2 +- apps/blog/pages/_app.tsx | 2 +- apps/earn/pages/_app.tsx | 2 +- apps/furo/components/Table/StreamedCell.tsx | 11 +-- .../CreateMultipleForm/ImportZoneSection.tsx | 2 +- .../CreateMultipleForm/ImportZoneSection.tsx | 2 +- apps/furo/pages/_app.tsx | 2 +- apps/furo/pages/vesting/[id].tsx | 10 +-- packages/ui/package.json | 1 + packages/ui/src/dropzone/index.ts | 1 - .../src/{theme => future}/ThemeProvider.tsx | 4 +- .../components/dropzone.tsx} | 2 - .../ui/src/future/components/progress.tsx | 27 ++++++++ packages/ui/src/index.ts | 3 - packages/ui/src/progressbar/ProgressBar.tsx | 68 ------------------- packages/ui/src/progressbar/index.ts | 1 - packages/ui/src/theme/index.ts | 1 - pnpm-lock.yaml | 24 +++++++ 21 files changed, 68 insertions(+), 103 deletions(-) delete mode 100644 packages/ui/src/dropzone/index.ts rename packages/ui/src/{theme => future}/ThemeProvider.tsx (84%) rename packages/ui/src/{dropzone/Dropzone.tsx => future/components/dropzone.tsx} (99%) create mode 100644 packages/ui/src/future/components/progress.tsx delete mode 100644 packages/ui/src/progressbar/ProgressBar.tsx delete mode 100644 packages/ui/src/progressbar/index.ts delete mode 100644 packages/ui/src/theme/index.ts diff --git a/apps/_root/app/(landing)/providers.tsx b/apps/_root/app/(landing)/providers.tsx index bcd299c691..849bbd8237 100644 --- a/apps/_root/app/(landing)/providers.tsx +++ b/apps/_root/app/(landing)/providers.tsx @@ -1,6 +1,6 @@ 'use client' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' export function Providers({ children }: { children: React.ReactNode }) { return {children} diff --git a/apps/_root/app/swap/providers.tsx b/apps/_root/app/swap/providers.tsx index 83cc1819b7..5d128c89e0 100644 --- a/apps/_root/app/swap/providers.tsx +++ b/apps/_root/app/swap/providers.tsx @@ -3,7 +3,7 @@ import { SwapProvider } from 'ui/swap/trade/TradeProvider' import { TokenProvider } from 'ui/swap/token/TokenProvider' import { SplashController } from '@sushiswap/ui/future/components/SplashController' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' export function Providers({ children }: { children: React.ReactNode }) { return ( diff --git a/apps/academy/pages/_app.tsx b/apps/academy/pages/_app.tsx index 753ed38b5a..c26bdcd1d9 100644 --- a/apps/academy/pages/_app.tsx +++ b/apps/academy/pages/_app.tsx @@ -3,7 +3,7 @@ import '../index.css' import '../variables.css' import { Cloudinary } from '@cloudinary/url-gen' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' import type { AppContext, AppProps } from 'next/app' import { default as NextApp } from 'next/app' import { useRouter } from 'next/router' diff --git a/apps/analytics/pages/_app.tsx b/apps/analytics/pages/_app.tsx index d28c0c52e2..4c3e527859 100644 --- a/apps/analytics/pages/_app.tsx +++ b/apps/analytics/pages/_app.tsx @@ -1,7 +1,7 @@ import '@sushiswap/ui/index.css' import '../variables.css' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' import { client } from '@sushiswap/wagmi' import { Analytics } from '@vercel/analytics/react' import { SUPPORTED_CHAIN_IDS } from 'config' diff --git a/apps/blog/pages/_app.tsx b/apps/blog/pages/_app.tsx index 5afc344efe..3bcf985e9e 100644 --- a/apps/blog/pages/_app.tsx +++ b/apps/blog/pages/_app.tsx @@ -3,7 +3,7 @@ import '../index.css' import '../variables.css' import { Cloudinary } from '@cloudinary/url-gen' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' import { Analytics } from '@vercel/analytics/react' import type { AppContext, AppProps } from 'next/app' import { default as NextApp } from 'next/app' diff --git a/apps/earn/pages/_app.tsx b/apps/earn/pages/_app.tsx index 35006131e2..cbe6cf7bf5 100644 --- a/apps/earn/pages/_app.tsx +++ b/apps/earn/pages/_app.tsx @@ -1,6 +1,6 @@ import '@sushiswap/ui/index.css' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' import { Analytics } from '@vercel/analytics/react' import { Header } from '../components' import { SUPPORTED_CHAIN_IDS } from '../config' diff --git a/apps/furo/components/Table/StreamedCell.tsx b/apps/furo/components/Table/StreamedCell.tsx index 9d7d4cd66f..77bc028fa0 100644 --- a/apps/furo/components/Table/StreamedCell.tsx +++ b/apps/furo/components/Table/StreamedCell.tsx @@ -1,7 +1,7 @@ -import { ProgressBar, ProgressColor } from '@sushiswap/ui' import React, { FC } from 'react' import { CellProps } from './types' +import { Progress } from '@sushiswap/ui/future/components/progress' export const StreamedCell: FC = ({ row }) => { if (row.streamedPercentage?.toFixed() === '100.00') { @@ -12,12 +12,5 @@ export const StreamedCell: FC = ({ row }) => { return Cancelled } - return ( - - ) + return } diff --git a/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx b/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx index bccfc2d5f2..3e710fe0b2 100644 --- a/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx +++ b/apps/furo/components/stream/CreateMultipleForm/ImportZoneSection.tsx @@ -5,7 +5,6 @@ import { nanoid } from 'nanoid' import { ChainId } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dropzone } from '@sushiswap/ui' import { Address, fetchToken, FetchTokenResult } from '@sushiswap/wagmi' import { FC, useCallback } from 'react' import { useFieldArray, useFormContext } from 'react-hook-form' @@ -15,6 +14,7 @@ import { Button } from '@sushiswap/ui/future/components/button' import dynamic from 'next/dynamic' import { CreateMultipleStreamFormSchemaType, CreateStreamFormSchemaType } from '../schema' import { FormSection } from '@sushiswap/ui/future/components/form' +import { Dropzone } from '@sushiswap/ui/future/components/dropzone' interface ImportZoneSection { chainId: ChainId diff --git a/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx b/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx index e1b03f8510..f2e26f9603 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/ImportZoneSection.tsx @@ -5,7 +5,7 @@ import { nanoid } from 'nanoid' import { ChainId } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dropzone } from '@sushiswap/ui' +import { Dropzone } from '@sushiswap/ui/future/components/dropzone' import { Address, fetchToken, FetchTokenResult } from '@sushiswap/wagmi' import { FC, useCallback } from 'react' import { useFieldArray, useFormContext } from 'react-hook-form' diff --git a/apps/furo/pages/_app.tsx b/apps/furo/pages/_app.tsx index 5cbf80cfb8..e071b72666 100644 --- a/apps/furo/pages/_app.tsx +++ b/apps/furo/pages/_app.tsx @@ -1,6 +1,6 @@ import '@sushiswap/ui/index.css' -import { ThemeProvider } from '@sushiswap/ui' +import { ThemeProvider } from '@sushiswap/ui/future/ThemeProvider' import { client, WagmiConfig } from '@sushiswap/wagmi' import { Analytics } from '@vercel/analytics/react' import type { AppProps } from 'next/app' diff --git a/apps/furo/pages/vesting/[id].tsx b/apps/furo/pages/vesting/[id].tsx index 4fbb5f5e07..d5fd769337 100644 --- a/apps/furo/pages/vesting/[id].tsx +++ b/apps/furo/pages/vesting/[id].tsx @@ -1,4 +1,4 @@ -import { classNames, ProgressColor } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { useRouter } from 'next/router' import { NextSeo } from 'next-seo' import React, { FC, useMemo } from 'react' @@ -27,9 +27,9 @@ import { DownloadIcon, XIcon } from '@heroicons/react/outline' import { FuroStatus, useVesting, useVestingBalance, useVestingTransactions } from '../../lib' import { queryParamsSchema } from '../../lib/zod' import { Carousel } from '@sushiswap/ui/future/components/Carousel' -import ProgressBar from '@sushiswap/ui/progressbar/ProgressBar' import { Timer } from '../../components/Timer' import Container from '@sushiswap/ui/future/components/Container' +import { Progress } from '@sushiswap/ui/future/components/progress' const VestingPage = () => { const { isReady } = useRouter() @@ -336,11 +336,7 @@ const _VestingPage: FC = () => {
)} - +
) diff --git a/packages/ui/package.json b/packages/ui/package.json index 7decc7f9e1..557717654f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -67,6 +67,7 @@ "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.6", + "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-scroll-area": "^1.0.4", "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", diff --git a/packages/ui/src/dropzone/index.ts b/packages/ui/src/dropzone/index.ts deleted file mode 100644 index 145fd567e5..0000000000 --- a/packages/ui/src/dropzone/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Dropzone' diff --git a/packages/ui/src/theme/ThemeProvider.tsx b/packages/ui/src/future/ThemeProvider.tsx similarity index 84% rename from packages/ui/src/theme/ThemeProvider.tsx rename to packages/ui/src/future/ThemeProvider.tsx index 65ea121f51..cff9a2c3e0 100644 --- a/packages/ui/src/theme/ThemeProvider.tsx +++ b/packages/ui/src/future/ThemeProvider.tsx @@ -1,9 +1,9 @@ 'use client' import { FC, ReactNode } from 'react' -import { ToastContainer } from '../future/components/toast' +import { ToastContainer } from './components/toast' import { ThemeProvider as NextThemeProvider } from 'next-themes' -import { Modal } from '../future/components/modal/Modal' +import { Modal } from './components/modal/Modal' interface ThemeProvider { children: ReactNode | Array diff --git a/packages/ui/src/dropzone/Dropzone.tsx b/packages/ui/src/future/components/dropzone.tsx similarity index 99% rename from packages/ui/src/dropzone/Dropzone.tsx rename to packages/ui/src/future/components/dropzone.tsx index 9e092b1984..2ab997367f 100644 --- a/packages/ui/src/dropzone/Dropzone.tsx +++ b/packages/ui/src/future/components/dropzone.tsx @@ -2,8 +2,6 @@ import classNames from 'classnames' import { FC } from 'react' import ReactDropzone, { DropzoneProps } from 'react-dropzone' -import { Typography } from '../typography' - interface Dropzone extends DropzoneProps { label?: string } diff --git a/packages/ui/src/future/components/progress.tsx b/packages/ui/src/future/components/progress.tsx new file mode 100644 index 0000000000..7017680746 --- /dev/null +++ b/packages/ui/src/future/components/progress.tsx @@ -0,0 +1,27 @@ +'use client' + +import * as React from 'react' +import * as ProgressPrimitive from '@radix-ui/react-progress' +import { classNames } from '../../index' + +const Progress = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, value, ...props }, ref) => ( + + + +)) +Progress.displayName = ProgressPrimitive.Root.displayName + +export { Progress } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8db14db23d..bf31d22fbd 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,10 +1,7 @@ import './globals.css' -export * from './dropzone' export * from './input' export * from './link' -export * from './progressbar' -export * from './theme' export * from './types' export * from './typography' diff --git a/packages/ui/src/progressbar/ProgressBar.tsx b/packages/ui/src/progressbar/ProgressBar.tsx deleted file mode 100644 index 2c466eb017..0000000000 --- a/packages/ui/src/progressbar/ProgressBar.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import classNames from 'classnames' -import { FC } from 'react' - -export enum ProgressColor { - PINK, - BLUE, - GRADIENT, - GREEN, - GRAY, - WHITE, -} - -interface ProgressBarProps { - progress: number | string - color: ProgressColor - className?: string - showLabel?: boolean -} - -/** - * @deprecated - */ -export const ProgressBar: FC = ({ progress, color, showLabel = true, className }) => { - let fromColor - let toColor - if (color === ProgressColor.BLUE) { - fromColor = 'from-blue' - toColor = 'to-blue' - } else if (color === ProgressColor.PINK) { - fromColor = 'from-pink' - toColor = 'to-pink' - } else if (color === ProgressColor.GRADIENT) { - fromColor = 'from-blue' - toColor = 'to-pink' - } else if (color === ProgressColor.GREEN) { - fromColor = 'from-green' - toColor = 'to-green' - } else if (color === ProgressColor.GRAY) { - fromColor = 'from-gray-600 dark:from-slate-400' - toColor = 'to-gray-600 dark:to-slate-400' - } else if (color === ProgressColor.WHITE) { - fromColor = 'from-white dark:from-white' - toColor = 'to-white dark:to-white' - } - - return ( -
-
-
-
- - {showLabel ? `${(Number(progress) * 100).toFixed(1)}%` : ''} - -
-
-
- ) -} - -export default ProgressBar diff --git a/packages/ui/src/progressbar/index.ts b/packages/ui/src/progressbar/index.ts deleted file mode 100644 index 46c6736949..0000000000 --- a/packages/ui/src/progressbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ProgressBar' diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts deleted file mode 100644 index 4c611bf645..0000000000 --- a/packages/ui/src/theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ThemeProvider' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3882d6e43c..48f6e32a01 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2528,6 +2528,7 @@ importers: '@radix-ui/react-checkbox': ^1.0.4 '@radix-ui/react-label': ^2.0.2 '@radix-ui/react-popover': ^1.0.6 + '@radix-ui/react-progress': ^1.0.3 '@radix-ui/react-scroll-area': ^1.0.4 '@radix-ui/react-select': ^1.2.2 '@radix-ui/react-separator': ^1.0.3 @@ -2592,6 +2593,7 @@ importers: '@radix-ui/react-checkbox': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-label': 2.0.2_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-popover': 1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-progress': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-scroll-area': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-select': 1.2.2_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-separator': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i @@ -10923,6 +10925,28 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-progress/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-scroll-area/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==} peerDependencies: From 040e8b00264425890e8a0cd727f54537e722ce80 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 14:33:58 +0100 Subject: [PATCH 16/59] fix(packages/ui): switch out old switch with shadcn --- .../_root/ui/swap/widget/CrossChainBanner.tsx | 4 +- .../components/PoolsSection/PositionsTab.tsx | 6 +- apps/furo/components/stream/UpdateModal.tsx | 6 +- .../CreateForm/CliffDetailsSection.tsx | 2 +- packages/ui/package.json | 1 + packages/ui/src/future/components/Blink.tsx | 1 - .../ui/src/future/components/RootLayout.tsx | 10 --- .../future/components/SplashController.tsx | 1 - packages/ui/src/future/components/Switch.tsx | 84 ------------------- .../components/settings/CarbonOffset.tsx | 4 +- .../future/components/settings/ExpertMode.tsx | 4 +- .../future/components/settings/RoutingApi.tsx | 4 +- .../components/settings/SlippageTolerance.tsx | 4 +- .../ui/src/future/components/switchnew.tsx | 28 +++++++ .../components/UserProfile/SettingsView.tsx | 4 +- pnpm-lock.yaml | 29 +++++++ 16 files changed, 76 insertions(+), 116 deletions(-) delete mode 100644 packages/ui/src/future/components/RootLayout.tsx delete mode 100644 packages/ui/src/future/components/Switch.tsx create mode 100644 packages/ui/src/future/components/switchnew.tsx diff --git a/apps/_root/ui/swap/widget/CrossChainBanner.tsx b/apps/_root/ui/swap/widget/CrossChainBanner.tsx index a7e6a19c00..2525ae3ea2 100644 --- a/apps/_root/ui/swap/widget/CrossChainBanner.tsx +++ b/apps/_root/ui/swap/widget/CrossChainBanner.tsx @@ -1,5 +1,5 @@ import React, { FC, useCallback } from 'react' -import Switch from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/Switch' import { useSwapActions, useSwapState } from '../trade/TradeProvider' import { AppType } from '@sushiswap/ui/types' import { classNames } from '@sushiswap/ui' @@ -60,7 +60,7 @@ export const CrossChainBanner: FC = () => {
- +
diff --git a/apps/earn/components/PoolsSection/PositionsTab.tsx b/apps/earn/components/PoolsSection/PositionsTab.tsx index f125db9c7a..43f0309e47 100644 --- a/apps/earn/components/PoolsSection/PositionsTab.tsx +++ b/apps/earn/components/PoolsSection/PositionsTab.tsx @@ -4,7 +4,7 @@ import { Button } from '@sushiswap/ui/future/components/button' import { ConcentratedPositionsTable } from './Tables/PositionsTable/ConcentratedPositionsTable' import { PositionsTable } from './Tables' import Container from '@sushiswap/ui/future/components/Container' -import Switch from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/switch' export const PositionsTab = () => { const [hide, setHide] = useState(true) @@ -46,9 +46,9 @@ export const PositionsTab = () => { )}
-
+
Include closed - setHide((prev) => !prev)} className="scale-75" /> + setHide((prev) => !prev)} />
diff --git a/apps/furo/components/stream/UpdateModal.tsx b/apps/furo/components/stream/UpdateModal.tsx index 5b1a3731a8..022318ed63 100644 --- a/apps/furo/components/stream/UpdateModal.tsx +++ b/apps/furo/components/stream/UpdateModal.tsx @@ -194,8 +194,7 @@ export const UpdateModal: FC = withCheckerRoot( setTopUp((prevState) => !prevState)} - size="sm" + onCheckedChange={() => setTopUp((prevState) => !prevState)} />
@@ -214,8 +213,7 @@ export const UpdateModal: FC = withCheckerRoot( setChangeEndDate((prevState) => !prevState)} - size="sm" + onCheckedChange={() => setChangeEndDate((prevState) => !prevState)} />
diff --git a/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx b/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx index 26909f4744..e67605572f 100644 --- a/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx +++ b/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx @@ -30,7 +30,7 @@ export const CliffDetailsSection: FC<{ index: number }> = ({ index }) => { render={({ field: { value, onChange } }) => ( - + diff --git a/packages/ui/package.json b/packages/ui/package.json index 557717654f..c68714a78f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -72,6 +72,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.6", "@react-hook/window-scroll": "1.3.0", "@sushiswap/chain": "workspace:*", diff --git a/packages/ui/src/future/components/Blink.tsx b/packages/ui/src/future/components/Blink.tsx index e6c6138c47..1132aea636 100644 --- a/packages/ui/src/future/components/Blink.tsx +++ b/packages/ui/src/future/components/Blink.tsx @@ -1,6 +1,5 @@ import React, { ElementType, forwardRef, ReactElement, ReactNode, useEffect, useState } from 'react' import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../types' -import classNames from 'classnames' interface Props { dep: string | undefined diff --git a/packages/ui/src/future/components/RootLayout.tsx b/packages/ui/src/future/components/RootLayout.tsx deleted file mode 100644 index ebcf785f35..0000000000 --- a/packages/ui/src/future/components/RootLayout.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - ) -} diff --git a/packages/ui/src/future/components/SplashController.tsx b/packages/ui/src/future/components/SplashController.tsx index 41ea33aa54..62f3d3fe7c 100644 --- a/packages/ui/src/future/components/SplashController.tsx +++ b/packages/ui/src/future/components/SplashController.tsx @@ -1,5 +1,4 @@ import React, { FC, ReactNode } from 'react' -// import { useRouter } from 'next/navigation' import { Transition } from '@headlessui/react' import dynamic from 'next/dynamic' import { SushiIcon } from './icons' diff --git a/packages/ui/src/future/components/Switch.tsx b/packages/ui/src/future/components/Switch.tsx deleted file mode 100644 index 8bfd87dd9a..0000000000 --- a/packages/ui/src/future/components/Switch.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { Switch as HeadlessUiSwitch } from '@headlessui/react' -import classNames from 'classnames' -import { FC, ReactNode } from 'react' - -type SwitchColor = 'default' - -type SwitchProps = { - checked: boolean - className?: ((checked: boolean) => string) | string - onChange(checked: boolean): void - size?: 'xs' | 'sm' | 'md' - checkedIcon?: ReactNode - uncheckedIcon?: ReactNode - color?: SwitchColor - id?: string -} - -const HEIGHT = { - xs: 20, - sm: 28, - md: 30, -} - -const WIDTH = { - xs: 49, - sm: 48, - md: 48, -} - -const TRANSLATE_CLASS = { - checked: { - xs: '', - sm: 'translate-x-[22px]', - md: 'translate-x-[20px]', - }, - unchecked: { - xs: '', - sm: 'translate-x-[2px]', - md: 'translate-x-[2px]', - }, -} - -export const Switch: FC = ({ - size = 'md', - checked, - onChange, - className, - checkedIcon = '', - uncheckedIcon = '', - id = '', -}: SwitchProps) => { - const height = HEIGHT[size] - const width = WIDTH[size] - - return ( - - - {checked ? checkedIcon : uncheckedIcon} - - - ) -} - -export default Switch diff --git a/packages/ui/src/future/components/settings/CarbonOffset.tsx b/packages/ui/src/future/components/settings/CarbonOffset.tsx index 70141f4200..a85b197d82 100644 --- a/packages/ui/src/future/components/settings/CarbonOffset.tsx +++ b/packages/ui/src/future/components/settings/CarbonOffset.tsx @@ -3,8 +3,8 @@ import React, { FC } from 'react' import { ChainId } from '@sushiswap/chain' import { useLocalStorage } from '@sushiswap/hooks' -import Switch from '../Switch' import { NetworkIcon } from '../icons' +import { Switch } from '../switch' export const CarbonOffset: FC = () => { const [carbonOffset, setCarbonOffset] = useLocalStorage('carbonOffset', false) @@ -19,7 +19,7 @@ export const CarbonOffset: FC = () => { transaction on Polygon is less than $0.01.
- setCarbonOffset(checked)} /> + setCarbonOffset(checked)} />
Only available on Polygon diff --git a/packages/ui/src/future/components/settings/ExpertMode.tsx b/packages/ui/src/future/components/settings/ExpertMode.tsx index 6ee53b82af..bed1a143d0 100644 --- a/packages/ui/src/future/components/settings/ExpertMode.tsx +++ b/packages/ui/src/future/components/settings/ExpertMode.tsx @@ -3,8 +3,8 @@ import { LightBulbIcon } from '@heroicons/react/24/outline' import React, { FC } from 'react' import { useLocalStorage } from '@sushiswap/hooks' -import Switch from '../Switch' import { List } from '../list/List' +import { Switch } from '../switch' export const ExpertMode: FC = () => { const [expertMode, setExpertMode] = useLocalStorage('expertMode', false) @@ -19,7 +19,7 @@ export const ExpertMode: FC = () => { subtitle="Enabling Expert Mode will allow for high slippage trades. Only use if you are an advanced user and know what you are doing. Use at your own risk." value={
- (checked ? 'bg-red' : '')} checked={expertMode} onChange={setExpertMode} /> +
} /> diff --git a/packages/ui/src/future/components/settings/RoutingApi.tsx b/packages/ui/src/future/components/settings/RoutingApi.tsx index 646d9f9b2b..3f0f41b4c8 100644 --- a/packages/ui/src/future/components/settings/RoutingApi.tsx +++ b/packages/ui/src/future/components/settings/RoutingApi.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react' import { useLocalStorage } from '@sushiswap/hooks' -import Switch from '../Switch' +import { Switch } from '../switch' export const RoutingApi: FC = () => { const [routingApi, setRoutingApi] = useLocalStorage('routingApi', false) @@ -14,7 +14,7 @@ export const RoutingApi: FC = () => {

Routing API

...
- setRoutingApi(checked)} /> + setRoutingApi(checked)} />
...
diff --git a/packages/ui/src/future/components/settings/SlippageTolerance.tsx b/packages/ui/src/future/components/settings/SlippageTolerance.tsx index c36e320404..48e66c52ca 100644 --- a/packages/ui/src/future/components/settings/SlippageTolerance.tsx +++ b/packages/ui/src/future/components/settings/SlippageTolerance.tsx @@ -2,11 +2,11 @@ import { RadioGroup } from '@headlessui/react' import { ChevronRightIcon } from '@heroicons/react/24/outline' import React, { FC, Fragment, useCallback, useEffect, useState } from 'react' import { Explainer } from '../Explainer' -import Switch from '../Switch' import classNames from 'classnames' import { Collapsible } from '../animation/Collapsible' import { Input } from '../input' import { useSlippageTolerance } from '@sushiswap/hooks' +import { Switch } from '../switch' const TABS = ['0.1', '0.5', '1.0'] @@ -47,7 +47,7 @@ export const SlippageTolerance: FC<{
setSlippageTolerance(checked ? 'AUTO' : '0.5')} + onCheckedChange={(checked) => setSlippageTolerance(checked ? 'AUTO' : '0.5')} />
diff --git a/packages/ui/src/future/components/switchnew.tsx b/packages/ui/src/future/components/switchnew.tsx new file mode 100644 index 0000000000..2779421f63 --- /dev/null +++ b/packages/ui/src/future/components/switchnew.tsx @@ -0,0 +1,28 @@ +'use client' + +import * as React from 'react' +import * as SwitchPrimitives from '@radix-ui/react-switch' +import { classNames } from '../../index' + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +Switch.displayName = SwitchPrimitives.Root.displayName + +export { Switch } diff --git a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx index a6f6e8017a..45d050c01e 100644 --- a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx +++ b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx @@ -8,7 +8,7 @@ import { RadioGroup } from '@headlessui/react' import { classNames } from '@sushiswap/ui' import { MoonIcon, SunIcon } from '@heroicons/react/24/outline' import { useLocalStorage } from '@sushiswap/hooks' -import Switch from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/Switch' import { useTheme } from 'next-themes' interface SettingsViewProps { @@ -69,7 +69,7 @@ export const SettingsView: FC = ({ setView }) => { - + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 48f6e32a01..29bad9aa39 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2533,6 +2533,7 @@ importers: '@radix-ui/react-select': ^1.2.2 '@radix-ui/react-separator': ^1.0.3 '@radix-ui/react-slot': ^1.0.2 + '@radix-ui/react-switch': ^1.0.3 '@radix-ui/react-tooltip': ^1.0.6 '@react-hook/window-scroll': 1.3.0 '@sushiswap/chain': workspace:* @@ -2598,6 +2599,7 @@ importers: '@radix-ui/react-select': 1.2.2_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-separator': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-slot': 1.0.2_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-switch': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-tooltip': 1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i '@react-hook/window-scroll': 1.3.0_react@18.2.0 '@sushiswap/chain': link:../chain @@ -11053,6 +11055,33 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-switch/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-use-controllable-state': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-previous': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-size': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-tooltip/1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==} peerDependencies: From a2d364e0522b3dd908809bbe360f7cfd3a3646b1 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 14:34:22 +0100 Subject: [PATCH 17/59] fix(packages/ui): force file name change --- packages/ui/src/future/components/{switchnew.tsx => switch.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/ui/src/future/components/{switchnew.tsx => switch.tsx} (100%) diff --git a/packages/ui/src/future/components/switchnew.tsx b/packages/ui/src/future/components/switch.tsx similarity index 100% rename from packages/ui/src/future/components/switchnew.tsx rename to packages/ui/src/future/components/switch.tsx From 53eb3654221184994ca95a210bebe266c612c5d4 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 15:46:33 +0100 Subject: [PATCH 18/59] fix(packages/ui): update explainer component --- apps/_root/ui/swap/trade/TradeStats.tsx | 10 +-- .../_root/ui/swap/widget/CrossChainBanner.tsx | 33 ++++---- .../Tables/PoolsTable/Cells/columns.tsx | 5 +- .../components/RewardsSection/RewardSlide.tsx | 5 +- .../Tables/RewardsTableV3/Cells/columns.tsx | 5 +- .../RewardsTableV3RowPopover.tsx | 7 +- apps/earn/pages/position/[tokenId]/index.tsx | 5 +- apps/furo/components/stream/UpdateModal.tsx | 2 +- .../CreateForm/CliffDetailsSection.tsx | 2 +- .../ui/src/future/components/Explainer.tsx | 83 ------------------- .../ui/src/future/components/explainer.tsx | 18 ++++ .../ui/src/future/components/popovernew.tsx | 2 +- .../components/settings/SlippageTolerance.tsx | 5 +- .../components/UserProfile/SettingsView.tsx | 2 +- .../future/systems/Checker/ApproveERC20.tsx | 55 ++++-------- 15 files changed, 80 insertions(+), 159 deletions(-) delete mode 100644 packages/ui/src/future/components/Explainer.tsx create mode 100644 packages/ui/src/future/components/explainer.tsx diff --git a/apps/_root/ui/swap/trade/TradeStats.tsx b/apps/_root/ui/swap/trade/TradeStats.tsx index 6bebb59618..5581addbcd 100644 --- a/apps/_root/ui/swap/trade/TradeStats.tsx +++ b/apps/_root/ui/swap/trade/TradeStats.tsx @@ -16,8 +16,9 @@ import { UseTradeReturn } from '@sushiswap/react-query' import { shortenAddress } from '@sushiswap/format' import { isAddress } from 'ethers/lib/utils' import { useAccount } from '@sushiswap/wagmi' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { AddressToEnsResolver } from '@sushiswap/wagmi/future/components/Account/AddressToEnsResolver' +import { InformationCircleIcon } from '@heroicons/react/20/solid' export const TradeStats: FC = () => { const { address } = useAccount() @@ -124,11 +125,8 @@ export const TradeStats: FC = () => { }} {address !== recipient && ( - - - Recipient is different from the connected wallet address. If this is expected, ignore this - warning. - + }> + Recipient is different from the connected wallet address. If this is expected, ignore this warning. )} diff --git a/apps/_root/ui/swap/widget/CrossChainBanner.tsx b/apps/_root/ui/swap/widget/CrossChainBanner.tsx index 2525ae3ea2..f1dbb13742 100644 --- a/apps/_root/ui/swap/widget/CrossChainBanner.tsx +++ b/apps/_root/ui/swap/widget/CrossChainBanner.tsx @@ -1,13 +1,14 @@ import React, { FC, useCallback } from 'react' -import { Switch } from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/switch' import { useSwapActions, useSwapState } from '../trade/TradeProvider' import { AppType } from '@sushiswap/ui/types' import { classNames } from '@sushiswap/ui' import { ShuffleIcon } from '@sushiswap/ui/future/components/icons' import { ChevronRightIcon } from '@heroicons/react/24/outline' import { ChainSelectors } from './ChainSelectors' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { STARGATE_SUPPORTED_CHAIN_IDS, StargateChainId } from '@sushiswap/stargate' +import { InformationCircleIcon } from '@heroicons/react/20/solid' export const CrossChainBanner: FC = () => { const { appType, network0 } = useSwapState() @@ -40,19 +41,21 @@ export const CrossChainBanner: FC = () => { Cross Chain - - Cross-chain Swap - - Swap your funds on one network and swap them into a token on a different network - - - Learn more - + }> +
+ Cross-chain Swap + + Swap your funds on one network and swap them into a token on a different network + + + Learn more + +
diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx index b50f75781a..61421dacd3 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx @@ -6,8 +6,9 @@ import { PoolFees1dCell } from './PoolFees1dCell' import { PoolNameCell, PoolChainCell, PoolAPRCell, PoolVolume1dCell } from '../../SharedCells' import { PoolTVLCell } from './PoolTVLCell' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { InformationCircleIcon } from '@heroicons/react/solid' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { ChainId } from '@sushiswap/chain' import { PoolVolume1hCell } from '../../SharedCells/PoolVolume1hCell' import { PoolVolume1wCell } from '../../SharedCells/PoolVolume1wCell' @@ -62,7 +63,7 @@ export const APR_COLUMN: ColumnDef = { header: () => (
APR - + }> The APRs displayed for the liquidity pools are algorithmic and subject to change.
diff --git a/apps/earn/components/RewardsSection/RewardSlide.tsx b/apps/earn/components/RewardsSection/RewardSlide.tsx index b2f55beb70..1bf6638ced 100644 --- a/apps/earn/components/RewardsSection/RewardSlide.tsx +++ b/apps/earn/components/RewardsSection/RewardSlide.tsx @@ -6,11 +6,12 @@ import { useTokenAmountDollarValues } from '../../lib/hooks' import { Currency } from '@sushiswap/ui/future/components/currency' import { formatNumber } from '@sushiswap/format' import { List } from '@sushiswap/ui/future/components/list/List' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import Button from '@sushiswap/ui/future/components/button/Button' import { ConcentratedLiquidityHarvestButton } from '../ConcentratedLiquidityHarvestButton' import { Address } from 'wagmi' +import { InformationCircleIcon } from '@heroicons/react/solid' export const RewardSlide: FC<{ address: Address | undefined @@ -48,7 +49,7 @@ export const RewardSlide: FC<{ Claimable{' '} {unclaimed.length > 0 && ( - + }> Claimable on {Chain.from(data.chainId).name} diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx index ace96002c9..ef6561ab6e 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx @@ -1,12 +1,13 @@ import { ColumnDef } from '@tanstack/react-table' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { InformationCircleIcon } from '@heroicons/react/solid' import React from 'react' import { RewardsV3NameCell } from './RewardsV3NameCell' import { AngleRewardsPool } from '@sushiswap/react-query' import { Pool } from '@sushiswap/client' import { formatNumber } from '@sushiswap/format' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { RewardsV3ClaimableCell } from './RewardsV3ClaimableCell' export const REWARDS_V3_NAME_COLUMN: ColumnDef = { @@ -49,7 +50,7 @@ export const REWARDS_V3_APR_COLUMN: ColumnDef = { header: () => (
APR - + }> The APRs displayed for the liquidity pools are algorithmic and subject to change.
diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx index 634b1aee91..da8e1d7ad3 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx @@ -6,8 +6,9 @@ import { Currency } from '@sushiswap/ui/future/components/currency' import { unwrapToken } from '../../../../lib/functions' import { List } from '@sushiswap/ui/future/components/list/List' import { format } from 'date-fns' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' import { rewardPerDay } from './utils' +import { InformationCircleIcon } from '@heroicons/react/solid' export const RewardsTableV3RowPopover: FC = ({ row }) => { const ongoingFarms = row.distributionData.filter((el) => el.isLive) @@ -50,7 +51,7 @@ export const RewardsTableV3RowPopover: FC = ({ row }) => title={
Reward - + }> Your share calculated as your LP divided by the total LP in the pool multiplied by the rewards set per day. @@ -85,7 +86,7 @@ export const RewardsTableV3RowPopover: FC = ({ row }) => title={
Details - + }> Weight that fees earned by positions represent in their rewards score. A higher % means that more rewards will be attributed to positions that earn more fees during the distribution. diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index b00ece68ae..94734548e9 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -20,6 +20,7 @@ import { Amount } from '@sushiswap/currency' import { usePriceInverter } from '../../../lib/hooks' import { formatTickPrice, getPriceOrderingFromPositionForUI, unwrapToken } from '../../../lib/functions' import { ConcentratedLiquidityWidget } from '../../../components/ConcentratedLiquidityWidget' +import { InformationCircleIcon } from '@heroicons/react/solid' import { useAccount } from '@sushiswap/wagmi' import { ConcentratedLiquidityProvider, @@ -41,7 +42,7 @@ import { useAngleRewards } from '@sushiswap/react-query' import { ConcentratedLiquidityHarvestButton } from '../../../components/ConcentratedLiquidityHarvestButton' import { Checker } from '@sushiswap/wagmi/future/systems' import { ChainId } from '@sushiswap/chain' -import { Explainer } from '@sushiswap/ui/future/components/Explainer' +import { Explainer } from '@sushiswap/ui/future/components/explainer' const PositionPage = () => { return ( @@ -268,7 +269,7 @@ const Position: FC = () => {
Unclaimed rewards{' '} - + }> Accumulated rewards since inception diff --git a/apps/furo/components/stream/UpdateModal.tsx b/apps/furo/components/stream/UpdateModal.tsx index 022318ed63..43b3248053 100644 --- a/apps/furo/components/stream/UpdateModal.tsx +++ b/apps/furo/components/stream/UpdateModal.tsx @@ -17,7 +17,7 @@ import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { Dialog } from '@sushiswap/ui/future/components/dialog/Dialog' import { List } from '@sushiswap/ui/future/components/list/List' import { Input } from '@sushiswap/ui/future/components/input' -import { Switch } from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/switch' import { Signature } from '@ethersproject/bytes' import { withCheckerRoot, useApproved } from '@sushiswap/wagmi/future/systems/Checker/Provider' import { FuroStreamChainId } from '@sushiswap/furo' diff --git a/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx b/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx index e67605572f..6b1af5de59 100644 --- a/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx +++ b/apps/furo/components/vesting/CreateForm/CliffDetailsSection.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import { useFormContext } from 'react-hook-form' -import { Switch } from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/switch' import { Input } from '@sushiswap/ui/future/components/input' import { CreateMultipleVestingFormSchemaType } from '../schema' import { classNames } from '@sushiswap/ui' diff --git a/packages/ui/src/future/components/Explainer.tsx b/packages/ui/src/future/components/Explainer.tsx deleted file mode 100644 index 3a98d8fbbe..0000000000 --- a/packages/ui/src/future/components/Explainer.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { FC, ReactNode, useState } from 'react' -import { Menu } from '@headlessui/react' -import { usePopper } from 'react-popper' -import { InformationCircleIcon } from '@heroicons/react/24/solid' -import { Placement } from '@popperjs/core' -import ReactDOM from 'react-dom' -import { useIsMounted } from '@sushiswap/hooks' -import classNames from 'classnames' - -export const Explainer: FC<{ - children: ReactNode - iconSize: number - placement: Placement - className?: string - hover?: boolean - width?: number -}> = ({ children, iconSize, placement, className, hover = false, width = 240 }) => { - const [open, setOpen] = useState(false) - const isMounted = useIsMounted() - const [referenceElement, setReferenceElement] = useState(null) - const [popperElement, setPopperElement] = useState(null) - const { styles, attributes } = usePopper(referenceElement, popperElement, { - placement, - modifiers: [{ name: 'offset', options: { offset: [0, 8] } }], - }) - - if (typeof window === 'undefined' || !isMounted) return <> - - if (hover) - return ( -
- - {open && - ReactDOM.createPortal( -
-
{children}
-
, - document.body - )} -
- ) - - return ( - - - - - {ReactDOM.createPortal( - -
- {children} -
- , - document.body - )} - - ) -} diff --git a/packages/ui/src/future/components/explainer.tsx b/packages/ui/src/future/components/explainer.tsx new file mode 100644 index 0000000000..7009fe3d40 --- /dev/null +++ b/packages/ui/src/future/components/explainer.tsx @@ -0,0 +1,18 @@ +import React, { FC, ReactNode } from 'react' +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip' + +export const Explainer: FC<{ + children: ReactNode + icon: ReactNode +}> = ({ icon, children }) => { + return ( + + + {icon} + + {children} + + + + ) +} diff --git a/packages/ui/src/future/components/popovernew.tsx b/packages/ui/src/future/components/popovernew.tsx index a8e75455bd..d7e23d4979 100644 --- a/packages/ui/src/future/components/popovernew.tsx +++ b/packages/ui/src/future/components/popovernew.tsx @@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={classNames( - 'z-50 w-72 rounded-md border bg-white/50 dark:bg-slate-800/50 paper rounded-xl p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + 'z-50 w-72 rounded-md border bg-white/50 dark:bg-slate-800/50 paper rounded-xl p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className )} {...props} diff --git a/packages/ui/src/future/components/settings/SlippageTolerance.tsx b/packages/ui/src/future/components/settings/SlippageTolerance.tsx index 48e66c52ca..8546646c5d 100644 --- a/packages/ui/src/future/components/settings/SlippageTolerance.tsx +++ b/packages/ui/src/future/components/settings/SlippageTolerance.tsx @@ -1,12 +1,13 @@ import { RadioGroup } from '@headlessui/react' import { ChevronRightIcon } from '@heroicons/react/24/outline' import React, { FC, Fragment, useCallback, useEffect, useState } from 'react' -import { Explainer } from '../Explainer' +import { Explainer } from '../explainer' import classNames from 'classnames' import { Collapsible } from '../animation/Collapsible' import { Input } from '../input' import { useSlippageTolerance } from '@sushiswap/hooks' import { Switch } from '../switch' +import { InformationCircleIcon } from '@heroicons/react/20/solid' const TABS = ['0.1', '0.5', '1.0'] @@ -55,7 +56,7 @@ export const SlippageTolerance: FC<{

{options?.title || 'Slippage'}{' '} - + }> Slippage {' '} diff --git a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx index 45d050c01e..bee9883f93 100644 --- a/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx +++ b/packages/wagmi/src/future/components/UserProfile/SettingsView.tsx @@ -8,7 +8,7 @@ import { RadioGroup } from '@headlessui/react' import { classNames } from '@sushiswap/ui' import { MoonIcon, SunIcon } from '@heroicons/react/24/outline' import { useLocalStorage } from '@sushiswap/hooks' -import { Switch } from '@sushiswap/ui/future/components/Switch' +import { Switch } from '@sushiswap/ui/future/components/switch' import { useTheme } from 'next-themes' interface SettingsViewProps { diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx index 64351b8101..694abdd59d 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx @@ -1,14 +1,15 @@ import React, { FC, Fragment, useCallback, useState, MouseEvent } from 'react' import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' import { Amount, Type } from '@sushiswap/currency' -import { Menu, Popover, Transition } from '@headlessui/react' -import { ChevronRightIcon, InformationCircleIcon } from '@heroicons/react/24/solid' +import { Popover, Transition } from '@headlessui/react' +import { ChevronRightIcon } from '@heroicons/react/24/solid' import { ApprovalState, useTokenApproval } from '../../hooks' import { Address } from 'wagmi' -import { ChevronDownIcon } from '@heroicons/react/20/solid' +import { ChevronDownIcon, InformationCircleIcon } from '@heroicons/react/20/solid' import { classNames } from '@sushiswap/ui' import { List } from '@sushiswap/ui/future/components/list/List' import dynamic from 'next/dynamic' +import {Explainer} from "@sushiswap/ui/future/components/Explainer"; export interface ApproveERC20Props extends ButtonProps<'button'> { id: string @@ -31,7 +32,6 @@ export const Component: FC = ({ type, }) => { const [max, setMax] = useState(false) - const [showTooltip, setShowTooltip] = useState(false) const [state, { write }] = useTokenApproval({ amount, spender: contract, @@ -68,40 +68,19 @@ export const Component: FC = ({ type={type} > Approve {amount?.currency.symbol} {max ? 'Permanently' : ''} - setShowTooltip(true)} - onMouseLeave={() => setShowTooltip(false)} - > - - - - -
- - We need your approval to execute this transaction on your behalf. - - Learn more - - -
- - + }> +
+ We need your approval to execute this transaction on your behalf. + + Learn more + +
+
From ddba6bb799a604f62b46c5eb7abdcad3536d3be5 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 15:55:36 +0100 Subject: [PATCH 19/59] fix(packages/ui): housekeeping --- .../ConfirmationDialogContent.tsx | 2 +- .../trade/TradeReviewDialogCrossChain.tsx | 2 +- .../swap/trade/TradeReviewDialogSameChain.tsx | 2 +- .../AddSectionReviewModalConcentrated.tsx | 2 +- .../AddPage/AddSectionReviewModalLegacy.tsx | 2 +- .../AddSectionReviewModalLegacy.tsx | 2 +- .../AddSectionReviewModalTrident.tsx | 2 +- .../components/AddSection/AddSectionStake.tsx | 2 +- .../CreateSectionReviewModalTrident.tsx | 2 +- .../SelectFeeConcentratedWidget.tsx | 2 +- apps/earn/components/PoolPage/MigrateTab.tsx | 2 +- .../RemoveSection/RemoveSectionLegacy.tsx | 2 +- .../RemoveSection/RemoveSectionTrident.tsx | 2 +- .../RemoveSection/RemoveSectionUnstake.tsx | 2 +- apps/furo/components/CancelModal.tsx | 2 +- apps/furo/components/TransferModal.tsx | 2 +- .../stream/CreateForm/ExecuteSection.tsx | 2 +- .../ExecuteMultipleSection.tsx | 2 +- apps/furo/components/stream/UpdateModal.tsx | 2 +- apps/furo/components/stream/WithdrawModal.tsx | 2 +- .../CreateForm/CreateFormReviewModal.tsx | 2 +- .../ExecuteMultipleSection.tsx | 2 +- .../furo/components/vesting/WithdrawModal.tsx | 2 +- packages/ui/src/future/components/Dots.tsx | 20 ---------------- .../components/dialog/ConfirmationDialog.tsx | 2 +- packages/ui/src/future/components/dots.tsx | 24 +++++++++++++++++++ .../future/components/toast/ToastPending.tsx | 2 +- .../src/future/components/TxStatusModal.tsx | 2 +- 28 files changed, 50 insertions(+), 46 deletions(-) delete mode 100644 packages/ui/src/future/components/Dots.tsx create mode 100644 packages/ui/src/future/components/dots.tsx diff --git a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx index 49d139ad30..c81f1e24db 100644 --- a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx +++ b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogContent.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import { Chain } from '@sushiswap/chain' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { classNames } from '@sushiswap/ui' import { useSwapState } from '../trade/TradeProvider' import { isStargateBridgeToken, STARGATE_BRIDGE_TOKENS, STARGATE_TOKEN } from '@sushiswap/stargate' diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx index 9a5bb92fc5..a42e7fa345 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogCrossChain.tsx @@ -11,7 +11,7 @@ import React, { FC, useCallback } from 'react' import { useSwapActions, useSwapState } from './TradeProvider' import { useTrade } from '../../../lib/swap/useTrade' import { Button } from '@sushiswap/ui/future/components/button' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' import { Badge } from '@sushiswap/ui/future/components/Badge' diff --git a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx index 3bdd36744c..62528c82e5 100644 --- a/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx +++ b/apps/_root/ui/swap/trade/TradeReviewDialogSameChain.tsx @@ -12,7 +12,7 @@ import { useSwapActions, useSwapState } from './TradeProvider' import { useTrade } from '../../../lib/swap/useTrade' import { Button } from '@sushiswap/ui/future/components/button' import { ConfirmationDialog } from '../ConfirmationDialog' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { SkeletonText, SkeletonCircle, SkeletonBox } from '@sushiswap/ui/future/components/skeleton' import { Badge } from '@sushiswap/ui/future/components/Badge' diff --git a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx index 624538358b..aff67c3ef6 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx @@ -11,7 +11,7 @@ import { Bound } from '../../lib/constants' import { useConcentratedDerivedMintInfo } from '../ConcentratedLiquidityProvider' import { FeeAmount, Position } from '@sushiswap/v3-sdk' import { useTokenAmountDollarValues } from '../../lib/hooks' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { Collapsible } from '@sushiswap/ui/future/components/animation/Collapsible' interface AddSectionReviewModalConcentratedProps diff --git a/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx b/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx index a50b6d69b0..bda8250452 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalLegacy.tsx @@ -8,7 +8,7 @@ import { BigNumber } from 'ethers' import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react' import { Address, useAccount, useNetwork } from '@sushiswap/wagmi' import { SendTransactionResult } from '@sushiswap/wagmi/actions' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { useTransactionDeadline } from '../../lib/hooks' import { AddSectionReviewModal } from './AddSectionReviewModal' diff --git a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx index cbe6e80281..25868c1462 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx @@ -2,7 +2,7 @@ import { TransactionRequest } from '@ethersproject/providers' import { calculateSlippageAmount } from '@sushiswap/amm' import { Amount, Type } from '@sushiswap/currency' import { Percent } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, Address, diff --git a/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx b/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx index dafb14ece1..89cb41f509 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModalTrident.tsx @@ -6,7 +6,7 @@ import { calculateSlippageAmount, ConstantProductPool, StablePool } from '@sushi import { BentoBoxV1ChainId } from '@sushiswap/bentobox' import { Amount, Token, Type } from '@sushiswap/currency' import { JSBI, Percent, ZERO } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, ConstantProductPoolState, diff --git a/apps/earn/components/AddSection/AddSectionStake.tsx b/apps/earn/components/AddSection/AddSectionStake.tsx index e6e23092f6..678a240211 100644 --- a/apps/earn/components/AddSection/AddSectionStake.tsx +++ b/apps/earn/components/AddSection/AddSectionStake.tsx @@ -7,7 +7,7 @@ import { Typography } from '@sushiswap/ui' import { getMasterChefContractConfig, useMasterChefDeposit } from '@sushiswap/wagmi' import { FC, Fragment, useMemo, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { useGraphPool } from '../../lib/hooks' import { usePoolPosition } from '../PoolPositionProvider' diff --git a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx index b1b45868ac..1cde89285c 100644 --- a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx +++ b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx @@ -11,7 +11,7 @@ import { } from '@sushiswap/amm' import { BentoBoxV1ChainId } from '@sushiswap/bentobox' import { Amount, Type } from '@sushiswap/currency' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, PoolFinderType, diff --git a/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx b/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx index f6fa6008a4..e2768a83f2 100644 --- a/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectFeeConcentratedWidget.tsx @@ -6,7 +6,7 @@ import { ContentBlock } from '../AddPage/ContentBlock' import { FeeAmount } from '@sushiswap/v3-sdk' import { Type } from '@sushiswap/currency' import { usePoolsByTokenPair } from 'lib/hooks/usePoolsByTokenPair' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' export const FEE_OPTIONS = [ { diff --git a/apps/earn/components/PoolPage/MigrateTab.tsx b/apps/earn/components/PoolPage/MigrateTab.tsx index e71b2a4119..93309636ae 100644 --- a/apps/earn/components/PoolPage/MigrateTab.tsx +++ b/apps/earn/components/PoolPage/MigrateTab.tsx @@ -32,7 +32,7 @@ import { useTransactionDeadline } from '@sushiswap/wagmi/future/hooks' import { TxStatusModalContent } from '@sushiswap/wagmi/future/components/TxStatusModal' import { UniswapV2Router02ChainId } from '@sushiswap/v2-core/exports/exports' import { useRouter } from 'next/router' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' export const MODAL_MIGRATE_ID = 'migrate-modal' diff --git a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx index c7015981bd..6eb689b807 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx @@ -7,7 +7,7 @@ import { Pool } from '@sushiswap/client' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { Percent } from '@sushiswap/math' import { UniswapV2Router02ChainId } from '@sushiswap/v2-core' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { getSushiSwapRouterContractConfig, PairState, diff --git a/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx b/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx index 5d94eda40c..0373d5353c 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionTrident.tsx @@ -5,7 +5,7 @@ import { Amount, Native } from '@sushiswap/currency' import { Pool, Protocol } from '@sushiswap/client' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { Percent } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { ConstantProductPoolState, getTridentRouterContractConfig, diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx index 69707fbefe..736bfca435 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstake.tsx @@ -4,7 +4,7 @@ import { useIsMounted } from '@sushiswap/hooks' import { AppearOnMount } from '@sushiswap/ui/future/components/animation' import { getMasterChefContractConfig, useMasterChefWithdraw } from '@sushiswap/wagmi' import { FC, useMemo, useState } from 'react' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { useGraphPool } from '../../lib/hooks' import { usePoolPositionStaked } from '../PoolPositionStakedProvider' diff --git a/apps/furo/components/CancelModal.tsx b/apps/furo/components/CancelModal.tsx index 6899eba671..3fd0ce1f0d 100644 --- a/apps/furo/components/CancelModal.tsx +++ b/apps/furo/components/CancelModal.tsx @@ -12,7 +12,7 @@ import { createToast } from '@sushiswap/ui/future/components/toast' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { Dialog } from '@sushiswap/ui/future/components/dialog/Dialog' import { shortenAddress } from '@sushiswap/format' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' interface CancelModalProps { title: string diff --git a/apps/furo/components/TransferModal.tsx b/apps/furo/components/TransferModal.tsx index 8287671585..c0c939aca3 100644 --- a/apps/furo/components/TransferModal.tsx +++ b/apps/furo/components/TransferModal.tsx @@ -3,7 +3,7 @@ import { PaperAirplaneIcon } from '@heroicons/react/outline' import { ChainId } from '@sushiswap/chain' import { shortenAddress } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, useAccount, useContract, useEnsAddress } from '@sushiswap/wagmi' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' import { SendTransactionResult } from '@sushiswap/wagmi/actions' diff --git a/apps/furo/components/stream/CreateForm/ExecuteSection.tsx b/apps/furo/components/stream/CreateForm/ExecuteSection.tsx index 7044e9fdf0..929dc6cac1 100644 --- a/apps/furo/components/stream/CreateForm/ExecuteSection.tsx +++ b/apps/furo/components/stream/CreateForm/ExecuteSection.tsx @@ -3,7 +3,7 @@ import { Signature } from '@ethersproject/bytes' import { TransactionRequest } from '@ethersproject/providers' import { tryParseAmount } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { getFuroStreamRouterContractConfig, useAccount, diff --git a/apps/furo/components/stream/CreateMultipleForm/ExecuteMultipleSection.tsx b/apps/furo/components/stream/CreateMultipleForm/ExecuteMultipleSection.tsx index cd5fe0ac14..ba42b933c3 100644 --- a/apps/furo/components/stream/CreateMultipleForm/ExecuteMultipleSection.tsx +++ b/apps/furo/components/stream/CreateMultipleForm/ExecuteMultipleSection.tsx @@ -3,7 +3,7 @@ import { AddressZero } from '@ethersproject/constants' import { TransactionRequest } from '@ethersproject/providers' import { Amount, Native, tryParseAmount, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { getFuroStreamRouterContractConfig, useAccount, diff --git a/apps/furo/components/stream/UpdateModal.tsx b/apps/furo/components/stream/UpdateModal.tsx index 43b3248053..6ebe43c093 100644 --- a/apps/furo/components/stream/UpdateModal.tsx +++ b/apps/furo/components/stream/UpdateModal.tsx @@ -21,7 +21,7 @@ import { Switch } from '@sushiswap/ui/future/components/switch' import { Signature } from '@ethersproject/bytes' import { withCheckerRoot, useApproved } from '@sushiswap/wagmi/future/systems/Checker/Provider' import { FuroStreamChainId } from '@sushiswap/furo' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' const APPROVE_TAG = 'updateStreamSingle' diff --git a/apps/furo/components/stream/WithdrawModal.tsx b/apps/furo/components/stream/WithdrawModal.tsx index 21ac4a1a69..c680634f4d 100644 --- a/apps/furo/components/stream/WithdrawModal.tsx +++ b/apps/furo/components/stream/WithdrawModal.tsx @@ -1,7 +1,7 @@ import { BigNumber } from '@ethersproject/bignumber' import { TransactionRequest } from '@ethersproject/providers' import { tryParseAmount } from '@sushiswap/currency' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, useAccount, useFuroStreamContract } from '@sushiswap/wagmi' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useMemo, useState } from 'react' import { SendTransactionResult } from '@sushiswap/wagmi/actions' diff --git a/apps/furo/components/vesting/CreateForm/CreateFormReviewModal.tsx b/apps/furo/components/vesting/CreateForm/CreateFormReviewModal.tsx index 77e487f968..bea2e97430 100644 --- a/apps/furo/components/vesting/CreateForm/CreateFormReviewModal.tsx +++ b/apps/furo/components/vesting/CreateForm/CreateFormReviewModal.tsx @@ -2,7 +2,7 @@ import { isAddress } from '@ethersproject/address' import { Signature } from '@ethersproject/bytes' import { TransactionRequest } from '@ethersproject/providers' import { FundSource } from '@sushiswap/hooks' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { getFuroVestingRouterContractConfig, useAccount, diff --git a/apps/furo/components/vesting/CreateMultipleForm/ExecuteMultipleSection.tsx b/apps/furo/components/vesting/CreateMultipleForm/ExecuteMultipleSection.tsx index e7e7b5dd1e..41a0b7cb84 100644 --- a/apps/furo/components/vesting/CreateMultipleForm/ExecuteMultipleSection.tsx +++ b/apps/furo/components/vesting/CreateMultipleForm/ExecuteMultipleSection.tsx @@ -3,7 +3,7 @@ import { AddressZero } from '@ethersproject/constants' import { TransactionRequest } from '@ethersproject/providers' import { Amount, Native, Type } from '@sushiswap/currency' import { FundSource } from '@sushiswap/hooks' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { getFuroVestingRouterContractConfig, useAccount, diff --git a/apps/furo/components/vesting/WithdrawModal.tsx b/apps/furo/components/vesting/WithdrawModal.tsx index e1aafec040..62f5d20806 100644 --- a/apps/furo/components/vesting/WithdrawModal.tsx +++ b/apps/furo/components/vesting/WithdrawModal.tsx @@ -1,6 +1,6 @@ import { BigNumber } from '@ethersproject/bignumber' import { TransactionRequest } from '@ethersproject/providers' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { useAccount, useFuroVestingContract } from '@sushiswap/wagmi' import { useSendTransaction } from '@sushiswap/wagmi/hooks/useSendTransaction' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' diff --git a/packages/ui/src/future/components/Dots.tsx b/packages/ui/src/future/components/Dots.tsx deleted file mode 100644 index 2a411e9b3c..0000000000 --- a/packages/ui/src/future/components/Dots.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import classNames from 'classnames' -import { FC } from 'react' - -interface DotsProps { - children?: any - className?: string -} - -export const Dots: FC = ({ children = , className }) => { - return ( - - {children} - - ) -} diff --git a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx index 6328c4bc4c..88e03018be 100644 --- a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx +++ b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx @@ -3,7 +3,7 @@ import { Dialog } from './Dialog' import { BarLoader } from '../BarLoader' import * as React from 'react' import { Loader } from '../Loader' -import { Dots } from '../Dots' +import { Dots } from '../dots' import { Button } from '../button' import { CheckMarkIcon } from '../icons/CheckmarkIcon' import { FailedMarkIcon } from '../icons/FailedMarkIcon' diff --git a/packages/ui/src/future/components/dots.tsx b/packages/ui/src/future/components/dots.tsx new file mode 100644 index 0000000000..dfcd3df1c9 --- /dev/null +++ b/packages/ui/src/future/components/dots.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames' +import * as React from 'react' + +interface DotsProps { + children?: React.ReactNode + className?: string +} + +const Dots = React.forwardRef(({ className, children, ...props }, ref) => ( + + {children} + +)) + +Dots.displayName = 'Dots' + +export { Dots } diff --git a/packages/ui/src/future/components/toast/ToastPending.tsx b/packages/ui/src/future/components/toast/ToastPending.tsx index 0942168a9f..9b37d53838 100644 --- a/packages/ui/src/future/components/toast/ToastPending.tsx +++ b/packages/ui/src/future/components/toast/ToastPending.tsx @@ -2,7 +2,7 @@ import { Chain } from '@sushiswap/chain' import { FC } from 'react' import { ToastContent } from './ToastContent' -import { Dots } from '../Dots' +import { Dots } from '../dots' import { ResolvedNotification } from '@sushiswap/dexie' interface ToastPending extends ResolvedNotification { diff --git a/packages/wagmi/src/future/components/TxStatusModal.tsx b/packages/wagmi/src/future/components/TxStatusModal.tsx index d6dd949be8..f0d925a775 100644 --- a/packages/wagmi/src/future/components/TxStatusModal.tsx +++ b/packages/wagmi/src/future/components/TxStatusModal.tsx @@ -5,7 +5,7 @@ import { BarLoader } from '@sushiswap/ui/future/components/BarLoader' import { Loader } from '@sushiswap/ui/future/components/Loader' import { CheckMarkIcon } from '@sushiswap/ui/future/components/icons/CheckmarkIcon' import { FailedMarkIcon } from '@sushiswap/ui/future/components/icons/FailedMarkIcon' -import { Dots } from '@sushiswap/ui/future/components/Dots' +import { Dots } from '@sushiswap/ui/future/components/dots' import { Button } from '@sushiswap/ui/future/components/button' interface TxStatusModalContentProps { From 3170e723d53048b4cdf0ce6c3038f0f7a897ae18 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 15:59:52 +0100 Subject: [PATCH 20/59] fix(packages/ui): use slot instead --- packages/ui/src/future/components/dots.tsx | 32 +++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/ui/src/future/components/dots.tsx b/packages/ui/src/future/components/dots.tsx index dfcd3df1c9..8b59923ec2 100644 --- a/packages/ui/src/future/components/dots.tsx +++ b/packages/ui/src/future/components/dots.tsx @@ -1,23 +1,29 @@ import classNames from 'classnames' import * as React from 'react' +import { Slot } from '@radix-ui/react-slot' -interface DotsProps { +export interface DotsProps extends React.ButtonHTMLAttributes { + asChild?: boolean children?: React.ReactNode className?: string } -const Dots = React.forwardRef(({ className, children, ...props }, ref) => ( - - {children} - -)) +const Dots = React.forwardRef(({ className, asChild, children, ...props }, ref) => { + const Comp = asChild ? Slot : 'span' + + return ( + + {children} + + ) +}) Dots.displayName = 'Dots' From 9607472d640e783e5a265186892b3a1d6ad212b1 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 16:04:18 +0100 Subject: [PATCH 21/59] refactor(packages/ui): timeAgo component --- packages/ui/src/future/components/TimeAgo.tsx | 13 -------- .../ui/src/future/components/time-ago.tsx | 33 +++++++++++++++++++ .../future/components/toast/ToastContent.tsx | 4 +-- .../components/UserProfile/Notification.tsx | 4 +-- 4 files changed, 37 insertions(+), 17 deletions(-) delete mode 100644 packages/ui/src/future/components/TimeAgo.tsx create mode 100644 packages/ui/src/future/components/time-ago.tsx diff --git a/packages/ui/src/future/components/TimeAgo.tsx b/packages/ui/src/future/components/TimeAgo.tsx deleted file mode 100644 index 0a2075e5bf..0000000000 --- a/packages/ui/src/future/components/TimeAgo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { useInterval } from '@sushiswap/hooks' -import formatDistanceToNow from 'date-fns/formatDistanceToNow' -import React, { FC, useState } from 'react' - -export const TimeAgo: FC<{ date: Date }> = ({ date }) => { - const [distance, setDistance] = useState(formatDistanceToNow(date, { addSuffix: true, includeSeconds: true })) - - useInterval(() => { - setDistance(formatDistanceToNow(date, { addSuffix: true, includeSeconds: true })) - }, 1000) - - return <>{distance} -} diff --git a/packages/ui/src/future/components/time-ago.tsx b/packages/ui/src/future/components/time-ago.tsx new file mode 100644 index 0000000000..5d8e8fa34f --- /dev/null +++ b/packages/ui/src/future/components/time-ago.tsx @@ -0,0 +1,33 @@ +'use client' + +import { useInterval } from '@sushiswap/hooks' +import formatDistanceToNow from 'date-fns/formatDistanceToNow' +import React, { useState } from 'react' +import { Slot } from '@radix-ui/react-slot' + +export interface TimeAgoProps extends Omit, 'value'> { + asChild?: boolean + value: Date +} + +const TimeAgo = React.forwardRef(({ value, asChild, ...props }, ref) => { + const Comp = asChild ? Slot : 'span' + + const [distance, setDistance] = useState( + formatDistanceToNow(value, { addSuffix: true, includeSeconds: true }) + ) + + useInterval(() => { + setDistance(formatDistanceToNow(value, { addSuffix: true, includeSeconds: true })) + }, 1000) + + return ( + + {distance} + + ) +}) + +TimeAgo.displayName = 'TimeAgo' + +export { TimeAgo } diff --git a/packages/ui/src/future/components/toast/ToastContent.tsx b/packages/ui/src/future/components/toast/ToastContent.tsx index cc9087719b..94e5ce084f 100644 --- a/packages/ui/src/future/components/toast/ToastContent.tsx +++ b/packages/ui/src/future/components/toast/ToastContent.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode, useState } from 'react' -import { TimeAgo } from '../TimeAgo' +import { TimeAgo } from '../time-ago' import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline' interface ToastContent { @@ -30,7 +30,7 @@ export const ToastContent: FC = ({ icon, href, summary, code = fal )} - + ) : ( diff --git a/packages/wagmi/src/future/components/UserProfile/Notification.tsx b/packages/wagmi/src/future/components/UserProfile/Notification.tsx index 0ad5031d77..b0a2c93986 100644 --- a/packages/wagmi/src/future/components/UserProfile/Notification.tsx +++ b/packages/wagmi/src/future/components/UserProfile/Notification.tsx @@ -19,7 +19,7 @@ import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency import { ExternalLink } from '@sushiswap/ui/future/components/ExternalLink' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Loader } from '@sushiswap/ui/future/components/Loader' -import { TimeAgo } from '@sushiswap/ui/future/components/TimeAgo' +import { TimeAgo } from '@sushiswap/ui/future/components/time-ago' import React, { FC } from 'react' import { useWaitForTransaction } from 'wagmi' import { ResolvedNotification } from '@sushiswap/dexie' @@ -142,7 +142,7 @@ export const Notification: FC<{
•{' '} - +

From f26c4c1ee59a339a546d0afa00ce7f29b599335f Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 16:10:16 +0100 Subject: [PATCH 22/59] refactor(packages/ui): remove ExternalLink --- .../ui/src/future/components/ExternalLink.tsx | 60 ------------------- .../src/future/components/currency/Icon.tsx | 10 ++-- .../components/UserProfile/Notification.tsx | 6 +- 3 files changed, 6 insertions(+), 70 deletions(-) delete mode 100644 packages/ui/src/future/components/ExternalLink.tsx diff --git a/packages/ui/src/future/components/ExternalLink.tsx b/packages/ui/src/future/components/ExternalLink.tsx deleted file mode 100644 index f153865f71..0000000000 --- a/packages/ui/src/future/components/ExternalLink.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import classNames from 'classnames' -import React, { FC, HTMLProps, useCallback } from 'react' - -const COLOR = { - primary: 'hover:text-white hover:underline focus:text-white active:text-white', - blue: 'text-blue', -} - -export type Color = 'primary' | 'blue' - -export interface ExternalLinkProps extends Omit, 'as' | 'ref' | 'onClick'> { - href: string - color?: Color - startIcon?: JSX.Element - endIcon?: JSX.Element -} - -export const ExternalLink: FC = ({ - target = '_blank', - href, - children, - rel = 'noopener noreferrer', - className = '', - color = 'primary', - startIcon = undefined, - endIcon = undefined, - ...rest -}) => { - const handleClick = useCallback( - (event: React.MouseEvent) => { - // don't prevent default, don't redirect if it's a new tab - if (target === '_blank' || event.ctrlKey || event.metaKey) { - event.stopPropagation() - } else { - event.preventDefault() - } - }, - [target] - ) - - return ( - - {startIcon && startIcon} - {children} - {endIcon && endIcon} - - ) -} diff --git a/packages/ui/src/future/components/currency/Icon.tsx b/packages/ui/src/future/components/currency/Icon.tsx index eed2d5c36f..6b7913be7b 100644 --- a/packages/ui/src/future/components/currency/Icon.tsx +++ b/packages/ui/src/future/components/currency/Icon.tsx @@ -5,8 +5,6 @@ import Image, { ImageProps } from 'next/image' import { FC, useEffect, useMemo, useState } from 'react' import { cloudinaryImageLoader } from '../../../cloudinary' -import { ExternalLink } from '../ExternalLink' - const AvaxLogo = 'avax.svg' const BnbLogo = 'bnb.svg' const EthereumLogo = 'ethereum.svg' @@ -120,7 +118,7 @@ export const Icon: FC = ({ currency, disableLink, ...rest }) => { } return ( - +
= ({ currency, disableLink, ...rest }) => { > {currency.symbol?.substring(0, 2) ?? '??'}
- + ) } @@ -163,7 +161,7 @@ export const Icon: FC = ({ currency, disableLink, ...rest }) => { } return ( - + setError(true)} @@ -176,6 +174,6 @@ export const Icon: FC = ({ currency, disableLink, ...rest }) => { blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAADhUlEQVRIx6VXz48UVRD+qmb6DXhQNoYYsy6rrFGMUSCYrDvgwauJ2cOGMTHGmzcjuAZiSNCOgWhUMGjixT9AYCFkb8aDMSQLRpCbF91FZRFcLuuvDUq26/PQs83rntc9PdJJJ/XmVb/6ql59VTWCGs/u3WzIpp92NgWTrcTazrDZJTbkjHDGZZfwsktsLjLMPrjy/bnOTCfpd6ZUbU68vrh+aN3qnpZh2hk3uoRwRkSpQaytC/KNKMGRe2/9+Ulnpn1zYMPPHvylExmOOuNwzkCJwQCYxWiV0y/NbD0VOl97fiFlV7wYC+S4AsPKVEkBKAFhilZ8ubuX6ZJQckSFJ09PXXovjqnVHsfUp/Hr547sREm1h84sWwdD761bCU9c2Lb9xTgWC3q8Q68dFqAjBBRcQ57KIISEoPt6Hue8LUaDAIAXdn536Z1gqLcevtpR8M3MgBfGtYO0J6Sop5fuHzj73IWpnOEHji6uV8qHuQ8LH0vISKmeH5n0VVAUcuzi8xfvygxvuNnYK8SIIpA4JWD8QwsGKkBzmLeSV9PkOsnGEz9ev+7zNE0My+SonLM5uVKvu24Zl+bv/nlYt8z/tkvJjVpA7odUWfQ2H+4yvVAEQd73+PKmCRXhZI6LA3PWA3M7pJkTGSu6cpe/k9ok2mVGipmp/sHM08unXX/Q0lYQm8Nc7M3MzECNyJSDBpQcUyHvCad/Pc6WFpBSPULADdqXs+zH2aIR9la93LV0E1GIPyo5G+S2z9m8kZqgf1cFFsLpX56ZtQsNSiM4r2qcC6f/nXO2t3avRcXmVERn74yzRTA+Z72E9e5XKLM6uuX+cwLcqEr/XjD5+83X676gl0bPTnyjMx1J1HBEAvdb7Mfql9OanO0FLR8IxBQApLH6sQJX/PutxdkBuJ3q8mr0r32atcWv44f+AfiGEByIswgNByyremyAr42cTyfPbAL58tDoKRW8q31p4nO2tx9XgD708FftM8GZa3tr9KASJ3qKQrFdDsZZNCDHH3tmPO4zV1Nenr78dmR8yxnlfzX92zKbhvd3TDx1QLwJs3Kgf2XPwpQz+ygyjtQf6M3fu+IS2zv+xfiZegN99/ns2Njplb+ajwiwX4ElzXeXcD8moJAlBfatrvz9aJnRvv+dsjk/puLaD+1mYpOthG1HG3MJh7oeL0fGBWecW0fMfvvktvNxIayh5z//1nKmShHglAAAAABJRU5ErkJggg==" {...rest} /> - + ) } diff --git a/packages/wagmi/src/future/components/UserProfile/Notification.tsx b/packages/wagmi/src/future/components/UserProfile/Notification.tsx index b0a2c93986..c00b89e79c 100644 --- a/packages/wagmi/src/future/components/UserProfile/Notification.tsx +++ b/packages/wagmi/src/future/components/UserProfile/Notification.tsx @@ -16,7 +16,6 @@ import { Chain, ChainId } from '@sushiswap/chain' import { Token } from '@sushiswap/currency' import { classNames } from '@sushiswap/ui' import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' -import { ExternalLink } from '@sushiswap/ui/future/components/ExternalLink' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Loader } from '@sushiswap/ui/future/components/Loader' import { TimeAgo } from '@sushiswap/ui/future/components/time-ago' @@ -73,7 +72,7 @@ export const Notification: FC<{ )} )} -
- +
) } From e0383196d8c44dee6472fd66b68b48eae95c952b Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 17:38:20 +0100 Subject: [PATCH 23/59] refactor(packages/ui): refactor widget --- .../app/(landing)/components/BuildFuture.tsx | 2 +- .../app/(landing)/components/BuildWealth.tsx | 2 +- .../app/(landing)/components/Ecosystem.tsx | 2 +- apps/_root/app/(landing)/components/Hero.tsx | 2 +- .../app/(landing)/components/NeedHelp.tsx | 2 +- .../app/(landing)/components/Partners.tsx | 2 +- apps/_root/app/(landing)/components/Stats.tsx | 2 +- .../components/Story/Section1/Custody.tsx | 2 +- .../components/Story/Section2/Move.tsx | 2 +- .../components/Story/Section3/Guard.tsx | 2 +- apps/_root/app/claims/rp2/page.tsx | 2 +- apps/_root/app/swap/page.tsx | 4 +- apps/_root/ui/swap/FixedButtonContainer.tsx | 12 ---- apps/_root/ui/swap/widget/Widget.tsx | 19 ++---- .../common/components/ArticlesPageHeader.tsx | 2 +- apps/academy/common/components/Breadcrumb.tsx | 2 +- .../common/components/PreviewBanner.tsx | 2 +- .../components/article/ArticleHeader.tsx | 2 +- apps/academy/pages/about.tsx | 2 +- apps/academy/pages/articles/[slug].tsx | 2 +- apps/academy/pages/articles/index.tsx | 2 +- apps/academy/pages/index.tsx | 2 +- apps/academy/pages/products/bentobox.tsx | 2 +- apps/academy/pages/products/furo.tsx | 2 +- apps/academy/pages/products/kashi.tsx | 2 +- apps/academy/pages/products/miso.tsx | 2 +- apps/academy/pages/products/onsen.tsx | 2 +- apps/academy/pages/products/sushixswap.tsx | 2 +- apps/academy/pages/products/trident.tsx | 2 +- .../components/ChartSection/ChartSection.tsx | 2 +- apps/analytics/components/Layout/index.tsx | 7 +- .../BentoBoxTokens/BentoBoxTokenTable.tsx | 2 +- .../FuroTokens/FuroTokenTable.tsx | 2 +- .../components/TableSection/Pools/Pools.tsx | 6 +- .../components/TableSection/TableSection.tsx | 2 +- apps/analytics/pages/index.tsx | 2 +- apps/blog/components/Breadcrumb.tsx | 2 +- apps/blog/components/Hero.tsx | 2 +- apps/blog/components/PreviewBanner.tsx | 2 +- apps/blog/pages/[slug].tsx | 2 +- apps/blog/pages/archive.tsx | 2 +- apps/blog/pages/index.tsx | 2 +- .../AddSection/AddSectionStakeWidget.tsx | 10 +-- .../AddSection/AddSectionWidget.tsx | 16 ++--- apps/earn/components/Layout/index.tsx | 6 +- apps/earn/components/Pools.tsx | 5 +- .../components/PoolsSection/PoolsSection.tsx | 2 +- .../components/PoolsSection/PositionsTab.tsx | 2 +- .../components/PoolsSection/RewardsTab.tsx | 2 +- .../RemoveSectionUnstakeWidget.tsx | 10 +-- .../RemoveSection/RemoveSectionWidget.tsx | 16 ++--- .../RewardsSection/RewardsSection.tsx | 2 +- apps/earn/pages/[id]/add.tsx | 2 +- apps/earn/pages/[id]/remove.tsx | 2 +- apps/furo/components/Dashboard.tsx | 2 +- apps/furo/components/Layout.tsx | 6 +- apps/furo/pages/vesting/[id].tsx | 2 +- .../ui/src/future/components/Container.tsx | 54 ---------------- .../ui/src/future/components/GlobalFooter.tsx | 6 +- .../ui/src/future/components/GlobalNav.tsx | 7 +- .../ui/src/future/components/container.tsx | 45 +++++++++++++ .../src/future/components/dialog/Dialog.tsx | 17 +++-- .../ui/src/future/components/table/index.ts | 2 +- packages/ui/src/future/components/widget.tsx | 64 +++++++++++++++++++ .../src/future/components/widget/Widget.tsx | 40 ------------ .../components/widget/WidgetContent.tsx | 9 --- .../future/components/widget/WidgetHeader.tsx | 17 ----- .../ui/src/future/components/widget/index.ts | 1 - .../future/systems/Checker/ApproveERC20.tsx | 2 +- 69 files changed, 217 insertions(+), 254 deletions(-) delete mode 100644 apps/_root/ui/swap/FixedButtonContainer.tsx delete mode 100644 packages/ui/src/future/components/Container.tsx create mode 100644 packages/ui/src/future/components/container.tsx create mode 100644 packages/ui/src/future/components/widget.tsx delete mode 100644 packages/ui/src/future/components/widget/Widget.tsx delete mode 100644 packages/ui/src/future/components/widget/WidgetContent.tsx delete mode 100644 packages/ui/src/future/components/widget/WidgetHeader.tsx delete mode 100644 packages/ui/src/future/components/widget/index.ts diff --git a/apps/_root/app/(landing)/components/BuildFuture.tsx b/apps/_root/app/(landing)/components/BuildFuture.tsx index 39899d8b2a..8423dbed68 100644 --- a/apps/_root/app/(landing)/components/BuildFuture.tsx +++ b/apps/_root/app/(landing)/components/BuildFuture.tsx @@ -8,7 +8,7 @@ import { AnimatedTitle } from './AnimatedTitle' import { BentoBoxSVG } from './svgs' import { SwitchSVG } from './svgs' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const DATA = [ { diff --git a/apps/_root/app/(landing)/components/BuildWealth.tsx b/apps/_root/app/(landing)/components/BuildWealth.tsx index a62a2673cb..0de1544d8a 100644 --- a/apps/_root/app/(landing)/components/BuildWealth.tsx +++ b/apps/_root/app/(landing)/components/BuildWealth.tsx @@ -4,7 +4,7 @@ import React, { FC } from 'react' import { ExpandableCard } from './ExpandableCard' import { AnimatedTitle } from './AnimatedTitle' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export const BuildWealth: FC = () => { return ( diff --git a/apps/_root/app/(landing)/components/Ecosystem.tsx b/apps/_root/app/(landing)/components/Ecosystem.tsx index 4bb4109b97..dc1689ca3b 100644 --- a/apps/_root/app/(landing)/components/Ecosystem.tsx +++ b/apps/_root/app/(landing)/components/Ecosystem.tsx @@ -1,6 +1,6 @@ import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { motion } from 'framer-motion' import Image from 'next/legacy/image' import React, { FC } from 'react' diff --git a/apps/_root/app/(landing)/components/Hero.tsx b/apps/_root/app/(landing)/components/Hero.tsx index e0fa2a96ba..6d7e70950a 100644 --- a/apps/_root/app/(landing)/components/Hero.tsx +++ b/apps/_root/app/(landing)/components/Hero.tsx @@ -8,7 +8,7 @@ import { Button } from '@sushiswap/ui/future/components/button/Button' import { Search } from './Search' import { CurrencyInput } from '@sushiswap/wagmi/future/components/Web3Input/Currency' import { ArrowDownIcon } from '@heroicons/react/24/outline' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const TITLES = ['Whenever', 'Wherever', 'Whoever'] const VALUES = [ diff --git a/apps/_root/app/(landing)/components/NeedHelp.tsx b/apps/_root/app/(landing)/components/NeedHelp.tsx index da6165d74f..c38108814b 100644 --- a/apps/_root/app/(landing)/components/NeedHelp.tsx +++ b/apps/_root/app/(landing)/components/NeedHelp.tsx @@ -1,7 +1,7 @@ import { ExternalLinkIcon } from '@heroicons/react-v1/solid' import React, { FC } from 'react' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { DiscordIcon, GithubIcon, TwitterIcon, YoutubeIcon } from '@sushiswap/ui/future/components/icons' const SUPPORT_CHANNELS = [ diff --git a/apps/_root/app/(landing)/components/Partners.tsx b/apps/_root/app/(landing)/components/Partners.tsx index ee7d15448a..740bfbd33f 100644 --- a/apps/_root/app/(landing)/components/Partners.tsx +++ b/apps/_root/app/(landing)/components/Partners.tsx @@ -13,7 +13,7 @@ import { ZkSyncSVG, ThunderCoreSVG, } from './svgs' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const INCEPTION_DATE = new Date('08/26/2020') diff --git a/apps/_root/app/(landing)/components/Stats.tsx b/apps/_root/app/(landing)/components/Stats.tsx index b1770af6b1..ff518ed039 100644 --- a/apps/_root/app/(landing)/components/Stats.tsx +++ b/apps/_root/app/(landing)/components/Stats.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react' import { useQuery } from '@tanstack/react-query' import { SkeletonText } from '@sushiswap/ui/future/components/skeleton' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export const Stats: FC = () => { const isMounted = useIsMounted() diff --git a/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx b/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx index 63a428ca98..fbaa17c44a 100644 --- a/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx +++ b/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx @@ -1,6 +1,6 @@ import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { motion } from 'framer-motion' import { FC } from 'react' diff --git a/apps/_root/app/(landing)/components/Story/Section2/Move.tsx b/apps/_root/app/(landing)/components/Story/Section2/Move.tsx index f0630344d6..555b1196e3 100644 --- a/apps/_root/app/(landing)/components/Story/Section2/Move.tsx +++ b/apps/_root/app/(landing)/components/Story/Section2/Move.tsx @@ -1,6 +1,6 @@ import { ExternalLinkIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { FC } from 'react' import { MoveImage } from './MoveImage' diff --git a/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx b/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx index 8ed420fc3d..c7823b4507 100644 --- a/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx +++ b/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx @@ -1,6 +1,6 @@ import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { motion } from 'framer-motion' import { FC } from 'react' diff --git a/apps/_root/app/claims/rp2/page.tsx b/apps/_root/app/claims/rp2/page.tsx index 11814c26a1..813df1d4a9 100644 --- a/apps/_root/app/claims/rp2/page.tsx +++ b/apps/_root/app/claims/rp2/page.tsx @@ -10,7 +10,7 @@ import { ConnectButton } from '@sushiswap/wagmi/future/components' import { RevokeItem } from '../components/RevokeItem' import { Disclosure } from '@headlessui/react' import { ChevronRightIcon } from '@heroicons/react-v1/solid' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const RP2ClaimPage = () => { const { address } = useAccount() diff --git a/apps/_root/app/swap/page.tsx b/apps/_root/app/swap/page.tsx index 0319ce42ea..d556379bc3 100644 --- a/apps/_root/app/swap/page.tsx +++ b/apps/_root/app/swap/page.tsx @@ -1,6 +1,6 @@ 'use client' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import React from 'react' import { Checker } from '@sushiswap/wagmi/future/systems' import { TradeStats } from '../../ui/swap/trade/TradeStats' @@ -16,7 +16,7 @@ export default async function SwapPage() { // await new Promise((resolve) => setTimeout(resolve, 3000)) // console.log('Swap page') return ( - + diff --git a/apps/_root/ui/swap/FixedButtonContainer.tsx b/apps/_root/ui/swap/FixedButtonContainer.tsx deleted file mode 100644 index e7e5bc3049..0000000000 --- a/apps/_root/ui/swap/FixedButtonContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Container from '@sushiswap/ui/future/components/Container' -import { FC, ReactNode } from 'react' - -export const FixedButtonContainer: FC<{ children: ReactNode }> = ({ children }) => { - return ( -
- - {children} - -
- ) -} diff --git a/apps/_root/ui/swap/widget/Widget.tsx b/apps/_root/ui/swap/widget/Widget.tsx index 79c95722e6..f83fdf9a95 100644 --- a/apps/_root/ui/swap/widget/Widget.tsx +++ b/apps/_root/ui/swap/widget/Widget.tsx @@ -1,15 +1,11 @@ -import { Widget as UIWidget } from '@sushiswap/ui/future/components/widget' +import { WidgetContent } from '@sushiswap/ui/future/components/widget' import React, { FC } from 'react' import { SwitchAppType } from './SwitchAppType' import { SwitchTokensButton } from './SwitchTokensButton' import { SwapCurrencyInput } from './SwapCurrencyInput' import { SwapCurrencyOutput } from './SwapCurrencyOutput' import { WidgetTitleV2 } from './WidgetTitleV2' -// import { CrossChainBanner } from './CrossChainBanner' import { SwapButton } from './SwapButton' -// import { useSwapState } from '../trade/TradeProvider' -// import { AppType } from '@sushiswap/ui' -// import { SwapButtonCrossChain } from './SwapButtonCrossChain' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { ThunderCoreBanner } from './ThunderCoreBanner' import { CrossChainBanner } from './CrossChainBanner' @@ -24,23 +20,16 @@ export const Widget: FC = () => {
- +
- + - {/* */} {appType === AppType.Swap ? : } - +
) } diff --git a/apps/academy/common/components/ArticlesPageHeader.tsx b/apps/academy/common/components/ArticlesPageHeader.tsx index c56669c5e3..4857ce0de3 100644 --- a/apps/academy/common/components/ArticlesPageHeader.tsx +++ b/apps/academy/common/components/ArticlesPageHeader.tsx @@ -6,7 +6,7 @@ import { FC, useLayoutEffect, useState } from 'react' import { DEFAULT_SIDE_PADDING } from '../helpers' import { DifficultyEntity, Maybe } from '.mesh' import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' interface ArticlesPagesHeader { title: Maybe | undefined diff --git a/apps/academy/common/components/Breadcrumb.tsx b/apps/academy/common/components/Breadcrumb.tsx index fadd8ca403..0006789c36 100644 --- a/apps/academy/common/components/Breadcrumb.tsx +++ b/apps/academy/common/components/Breadcrumb.tsx @@ -3,7 +3,7 @@ import { Typography } from '@sushiswap/ui' import { getShareText } from 'common/helpers' import Link from 'next/link' import { FC } from 'react' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' import { IconButton } from '@sushiswap/ui/future/components/iconbutton' diff --git a/apps/academy/common/components/PreviewBanner.tsx b/apps/academy/common/components/PreviewBanner.tsx index 005cadbf99..38604ec9ee 100644 --- a/apps/academy/common/components/PreviewBanner.tsx +++ b/apps/academy/common/components/PreviewBanner.tsx @@ -1,7 +1,7 @@ import Link from 'next/link' import { FC } from 'react' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' interface PreviewBanner { show: boolean diff --git a/apps/academy/common/components/article/ArticleHeader.tsx b/apps/academy/common/components/article/ArticleHeader.tsx index 0c2ab47616..747c2ed388 100644 --- a/apps/academy/common/components/article/ArticleHeader.tsx +++ b/apps/academy/common/components/article/ArticleHeader.tsx @@ -5,7 +5,7 @@ import { FC } from 'react' import { ArticleEntity } from '../../../.mesh' import { DifficultyLabel, Image } from '../' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' interface ArticleHeader { article?: ArticleEntity diff --git a/apps/academy/pages/about.tsx b/apps/academy/pages/about.tsx index 1742a1f3b3..6d6cd5aae7 100644 --- a/apps/academy/pages/about.tsx +++ b/apps/academy/pages/about.tsx @@ -8,7 +8,7 @@ import { roadmapSections } from 'common/roadmap' import { format } from 'date-fns' import { NextPage } from 'next' import Image from 'next/image' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const About: NextPage = () => { return ( diff --git a/apps/academy/pages/articles/[slug].tsx b/apps/academy/pages/articles/[slug].tsx index 3d45c0f43f..d77fc06d3f 100644 --- a/apps/academy/pages/articles/[slug].tsx +++ b/apps/academy/pages/articles/[slug].tsx @@ -4,7 +4,7 @@ import { APP_HEADER_HEIGHT, DEFAULT_SIDE_PADDING } from 'common/helpers' import ErrorPage from 'next/error' import { useRouter } from 'next/router' import { FC, useCallback, useState } from 'react' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleBlocksDynamicZone, diff --git a/apps/academy/pages/articles/index.tsx b/apps/academy/pages/articles/index.tsx index 73e936faab..18413d6db9 100644 --- a/apps/academy/pages/articles/index.tsx +++ b/apps/academy/pages/articles/index.tsx @@ -16,7 +16,7 @@ import { } from '../../.mesh' import { ArticleList, ArticlesPageHeader, Card, Pagination, SearchInput } from '../../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../../lib/api' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { classNames } from '@sushiswap/ui' import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' diff --git a/apps/academy/pages/index.tsx b/apps/academy/pages/index.tsx index 03af9182d4..b6828b0158 100644 --- a/apps/academy/pages/index.tsx +++ b/apps/academy/pages/index.tsx @@ -32,7 +32,7 @@ import { ViewAllButton, } from '../common/components' import { getArticles, getDifficulties, getProducts, getTopics } from '../lib/api' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export async function getStaticProps() { const [articles, difficulties, topics, products] = await Promise.all([ diff --git a/apps/academy/pages/products/bentobox.tsx b/apps/academy/pages/products/bentobox.tsx index 89b8df1556..b2859f6324 100644 --- a/apps/academy/pages/products/bentobox.tsx +++ b/apps/academy/pages/products/bentobox.tsx @@ -14,7 +14,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity, GetLatestAndRelevantArticlesQuery } from '.mesh' diff --git a/apps/academy/pages/products/furo.tsx b/apps/academy/pages/products/furo.tsx index 66abffc5c4..c472936d04 100644 --- a/apps/academy/pages/products/furo.tsx +++ b/apps/academy/pages/products/furo.tsx @@ -17,7 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ProductSeo } from '../../common/components/Seo/ProductSeo' diff --git a/apps/academy/pages/products/kashi.tsx b/apps/academy/pages/products/kashi.tsx index 8a47320935..b04c09c559 100644 --- a/apps/academy/pages/products/kashi.tsx +++ b/apps/academy/pages/products/kashi.tsx @@ -16,7 +16,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/miso.tsx b/apps/academy/pages/products/miso.tsx index 9b99b8b01f..9dab171b1e 100644 --- a/apps/academy/pages/products/miso.tsx +++ b/apps/academy/pages/products/miso.tsx @@ -14,7 +14,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' import { CheckIcon } from '@sushiswap/ui/future/components/icons' diff --git a/apps/academy/pages/products/onsen.tsx b/apps/academy/pages/products/onsen.tsx index 195eb3fd4c..70903cf327 100644 --- a/apps/academy/pages/products/onsen.tsx +++ b/apps/academy/pages/products/onsen.tsx @@ -17,7 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/sushixswap.tsx b/apps/academy/pages/products/sushixswap.tsx index e8fd158722..68fe5e7b45 100644 --- a/apps/academy/pages/products/sushixswap.tsx +++ b/apps/academy/pages/products/sushixswap.tsx @@ -17,7 +17,7 @@ import { GetStaticProps, InferGetStaticPropsType } from 'next' import Image from 'next/image' import { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' diff --git a/apps/academy/pages/products/trident.tsx b/apps/academy/pages/products/trident.tsx index 5c1e25676a..616bde0241 100644 --- a/apps/academy/pages/products/trident.tsx +++ b/apps/academy/pages/products/trident.tsx @@ -15,7 +15,7 @@ import { getLatestAndRelevantArticles, getProducts } from 'lib/api' import { GetStaticProps, InferGetStaticPropsType } from 'next' import React, { FC } from 'react' import useSWR from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleEntity } from '.mesh' diff --git a/apps/analytics/components/ChartSection/ChartSection.tsx b/apps/analytics/components/ChartSection/ChartSection.tsx index 5306f7be56..92647ab240 100644 --- a/apps/analytics/components/ChartSection/ChartSection.tsx +++ b/apps/analytics/components/ChartSection/ChartSection.tsx @@ -7,7 +7,7 @@ import { SkeletonText, SkeletonBox } from '@sushiswap/ui/future/components/skele import { TVLChart } from './TVLChart2' import { VolumeChart } from './VolumeChart2' import { useFilters } from 'components/Filters' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const fetcher = ({ url, diff --git a/apps/analytics/components/Layout/index.tsx b/apps/analytics/components/Layout/index.tsx index 2a7e23d505..fede9b2f29 100644 --- a/apps/analytics/components/Layout/index.tsx +++ b/apps/analytics/components/Layout/index.tsx @@ -1,13 +1,14 @@ import { classNames } from '@sushiswap/ui' import React from 'react' -type Props = { +interface Props extends Pick, 'maxWidth'> { children?: React.ReactNode - maxWidth?: MaxWidth backdrop?: React.ReactNode className?: string } -import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' + +import { Container, ContainerProps } from '@sushiswap/ui/future/components/container' +import { ExtractProps } from '@sushiswap/ui' export function Layout({ children, maxWidth = 'full', className }: Props) { return ( diff --git a/apps/analytics/components/TableSection/BentoBoxTokens/BentoBoxTokenTable.tsx b/apps/analytics/components/TableSection/BentoBoxTokens/BentoBoxTokenTable.tsx index 3cf4249a47..a74cf6dbdc 100644 --- a/apps/analytics/components/TableSection/BentoBoxTokens/BentoBoxTokenTable.tsx +++ b/apps/analytics/components/TableSection/BentoBoxTokens/BentoBoxTokenTable.tsx @@ -15,7 +15,7 @@ import { useFilters } from 'components/Filters' import { LIQUIDITY_COLUMN, LIQUIDITY_USD_COLUMN, NAME_COLUMN, NETWORK_COLUMN } from './columns' import { BentoBoxTokenFilters } from './BentoBoxTokenFilters' import { BentoBoxToken, GetBentoBoxTokenArgs, useBentoBoxTokens } from './useBentoBoxTokens' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const COLUMNS = [NETWORK_COLUMN, NAME_COLUMN, LIQUIDITY_USD_COLUMN, LIQUIDITY_COLUMN] as any diff --git a/apps/analytics/components/TableSection/FuroTokens/FuroTokenTable.tsx b/apps/analytics/components/TableSection/FuroTokens/FuroTokenTable.tsx index d111d1cc68..bd1a5be4d2 100644 --- a/apps/analytics/components/TableSection/FuroTokens/FuroTokenTable.tsx +++ b/apps/analytics/components/TableSection/FuroTokens/FuroTokenTable.tsx @@ -15,7 +15,7 @@ import { useFilters } from 'components/Filters' import { LIQUIDITY_COLUMN, LIQUIDITY_USD_COLUMN, NAME_COLUMN, NETWORK_COLUMN } from './columns' import { FuroTokenFilters } from './FuroTokenFilters' import { FuroToken, GetFuroTokenArgs, useFuroTokens } from './useFuroTokens' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' const COLUMNS = [NETWORK_COLUMN, NAME_COLUMN, LIQUIDITY_USD_COLUMN, LIQUIDITY_COLUMN] as any diff --git a/apps/analytics/components/TableSection/Pools/Pools.tsx b/apps/analytics/components/TableSection/Pools/Pools.tsx index 18fddbae4b..03c4ae94fd 100644 --- a/apps/analytics/components/TableSection/Pools/Pools.tsx +++ b/apps/analytics/components/TableSection/Pools/Pools.tsx @@ -1,12 +1,12 @@ -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import React from 'react' import { PoolFilters } from './PoolFilters' import { PoolTable } from './PoolTable' export const Pools = () => { return ( - -
+ +
diff --git a/apps/analytics/components/TableSection/TableSection.tsx b/apps/analytics/components/TableSection/TableSection.tsx index b349d95c20..8279383891 100644 --- a/apps/analytics/components/TableSection/TableSection.tsx +++ b/apps/analytics/components/TableSection/TableSection.tsx @@ -4,7 +4,7 @@ import React, { FC, Fragment } from 'react' import { Pools } from './Pools' import { Button } from '@sushiswap/ui/future/components/button' // import { TokenTable } from './Tokens' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { FuroTokenTable } from './FuroTokens' import { BentoBoxTokenTable } from './BentoBoxTokens' diff --git a/apps/analytics/pages/index.tsx b/apps/analytics/pages/index.tsx index 1b117ca864..3e5cda7876 100644 --- a/apps/analytics/pages/index.tsx +++ b/apps/analytics/pages/index.tsx @@ -10,7 +10,7 @@ import { getBundles, getCharts, getFuroTokens, getTokenCount, getTokens } from ' import { defaultPoolsArgs } from 'lib/constants' import { FilterProvider } from 'components/Filters' import { getFuroTokensUrl } from 'components/TableSection/FuroTokens/useFuroTokens' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export const getStaticProps: GetStaticProps = async () => { const [pools, charts, poolCount, bundles, furoTokens /*tokens, tokenCount*/] = await Promise.all([ diff --git a/apps/blog/components/Breadcrumb.tsx b/apps/blog/components/Breadcrumb.tsx index d963eb50fd..de39be41d6 100644 --- a/apps/blog/components/Breadcrumb.tsx +++ b/apps/blog/components/Breadcrumb.tsx @@ -1,7 +1,7 @@ import { ChevronLeftIcon } from '@heroicons/react/solid' import Link from 'next/link' import { FC } from 'react' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export const Breadcrumb: FC = () => { return ( diff --git a/apps/blog/components/Hero.tsx b/apps/blog/components/Hero.tsx index 7da0378178..845e5b70a2 100644 --- a/apps/blog/components/Hero.tsx +++ b/apps/blog/components/Hero.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import { Article } from 'types' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { Button } from '@sushiswap/ui/future/components/button' import { ArticleAuthors, ArticleHeader } from './article' diff --git a/apps/blog/components/PreviewBanner.tsx b/apps/blog/components/PreviewBanner.tsx index 005cadbf99..38604ec9ee 100644 --- a/apps/blog/components/PreviewBanner.tsx +++ b/apps/blog/components/PreviewBanner.tsx @@ -1,7 +1,7 @@ import Link from 'next/link' import { FC } from 'react' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' interface PreviewBanner { show: boolean diff --git a/apps/blog/pages/[slug].tsx b/apps/blog/pages/[slug].tsx index c9883cc62c..539b9f3bdb 100644 --- a/apps/blog/pages/[slug].tsx +++ b/apps/blog/pages/[slug].tsx @@ -2,7 +2,7 @@ import ErrorPage from 'next/error' import { useRouter } from 'next/router' import { FC } from 'react' import { Article, MediaBlock as MediaBlockType, RichTextBlock as RichTextBlockType } from 'types' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleAuthors, diff --git a/apps/blog/pages/archive.tsx b/apps/blog/pages/archive.tsx index b3b841bce6..129097a0af 100644 --- a/apps/blog/pages/archive.tsx +++ b/apps/blog/pages/archive.tsx @@ -10,7 +10,7 @@ import { Article, Category, Collection } from 'types' import { ArticleList, ArticleListItem, Categories, Pagination } from '../components' import { getArticles, getCategories } from '../lib/api' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export async function getStaticProps() { const articles = await getArticles() diff --git a/apps/blog/pages/index.tsx b/apps/blog/pages/index.tsx index 0d8faea51b..5038c34ad0 100644 --- a/apps/blog/pages/index.tsx +++ b/apps/blog/pages/index.tsx @@ -6,7 +6,7 @@ import { FC, useState } from 'react' import useSWR, { SWRConfig } from 'swr' import { Article, Category, Collection } from 'types' import { Button } from '@sushiswap/ui/future/components/button' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { ArticleList, Card, Categories, Hero } from '../components' import { getArticles, getCategories } from '../lib/api' diff --git a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx index bdd1e8b68e..249e49bc20 100644 --- a/apps/earn/components/AddSection/AddSectionStakeWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionStakeWidget.tsx @@ -4,7 +4,7 @@ import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { FundSource } from '@sushiswap/hooks' import { classNames, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui/future/components/widget' +import { Widget, WidgetHeader, WidgetContent } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, ReactNode, useMemo } from 'react' import { Currency } from '@sushiswap/ui/future/components/currency' @@ -55,14 +55,14 @@ export const AddSectionStakeWidget: FC = ({ return useMemo( () => ( - - + + {({ open }) => ( <>
- +
= ({ )} - + ), [balance, children, reserve0?.currency, reserve1?.currency, setValue, title, value, value0, value1] diff --git a/apps/earn/components/AddSection/AddSectionWidget.tsx b/apps/earn/components/AddSection/AddSectionWidget.tsx index d1e12a2185..0200605b5a 100644 --- a/apps/earn/components/AddSection/AddSectionWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionWidget.tsx @@ -9,7 +9,7 @@ import { Web3Input } from '@sushiswap/wagmi/future/components/Web3Input' import React, { FC, ReactNode } from 'react' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { Button } from '@sushiswap/ui/future/components/button' -import { Widget } from '@sushiswap/ui/future/components/widget' +import { Widget, WidgetHeader, WidgetContent } from '@sushiswap/ui/future/components/widget' interface AddSectionWidgetProps { isFarm: boolean @@ -41,13 +41,13 @@ export const AddSectionWidget: FC = ({ const isMounted = useIsMounted() return ( - - + + {({ open }) => ( <> {isFarm && isMounted ? ( - +
= ({
- + ) : ( - +
= ({ )}
- + )} = ({ )} - + ) } diff --git a/apps/earn/components/Layout/index.tsx b/apps/earn/components/Layout/index.tsx index b0fbe7a564..da5089b9ba 100644 --- a/apps/earn/components/Layout/index.tsx +++ b/apps/earn/components/Layout/index.tsx @@ -1,10 +1,10 @@ import { classNames } from '@sushiswap/ui' import React from 'react' -import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' +import { ExtractProps } from '@sushiswap/ui' -type Props = { +interface Props extends Pick, 'maxWidth'> { children?: React.ReactNode - maxWidth?: MaxWidth className?: string } diff --git a/apps/earn/components/Pools.tsx b/apps/earn/components/Pools.tsx index ae7527e80e..ac485032bf 100644 --- a/apps/earn/components/Pools.tsx +++ b/apps/earn/components/Pools.tsx @@ -9,14 +9,13 @@ import { PoolFilters, PoolsFiltersProvider, PoolsSection } from '../components' import { ChainId } from '@sushiswap/chain' import { isRouteProcessor3ChainId } from '@sushiswap/route-processor' import { isUniswapV2FactoryChainId } from '@sushiswap/v2-core' -import { isConstantProductPoolFactoryChainId, isStablePoolFactoryChainId } from '@sushiswap/trident-core' import { Popover, Transition } from '@headlessui/react' import { List } from '@sushiswap/ui/future/components/list/List' import { PositionCardList } from './MigratePage/PositionCardList' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { PositionCard, PositionCardSkeleton } from './MigratePage/PositionCard' import { Carousel } from '@sushiswap/ui/future/components/Carousel' -import { DiscordIcon, OnsenIcon } from '@sushiswap/ui/future/components/icons' +import { DiscordIcon } from '@sushiswap/ui/future/components/icons' import { TRIDENT_ENABLED_NETWORKS } from 'config' import { isV3ChainId } from '@sushiswap/v3-sdk' diff --git a/apps/earn/components/PoolsSection/PoolsSection.tsx b/apps/earn/components/PoolsSection/PoolsSection.tsx index da74d85192..bec935a5af 100644 --- a/apps/earn/components/PoolsSection/PoolsSection.tsx +++ b/apps/earn/components/PoolsSection/PoolsSection.tsx @@ -6,7 +6,7 @@ import { PoolsTable } from './Tables' import { TableFilters } from './Tables/TableFilters' import { Button } from '@sushiswap/ui/future/components/button' import { useIsMounted } from '@sushiswap/hooks' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { PositionsTab } from './PositionsTab' import { RewardsTab } from './RewardsTab' diff --git a/apps/earn/components/PoolsSection/PositionsTab.tsx b/apps/earn/components/PoolsSection/PositionsTab.tsx index 43f0309e47..9b1b69b720 100644 --- a/apps/earn/components/PoolsSection/PositionsTab.tsx +++ b/apps/earn/components/PoolsSection/PositionsTab.tsx @@ -3,7 +3,7 @@ import React, { Fragment, useState } from 'react' import { Button } from '@sushiswap/ui/future/components/button' import { ConcentratedPositionsTable } from './Tables/PositionsTable/ConcentratedPositionsTable' import { PositionsTable } from './Tables' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { Switch } from '@sushiswap/ui/future/components/switch' export const PositionsTab = () => { diff --git a/apps/earn/components/PoolsSection/RewardsTab.tsx b/apps/earn/components/PoolsSection/RewardsTab.tsx index 134dc88487..c6d3029a69 100644 --- a/apps/earn/components/PoolsSection/RewardsTab.tsx +++ b/apps/earn/components/PoolsSection/RewardsTab.tsx @@ -2,7 +2,7 @@ import { RewardsSection } from '../RewardsSection' import React, { Fragment, useState } from 'react' import { Tab } from '@headlessui/react' import { Button } from '@sushiswap/ui/future/components/button' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' export const RewardsTab = () => { const [tabPositions, setTabPositions] = useState(0) diff --git a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx index 1e94dddf60..b490714d6a 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionUnstakeWidget.tsx @@ -5,7 +5,7 @@ import { Amount, Token, tryParseAmount, Type } from '@sushiswap/currency' import { formatUSD } from '@sushiswap/format' import { ZERO } from '@sushiswap/math' import { classNames, DEFAULT_INPUT_UNSTYLED, Input } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui/future/components/widget' +import { Widget, WidgetHeader, WidgetContent } from '@sushiswap/ui/future/components/widget' import { useTotalSupply } from '@sushiswap/wagmi' import { FC, Fragment, ReactNode, useMemo, useState } from 'react' import { Currency } from '@sushiswap/ui/future/components/currency' @@ -71,14 +71,14 @@ export const RemoveSectionUnstakeWidget: FC = ({
- - + + {({ open }) => ( <>
- +
= ({ )} - +
) diff --git a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx index 258c1c32f3..c8fe69a85c 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx @@ -6,7 +6,7 @@ import { formatUSD } from '@sushiswap/format' import { FundSource, useIsMounted } from '@sushiswap/hooks' import { ZERO } from '@sushiswap/math' import { classNames, DEFAULT_INPUT_UNSTYLED, Input, Typography } from '@sushiswap/ui' -import { Widget } from '@sushiswap/ui/future/components/widget' +import { Widget, WidgetHeader, WidgetContent } from '@sushiswap/ui/future/components/widget' import React, { FC, Fragment, ReactNode, useState } from 'react' import { useAccount } from '@sushiswap/wagmi' import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' @@ -62,13 +62,13 @@ export const RemoveSectionWidget: FC = ({
- - + + {({ open }) => ( <> {isFarm && isMounted ? ( - +
= ({
- + ) : ( - +
= ({ )} {' '}
- + )} = ({ )} - +
) diff --git a/apps/earn/components/RewardsSection/RewardsSection.tsx b/apps/earn/components/RewardsSection/RewardsSection.tsx index e73b723a62..f7e81c4b47 100644 --- a/apps/earn/components/RewardsSection/RewardsSection.tsx +++ b/apps/earn/components/RewardsSection/RewardsSection.tsx @@ -3,7 +3,7 @@ import { AngleRewardsPool, useAngleRewardsMultipleChains } from '@sushiswap/reac import { Carousel } from '@sushiswap/ui/future/components/Carousel' import { RewardSlide } from './RewardSlide' import { useAccount } from '@sushiswap/wagmi' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { usePoolFilters } from '../PoolsFiltersProvider' import { getCoreRowModel, getSortedRowModel, SortingState, useReactTable } from '@tanstack/react-table' import { useBreakpoint } from '@sushiswap/hooks' diff --git a/apps/earn/pages/[id]/add.tsx b/apps/earn/pages/[id]/add.tsx index d8ddf1f6e3..406a579e23 100644 --- a/apps/earn/pages/[id]/add.tsx +++ b/apps/earn/pages/[id]/add.tsx @@ -6,7 +6,7 @@ import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import { FC } from 'react' import { SWRConfig, useSWRConfig } from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { AddSectionLegacy, diff --git a/apps/earn/pages/[id]/remove.tsx b/apps/earn/pages/[id]/remove.tsx index fda9483d12..146f1d0602 100644 --- a/apps/earn/pages/[id]/remove.tsx +++ b/apps/earn/pages/[id]/remove.tsx @@ -6,7 +6,7 @@ import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next' import { useRouter } from 'next/router' import { FC } from 'react' import { SWRConfig } from 'swr' -import { Container } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { AddSectionMyPosition, diff --git a/apps/furo/components/Dashboard.tsx b/apps/furo/components/Dashboard.tsx index 895d60faf1..83cbdfa5c7 100644 --- a/apps/furo/components/Dashboard.tsx +++ b/apps/furo/components/Dashboard.tsx @@ -3,7 +3,7 @@ import React, { FC, Fragment, useState } from 'react' import { useUserStreams, useUserVestings } from '../lib' import { Button } from '@sushiswap/ui/future/components/button' import { SushiIcon } from '@sushiswap/ui/future/components/icons' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { useAccount, Address } from '@sushiswap/wagmi' import { FuroTableType, StreamTable } from './Table' diff --git a/apps/furo/components/Layout.tsx b/apps/furo/components/Layout.tsx index b0fbe7a564..da5089b9ba 100644 --- a/apps/furo/components/Layout.tsx +++ b/apps/furo/components/Layout.tsx @@ -1,10 +1,10 @@ import { classNames } from '@sushiswap/ui' import React from 'react' -import { Container, MaxWidth } from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' +import { ExtractProps } from '@sushiswap/ui' -type Props = { +interface Props extends Pick, 'maxWidth'> { children?: React.ReactNode - maxWidth?: MaxWidth className?: string } diff --git a/apps/furo/pages/vesting/[id].tsx b/apps/furo/pages/vesting/[id].tsx index d5fd769337..0e37dfd10b 100644 --- a/apps/furo/pages/vesting/[id].tsx +++ b/apps/furo/pages/vesting/[id].tsx @@ -28,7 +28,7 @@ import { FuroStatus, useVesting, useVestingBalance, useVestingTransactions } fro import { queryParamsSchema } from '../../lib/zod' import { Carousel } from '@sushiswap/ui/future/components/Carousel' import { Timer } from '../../components/Timer' -import Container from '@sushiswap/ui/future/components/Container' +import { Container } from '@sushiswap/ui/future/components/container' import { Progress } from '@sushiswap/ui/future/components/progress' const VestingPage = () => { diff --git a/packages/ui/src/future/components/Container.tsx b/packages/ui/src/future/components/Container.tsx deleted file mode 100644 index c834b419a1..0000000000 --- a/packages/ui/src/future/components/Container.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import classNames from 'classnames' -import React, { forwardRef, ReactNode } from 'react' -import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../types' - -export type MaxWidth = 'full' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' - -export const MaxWidthMapper: Record = { - full: 'max-w-full', - '7xl': 'max-w-7xl', - '6xl': 'max-w-6xl', - '5xl': 'max-w-5xl', - '4xl': 'max-w-4xl', - '3xl': 'max-w-3xl', - '2xl': 'max-w-2xl', - xl: 'max-w-xl', - lg: 'max-w-lg', - md: 'max-w-md', - sm: 'max-w-sm', - xs: 'max-w-xs', -} - -interface Props { - children: ReactNode - maxWidth?: MaxWidth | number - className?: string - id?: string -} - -type ContainerProps = PolymorphicComponentPropsWithRef -type ContainerComponent = (props: ContainerProps) => React.ReactElement | null - -export const Container: ContainerComponent = forwardRef( - ( - { as, children, maxWidth = '2xl', className = '', id, ...rest }: ContainerProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'div' - return ( - - {children} - - ) - } -) - -export default Container diff --git a/packages/ui/src/future/components/GlobalFooter.tsx b/packages/ui/src/future/components/GlobalFooter.tsx index c03739f063..e8d68b1fb5 100644 --- a/packages/ui/src/future/components/GlobalFooter.tsx +++ b/packages/ui/src/future/components/GlobalFooter.tsx @@ -3,12 +3,12 @@ import { ReactNode, useCallback } from 'react' import dynamic from 'next/dynamic' -import { Container, MaxWidth } from './Container' import { DiscordIcon, GithubIcon, InstagramIcon, SushiWithTextIcon, TwitterIcon } from './icons' +import { Container, ContainerProps } from './container' +import { ExtractProps } from '../../types' -export type FooterProps = React.HTMLProps & { +export interface FooterProps extends React.HTMLProps, Pick, 'maxWidth'> { children?: ReactNode - maxWidth?: MaxWidth } const config: Record< diff --git a/packages/ui/src/future/components/GlobalNav.tsx b/packages/ui/src/future/components/GlobalNav.tsx index d5dddd7fae..ff3a269053 100644 --- a/packages/ui/src/future/components/GlobalNav.tsx +++ b/packages/ui/src/future/components/GlobalNav.tsx @@ -4,11 +4,11 @@ import classNames from 'classnames' import React, { FC, Fragment, ReactElement, ReactNode, useState } from 'react' import { APP_TYPE_LINKS, HEADER_HEIGHT } from '../../constants' -import { AppType } from '../../types' +import { AppType, ExtractProps } from '../../types' import { Button } from './button' import { SushiIcon } from './icons' -import Container, { MaxWidth } from './Container' import { ArrowSmallRightIcon } from '@heroicons/react/20/solid' +import { Container, ContainerProps } from './container' const ITEMS = [ { @@ -38,11 +38,10 @@ const ITEMS = [ }, ] -export interface HeaderProps extends React.HTMLProps { +export interface HeaderProps extends React.HTMLProps, Pick, 'maxWidth'> { children?: ReactElement | Array> rightElement?: ReactNode transparent?: boolean - maxWidth?: MaxWidth } export const GlobalNav: FC = ({ diff --git a/packages/ui/src/future/components/container.tsx b/packages/ui/src/future/components/container.tsx new file mode 100644 index 0000000000..1ea2d875df --- /dev/null +++ b/packages/ui/src/future/components/container.tsx @@ -0,0 +1,45 @@ +import classNames from 'classnames' +import React from 'react' +import { cva, type VariantProps } from 'class-variance-authority' +import { Slot } from '@radix-ui/react-slot' + +const containerVariants = cva('w-full', { + variants: { + maxWidth: { + full: 'max-w-full', + '7xl': 'max-w-7xl', + '6xl': 'max-w-6xl', + '5xl': 'max-w-5xl', + '4xl': 'max-w-4xl', + '3xl': 'max-w-3xl', + '2xl': 'max-w-2xl', + xl: 'max-w-xl', + lg: 'max-w-lg', + md: 'max-w-md', + sm: 'max-w-sm', + xs: 'max-w-xs', + }, + }, + defaultVariants: { + maxWidth: '2xl', + }, +}) + +export interface ContainerProps + extends React.ButtonHTMLAttributes, + VariantProps { + id?: string + asChild?: boolean + className?: string +} + +const Container = React.forwardRef( + ({ className, maxWidth, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'div' + return + } +) + +Container.displayName = 'Container' + +export { Container, containerVariants } diff --git a/packages/ui/src/future/components/dialog/Dialog.tsx b/packages/ui/src/future/components/dialog/Dialog.tsx index 795a33dc88..4cc93be302 100644 --- a/packages/ui/src/future/components/dialog/Dialog.tsx +++ b/packages/ui/src/future/components/dialog/Dialog.tsx @@ -8,15 +8,14 @@ import DialogDescription, { DialogDescriptionProps } from './DialogDescription' import DialogHeader, { DialogHeaderProps } from './DialogHeader' import { syncScrollLockSafeArea } from '../../lib' import { ExtractProps } from '../../../types' -import { MaxWidth, MaxWidthMapper } from '../Container' -import classNames from 'classnames' +import { ContainerProps, containerVariants } from '../container' -export type DialogRootProps = ExtractProps & { - afterLeave?(): void - children?: React.ReactNode - variant?: 'transparent' | 'opaque' - maxWidth?: MaxWidth -} +export type DialogRootProps = Pick, 'maxWidth'> & + ExtractProps & { + afterLeave?(): void + children?: React.ReactNode + variant?: 'transparent' | 'opaque' + } const DialogRoot: FC = ({ open, @@ -83,7 +82,7 @@ const DialogRoot: FC = ({ leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" unmount={unmount} > - + {children} diff --git a/packages/ui/src/future/components/table/index.ts b/packages/ui/src/future/components/table/index.ts index 46274c6a07..b61876e9fd 100644 --- a/packages/ui/src/future/components/table/index.ts +++ b/packages/ui/src/future/components/table/index.ts @@ -2,7 +2,6 @@ import React, { FC } from 'react' import { default as tbody } from './Body' import { default as td } from './Cell' -import { default as container, TableContainerProps } from './Container' import { default as thead } from './Head' import { default as th, HeadCellProps } from './HeadCell' import { default as thr, HeadRowProps } from './HeadRow' @@ -10,6 +9,7 @@ import { Paginator, PaginatorProps } from './Paginator' import { default as table } from './Root' import { default as tr } from './Row' import { WithTestDataId } from './types' +import container, { TableContainerProps } from './Container' export type TableProps = { container: FC> diff --git a/packages/ui/src/future/components/widget.tsx b/packages/ui/src/future/components/widget.tsx new file mode 100644 index 0000000000..5e6eb53dd5 --- /dev/null +++ b/packages/ui/src/future/components/widget.tsx @@ -0,0 +1,64 @@ +import classNames from 'classnames' +import React, { ReactNode } from 'react' +import { Container, ContainerProps } from './container' +import { Slot } from '@radix-ui/react-slot' + +const Widget = React.forwardRef(({ id, className, ...props }, ref) => { + return ( + + ) +}) + +Widget.displayName = 'WidgetRoot' + +interface WidgetContentProps { + asChild?: boolean + children: ReactNode +} + +const WidgetContent = React.forwardRef(({ asChild, children, ...props }, ref) => { + const Comp = asChild ? Slot : 'div' + return ( + + {children} + + ) +}) + +WidgetContent.displayName = 'WidgetContent' + +interface WidgetHeaderProps { + asChild?: boolean + title: ReactNode + children?: ReactNode + className?: string +} + +const WidgetHeader = React.forwardRef( + ({ asChild, title, children, className, ...props }, ref) => { + const Comp = asChild ? Slot : 'div' + + return ( + +

{title}

+
{children}
+ + ) + } +) + +WidgetHeader.displayName = 'WidgetHeader' + +export { Widget, WidgetContent, WidgetHeader } diff --git a/packages/ui/src/future/components/widget/Widget.tsx b/packages/ui/src/future/components/widget/Widget.tsx deleted file mode 100644 index 1de0f9d977..0000000000 --- a/packages/ui/src/future/components/widget/Widget.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import classNames from 'classnames' -import { FC, ReactNode } from 'react' - -import Container, { MaxWidth } from '../Container' -import { WidgetContent, WidgetContentProps } from './WidgetContent' -import { WidgetHeader, WidgetHeaderProps } from './WidgetHeader' - -interface WidgetRootProps { - id: string - className?: string - children: ReactNode - maxWidth: MaxWidth | number -} - -const WidgetRoot: FC = ({ id, className, maxWidth, children }) => { - return ( - - {children} - - ) -} - -export const Widget: FC & { - Header: FC - Content: FC -} = Object.assign(WidgetRoot, { - Header: WidgetHeader, - Content: WidgetContent, -}) diff --git a/packages/ui/src/future/components/widget/WidgetContent.tsx b/packages/ui/src/future/components/widget/WidgetContent.tsx deleted file mode 100644 index 8227b40ca2..0000000000 --- a/packages/ui/src/future/components/widget/WidgetContent.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { FC, ReactElement } from 'react' - -export interface WidgetContentProps { - children: ReactElement | Array -} - -export const WidgetContent: FC = ({ children }) => { - return
{children}
-} diff --git a/packages/ui/src/future/components/widget/WidgetHeader.tsx b/packages/ui/src/future/components/widget/WidgetHeader.tsx deleted file mode 100644 index e2afe1754b..0000000000 --- a/packages/ui/src/future/components/widget/WidgetHeader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import classNames from 'classnames' -import { FC, ReactNode } from 'react' - -export interface WidgetHeaderProps { - title: ReactNode - children?: ReactNode - className?: string -} - -export const WidgetHeader: FC = ({ title, children, className }) => { - return ( -
-

{title}

-
{children}
-
- ) -} diff --git a/packages/ui/src/future/components/widget/index.ts b/packages/ui/src/future/components/widget/index.ts deleted file mode 100644 index 864c058956..0000000000 --- a/packages/ui/src/future/components/widget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Widget' diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx index 694abdd59d..e9209ce80b 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx @@ -9,7 +9,7 @@ import { ChevronDownIcon, InformationCircleIcon } from '@heroicons/react/20/soli import { classNames } from '@sushiswap/ui' import { List } from '@sushiswap/ui/future/components/list/List' import dynamic from 'next/dynamic' -import {Explainer} from "@sushiswap/ui/future/components/Explainer"; +import {Explainer} from "@sushiswap/ui/future/components/explainer"; export interface ApproveERC20Props extends ButtonProps<'button'> { id: string From ce04a4b1d6dc7d1a1c8a114eb3d0283345bf2dc2 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 17:49:18 +0100 Subject: [PATCH 24/59] fix(packages/ui): change loader location --- apps/_root/app/internal/tokens/components/TokenAdder.tsx | 2 +- apps/_root/app/partner/page.tsx | 2 +- apps/_root/ui/swap/ConfirmationDialogCrossChain/StepStates.tsx | 2 +- apps/academy/pages/articles/[slug].tsx | 2 +- .../components/PoolsSection/Tables/PoolsTable/PoolsTable.tsx | 2 +- packages/ui/src/future/components/button/Button.tsx | 2 +- packages/ui/src/future/components/dialog/ConfirmationDialog.tsx | 2 +- packages/ui/src/future/components/input/Search.tsx | 2 +- packages/ui/src/future/components/{Loader.tsx => loader.tsx} | 0 packages/ui/src/future/components/table/GenericTable.tsx | 2 +- packages/wagmi/src/future/components/ConnectButton.tsx | 2 +- packages/wagmi/src/future/components/TxStatusModal.tsx | 2 +- .../wagmi/src/future/components/UserProfile/Notification.tsx | 2 +- 13 files changed, 12 insertions(+), 12 deletions(-) rename packages/ui/src/future/components/{Loader.tsx => loader.tsx} (100%) diff --git a/apps/_root/app/internal/tokens/components/TokenAdder.tsx b/apps/_root/app/internal/tokens/components/TokenAdder.tsx index cc5ceaf548..7d380968cf 100644 --- a/apps/_root/app/internal/tokens/components/TokenAdder.tsx +++ b/apps/_root/app/internal/tokens/components/TokenAdder.tsx @@ -6,7 +6,7 @@ import React, { FC, useCallback, useMemo, useState } from 'react' import useSWR from 'swr' import { Select, SelectContent, SelectItem, SelectTrigger } from '@sushiswap/ui/future/components/select' import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import { Currency } from '@sushiswap/ui/future/components/currency' interface TokenAdder { diff --git a/apps/_root/app/partner/page.tsx b/apps/_root/app/partner/page.tsx index 8eccfe361b..4002415ca2 100644 --- a/apps/_root/app/partner/page.tsx +++ b/apps/_root/app/partner/page.tsx @@ -8,7 +8,7 @@ import { addressValidator, useTokenData } from './lib' import React, { useRef, useState } from 'react' import { useForm } from 'react-hook-form' import * as yup from 'yup' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import { classNames } from '@sushiswap/ui' import { Button } from '@sushiswap/ui/future/components/button' diff --git a/apps/_root/ui/swap/ConfirmationDialogCrossChain/StepStates.tsx b/apps/_root/ui/swap/ConfirmationDialogCrossChain/StepStates.tsx index 7a4bbdc575..c1bfa90676 100644 --- a/apps/_root/ui/swap/ConfirmationDialogCrossChain/StepStates.tsx +++ b/apps/_root/ui/swap/ConfirmationDialogCrossChain/StepStates.tsx @@ -1,6 +1,6 @@ import { classNames } from '@sushiswap/ui' import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import { FC, ReactNode } from 'react' export enum StepState { diff --git a/apps/academy/pages/articles/[slug].tsx b/apps/academy/pages/articles/[slug].tsx index d77fc06d3f..22056113bf 100644 --- a/apps/academy/pages/articles/[slug].tsx +++ b/apps/academy/pages/articles/[slug].tsx @@ -26,7 +26,7 @@ import { } from '../../common/components' import { Image } from '../../common/components' import { getAllArticlesBySlug, getArticleAndMoreArticles } from '../../lib/api' -import { LoadingOverlay } from '@sushiswap/ui/future/components/Loader' +import { LoadingOverlay } from '@sushiswap/ui/future/components/loader' export async function getStaticPaths() { const allArticles = await getAllArticlesBySlug() diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolsTable.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolsTable.tsx index 927e346014..b737a89acc 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolsTable.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolsTable.tsx @@ -18,7 +18,7 @@ import { GetPoolsArgs, Pool, usePoolCount, usePoolsInfinite } from '@sushiswap/c import { useSWRConfig } from 'swr' import InfiniteScroll from 'react-infinite-scroll-component' import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' const COLUMNS = [ NAME_COLUMN, diff --git a/packages/ui/src/future/components/button/Button.tsx b/packages/ui/src/future/components/button/Button.tsx index 752733c9c1..f0f90d56fd 100644 --- a/packages/ui/src/future/components/button/Button.tsx +++ b/packages/ui/src/future/components/button/Button.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import React, { ReactNode } from 'react' -import { Loader } from '../Loader' +import { Loader } from '../loader' import { BUTTON_CLASSES, BUTTON_SIZES, BUTTON_STYLES, BUTTON_STYLES_VARIANT } from './styles' import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../../types' diff --git a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx index 88e03018be..f2d76618c9 100644 --- a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx +++ b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx @@ -2,7 +2,7 @@ import { Chain, ChainId } from '@sushiswap/chain' import { Dialog } from './Dialog' import { BarLoader } from '../BarLoader' import * as React from 'react' -import { Loader } from '../Loader' +import { Loader } from '../loader' import { Dots } from '../dots' import { Button } from '../button' import { CheckMarkIcon } from '../icons/CheckmarkIcon' diff --git a/packages/ui/src/future/components/input/Search.tsx b/packages/ui/src/future/components/input/Search.tsx index 2db7231481..b007449a7e 100644 --- a/packages/ui/src/future/components/input/Search.tsx +++ b/packages/ui/src/future/components/input/Search.tsx @@ -2,7 +2,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' import classNames from 'classnames' import React, { FC, forwardRef, KeyboardEvent, ReactElement, useCallback, useEffect, useState } from 'react' -import { Loader } from '../Loader' +import { Loader } from '../loader' import { XMarkIcon } from '@heroicons/react/24/outline' interface Search { diff --git a/packages/ui/src/future/components/Loader.tsx b/packages/ui/src/future/components/loader.tsx similarity index 100% rename from packages/ui/src/future/components/Loader.tsx rename to packages/ui/src/future/components/loader.tsx diff --git a/packages/ui/src/future/components/table/GenericTable.tsx b/packages/ui/src/future/components/table/GenericTable.tsx index 05ac3675ee..811ad578b0 100644 --- a/packages/ui/src/future/components/table/GenericTable.tsx +++ b/packages/ui/src/future/components/table/GenericTable.tsx @@ -7,7 +7,7 @@ import { Typography } from '../../../typography' import classNames from 'classnames' import { Popover } from '../Popover' import { useIsMounted } from '@sushiswap/hooks' -import { LoadingOverlay } from '../Loader' +import { LoadingOverlay } from '../loader' interface GenericTableProps { table: ReactTableType diff --git a/packages/wagmi/src/future/components/ConnectButton.tsx b/packages/wagmi/src/future/components/ConnectButton.tsx index eeeed8f3c7..95f4012249 100644 --- a/packages/wagmi/src/future/components/ConnectButton.tsx +++ b/packages/wagmi/src/future/components/ConnectButton.tsx @@ -13,7 +13,7 @@ import { LedgerIcon } from '@sushiswap/ui/future/components/icons' import { List } from '@sushiswap/ui/future/components/list/List' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import React, { FC, Fragment, useCallback, useMemo } from 'react' import { useConnect } from 'wagmi' import { classNames, ExtractProps } from '@sushiswap/ui' diff --git a/packages/wagmi/src/future/components/TxStatusModal.tsx b/packages/wagmi/src/future/components/TxStatusModal.tsx index f0d925a775..a612cfdba4 100644 --- a/packages/wagmi/src/future/components/TxStatusModal.tsx +++ b/packages/wagmi/src/future/components/TxStatusModal.tsx @@ -2,7 +2,7 @@ import { FC } from 'react' import { Address, useWaitForTransaction } from 'wagmi' import { Chain, ChainId } from '@sushiswap/chain' import { BarLoader } from '@sushiswap/ui/future/components/BarLoader' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import { CheckMarkIcon } from '@sushiswap/ui/future/components/icons/CheckmarkIcon' import { FailedMarkIcon } from '@sushiswap/ui/future/components/icons/FailedMarkIcon' import { Dots } from '@sushiswap/ui/future/components/dots' diff --git a/packages/wagmi/src/future/components/UserProfile/Notification.tsx b/packages/wagmi/src/future/components/UserProfile/Notification.tsx index c00b89e79c..e9ddb509d1 100644 --- a/packages/wagmi/src/future/components/UserProfile/Notification.tsx +++ b/packages/wagmi/src/future/components/UserProfile/Notification.tsx @@ -17,7 +17,7 @@ import { Token } from '@sushiswap/currency' import { classNames } from '@sushiswap/ui' import { Currency as UICurrency } from '@sushiswap/ui/future/components/currency' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' -import { Loader } from '@sushiswap/ui/future/components/Loader' +import { Loader } from '@sushiswap/ui/future/components/loader' import { TimeAgo } from '@sushiswap/ui/future/components/time-ago' import React, { FC } from 'react' import { useWaitForTransaction } from 'wagmi' From 9d74b3d58482168fcfaa8834b49b52d845d97107 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Tue, 20 Jun 2023 18:31:50 +0100 Subject: [PATCH 25/59] fix(packages/ui): remove rc-tooltip --- packages/ui/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index c68714a78f..ea7d985e84 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -92,7 +92,6 @@ "lucide-react": "^0.233.0", "nanoid": "4.0.0", "next-themes": "0.2.1", - "rc-tooltip": "5.2.2", "react-datepicker": "4.8.0", "react-day-picker": "^8.7.1", "react-dropzone": "14.2.2", From 9e757a6dcc4988bbdae0069f56ef2871582a3024 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Wed, 21 Jun 2023 16:04:03 +0100 Subject: [PATCH 26/59] refactor(packages/ui): button styles and uses --- .../app/(landing)/components/BuildFuture.tsx | 11 +- .../app/(landing)/components/BuildWealth.tsx | 2 +- .../app/(landing)/components/Ecosystem.tsx | 10 +- .../(landing)/components/ExpandableCard.tsx | 23 +- apps/_root/app/(landing)/components/Hero.tsx | 14 +- .../app/(landing)/components/NeedHelp.tsx | 11 +- .../components/Story/Section1/Custody.tsx | 10 +- .../components/Story/Section2/Move.tsx | 16 +- .../components/Story/Section3/Guard.tsx | 10 +- apps/_root/app/(landing)/header.tsx | 15 +- .../_root/app/claims/components/ClaimItem.tsx | 28 +-- apps/_root/app/claims/components/Header.tsx | 2 +- .../app/claims/components/RevokeItem.tsx | 10 +- apps/_root/app/claims/rp2/page.tsx | 4 +- .../app/internal/bentobox/strategies/page.tsx | 4 +- apps/_root/app/internal/tokens/page.tsx | 4 +- .../app/partner/components/NetworkModal.tsx | 4 +- apps/_root/app/partner/page.tsx | 3 +- apps/_root/app/swap/header.tsx | 2 +- .../ConfirmationDialogCrossChain.tsx | 2 +- apps/_root/ui/swap/Header.tsx | 2 +- apps/_root/ui/swap/TokenNotFoundDialog.tsx | 6 +- apps/_root/ui/swap/search/SearchButton.tsx | 8 +- apps/_root/ui/swap/search/SearchPanel.tsx | 2 +- apps/_root/ui/swap/widget/SwapButton.tsx | 12 +- .../ui/swap/widget/SwapButtonCrossChain.tsx | 9 +- apps/_root/ui/swap/widget/SwitchAppType.tsx | 4 +- .../common/components/AdditionalArticles.tsx | 11 +- apps/academy/common/components/Breadcrumb.tsx | 2 +- apps/academy/common/components/Drawer.tsx | 8 +- .../common/components/FilterButton.tsx | 2 +- .../common/components/PreviewBanner.tsx | 8 +- .../academy/common/components/SearchInput.tsx | 2 - .../common/components/ViewAllButton.tsx | 33 +-- .../components/product/ProductArticles.tsx | 2 +- .../common/components/product/ProductHero.tsx | 14 +- .../product/ProductTechnicalDoc.tsx | 2 +- apps/academy/pages/products/bentobox.tsx | 2 +- apps/academy/pages/products/furo.tsx | 2 +- apps/academy/pages/products/kashi.tsx | 2 +- apps/academy/pages/products/miso.tsx | 2 +- apps/academy/pages/products/onsen.tsx | 2 +- apps/academy/pages/products/sushixswap.tsx | 2 +- apps/academy/pages/products/trident.tsx | 2 +- .../components/Filters/ChainFilter.tsx | 2 +- .../components/PoolQuickHoverTooltip.tsx | 4 +- .../TableSection/Pools/PoolFilters.tsx | 86 +++----- .../components/TableSection/TableSection.tsx | 38 +--- apps/blog/components/Categories.tsx | 13 +- apps/blog/components/Hero.tsx | 4 +- apps/blog/components/PreviewBanner.tsx | 9 +- .../blog/components/article/ArticleFooter.tsx | 11 +- apps/blog/pages/index.tsx | 4 +- .../AddSectionReviewModalConcentrated.tsx | 1 - .../AddPage/AddSectionReviewModalLegacy.tsx | 2 +- .../AddSection/AddSectionLegacy.tsx | 12 +- .../AddSectionReviewModalLegacy.tsx | 1 - .../AddSectionReviewModalTrident.tsx | 8 +- .../components/AddSection/AddSectionStake.tsx | 11 +- .../AddSection/AddSectionStakeWidget.tsx | 10 +- .../AddSection/AddSectionTrident.tsx | 13 +- .../AddSection/AddSectionWidget.tsx | 4 +- .../ConcentratedLiquidityRemoveWidget.tsx | 13 +- .../ConcentratedLiquidityWidget.tsx | 14 +- .../CreateSectionReviewModalTrident.tsx | 3 +- apps/earn/components/ExploitInfo.tsx | 8 +- apps/earn/components/Header.tsx | 2 +- .../LiquidityChartRangeInput/Zoom.tsx | 8 +- .../components/MigratePage/PositionCard.tsx | 4 +- .../SelectNetworkWidget.tsx | 2 +- .../NewPositionSection/SelectPricesWidget.tsx | 21 +- .../NewPositionSection/SelectTokensWidget.tsx | 6 +- apps/earn/components/PoolPage/MigrateTab.tsx | 27 +-- apps/earn/components/PoolPageV3.tsx | 54 ++--- .../PoolActionBarPositionRewards.tsx | 8 +- .../components/PoolSection/PoolButtons.tsx | 47 ++-- .../PoolChart/PoolChartPeriods.tsx | 13 +- .../PoolSection/PoolChart/PoolChartTypes.tsx | 13 +- .../components/PoolSection/PoolMyRewards.tsx | 6 +- .../PoolTransactionsV2/PoolTransactionsV2.tsx | 29 +-- .../PoolTransactionsV3/PoolTransactionsV3.tsx | 29 +-- apps/earn/components/Pools.tsx | 16 +- .../components/PoolsSection/PoolsSection.tsx | 23 +- .../components/PoolsSection/PositionsTab.tsx | 20 +- .../components/PoolsSection/RewardsTab.tsx | 11 +- .../PoolsTable/PoolQuickHoverTooltip.tsx | 23 +- .../PositionQuickHoverTooltip.tsx | 30 +-- .../Tables/TableFilters/TableFilters.tsx | 52 ++--- .../TableFilters/TableFiltersNetwork.tsx | 6 +- .../TableFilters/TableFiltersSearchToken.tsx | 12 +- .../RemoveSection/RemoveSectionLegacy.tsx | 11 +- .../RemoveSection/RemoveSectionTrident.tsx | 14 +- .../RemoveSection/RemoveSectionUnstake.tsx | 15 +- .../RemoveSectionUnstakeWidget.tsx | 10 +- .../RemoveSection/RemoveSectionWidget.tsx | 12 +- .../components/RewardsSection/RewardSlide.tsx | 8 +- apps/earn/pages/[id]/migrate.tsx | 12 +- apps/earn/pages/add/index.tsx | 10 +- .../pages/add/trident/[chainId]/index.tsx | 26 +-- apps/earn/pages/add/v2/[chainId]/index.tsx | 25 +-- apps/earn/pages/position/[tokenId]/index.tsx | 44 ++-- apps/furo/components/CancelModal.tsx | 13 +- apps/furo/components/Dashboard.tsx | 28 +-- apps/furo/components/Header.tsx | 21 +- apps/furo/components/TransferModal.tsx | 10 +- .../stream/CreateForm/ExecuteSection.tsx | 9 +- .../CreateMultipleForm/CreateMultipleForm.tsx | 18 +- .../ExecuteMultipleSection.tsx | 14 +- .../CreateMultipleForm/ImportZoneSection.tsx | 7 +- apps/furo/components/stream/UpdateModal.tsx | 23 +- apps/furo/components/stream/WithdrawModal.tsx | 21 +- .../CreateForm/CreateFormReviewModal.tsx | 9 +- .../CreateMultipleForm/CreateMultipleForm.tsx | 17 +- .../ExecuteMultipleSection.tsx | 10 +- .../CreateMultipleForm/ImportZoneSection.tsx | 7 +- .../furo/components/vesting/WithdrawModal.tsx | 14 +- apps/furo/pages/create.tsx | 26 +-- apps/furo/pages/stream/[id].tsx | 39 +--- apps/furo/pages/stream/create/multiple.tsx | 10 +- apps/furo/pages/stream/create/single.tsx | 10 +- apps/furo/pages/vesting/[id].tsx | 38 +--- apps/furo/pages/vesting/create/multiple.tsx | 10 +- apps/furo/pages/vesting/create/single.tsx | 10 +- config/tailwindcss/src/index.ts | 4 + packages/ui/package.json | 2 + .../ui/src/future/components/GlobalNav.tsx | 12 +- packages/ui/src/future/components/button.tsx | 133 ++++++++++++ .../src/future/components/button/Button.tsx | 84 -------- .../ui/src/future/components/button/index.ts | 1 - .../ui/src/future/components/button/styles.ts | 69 ------ .../ui/src/future/components/buttonnew.tsx | 46 ---- .../ui/src/future/components/calendar.tsx | 2 +- .../src/future/components/currency/Icon.tsx | 7 +- .../components/dialog/ConfirmationDialog.tsx | 3 +- .../future/components/dialog/DialogHeader.tsx | 31 +-- .../src/future/components/drawer/Drawer.tsx | 15 +- .../src/future/components/dropdown-menu.tsx | 185 ++++++++++++++++ .../ui/src/future/components/iconbutton.tsx | 42 +--- .../components/icons/ArrowFlatLinesUp.tsx | 3 +- .../future/components/icons/BentoboxIcon.tsx | 3 +- .../future/components/icons/CalendarIcon.tsx | 3 +- .../future/components/icons/CarbonIcon.tsx | 3 +- .../src/future/components/icons/CheckIcon.tsx | 3 +- .../future/components/icons/CheckmarkIcon.tsx | 3 +- .../future/components/icons/CircleIcon.tsx | 3 +- .../components/icons/CircleWithText.tsx | 3 +- .../components/icons/ClassicPoolIcon.tsx | 3 +- .../components/icons/CoinbaseWalletIcon.tsx | 3 +- .../icons/ConcentratedCurveIcon.tsx | 3 +- .../future/components/icons/DangerousIcon.tsx | 3 +- .../future/components/icons/DiscordIcon.tsx | 4 +- .../future/components/icons/EtherscanIcon.tsx | 3 +- .../components/icons/FailedMarkIcon.tsx | 3 +- .../src/future/components/icons/FrameIcon.tsx | 3 +- .../src/future/components/icons/GasIcon.tsx | 3 +- .../future/components/icons/GithubIcon.tsx | 4 +- .../components/icons/GnosisSafeIcon.tsx | 4 +- .../components/icons/GoPlusLabsIcon.tsx | 6 +- .../components/icons/GradientCircleIcon.tsx | 4 +- .../components/icons/HalfCircleIcon.tsx | 4 +- .../future/components/icons/HistoryIcon.tsx | 3 +- .../future/components/icons/InstagramIcon.tsx | 4 +- .../future/components/icons/LedgerIcon.tsx | 4 +- .../future/components/icons/MediumIcon.tsx | 4 +- .../future/components/icons/MetamaskIcon.tsx | 3 +- .../future/components/icons/NetworkIcon.tsx | 3 +- .../future/components/icons/NotepadIcon.tsx | 3 +- .../src/future/components/icons/OnsenIcon.tsx | 3 +- .../src/future/components/icons/PepeIcon.tsx | 3 +- .../src/future/components/icons/RabbyIcon.tsx | 3 +- .../future/components/icons/RainbowIcon.tsx | 3 +- .../future/components/icons/ShuffleIcon.tsx | 3 +- .../src/future/components/icons/SushiIcon.tsx | 3 +- .../components/icons/SushiWithTextIcon.tsx | 3 +- .../components/icons/TrustWalletIcon.tsx | 3 +- .../future/components/icons/TwitterIcon.tsx | 4 +- .../components/icons/WalletConnectIcon.tsx | 3 +- .../future/components/icons/WalletIcon.tsx | 3 +- .../src/future/components/icons/WaterIcon.tsx | 3 +- .../future/components/icons/YoutubeIcon.tsx | 4 +- .../icons/network/circle/ArbitrumCircle.tsx | 3 +- .../network/circle/ArbitrumNovaCircle.tsx | 3 +- .../icons/network/circle/AvalancheCircle.tsx | 3 +- .../icons/network/circle/BinanceCircle.tsx | 3 +- .../icons/network/circle/BobaAvaxCircle.tsx | 3 +- .../icons/network/circle/BobaBNBCircle.tsx | 3 +- .../icons/network/circle/BobaCircle.tsx | 3 +- .../icons/network/circle/BttcCircle.tsx | 3 +- .../icons/network/circle/CeloCircle.tsx | 3 +- .../icons/network/circle/EthereumCircle.tsx | 3 +- .../icons/network/circle/FantomCircle.tsx | 3 +- .../icons/network/circle/FuseCircle.tsx | 3 +- .../icons/network/circle/GnosisCircle.tsx | 3 +- .../icons/network/circle/HarmonyCircle.tsx | 3 +- .../icons/network/circle/HecoCircle.tsx | 3 +- .../icons/network/circle/KavaCircle.tsx | 3 +- .../icons/network/circle/MetisCircle.tsx | 3 +- .../icons/network/circle/MoonbeamCircle.tsx | 3 +- .../icons/network/circle/MoonriverCircle.tsx | 3 +- .../icons/network/circle/OkexCircle.tsx | 3 +- .../icons/network/circle/OptimismCircle.tsx | 3 +- .../icons/network/circle/PalmCircle.tsx | 3 +- .../icons/network/circle/PolygonCircle.tsx | 3 +- .../icons/network/circle/PolygonZKCircle.tsx | 3 +- .../icons/network/circle/TelosCircle.tsx | 3 +- .../network/circle/ThunderCoreCircle.tsx | 3 +- .../components/icons/network/circle/index.tsx | 3 +- .../icons/network/naked/ArbitrumNaked.tsx | 3 +- .../icons/network/naked/ArbitrumNovaNaked.tsx | 3 +- .../icons/network/naked/AvalancheNaked.tsx | 3 +- .../icons/network/naked/BinanceNaked.tsx | 3 +- .../icons/network/naked/BobaAvaxNaked.tsx | 3 +- .../icons/network/naked/BobaBNBNaked.tsx | 3 +- .../icons/network/naked/BobaNaked.tsx | 3 +- .../icons/network/naked/BttcNaked.tsx | 3 +- .../icons/network/naked/CeloNaked.tsx | 3 +- .../icons/network/naked/EthereumNaked.tsx | 3 +- .../icons/network/naked/FantomNaked.tsx | 3 +- .../icons/network/naked/FuseNaked.tsx | 3 +- .../icons/network/naked/GnosisNaked.tsx | 3 +- .../icons/network/naked/HarmonyNaked.tsx | 3 +- .../icons/network/naked/HecoNaked.tsx | 3 +- .../icons/network/naked/KavaNaked.tsx | 3 +- .../icons/network/naked/MetisNaked.tsx | 3 +- .../icons/network/naked/MoonbeamNaked.tsx | 3 +- .../icons/network/naked/MoonriverNaked.tsx | 3 +- .../icons/network/naked/OkexNaked.tsx | 3 +- .../icons/network/naked/OptimismNaked.tsx | 3 +- .../icons/network/naked/PalmNaked.tsx | 3 +- .../icons/network/naked/PolygonNaked.tsx | 3 +- .../icons/network/naked/PolygonZKNaked.tsx | 3 +- .../icons/network/naked/TelosNaked.tsx | 3 +- .../icons/network/naked/ThunderCoreNaked.tsx | 3 +- .../components/icons/network/naked/index.tsx | 5 +- .../ui/src/future/components/input/Search.tsx | 2 +- .../networkselector/NetworkSelectorMenu.tsx | 4 +- .../src/future/components/overlay/Header.tsx | 21 +- .../ui/src/future/components/popovernew.tsx | 5 +- packages/ui/src/future/components/select.tsx | 20 +- .../future/components/settings/ExpertMode.tsx | 2 +- .../src/future/components/settings/index.tsx | 8 +- .../src/future/components/table/Paginator.tsx | 2 - .../ui/src/future/components/tabs/Tab.tsx | 7 +- .../future/components/toast/ToastButtons.tsx | 8 +- packages/ui/src/future/components/toggle.tsx | 38 ++++ packages/ui/src/future/types.ts | 4 + packages/ui/src/globals.css | 16 ++ packages/ui/src/index.css | 17 ++ packages/wagmi/package.json | 1 + .../src/future/components/ConnectButton.tsx | 118 ++++------ .../components/HeaderNetworkSelector.tsx | 11 +- .../src/future/components/NetworkCheck.tsx | 4 +- .../components/Onramper/OnramperButton.tsx | 5 +- .../TokenSelector/TokenSelector.tsx | 9 +- .../TokenSelector/TokenSelectorCustomRow.tsx | 6 +- .../TokenSelectorCustomTokensOverlay.tsx | 2 +- .../TokenSelector/TokenSelectorImportRow.tsx | 8 +- .../src/future/components/TxStatusModal.tsx | 4 +- .../components/UserProfile/DefaultView.tsx | 14 +- .../components/UserProfile/SettingsView.tsx | 6 +- .../UserProfile/TransactionsView.tsx | 9 +- .../future/components/UserProfile/index.tsx | 31 ++- .../Web3Input/Currency/BalancePanel.tsx | 2 +- .../src/future/systems/Checker/Amounts.tsx | 49 ++--- .../systems/Checker/ApproveBentobox.tsx | 80 +++---- .../future/systems/Checker/ApproveERC20.tsx | 140 ++++-------- .../systems/Checker/ApproveERC20Multiple.tsx | 7 +- .../src/future/systems/Checker/Connect.tsx | 23 +- .../src/future/systems/Checker/Custom.tsx | 2 +- .../src/future/systems/Checker/Network.tsx | 9 +- .../wagmi/src/future/systems/Checker/index.ts | 2 +- .../wagmi/src/future/systems/Checker/types.ts | 6 - pnpm-lock.yaml | 204 +++++++++++------- 273 files changed, 1516 insertions(+), 1939 deletions(-) create mode 100644 packages/ui/src/future/components/button.tsx delete mode 100644 packages/ui/src/future/components/button/Button.tsx delete mode 100644 packages/ui/src/future/components/button/index.ts delete mode 100644 packages/ui/src/future/components/button/styles.ts delete mode 100644 packages/ui/src/future/components/buttonnew.tsx create mode 100644 packages/ui/src/future/components/dropdown-menu.tsx create mode 100644 packages/ui/src/future/components/toggle.tsx create mode 100644 packages/ui/src/future/types.ts delete mode 100644 packages/wagmi/src/future/systems/Checker/types.ts diff --git a/apps/_root/app/(landing)/components/BuildFuture.tsx b/apps/_root/app/(landing)/components/BuildFuture.tsx index 8423dbed68..e7ba95082a 100644 --- a/apps/_root/app/(landing)/components/BuildFuture.tsx +++ b/apps/_root/app/(landing)/components/BuildFuture.tsx @@ -1,4 +1,3 @@ -import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { motion } from 'framer-motion' import React, { FC } from 'react' @@ -68,7 +67,7 @@ export const BuildFuture: FC = () => {
- + Help build the future with Sushi.{' '} {`We invite all developers to explore Sushi's frameworks.`} @@ -105,13 +104,7 @@ export const BuildFuture: FC = () => { {title}
- +
diff --git a/apps/_root/app/(landing)/components/BuildWealth.tsx b/apps/_root/app/(landing)/components/BuildWealth.tsx index 0de1544d8a..a1df769a8d 100644 --- a/apps/_root/app/(landing)/components/BuildWealth.tsx +++ b/apps/_root/app/(landing)/components/BuildWealth.tsx @@ -33,7 +33,7 @@ export const BuildWealth: FC = () => { With multiple ways to passively earn yield on your coins, you can choose your own yield stack and make your money work for you, all in the background, 24/7. -
+
{ > {title} - {summary} - diff --git a/apps/_root/app/(landing)/components/ExpandableCard.tsx b/apps/_root/app/(landing)/components/ExpandableCard.tsx index 431af04aca..c3d59c110c 100644 --- a/apps/_root/app/(landing)/components/ExpandableCard.tsx +++ b/apps/_root/app/(landing)/components/ExpandableCard.tsx @@ -1,4 +1,3 @@ -import { ChevronRightIcon, ExternalLinkIcon } from '@heroicons/react-v1/solid' import { AnimatePresence, AnimateSharedLayout, motion } from 'framer-motion' import { nanoid } from 'nanoid' import React, { FC, ReactNode, useCallback, useState } from 'react' @@ -40,12 +39,7 @@ export const ExpandableCard: FC = ({ children, title, capti ) : ( - @@ -79,16 +73,11 @@ export const ExpandableCard: FC = ({ children, title, capti {content} - - diff --git a/apps/_root/app/(landing)/components/Hero.tsx b/apps/_root/app/(landing)/components/Hero.tsx index 6d7e70950a..e8d8e25976 100644 --- a/apps/_root/app/(landing)/components/Hero.tsx +++ b/apps/_root/app/(landing)/components/Hero.tsx @@ -4,7 +4,7 @@ import { useInterval } from '@sushiswap/hooks' import { Typography } from '@sushiswap/ui' import { motion } from 'framer-motion' import React, { FC, useEffect, useState } from 'react' -import { Button } from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { Search } from './Search' import { CurrencyInput } from '@sushiswap/wagmi/future/components/Web3Input/Currency' import { ArrowDownIcon } from '@heroicons/react/24/outline' @@ -41,8 +41,8 @@ export const Hero: FC = () => {
- - Buy and Sell Instantly on Sushi.
{TITLES[index]}. + + Buy and Sell Instantly on Sushi. {TITLES[index]}. No registration needed. Over 400 tokens to trade at your fingertips. @@ -69,10 +69,10 @@ export const Hero: FC = () => { }} >
- -
@@ -116,8 +116,8 @@ export const Hero: FC = () => { }} className="mt-4" > - diff --git a/apps/_root/app/(landing)/components/NeedHelp.tsx b/apps/_root/app/(landing)/components/NeedHelp.tsx index c38108814b..8e55517217 100644 --- a/apps/_root/app/(landing)/components/NeedHelp.tsx +++ b/apps/_root/app/(landing)/components/NeedHelp.tsx @@ -1,4 +1,3 @@ -import { ExternalLinkIcon } from '@heroicons/react-v1/solid' import React, { FC } from 'react' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' @@ -61,14 +60,8 @@ export const NeedHelp: FC = () => {
-
diff --git a/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx b/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx index fbaa17c44a..0217de5782 100644 --- a/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx +++ b/apps/_root/app/(landing)/components/Story/Section1/Custody.tsx @@ -1,4 +1,3 @@ -import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' import { motion } from 'framer-motion' @@ -54,16 +53,11 @@ export const Custody: FC = () => { > {DATA.title} - + Own your own crypto, just like cash in your wallet. Fully decentralized & self custody of your funds means your money in your wallet, as it should be. - diff --git a/apps/_root/app/(landing)/components/Story/Section2/Move.tsx b/apps/_root/app/(landing)/components/Story/Section2/Move.tsx index 555b1196e3..2b079aceb8 100644 --- a/apps/_root/app/(landing)/components/Story/Section2/Move.tsx +++ b/apps/_root/app/(landing)/components/Story/Section2/Move.tsx @@ -1,4 +1,3 @@ -import { ExternalLinkIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' import { FC } from 'react' @@ -18,16 +17,11 @@ export const Move: FC = () => { We will always find you the best rate, no matter what network you’re on, with no extra fees. -
-
diff --git a/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx b/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx index c7823b4507..41afb2784a 100644 --- a/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx +++ b/apps/_root/app/(landing)/components/Story/Section3/Guard.tsx @@ -1,4 +1,3 @@ -import { ChevronRightIcon } from '@heroicons/react-v1/solid' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' import { motion } from 'framer-motion' @@ -53,15 +52,10 @@ export const Guard: FC = () => { > {DATA.title} - + Enable SushiGuard and earn gas refunds on all of your transactions. - diff --git a/apps/_root/app/(landing)/header.tsx b/apps/_root/app/(landing)/header.tsx index 42131bf00e..e7ceac295e 100644 --- a/apps/_root/app/(landing)/header.tsx +++ b/apps/_root/app/(landing)/header.tsx @@ -3,7 +3,6 @@ import React, { FC } from 'react' import { GlobalNav, NavLink, SubNav, SubNavLink } from '@sushiswap/ui/future/components/GlobalNav' import { Button } from '@sushiswap/ui/future/components/button' -import Link from 'next/link' export const Header: FC = () => { return ( @@ -12,17 +11,9 @@ export const Header: FC = () => { transparent className="!relative" rightElement={ - - - - - // // - // // - // // + } > diff --git a/apps/_root/app/claims/components/ClaimItem.tsx b/apps/_root/app/claims/components/ClaimItem.tsx index f03a055391..c89fab9ce8 100644 --- a/apps/_root/app/claims/components/ClaimItem.tsx +++ b/apps/_root/app/claims/components/ClaimItem.tsx @@ -98,38 +98,22 @@ export const ClaimItem: FC = ({ chainId, account, claim }) => { ) : (
{!isClaimed ? ( - - + + {allowance.greaterThan(ZERO) ? ( - ) : ( - )} ) : ( - )}
diff --git a/apps/_root/app/claims/components/Header.tsx b/apps/_root/app/claims/components/Header.tsx index 0097d655c3..f731500515 100644 --- a/apps/_root/app/claims/components/Header.tsx +++ b/apps/_root/app/claims/components/Header.tsx @@ -30,7 +30,7 @@ export const Header: FC = () => { - diff --git a/apps/_root/app/claims/components/RevokeItem.tsx b/apps/_root/app/claims/components/RevokeItem.tsx index ecd2823d6c..23124a7bdb 100644 --- a/apps/_root/app/claims/components/RevokeItem.tsx +++ b/apps/_root/app/claims/components/RevokeItem.tsx @@ -5,7 +5,7 @@ import { List } from '@sushiswap/ui/future/components/list/List' import { Badge } from '@sushiswap/ui/future/components/Badge' import { Currency } from '@sushiswap/ui/future/components/currency' import { Checker } from '@sushiswap/wagmi/future/systems' -import Button from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { ZERO } from '@sushiswap/math' import { routeProcessor2Address, RouteProcessor2ChainId } from '@sushiswap/route-processor/exports/exports' import { CheckIcon } from '@heroicons/react-v1/solid' @@ -44,9 +44,9 @@ export const RevokeItem: FC<{ token: Token; account: Address }> = ({ account, to
} > - - - @@ -67,7 +67,7 @@ export const RevokeItem: FC<{ token: Token; account: Address }> = ({ account, to
} > -
- @@ -27,7 +27,7 @@ export const NetworkModal: FC = ({ chainId, setChainId }) => { {SUPPORTED_CHAINS.map((key) => ( diff --git a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogCrossChain.tsx b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogCrossChain.tsx index 46b718315f..1564958df6 100644 --- a/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogCrossChain.tsx +++ b/apps/_root/ui/swap/ConfirmationDialogCrossChain/ConfirmationDialogCrossChain.tsx @@ -320,7 +320,7 @@ export const ConfirmationDialogCrossChain: FC dstTxHash={lzData?.dstTxHash} />
-
diff --git a/apps/_root/ui/swap/Header.tsx b/apps/_root/ui/swap/Header.tsx index 2d6bb4a729..b8248e6f45 100644 --- a/apps/_root/ui/swap/Header.tsx +++ b/apps/_root/ui/swap/Header.tsx @@ -39,7 +39,7 @@ export const Header: FC = () => { - diff --git a/apps/_root/ui/swap/TokenNotFoundDialog.tsx b/apps/_root/ui/swap/TokenNotFoundDialog.tsx index 678e5b9fbc..e60d26695d 100644 --- a/apps/_root/ui/swap/TokenNotFoundDialog.tsx +++ b/apps/_root/ui/swap/TokenNotFoundDialog.tsx @@ -164,7 +164,7 @@ export const TokenNotFoundDialog = () => { )} -
+
{tokenSecurity?.isSupported && (
@@ -178,7 +178,7 @@ export const TokenNotFoundDialog = () => { I understand ) : ( - )} @@ -252,7 +252,7 @@ export const TokenNotFoundDialog = () => { )} -
+
{tokenSecurity.isSupported && (
diff --git a/apps/_root/ui/swap/search/SearchButton.tsx b/apps/_root/ui/swap/search/SearchButton.tsx index 53aa442c00..4cf7ed7517 100644 --- a/apps/_root/ui/swap/search/SearchButton.tsx +++ b/apps/_root/ui/swap/search/SearchButton.tsx @@ -1,8 +1,8 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' -import { Button } from '@sushiswap/ui/future/components/button' import React, { FC, useCallback } from 'react' import { useSearchContext } from './SearchProvider' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' export const SearchButton: FC = () => { const { setOpen } = useSearchContext() @@ -11,9 +11,5 @@ export const SearchButton: FC = () => { setOpen(true) }, [setOpen]) - return ( - - ) + return } diff --git a/apps/_root/ui/swap/search/SearchPanel.tsx b/apps/_root/ui/swap/search/SearchPanel.tsx index e17997c486..6f7b2af041 100644 --- a/apps/_root/ui/swap/search/SearchPanel.tsx +++ b/apps/_root/ui/swap/search/SearchPanel.tsx @@ -72,7 +72,7 @@ export const SearchPanel: FC = () => {
-
diff --git a/apps/_root/ui/swap/widget/SwapButton.tsx b/apps/_root/ui/swap/widget/SwapButton.tsx index 1b5d752563..8659c72b62 100644 --- a/apps/_root/ui/swap/widget/SwapButton.tsx +++ b/apps/_root/ui/swap/widget/SwapButton.tsx @@ -15,8 +15,6 @@ import { import { ZERO } from '@sushiswap/math' export const SwapButton: FC = () => { - console.log('Swap button') - const { appType, amount, network0, network1, value, token0, token1 } = useSwapState() const { isFetching, isLoading, data: trade } = useTrade({ crossChain: network0 !== network1 }) const { setReview } = useSwapActions() @@ -37,13 +35,11 @@ export const SwapButton: FC = () => { return ( <>
- - - + + + { > - diff --git a/apps/academy/common/components/AdditionalArticles.tsx b/apps/academy/common/components/AdditionalArticles.tsx index ee821e7352..2e781ddf02 100644 --- a/apps/academy/common/components/AdditionalArticles.tsx +++ b/apps/academy/common/components/AdditionalArticles.tsx @@ -2,7 +2,8 @@ import { classNames } from '@sushiswap/ui' import { FC, ReactNode } from 'react' import { DEFAULT_SIDE_PADDING } from '../helpers' -import { ViewAllButton } from './ViewAllButton' +import { Button } from '@sushiswap/ui/future/components/button' +import { PlusCircleIcon } from '@heroicons/react/24/solid' interface AdditionalArticles { title: string @@ -15,7 +16,9 @@ export const AdditionalArticles: FC = ({ title, children, cl
{title} - +
= ({ title, children, cl {children}
- +
) diff --git a/apps/academy/common/components/Breadcrumb.tsx b/apps/academy/common/components/Breadcrumb.tsx index 0006789c36..0d0602078d 100644 --- a/apps/academy/common/components/Breadcrumb.tsx +++ b/apps/academy/common/components/Breadcrumb.tsx @@ -37,7 +37,7 @@ export const Breadcrumb: FC = ({ article }) => { - + ) } diff --git a/apps/academy/common/components/Drawer.tsx b/apps/academy/common/components/Drawer.tsx index 5a115310ab..caedc7df34 100644 --- a/apps/academy/common/components/Drawer.tsx +++ b/apps/academy/common/components/Drawer.tsx @@ -50,13 +50,7 @@ export const Drawer: FC = ({ children, isOpen, onClose, className, heade
{header}
- +
{children}
diff --git a/apps/academy/common/components/FilterButton.tsx b/apps/academy/common/components/FilterButton.tsx index b0d203c933..131f029b37 100644 --- a/apps/academy/common/components/FilterButton.tsx +++ b/apps/academy/common/components/FilterButton.tsx @@ -11,7 +11,7 @@ interface FilterButton { export const FilterButton: FC = ({ title, isSelected, onClick }) => { return ( - ) diff --git a/apps/academy/common/components/PreviewBanner.tsx b/apps/academy/common/components/PreviewBanner.tsx index 38604ec9ee..67a7e02088 100644 --- a/apps/academy/common/components/PreviewBanner.tsx +++ b/apps/academy/common/components/PreviewBanner.tsx @@ -17,11 +17,9 @@ export const PreviewBanner: FC = ({ show }) => { Preview Mode You are viewing an unpublished article
- - - +
) diff --git a/apps/academy/common/components/SearchInput.tsx b/apps/academy/common/components/SearchInput.tsx index 3adbb0e838..73019d85d9 100644 --- a/apps/academy/common/components/SearchInput.tsx +++ b/apps/academy/common/components/SearchInput.tsx @@ -96,8 +96,6 @@ export const SearchInput: FC = ({ ref, handleSearch, isTopOfPage, s )} icon={MagnifyingGlassIcon} iconProps={{ - width: 20, - height: 20, className: isMobileAndSticky ? 'fill-slate-500' : 'fill-[#3B7EF6] sm:fill-white', }} name="Search" diff --git a/apps/academy/common/components/ViewAllButton.tsx b/apps/academy/common/components/ViewAllButton.tsx index b9b0776492..bf30fe8038 100644 --- a/apps/academy/common/components/ViewAllButton.tsx +++ b/apps/academy/common/components/ViewAllButton.tsx @@ -1,18 +1,23 @@ import { PlusCircleIcon } from '@heroicons/react/24/solid' import { classNames } from '@sushiswap/ui' -import React, { ElementType, forwardRef, Ref } from 'react' +import React, { forwardRef } from 'react' import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' -export const ViewAllButton = forwardRef( - ({ isSmall, className, ...rest }: ButtonProps, ref: Ref) => ( - - ) -) +interface ViewAllButton extends ButtonProps { + isSmall?: boolean +} + +export const ViewAllButton = forwardRef(({ isSmall, className, ...rest }, ref) => ( + +)) + +ViewAllButton.displayName = 'ViewAllButton' diff --git a/apps/academy/common/components/product/ProductArticles.tsx b/apps/academy/common/components/product/ProductArticles.tsx index fd9d581fca..bb2f5087f7 100644 --- a/apps/academy/common/components/product/ProductArticles.tsx +++ b/apps/academy/common/components/product/ProductArticles.tsx @@ -22,7 +22,7 @@ export const ProductArticles: FC = ({ title, productName, artic - +
diff --git a/apps/academy/common/components/product/ProductHero.tsx b/apps/academy/common/components/product/ProductHero.tsx index 480b18cc6c..a9604ab650 100644 --- a/apps/academy/common/components/product/ProductHero.tsx +++ b/apps/academy/common/components/product/ProductHero.tsx @@ -4,12 +4,13 @@ import { FC, ReactNode, useLayoutEffect, useState } from 'react' import { ProductStat, ProductStats } from './' import { Button } from '@sushiswap/ui/future/components/button' +import { IconComponent } from '@sushiswap/ui/future/types' interface ProductHero { productName: ReactNode productDescription: string productUrl: string - buttonIcon: JSX.Element + buttonIcon: IconComponent buttonText?: string image?: JSX.Element productStats?: ProductStat[] @@ -56,15 +57,8 @@ export const ProductHero: FC = ({ {productDescription} -
{image &&
{image}
} diff --git a/apps/academy/common/components/product/ProductTechnicalDoc.tsx b/apps/academy/common/components/product/ProductTechnicalDoc.tsx index 1dec4ca823..fe6ab293bb 100644 --- a/apps/academy/common/components/product/ProductTechnicalDoc.tsx +++ b/apps/academy/common/components/product/ProductTechnicalDoc.tsx @@ -12,7 +12,7 @@ interface ProductTechnicalDoc { const DocsButton: FC<{ className: string; url: string }> = ({ className, url }) => ( - diff --git a/apps/academy/pages/products/bentobox.tsx b/apps/academy/pages/products/bentobox.tsx index b2859f6324..38e5f806f1 100644 --- a/apps/academy/pages/products/bentobox.tsx +++ b/apps/academy/pages/products/bentobox.tsx @@ -57,7 +57,7 @@ const ProductPage: FC> = ({ productDescription={description} productUrl={url} buttonText={buttonText} - buttonIcon={} + buttonIcon={LinkIcon} /> > = (product productDescription={description} productUrl={url} buttonText={buttonText} - buttonIcon={} + buttonIcon={LinkIcon} image={furo-img} productStats={productStats} /> diff --git a/apps/academy/pages/products/kashi.tsx b/apps/academy/pages/products/kashi.tsx index b04c09c559..086d1dd479 100644 --- a/apps/academy/pages/products/kashi.tsx +++ b/apps/academy/pages/products/kashi.tsx @@ -58,7 +58,7 @@ const ProductPage: FC> = ({ productName={longName} productDescription={description} productUrl={url} - buttonIcon={} + buttonIcon={LinkIcon} image={kashi-img} /> > = ({ productDescription={description} productUrl={url} buttonText={buttonText} - buttonIcon={} + buttonIcon={LinkIcon} productStats={productStats} /> diff --git a/apps/academy/pages/products/onsen.tsx b/apps/academy/pages/products/onsen.tsx index 70903cf327..86c90a829d 100644 --- a/apps/academy/pages/products/onsen.tsx +++ b/apps/academy/pages/products/onsen.tsx @@ -62,7 +62,7 @@ const ProductPage: FC> = ({ productDescription={description} productUrl={url} buttonText={buttonText} - buttonIcon={} + buttonIcon={ArrowRightCircleIcon} image={onsen-img} productStats={productStats} /> diff --git a/apps/academy/pages/products/sushixswap.tsx b/apps/academy/pages/products/sushixswap.tsx index 68fe5e7b45..ca89545323 100644 --- a/apps/academy/pages/products/sushixswap.tsx +++ b/apps/academy/pages/products/sushixswap.tsx @@ -68,7 +68,7 @@ const ProductPage: FC> = ({ } productDescription={description} productUrl={url} - buttonIcon={} + buttonIcon={LinkIcon} image={sushixswap-img} /> > = ({ } productDescription={description} productUrl={url} - buttonIcon={} + buttonIcon={LinkIcon} productStats={productStats} /> = ({ availableChainIds }) => { > {({ open }) => (
- + Networks{' '} = ({ row }) = )}
-
diff --git a/apps/analytics/components/TableSection/Pools/PoolFilters.tsx b/apps/analytics/components/TableSection/Pools/PoolFilters.tsx index 24c67d91e8..e281099dc8 100644 --- a/apps/analytics/components/TableSection/Pools/PoolFilters.tsx +++ b/apps/analytics/components/TableSection/Pools/PoolFilters.tsx @@ -1,8 +1,8 @@ import { Protocol } from '@sushiswap/client' -import { Button } from '@sushiswap/ui/future/components/button' import { ChainFilter, SearchFilter, useFilters } from 'components/Filters' import { SUPPORTED_CHAIN_IDS } from 'config' import React, { FC, useCallback } from 'react' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const PoolFilters: FC = () => { const { poolProtocols: protocols, isWhitelisted, setFilters } = useFilters() @@ -17,7 +17,7 @@ export const PoolFilters: FC = () => { poolProtocols: newProtocols.length === 0 ? undefined : newProtocols, }) }, - [protocols, setFilters], + [protocols, setFilters] ) const whitelistedHandler = useCallback(() => { @@ -27,78 +27,54 @@ export const PoolFilters: FC = () => { }, [isWhitelisted, setFilters]) return ( -
-
+
+
-
-
- - + - - + {process.env.NODE_ENV !== 'production' && ( - + whitelistedHandler()} size="sm" pressed={isWhitelisted}> + Whitelisted + )}
diff --git a/apps/analytics/components/TableSection/TableSection.tsx b/apps/analytics/components/TableSection/TableSection.tsx index 8279383891..44b8f2b338 100644 --- a/apps/analytics/components/TableSection/TableSection.tsx +++ b/apps/analytics/components/TableSection/TableSection.tsx @@ -2,11 +2,10 @@ import { Tab } from '@headlessui/react' import React, { FC, Fragment } from 'react' import { Pools } from './Pools' -import { Button } from '@sushiswap/ui/future/components/button' -// import { TokenTable } from './Tokens' import { Container } from '@sushiswap/ui/future/components/container' import { FuroTokenTable } from './FuroTokens' import { BentoBoxTokenTable } from './BentoBoxTokens' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const TableSection: FC = () => { return ( @@ -16,48 +15,25 @@ export const TableSection: FC = () => {
{({ selected }) => ( - + )} {({ selected }) => ( - + )} {({ selected }) => ( - + )} - - {/* - {({ selected }) => ( - - )} - */}
diff --git a/apps/blog/components/Categories.tsx b/apps/blog/components/Categories.tsx index 1e0c7077d1..8d5d1d6d64 100644 --- a/apps/blog/components/Categories.tsx +++ b/apps/blog/components/Categories.tsx @@ -1,6 +1,6 @@ -import { Button } from '@sushiswap/ui/future/components/button' import { Dispatch, FC, SetStateAction, useCallback } from 'react' import { Category } from 'types' +import { Toggle } from '@sushiswap/ui/future/components/toggle' interface Categories { selected: string[] @@ -25,16 +25,13 @@ export const Categories: FC = ({ categories, selected, onSelect }) = if (!category?.id) return <> return ( - + ) })} diff --git a/apps/blog/components/Hero.tsx b/apps/blog/components/Hero.tsx index 845e5b70a2..6273e231c0 100644 --- a/apps/blog/components/Hero.tsx +++ b/apps/blog/components/Hero.tsx @@ -17,8 +17,8 @@ export const Hero: FC = ({ article }) => {
-
diff --git a/apps/blog/components/PreviewBanner.tsx b/apps/blog/components/PreviewBanner.tsx index 38604ec9ee..1ba9d08eda 100644 --- a/apps/blog/components/PreviewBanner.tsx +++ b/apps/blog/components/PreviewBanner.tsx @@ -1,4 +1,3 @@ -import Link from 'next/link' import { FC } from 'react' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' @@ -17,11 +16,9 @@ export const PreviewBanner: FC = ({ show }) => { Preview Mode You are viewing an unpublished article
- - - +
) diff --git a/apps/blog/components/article/ArticleFooter.tsx b/apps/blog/components/article/ArticleFooter.tsx index 4f44e412eb..d5c2697fbd 100644 --- a/apps/blog/components/article/ArticleFooter.tsx +++ b/apps/blog/components/article/ArticleFooter.tsx @@ -21,15 +21,8 @@ export const ArticleFooter: FC = ({ articles }) => { {format(new Date(article.attributes.publishedAt), 'dd MMM yyyy')} )} - ))} diff --git a/apps/blog/pages/index.tsx b/apps/blog/pages/index.tsx index 5038c34ad0..969f0a2d39 100644 --- a/apps/blog/pages/index.tsx +++ b/apps/blog/pages/index.tsx @@ -103,8 +103,8 @@ const _Home: FC = () => {
)}
-
diff --git a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx index aff67c3ef6..3de4186e65 100644 --- a/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx +++ b/apps/earn/components/AddPage/AddSectionReviewModalConcentrated.tsx @@ -205,7 +205,6 @@ export const AddSectionReviewModalConcentrated: FC diff --git a/apps/earn/components/AddSection/AddSectionLegacy.tsx b/apps/earn/components/AddSection/AddSectionLegacy.tsx index af1b5f5856..08831cbbb4 100644 --- a/apps/earn/components/AddSection/AddSectionLegacy.tsx +++ b/apps/earn/components/AddSection/AddSectionLegacy.tsx @@ -80,20 +80,19 @@ export const AddSectionLegacy: FC<{ pool: Pool }> = ({ pool: _pool }) => { onInput0={onChangeToken0TypedAmount} onInput1={onChangeToken1TypedAmount} > - + + } > - - + + = ({ pool: _pool }) => { > - diff --git a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx index 25868c1462..9c66d60189 100644 --- a/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx +++ b/apps/earn/components/AddSection/AddSectionReviewModalLegacy.tsx @@ -172,7 +172,6 @@ export const AddSectionReviewModalLegacy: FC = close={close} > diff --git a/apps/earn/components/AddSection/AddSectionStake.tsx b/apps/earn/components/AddSection/AddSectionStake.tsx index 678a240211..12dde33d1d 100644 --- a/apps/earn/components/AddSection/AddSectionStake.tsx +++ b/apps/earn/components/AddSection/AddSectionStake.tsx @@ -15,7 +15,7 @@ import { AddSectionStakeWidget } from './AddSectionStakeWidget' import { useSWRConfig } from 'swr' import { Checker } from '@sushiswap/wagmi/future/systems' import { useApproved, withCheckerRoot } from '@sushiswap/wagmi/future/systems/Checker/Provider' -import Button from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { APPROVE_TAG_STAKE } from '../../lib/constants' interface AddSectionStakeProps { @@ -104,11 +104,10 @@ const _AddSectionStake: FC = withCheckerRoot(({ pool, chef reserve1={reserve1} liquidityToken={liquidityToken} > - - - + + + = withCheckerRoot(({ pool, chef
} > - - + + = ({ pool: _pool }) => { > = ({ pool: _pool }) => { > = ({ pool: _pool }) => { enabled={isBentoBoxV1ChainId(chainId)} > - diff --git a/apps/earn/components/AddSection/AddSectionWidget.tsx b/apps/earn/components/AddSection/AddSectionWidget.tsx index 0200605b5a..62d9a0f68e 100644 --- a/apps/earn/components/AddSection/AddSectionWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionWidget.tsx @@ -60,7 +60,7 @@ export const AddSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - )} @@ -97,7 +97,7 @@ export const AddSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - )} diff --git a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx index 623ab85138..31d884f53d 100644 --- a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx +++ b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx @@ -178,16 +178,16 @@ export const ConcentratedLiquidityRemoveWidget: FC{value}%
- - - -
@@ -266,14 +266,13 @@ export const ConcentratedLiquidityRemoveWidget: FC )} - - + +
= ({
= ({ />
- - - + + + = ({ enabled={!depositADisabled} > = ({ successLink={successLink} > {({ setOpen }) => ( - )} diff --git a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx index 1cde89285c..330fada1f9 100644 --- a/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx +++ b/apps/earn/components/CreateSection/CreateSectionReviewModalTrident.tsx @@ -34,7 +34,7 @@ import { } from '../../lib/actions' import { AddSectionReviewModal } from '../AddSection' import { createToast } from '@sushiswap/ui/future/components/toast' -import Button from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { useApproved } from '@sushiswap/wagmi/future/systems/Checker/Provider' import { APPROVE_TAG_CREATE_TRIDENT } from '../../lib/constants' @@ -300,7 +300,6 @@ export const CreateSectionReviewModalTrident: FC
- setValue(false)} - className="absolute" - name="Close" - /> + setValue(false)} className="absolute" name="Close" />
) diff --git a/apps/earn/components/Header.tsx b/apps/earn/components/Header.tsx index d29879998c..7215c00f0c 100644 --- a/apps/earn/components/Header.tsx +++ b/apps/earn/components/Header.tsx @@ -29,7 +29,7 @@ export const Header: FC = () => { - diff --git a/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx b/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx index b760c29594..746b3b1c8e 100644 --- a/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx +++ b/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx @@ -82,8 +82,8 @@ export const Zoom: FC = ({
{showResetButton ? ( -
diff --git a/apps/earn/components/MigratePage/PositionCard.tsx b/apps/earn/components/MigratePage/PositionCard.tsx index 9eff297428..d12e6ecfa3 100644 --- a/apps/earn/components/MigratePage/PositionCard.tsx +++ b/apps/earn/components/MigratePage/PositionCard.tsx @@ -73,8 +73,8 @@ export const PositionCard: FC = ({ position }) => { )}
-
diff --git a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx index 01e25f3b98..415335a370 100644 --- a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx @@ -36,7 +36,7 @@ export const SelectNetworkWidget: FC = memo(function S variant="menu" > - - + ) : (
)} {!noLiquidity && ( - )} diff --git a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx index dbab1c8b08..b5abd1f264 100644 --- a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx @@ -29,8 +29,7 @@ export const SelectTokensWidget: FC = ({ chainId, token0, to {({ open, setOpen }) => (
)} - - + + - Not enough balance - - } + guard={} > - Enter valid range - - } + guard={} > = withCheckerRoot(({ pool }) => { {({ open }) => ( - )} @@ -754,7 +742,6 @@ export const MigrateTab: FC<{ pool: Pool }> = withCheckerRoot(({ pool }) => {
)} @@ -199,31 +191,27 @@ const Pool: FC = () => {
- - - + +
+ 1D 1W - +
{poolStats ? ( diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx index bfb7ef1945..427f802691 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx @@ -5,7 +5,7 @@ import { Checker } from '@sushiswap/wagmi/future/systems/Checker' import { FC, useCallback } from 'react' import { usePoolPositionRewards } from '../../PoolPositionRewardsProvider' -import Button from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { Dialog } from '@sushiswap/ui/future/components/dialog' import { Currency } from '@sushiswap/ui/future/components/currency' @@ -61,9 +61,9 @@ export const PoolActionBarPositionRewards: FC })}
- - - diff --git a/apps/earn/components/PoolSection/PoolButtons.tsx b/apps/earn/components/PoolSection/PoolButtons.tsx index 8da522087f..0228464331 100644 --- a/apps/earn/components/PoolSection/PoolButtons.tsx +++ b/apps/earn/components/PoolSection/PoolButtons.tsx @@ -19,34 +19,27 @@ export const PoolButtons: FC = ({ pool }) => { return (
- - - - - - - - + +
-
) diff --git a/apps/earn/components/PoolSection/PoolChart/PoolChartPeriods.tsx b/apps/earn/components/PoolSection/PoolChart/PoolChartPeriods.tsx index f81f53f527..2154f3376d 100644 --- a/apps/earn/components/PoolSection/PoolChart/PoolChartPeriods.tsx +++ b/apps/earn/components/PoolSection/PoolChart/PoolChartPeriods.tsx @@ -1,6 +1,6 @@ -import { Button } from '@sushiswap/ui/future/components/button' import React, { FC } from 'react' import { PoolChartPeriod } from './types' +import { Toggle } from '@sushiswap/ui/future/components/toggle' interface PoolChartPeriodsProps { periods: PoolChartPeriod[] @@ -12,16 +12,9 @@ const PoolChartPeriods: FC = ({ periods, selectedPeriod, return (
{periods.map((period) => ( - + ))}
) diff --git a/apps/earn/components/PoolSection/PoolChart/PoolChartTypes.tsx b/apps/earn/components/PoolSection/PoolChart/PoolChartTypes.tsx index e6e9b3e02c..57098dcaaa 100644 --- a/apps/earn/components/PoolSection/PoolChart/PoolChartTypes.tsx +++ b/apps/earn/components/PoolSection/PoolChart/PoolChartTypes.tsx @@ -1,5 +1,5 @@ -import { Button } from '@sushiswap/ui/future/components/button' import React, { FC } from 'react' +import { Toggle } from '@sushiswap/ui/future/components/toggle' interface PoolChartTypesProps { charts: Readonly @@ -11,16 +11,9 @@ function PoolChartTypes({ charts, selectedChart, setChart }: P return (
{charts.map((chart) => ( - + ))}
) diff --git a/apps/earn/components/PoolSection/PoolMyRewards.tsx b/apps/earn/components/PoolSection/PoolMyRewards.tsx index b73cd237ab..20dd7ae2a6 100644 --- a/apps/earn/components/PoolSection/PoolMyRewards.tsx +++ b/apps/earn/components/PoolSection/PoolMyRewards.tsx @@ -57,9 +57,9 @@ export const PoolMyRewards: FC = ({ pool }) => { })}
- - - diff --git a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx index 6f2ba05493..0b718e347d 100644 --- a/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx +++ b/apps/earn/components/PoolSection/V2/PoolTransactionsV2/PoolTransactionsV2.tsx @@ -5,9 +5,9 @@ import { AMOUNT_IN_COLUMN, AMOUNT_OUT_COLUMN, AMOUNT_USD_COLUMN, SENDER_COLUMN, import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' import { Chain } from '@sushiswap/chain' import { RadioGroup } from '@headlessui/react' -import { Button } from '@sushiswap/ui/future/components/button' import { Pool } from '@sushiswap/client' import { Paginator } from '@sushiswap/ui/future/components/table/Paginator' +import { Toggle } from '@sushiswap/ui/future/components/toggle' interface PoolTransactionsV2Props { pool: Pool | undefined | null @@ -58,38 +58,23 @@ export const PoolTransactionsV2: FC = ({ pool, poolId } {({ checked }) => ( - + )} {({ checked }) => ( - + )} {({ checked }) => ( - + )} diff --git a/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx b/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx index 0577e1611d..9d6b8d42f9 100644 --- a/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx +++ b/apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx @@ -6,8 +6,8 @@ import { AMOUNT_IN_COLUMN, AMOUNT_OUT_COLUMN, AMOUNT_USD_COLUMN, SENDER_COLUMN, import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable' import { Chain } from '@sushiswap/chain' import { RadioGroup } from '@headlessui/react' -import { Button } from '@sushiswap/ui/future/components/button' import { Paginator } from '@sushiswap/ui/future/components/table/Paginator' +import { Toggle } from '@sushiswap/ui/future/components/toggle' interface PoolTransactionsV3Props { pool: Pool | undefined | null @@ -58,38 +58,23 @@ export const PoolTransactionsV3: FC = ({ pool, poolId } {({ checked }) => ( - + )} {({ checked }) => ( - + )} {({ checked }) => ( - + )} diff --git a/apps/earn/components/Pools.tsx b/apps/earn/components/Pools.tsx index ac485032bf..1e20d2fd06 100644 --- a/apps/earn/components/Pools.tsx +++ b/apps/earn/components/Pools.tsx @@ -30,7 +30,7 @@ export const Pools: FC<{ filters?: Partial }> = ({ filters }) => {
- + Provide Liquidity
and receive fees & rewards1 @@ -39,17 +39,15 @@ export const Pools: FC<{ filters?: Partial }> = ({ filters }) => {
- + + {({ open }) => ( <> @@ -57,7 +55,7 @@ export const Pools: FC<{ filters?: Partial }> = ({ filters }) => { as="button" className={classNames( open ? 'bg-blue-600' : '', - 'bg-blue hover:bg-blue-600 h-[44px] w-[44px] flex items-center justify-center rounded-r-full text-white' + 'bg-blue hover:bg-blue-600 h-[44px] w-[44px] flex items-center justify-center rounded-r-xl text-white' )} > diff --git a/apps/earn/components/PoolsSection/PoolsSection.tsx b/apps/earn/components/PoolsSection/PoolsSection.tsx index bec935a5af..7e08ec7b8b 100644 --- a/apps/earn/components/PoolsSection/PoolsSection.tsx +++ b/apps/earn/components/PoolsSection/PoolsSection.tsx @@ -22,12 +22,7 @@ export const PoolsSection: FC = () => {
{({ selected }) => ( - )} @@ -36,26 +31,14 @@ export const PoolsSection: FC = () => { <> {({ selected }) => ( - )} {({ selected }) => ( - )} diff --git a/apps/earn/components/PoolsSection/PositionsTab.tsx b/apps/earn/components/PoolsSection/PositionsTab.tsx index 9b1b69b720..5acbea18bb 100644 --- a/apps/earn/components/PoolsSection/PositionsTab.tsx +++ b/apps/earn/components/PoolsSection/PositionsTab.tsx @@ -1,10 +1,10 @@ import { Tab } from '@headlessui/react' import React, { Fragment, useState } from 'react' -import { Button } from '@sushiswap/ui/future/components/button' import { ConcentratedPositionsTable } from './Tables/PositionsTable/ConcentratedPositionsTable' import { PositionsTable } from './Tables' import { Container } from '@sushiswap/ui/future/components/container' import { Switch } from '@sushiswap/ui/future/components/switch' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const PositionsTab = () => { const [hide, setHide] = useState(true) @@ -17,32 +17,22 @@ export const PositionsTab = () => {
{({ selected }) => ( - + )} {({ selected }) => ( - + )}
diff --git a/apps/earn/components/PoolsSection/RewardsTab.tsx b/apps/earn/components/PoolsSection/RewardsTab.tsx index c6d3029a69..98919af18c 100644 --- a/apps/earn/components/PoolsSection/RewardsTab.tsx +++ b/apps/earn/components/PoolsSection/RewardsTab.tsx @@ -1,8 +1,8 @@ import { RewardsSection } from '../RewardsSection' import React, { Fragment, useState } from 'react' import { Tab } from '@headlessui/react' -import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const RewardsTab = () => { const [tabPositions, setTabPositions] = useState(0) @@ -13,17 +13,12 @@ export const RewardsTab = () => {
{({ selected }) => ( - + )}
diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx index af2c5ed906..a069905650 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx @@ -6,7 +6,7 @@ import { Currency } from '@sushiswap/ui/future/components/currency' import { incentiveRewardToToken } from '../../../../lib/functions' import { List } from '@sushiswap/ui/future/components/list/List' -import Button from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { PlusIcon, UserCircleIcon } from '@heroicons/react/solid' import { ChainId } from '@sushiswap/chain' @@ -29,20 +29,13 @@ export const PoolQuickHoverTooltip: FC = ({ row }) =
- - - + {row.protocol === Protocol.SUSHISWAP_V3 && ( - - - + )}
@@ -60,8 +53,6 @@ export const PoolQuickHoverTooltip: FC = ({ row }) = icon={Currency.Icon} iconProps={{ currency: incentiveRewardToToken(row.chainId as ChainId, incentive), - width: 18, - height: 18, }} title={`${formatNumber(incentive.rewardPerDay)} ${incentive.rewardToken.symbol}`} /> diff --git a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx index e875183074..0083fa196d 100644 --- a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx @@ -63,18 +63,14 @@ const _PositionQuickHoverTooltip: FC = ({ row })
- - - - - - - + +
@@ -91,8 +87,6 @@ const _PositionQuickHoverTooltip: FC = ({ row }) icon={Currency.Icon} iconProps={{ currency: reward.currency, - width: 24, - height: 24, }} title={
@@ -125,8 +119,6 @@ const _PositionQuickHoverTooltip: FC = ({ row }) icon={Currency.Icon} iconProps={{ currency: underlying0?.currency, - width: 24, - height: 24, }} title={
@@ -144,8 +136,6 @@ const _PositionQuickHoverTooltip: FC = ({ row }) icon={Currency.Icon} iconProps={{ currency: underlying1?.currency, - width: 24, - height: 24, }} title={
@@ -171,8 +161,6 @@ const _PositionQuickHoverTooltip: FC = ({ row }) icon={Currency.Icon} iconProps={{ currency: stakedUnderlying0?.currency, - width: 24, - height: 24, }} title={
@@ -187,8 +175,6 @@ const _PositionQuickHoverTooltip: FC = ({ row }) icon={Currency.Icon} iconProps={{ currency: stakedUnderlying1?.currency, - width: 24, - height: 24, }} title={
diff --git a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFilters.tsx b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFilters.tsx index fc4c7a2fb1..e52efa007e 100644 --- a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFilters.tsx +++ b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFilters.tsx @@ -2,9 +2,9 @@ import React, { FC, useCallback } from 'react' import { usePoolFilters } from '../../../PoolsFiltersProvider' import { TableFiltersSearchToken } from './TableFiltersSearchToken' -import { Button } from '@sushiswap/ui/future/components/button' import { TableFiltersNetwork } from './TableFiltersNetwork' import { Protocol } from '@sushiswap/client' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const TableFilters: FC<{ showCategories?: boolean }> = ({ showCategories = true }) => { const { protocols, farmsOnly, setFilters } = usePoolFilters() @@ -37,60 +37,46 @@ export const TableFilters: FC<{ showCategories?: boolean }> = ({ showCategories {showCategories && (
- - + - - - +
)} diff --git a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersNetwork.tsx b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersNetwork.tsx index 5835b2e180..93786a9c44 100644 --- a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersNetwork.tsx +++ b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersNetwork.tsx @@ -23,11 +23,11 @@ export const TableFiltersNetwork: FC = () => { > {({ open }) => (
- + Networks{' '} diff --git a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx index 1845f4c6fa..7c5ce0b9db 100644 --- a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx +++ b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx @@ -15,5 +15,15 @@ export const TableFiltersSearchToken: FC = () => { } }, [_query, debouncedQuery, setFilters, tokenSymbols]) - return + return ( + + ) } diff --git a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx index 6eb689b807..f2405977c9 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx @@ -250,27 +250,26 @@ export const RemoveSectionLegacy: FC = withCheckerRoot token1Minimum={minAmount1} setPercentage={setPercentage} > - + + } > - + + } > = withCheckerRoot } > - + + } > = withCheckerRo > = withCheckerRo - } + guard={} > = withCheckerRoot((
)} @@ -118,7 +118,7 @@ export const RemoveSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - )} @@ -150,28 +150,28 @@ export const RemoveSectionWidget: FC = ({
diff --git a/apps/earn/pages/[id]/migrate.tsx b/apps/earn/pages/[id]/migrate.tsx index de84026ecd..4195ede19a 100644 --- a/apps/earn/pages/[id]/migrate.tsx +++ b/apps/earn/pages/[id]/migrate.tsx @@ -87,15 +87,7 @@ export const Migrate = () => {
- + Go back to pool list @@ -151,7 +143,7 @@ export const Migrate = () => { modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - )} diff --git a/apps/earn/pages/add/index.tsx b/apps/earn/pages/add/index.tsx index e55da99298..90bf65ab51 100644 --- a/apps/earn/pages/add/index.tsx +++ b/apps/earn/pages/add/index.tsx @@ -35,15 +35,7 @@ export function AddPage() {
- + Go back to pools list diff --git a/apps/earn/pages/add/trident/[chainId]/index.tsx b/apps/earn/pages/add/trident/[chainId]/index.tsx index ec20a2de4b..2486ba0cd3 100644 --- a/apps/earn/pages/add/trident/[chainId]/index.tsx +++ b/apps/earn/pages/add/trident/[chainId]/index.tsx @@ -87,15 +87,7 @@ export function Add(props: InferGetStaticPropsType) {
- + Go back to pools list @@ -320,15 +312,14 @@ const _Add: FC = ({ loading={poolState === ConstantProductPoolState.LOADING || poolState === StablePoolState.LOADING} /> - - - + + + {pool && (isConstantProductPool(pool) || isStablePool(pool)) && isBentoBoxV1ChainId(chainId) && ( <> = ({ > = ({ > = ({ enabled={isBentoBoxV1ChainId(chainId)} > - @@ -383,7 +372,6 @@ const _Add: FC = ({ = ({ > = ({ > = ({ enabled={isBentoBoxV1ChainId(chainId)} > - diff --git a/apps/earn/pages/add/v2/[chainId]/index.tsx b/apps/earn/pages/add/v2/[chainId]/index.tsx index 739912f6cc..3e9be55f0a 100644 --- a/apps/earn/pages/add/v2/[chainId]/index.tsx +++ b/apps/earn/pages/add/v2/[chainId]/index.tsx @@ -69,15 +69,7 @@ export function Add(props: InferGetStaticPropsType) {
- + Go back to pools list @@ -249,14 +241,13 @@ const _Add: FC = ({ chainId, setChainId, pool, poolState, title, token loading={poolState === PairState.LOADING} /> - - - + + + {pool && isLegacyPool(pool) && isUniswapV2Router02ChainId(chainId) && ( <> = ({ chainId, setChainId, pool, poolState, title, token > - diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index 94734548e9..38f5c9361e 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -164,15 +164,7 @@ const Position: FC = () => { href={`/${chainId}:${positionDetails?.address}`} shallow={true} > - + Go back to pool { } - variant="outlined" + icon={PlusIcon} + variant="secondary" color={tab === SelectedTab.IncreaseLiq ? 'blue' : 'default'} > Increase Liquidity @@ -204,8 +196,8 @@ const Position: FC = () => { } - variant="outlined" + icon={MinusIcon} + variant="secondary" color={tab === SelectedTab.DecreaseLiq ? 'blue' : 'default'} testdata-id="decrease-liquidity-button" > @@ -223,7 +215,7 @@ const Position: FC = () => { modules={[SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - )} @@ -307,13 +299,13 @@ const Position: FC = () => {
{({ write, isLoading }) => ( - - + + )} @@ -123,10 +119,9 @@ export const CancelModal: FC = ({ . - - + +
@@ -77,26 +72,25 @@ export const Dashboard: FC<{ address?: Address }> = ({ address: providedAddress
{({ selected }) => ( - + )} {({ selected }) => ( - + )} - +
diff --git a/apps/furo/components/Header.tsx b/apps/furo/components/Header.tsx index ad567b4b87..25d4f76446 100644 --- a/apps/furo/components/Header.tsx +++ b/apps/furo/components/Header.tsx @@ -7,7 +7,6 @@ import React, { FC } from 'react' import { SUPPORTED_CHAINS } from '../config' import { AppearOnMount } from '@sushiswap/ui/future/components/animation' -import { PaperAirplaneIcon } from '@heroicons/react/outline' import { useConnect } from '@sushiswap/wagmi' import { Onramper } from '@sushiswap/wagmi/future/components' import { Button } from '@sushiswap/ui/future/components/button' @@ -23,17 +22,11 @@ export const Header: FC = () => { - + + + ) } @@ -42,9 +35,7 @@ export const Header: FC = () => { - + ) diff --git a/apps/furo/components/TransferModal.tsx b/apps/furo/components/TransferModal.tsx index c0c939aca3..fe293406fc 100644 --- a/apps/furo/components/TransferModal.tsx +++ b/apps/furo/components/TransferModal.tsx @@ -7,7 +7,7 @@ import { Dots } from '@sushiswap/ui/future/components/dots' import { _useSendTransaction as useSendTransaction, useAccount, useContract, useEnsAddress } from '@sushiswap/wagmi' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react' import { SendTransactionResult } from '@sushiswap/wagmi/actions' -import { Button } from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { Stream, Vesting } from '../lib' import { createToast } from '@sushiswap/ui/future/components/toast' import { Checker } from '@sushiswap/wagmi/future/systems/Checker' @@ -102,7 +102,8 @@ export const TransferModal: FC = ({ ) : ( - - + + - +
diff --git a/apps/furo/components/stream/UpdateModal.tsx b/apps/furo/components/stream/UpdateModal.tsx index 6ebe43c093..3317135e6a 100644 --- a/apps/furo/components/stream/UpdateModal.tsx +++ b/apps/furo/components/stream/UpdateModal.tsx @@ -9,7 +9,7 @@ import { classNames } from '@sushiswap/ui' import { _useSendTransaction as useSendTransaction, useAccount, useContract, Address } from '@sushiswap/wagmi' import React, { Dispatch, FC, ReactNode, SetStateAction, useCallback, useMemo, useState } from 'react' import { SendTransactionResult } from '@sushiswap/wagmi/actions' -import { Button } from '@sushiswap/ui/future/components/button/Button' +import { Button } from '@sushiswap/ui/future/components/button' import { Stream, approveBentoBoxAction, batchAction } from '../../lib' import { createToast } from '@sushiswap/ui/future/components/toast' import { bentoBoxV1Address, BentoBoxV1ChainId } from '@sushiswap/bentobox' @@ -165,12 +165,7 @@ export const UpdateModal: FC = withCheckerRoot( {typeof children === 'function' ? ( children({ setOpen }) ) : ( - )} @@ -234,12 +229,12 @@ export const UpdateModal: FC = withCheckerRoot(
- - + + + } @@ -247,16 +242,14 @@ export const UpdateModal: FC = withCheckerRoot( + } > = withCheckerRoot( = withCheckerRoot( - } + guard={} > - Not enough available - - } + guard={} > - - + + - +
diff --git a/apps/furo/components/vesting/WithdrawModal.tsx b/apps/furo/components/vesting/WithdrawModal.tsx index 62f5d20806..fb671653f8 100644 --- a/apps/furo/components/vesting/WithdrawModal.tsx +++ b/apps/furo/components/vesting/WithdrawModal.tsx @@ -79,8 +79,6 @@ export const WithdrawModal: FC = ({ vesting, chainId, childr ) : (
- - + + - Not enough available - - } + guard={} > -
@@ -152,11 +144,11 @@ export default function CreatePage() { leaveTo="transform translate-y-[32px] opacity-0" >
- -
diff --git a/apps/furo/pages/stream/[id].tsx b/apps/furo/pages/stream/[id].tsx index c231043a74..d57a7b89d4 100644 --- a/apps/furo/pages/stream/[id].tsx +++ b/apps/furo/pages/stream/[id].tsx @@ -90,15 +90,7 @@ const _Streams: FC = () => { }} shallow={true} > - + Go back to dashboard @@ -170,15 +162,7 @@ const _Streams: FC = () => { }} shallow={true} > - + Go back to dashboard @@ -208,9 +192,9 @@ const _Streams: FC = () => { @@ -225,9 +209,9 @@ const _Streams: FC = () => { {({ setOpen }) => ( @@ -240,12 +224,7 @@ const _Streams: FC = () => { chainId={chainId} > {({ setOpen }) => ( - )} @@ -262,9 +241,9 @@ const _Streams: FC = () => { diff --git a/apps/furo/pages/stream/create/multiple.tsx b/apps/furo/pages/stream/create/multiple.tsx index 64698edc41..64e7a86327 100644 --- a/apps/furo/pages/stream/create/multiple.tsx +++ b/apps/furo/pages/stream/create/multiple.tsx @@ -25,15 +25,7 @@ const MultipleStream = () => { }} shallow={true} > - + Go back diff --git a/apps/furo/pages/stream/create/single.tsx b/apps/furo/pages/stream/create/single.tsx index 5b353e8919..10120d2299 100644 --- a/apps/furo/pages/stream/create/single.tsx +++ b/apps/furo/pages/stream/create/single.tsx @@ -25,15 +25,7 @@ const SingleStream = () => { }} shallow={true} > - + Go back diff --git a/apps/furo/pages/vesting/[id].tsx b/apps/furo/pages/vesting/[id].tsx index 0e37dfd10b..dd55a506ab 100644 --- a/apps/furo/pages/vesting/[id].tsx +++ b/apps/furo/pages/vesting/[id].tsx @@ -23,7 +23,7 @@ import { Address } from '@sushiswap/wagmi' import { ChainId } from '@sushiswap/chain' import { getFuroVestingContractConfig } from '@sushiswap/wagmi' import { Button } from '@sushiswap/ui/future/components/button' -import { DownloadIcon, XIcon } from '@heroicons/react/outline' +import { DownloadIcon, TrashIcon } from '@heroicons/react/outline' import { FuroStatus, useVesting, useVestingBalance, useVestingTransactions } from '../../lib' import { queryParamsSchema } from '../../lib/zod' import { Carousel } from '@sushiswap/ui/future/components/Carousel' @@ -106,15 +106,7 @@ const _VestingPage: FC = () => { }} shallow={true} > - + Go back to dashboard @@ -186,15 +178,7 @@ const _VestingPage: FC = () => { }} shallow={true} > - + Go back to dashboard @@ -224,9 +208,9 @@ const _VestingPage: FC = () => { @@ -241,8 +225,8 @@ const _VestingPage: FC = () => { {({ setOpen }) => ( )} diff --git a/apps/furo/pages/vesting/create/multiple.tsx b/apps/furo/pages/vesting/create/multiple.tsx index d878247a2f..853605d841 100644 --- a/apps/furo/pages/vesting/create/multiple.tsx +++ b/apps/furo/pages/vesting/create/multiple.tsx @@ -25,15 +25,7 @@ const MultipleStream = () => { }} shallow={true} > - + Go back diff --git a/apps/furo/pages/vesting/create/single.tsx b/apps/furo/pages/vesting/create/single.tsx index f8568db4f5..bf5e9b10d5 100644 --- a/apps/furo/pages/vesting/create/single.tsx +++ b/apps/furo/pages/vesting/create/single.tsx @@ -25,15 +25,7 @@ const SingleVesting = () => { }} shallow={true} > - + Go back diff --git a/config/tailwindcss/src/index.ts b/config/tailwindcss/src/index.ts index f73bc463a7..4be90b2439 100644 --- a/config/tailwindcss/src/index.ts +++ b/config/tailwindcss/src/index.ts @@ -59,6 +59,10 @@ const config = { yellow: { DEFAULT: '#eab308', }, + muted: 'var(--muted)', + 'muted-foreground': 'var(--muted-foreground)', + accent: 'var(--accent)', + 'accent-foreground': 'var(--accent-foreground)', }, animation: { ellipsis: 'ellipsis 1.25s infinite', diff --git a/packages/ui/package.json b/packages/ui/package.json index ea7d985e84..72542cf189 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -65,6 +65,7 @@ "@heroicons/react": "2.0.13", "@popperjs/core": "2.11.7", "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", @@ -73,6 +74,7 @@ "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.6", "@react-hook/window-scroll": "1.3.0", "@sushiswap/chain": "workspace:*", diff --git a/packages/ui/src/future/components/GlobalNav.tsx b/packages/ui/src/future/components/GlobalNav.tsx index ff3a269053..9734710f0b 100644 --- a/packages/ui/src/future/components/GlobalNav.tsx +++ b/packages/ui/src/future/components/GlobalNav.tsx @@ -77,7 +77,7 @@ export const GlobalNav: FC = ({
setOpen(true)} onMouseLeave={() => setOpen(false)}> - + Explore = ({ title, href }) => { return ( - + + + ) } @@ -173,7 +175,7 @@ export const SubNav: FC<{ title: string; children: ReactNode }> = ({ title, chil return ( setOpen(true)} onMouseLeave={() => setOpen(false)}> - + {title} , + VariantProps { + icon?: IconComponent + iconProps?: Omit, 'width' | 'height'> + asChild?: boolean + loading?: boolean + fullWidth?: boolean + testId?: string +} + +const Button = React.forwardRef( + ( + { + fullWidth, + icon: Icon, + iconProps, + disabled = false, + className, + variant, + size, + children, + asChild = false, + loading = false, + ...props + }, + ref + ) => { + const Comp = asChild ? Slot : 'button' + return ( + + + {loading ? ( + + ) : Icon ? ( + + ) : null} + {children} + + + ) + } +) + +Button.displayName = 'Button' + +interface ButtonContentProps extends React.HTMLAttributes { + asChild?: boolean +} + +const ButtonContent = React.forwardRef(({ asChild, children, ...props }, ref) => { + if (asChild) { + return ( +
+ {children} +
+ ) + } + + return <>{children} +}) + +export { Button, buttonVariants, buttonLoaderVariants, buttonIconVariants } diff --git a/packages/ui/src/future/components/button/Button.tsx b/packages/ui/src/future/components/button/Button.tsx deleted file mode 100644 index f0f90d56fd..0000000000 --- a/packages/ui/src/future/components/button/Button.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import classNames from 'classnames' -import React, { ReactNode } from 'react' - -import { Loader } from '../loader' -import { BUTTON_CLASSES, BUTTON_SIZES, BUTTON_STYLES, BUTTON_STYLES_VARIANT } from './styles' -import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../../types' - -export type ButtonColor = 'red' | 'blue' | 'default' | 'yellow' | 'green' -export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' -export type ButtonVariant = 'outlined' | 'filled' | 'empty' - -interface Props { - children?: ReactNode | Array - startIcon?: ReactNode - endIcon?: ReactNode - color?: ButtonColor - size?: ButtonSize - variant?: ButtonVariant - fullWidth?: boolean - loading?: boolean - href?: string - testId?: string -} - -export type ButtonProps = PolymorphicComponentPropsWithRef -export type ButtonComponent = ( - props: ButtonProps -) => React.ReactElement | null - -// eslint-disable-next-line react/display-name -export const Button: ButtonComponent = React.forwardRef( - ( - { - id, - as, - children, - className, - color = 'blue', - size = 'md', - variant = 'filled', - startIcon = undefined, - endIcon = undefined, - fullWidth = false, - loading, - disabled, - testId, - ...rest - }: ButtonProps, - ref?: PolymorphicRef - ) => { - const Component = as || 'button' - - return ( - - {loading ? ( - - ) : ( - <> - {startIcon && startIcon} - {children} - {endIcon && endIcon} - - )} - - ) - } -) - -export default Button diff --git a/packages/ui/src/future/components/button/index.ts b/packages/ui/src/future/components/button/index.ts deleted file mode 100644 index 8486fd6d62..0000000000 --- a/packages/ui/src/future/components/button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Button' diff --git a/packages/ui/src/future/components/button/styles.ts b/packages/ui/src/future/components/button/styles.ts deleted file mode 100644 index 824d90e3b3..0000000000 --- a/packages/ui/src/future/components/button/styles.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { ButtonColor, ButtonSize, ButtonVariant } from './Button' - -export const BUTTON_CLASSES: Record = { - btn: 'font-medium flex items-center justify-center gap-2 cursor-pointer transition-all', - 'btn-disabled': 'pointer-events-none relative opacity-[0.4] overflow-hidden', - 'btn-filled': '', - 'btn-empty': '', - 'btn-outlined': '', - 'btn-outlined-red': 'bg-red/[0.15] hover:bg-red/20 active:bg-red/30 text-red', - 'btn-outlined-blue': 'bg-blue/[0.15] hover:bg-blue/20 active:bg-blue/30 text-blue', - 'btn-outlined-yellow': 'bg-yellow/[0.15] hover:bg-yellow/20 active:bg-yellow/30 text-yellow', - 'btn-outlined-green': 'bg-green/[0.15] hover:bg-green/20 active:bg-green/30 text-green', - 'btn-outlined-gray': 'bg-white dark:bg-slate-600/10 hover:dark:bg-slate-600/20 active:dark:bg-slate-600/30', - 'btn-filled-red': 'bg-red hover:bg-red-600 active:bg-red-700 text-white', - 'btn-filled-blue': 'bg-blue hover:bg-blue-600 active:bg-blue-700 text-white', - 'btn-filled-yellow': 'bg-yellow hover:bg-yellow-600 active:bg-yellow-700 text-white', - 'btn-filled-green': 'bg-green hover:bg-green-600 active:bg-green-700 text-white', - 'btn-filled-gray': - 'bg-white dark:bg-slate-800 hover:dark:bg-slate-700 active:dark:bg-slate-600 text-gray-900 dark:text-white', - 'btn-xs': 'px-2 h-[28px] text-xs rounded-lg', - 'btn-sm': 'px-4 h-[32px] text-sm rounded-lg', - 'btn-md': 'px-4 h-[38px] rounded-xl text-base font-semibold', - 'btn-lg': 'px-6 h-[44px] rounded-xl text-base font-semibold', - 'btn-xl': 'px-6 h-[52px] rounded-xl text-base font-semibold', - 'btn-empty-red': 'text-red hover:bg-red/20 active:bg-red/30', - 'btn-empty-blue': 'text-blue hover:bg-blue/20 active:bg-blue/30', - 'btn-empty-yellow': 'text-yellow hover:bg-yellow/20 active:bg-yellow/30', - 'btn-empty-green': 'text-green hover:bg-green/20 active:bg-green/30', - 'btn-empty-gray': - 'hover:bg-white hover:dark:bg-slate-600/20 active:dark:bg-slate-600/30 text-gray-700 hover:text-gray-800 active:text-gray-900 dark:text-slate-200 hover:dark:text-slate-100 active:dark:text-slate-50', -} - -export const BUTTON_STYLES: Record> = { - outlined: { - red: 'btn-outlined-red', - blue: 'btn-outlined-blue', - yellow: 'btn-outlined-yellow', - green: 'btn-outlined-green', - default: 'btn-outlined-gray', - }, - filled: { - red: 'btn-filled-red', - blue: 'btn-filled-blue', - yellow: 'btn-filled-yellow', - green: 'btn-filled-green', - default: 'btn-filled-gray', - }, - empty: { - red: 'btn-empty-red', - blue: 'btn-empty-blue', - yellow: 'btn-empty-yellow', - green: 'btn-empty-green', - default: 'btn-empty-gray', - }, -} - -export const BUTTON_STYLES_VARIANT: Record = { - outlined: 'btn-outlined', - filled: 'btn-filled', - empty: 'btn-empty', -} - -export const BUTTON_SIZES: Record = { - xs: 'btn-xs', - sm: 'btn-sm', - md: 'btn-md', - lg: 'btn-lg', - xl: 'btn-xl', -} diff --git a/packages/ui/src/future/components/buttonnew.tsx b/packages/ui/src/future/components/buttonnew.tsx deleted file mode 100644 index d11aebca55..0000000000 --- a/packages/ui/src/future/components/buttonnew.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react' -import { Slot } from '@radix-ui/react-slot' -import { cva, type VariantProps } from 'class-variance-authority' -import { classNames } from '../../index' - -const buttonVariants = cva( - 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', - { - variants: { - variant: { - default: 'bg-blue text-white', - destructive: 'bg-red text-white', - outline: 'border dark:border-slate-200/5 border-gray-900/5', - secondary: 'bg-white dark:bg-slate-800', - ghost: - 'bg-black/[0.04] hover:bg-black/[0.06] focus:bg-black/[0.12] dark:bg-white/[0.08] dark:hover:bg-white/[0.12] dark:focus:bg-white/[0.16]', - link: 'underline-offset-4 hover:underline text-primary', - }, - size: { - default: 'h-10 py-2 px-4', - sm: 'h-9 px-3 rounded-md', - lg: 'h-11 px-8 rounded-md', - }, - }, - defaultVariants: { - variant: 'default', - size: 'default', - }, - } -) - -export interface ButtonPropsNew - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean -} - -const ButtonNew = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button' - return - } -) -ButtonNew.displayName = 'ButtonNew' - -export { ButtonNew, buttonVariants } diff --git a/packages/ui/src/future/components/calendar.tsx b/packages/ui/src/future/components/calendar.tsx index 2f5f709ef3..6a685c5ddd 100644 --- a/packages/ui/src/future/components/calendar.tsx +++ b/packages/ui/src/future/components/calendar.tsx @@ -4,7 +4,7 @@ import * as React from 'react' import { DayPicker } from 'react-day-picker' import { default as cn } from 'classnames' -import { buttonVariants } from './buttonnew' +import { buttonVariants } from './button' import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline' export type CalendarProps = React.ComponentProps diff --git a/packages/ui/src/future/components/currency/Icon.tsx b/packages/ui/src/future/components/currency/Icon.tsx index 6b7913be7b..fbc9b296c1 100644 --- a/packages/ui/src/future/components/currency/Icon.tsx +++ b/packages/ui/src/future/components/currency/Icon.tsx @@ -4,6 +4,7 @@ import { Currency } from '@sushiswap/currency' import Image, { ImageProps } from 'next/image' import { FC, useEffect, useMemo, useState } from 'react' import { cloudinaryImageLoader } from '../../../cloudinary' +import { classNames } from '../../../index' const AvaxLogo = 'avax.svg' const BnbLogo = 'bnb.svg' @@ -88,7 +89,7 @@ export interface IconProps extends Omit { disableLink?: boolean } -export const Icon: FC = ({ currency, disableLink, ...rest }) => { +export const Icon: FC = ({ currency, disableLink, className, ...rest }) => { const [error, setError] = useState(false) const src = useMemo(() => { @@ -150,7 +151,7 @@ export const Icon: FC = ({ currency, disableLink, ...rest }) => { onError={() => setError(true)} src={src} alt={currency.name || currency.symbol || currency.wrapped.address} - className="rounded-full" + className={classNames(className, 'rounded-full overflow-hidden')} width={rest.width} height={rest.height} loader={cloudinaryImageLoader} @@ -166,8 +167,8 @@ export const Icon: FC = ({ currency, disableLink, ...rest }) => { key={src} onError={() => setError(true)} src={src} + className={classNames(className, 'rounded-full overflow-hidden')} alt={currency.name || currency.symbol || currency.wrapped.address} - className="rounded-full" width={rest.width} height={rest.height} loader={cloudinaryImageLoader} diff --git a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx index f2d76618c9..be0200f5f2 100644 --- a/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx +++ b/packages/ui/src/future/components/dialog/ConfirmationDialog.tsx @@ -92,8 +92,7 @@ export const ConfirmationDialog: FC = ({ ) if (description) { return ( - {icon} + {button}

{description}

 @@ -56,7 +34,7 @@ const IconButton = React.forwardRef( ) } - return icon + return button } ) IconButton.displayName = 'ButtonNew' diff --git a/packages/ui/src/future/components/icons/ArrowFlatLinesUp.tsx b/packages/ui/src/future/components/icons/ArrowFlatLinesUp.tsx index 40211367ba..235ffee62b 100644 --- a/packages/ui/src/future/components/icons/ArrowFlatLinesUp.tsx +++ b/packages/ui/src/future/components/icons/ArrowFlatLinesUp.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const ArrowFlatLinesUp = (props: React.ComponentProps<'svg'>) => { +export const ArrowFlatLinesUp: IconComponent = (props) => { return ( ) => { +export const BentoboxIcon: IconComponent = (props) => { return ( ) => { +export const CalendarIcon: IconComponent = (props) => { return ( ) => { +export const CarbonIcon: IconComponent = (props) => { return ( ) => { +export const CheckIcon: IconComponent = (props) => { return ( ) => { +export const CheckMarkIcon: IconComponent = (props) => { return ( { +interface CircleWithText extends IconProps { text?: string | number } diff --git a/packages/ui/src/future/components/icons/CircleWithText.tsx b/packages/ui/src/future/components/icons/CircleWithText.tsx index 8b5f5d05bc..bf4a6a89ce 100644 --- a/packages/ui/src/future/components/icons/CircleWithText.tsx +++ b/packages/ui/src/future/components/icons/CircleWithText.tsx @@ -1,7 +1,8 @@ import classNames from 'classnames' import React, { FC } from 'react' +import { IconProps } from '../../types' -interface CircleWithText extends React.ComponentProps<'svg'> { +interface CircleWithText extends IconProps { text?: string | number } diff --git a/packages/ui/src/future/components/icons/ClassicPoolIcon.tsx b/packages/ui/src/future/components/icons/ClassicPoolIcon.tsx index ef79ef60ef..77981d052e 100644 --- a/packages/ui/src/future/components/icons/ClassicPoolIcon.tsx +++ b/packages/ui/src/future/components/icons/ClassicPoolIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const ClassicPoolIcon = (props: React.ComponentProps<'svg'>) => { +export const ClassicPoolIcon: IconComponent = (props) => { return ( ) => { +export const CoinbaseWalletIcon: IconComponent = (props) => { return ( ) => { +export const ConcentratedCurveIcon: IconComponent = (props) => { return ( ) => { +export const DangerousIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const DiscordIcon: IconComponent = (props) => { return ( ) => ( +export const EtherscanIcon: IconComponent = (props) => ( ) => { +export const FailedMarkIcon: IconComponent = (props) => { return ( ) => { +export const FrameIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/GasIcon.tsx b/packages/ui/src/future/components/icons/GasIcon.tsx index 18c50b11d7..69f02f83e4 100644 --- a/packages/ui/src/future/components/icons/GasIcon.tsx +++ b/packages/ui/src/future/components/icons/GasIcon.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../types' -export const GasIcon = (props: React.ComponentProps<'svg'>) => ( +export const GasIcon: IconComponent = (props) => ( ) => { +import { IconComponent } from '../../types' + +export const GithubIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const GnosisSafeIcon: IconComponent = (props) => { return ( ) => { +export const GoPlusLabsIcon = (props: Omit) => { return ( ) => { {...props} /> ) -} \ No newline at end of file +} diff --git a/packages/ui/src/future/components/icons/GradientCircleIcon.tsx b/packages/ui/src/future/components/icons/GradientCircleIcon.tsx index 1d3acf349a..977a95709e 100644 --- a/packages/ui/src/future/components/icons/GradientCircleIcon.tsx +++ b/packages/ui/src/future/components/icons/GradientCircleIcon.tsx @@ -1,4 +1,6 @@ -export const GradientCircleIcon = (props: React.ComponentProps<'svg'>) => { +import { IconComponent } from '../../types' + +export const GradientCircleIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/HalfCircleIcon.tsx b/packages/ui/src/future/components/icons/HalfCircleIcon.tsx index 2b537c1070..d47f4dabbb 100644 --- a/packages/ui/src/future/components/icons/HalfCircleIcon.tsx +++ b/packages/ui/src/future/components/icons/HalfCircleIcon.tsx @@ -1,4 +1,6 @@ -export const HalfCircleIcon = (props: React.ComponentProps<'svg'>) => { +import { IconComponent } from '../../types' + +export const HalfCircleIcon: IconComponent = (props) => { return ( ) => { +export const HistoryIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const InstagramIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const LedgerIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const MediumIcon: IconComponent = (props) => { return ( ) => { +export const MetamaskIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/NetworkIcon.tsx b/packages/ui/src/future/components/icons/NetworkIcon.tsx index ce0ffa8268..addcae6b29 100644 --- a/packages/ui/src/future/components/icons/NetworkIcon.tsx +++ b/packages/ui/src/future/components/icons/NetworkIcon.tsx @@ -1,8 +1,9 @@ import React, { FC, useMemo } from 'react' import { NETWORK_CIRCLE_ICON, NETWORK_NAKED_ICON } from './network' +import { IconProps } from '../../types' -interface Props extends React.ComponentProps<'svg'> { +interface Props extends IconProps { type?: 'naked' | 'circle' chainId: number } diff --git a/packages/ui/src/future/components/icons/NotepadIcon.tsx b/packages/ui/src/future/components/icons/NotepadIcon.tsx index 19517256ee..87b33bb045 100644 --- a/packages/ui/src/future/components/icons/NotepadIcon.tsx +++ b/packages/ui/src/future/components/icons/NotepadIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const NotepadIcon = (props: React.ComponentProps<'svg'>) => { +export const NotepadIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/OnsenIcon.tsx b/packages/ui/src/future/components/icons/OnsenIcon.tsx index 69761d00f9..097c8c83a9 100644 --- a/packages/ui/src/future/components/icons/OnsenIcon.tsx +++ b/packages/ui/src/future/components/icons/OnsenIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const OnsenIcon = (props: React.ComponentProps<'svg'>) => { +export const OnsenIcon: IconComponent = (props) => { return ( ) => { +export const PepeIcon: IconComponent = (props) => { return ( ) => { +export const RabbyIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/RainbowIcon.tsx b/packages/ui/src/future/components/icons/RainbowIcon.tsx index ac58f16ba3..6a0611b44c 100644 --- a/packages/ui/src/future/components/icons/RainbowIcon.tsx +++ b/packages/ui/src/future/components/icons/RainbowIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const RainbowIcon = (props: React.ComponentProps<'svg'>) => { +export const RainbowIcon: IconComponent = (props) => { return ( ) => { +export const ShuffleIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/SushiIcon.tsx b/packages/ui/src/future/components/icons/SushiIcon.tsx index c3b5a02177..3d81d863ea 100644 --- a/packages/ui/src/future/components/icons/SushiIcon.tsx +++ b/packages/ui/src/future/components/icons/SushiIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const SushiIcon = (props: React.ComponentProps<'svg'>) => { +export const SushiIcon: IconComponent = (props) => { return ( ) => { +export const SushiWithTextIcon: IconComponent = (props) => { return ( ) => { +export const TrustWalletIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const TwitterIcon: IconComponent = (props) => { return ( ) => { +export const WalletConnectIcon: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/WalletIcon.tsx b/packages/ui/src/future/components/icons/WalletIcon.tsx index 695ea7906e..5da098b113 100644 --- a/packages/ui/src/future/components/icons/WalletIcon.tsx +++ b/packages/ui/src/future/components/icons/WalletIcon.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { IconComponent } from '../../types' -export const WalletIcon = (props: React.ComponentProps<'svg'>) => { +export const WalletIcon: IconComponent = (props) => { return ( ) => { +export const WaterIcon: IconComponent = (props) => { return ( ) => { +import { IconComponent } from '../../types' + +export const YoutubeIcon: IconComponent = (props) => { return ( ) => ( +export const ArbitrumCircle: IconComponent = (props) => ( ) => ( +export const ArbitrumNovaCircle: IconComponent = (props) => ( ) => ( +export const AvalancheCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/BinanceCircle.tsx b/packages/ui/src/future/components/icons/network/circle/BinanceCircle.tsx index 74651a8cdb..1d97d2a0c6 100644 --- a/packages/ui/src/future/components/icons/network/circle/BinanceCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/BinanceCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const BinanceCircle = (props: React.ComponentProps<'svg'>) => ( +export const BinanceCircle: IconComponent = (props) => ( ) => ( +export const BobaAvaxCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/BobaBNBCircle.tsx b/packages/ui/src/future/components/icons/network/circle/BobaBNBCircle.tsx index 25dab64478..3641c3ca66 100644 --- a/packages/ui/src/future/components/icons/network/circle/BobaBNBCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/BobaBNBCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const BobaBNBCircle = (props: React.ComponentProps<'svg'>) => ( +export const BobaBNBCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/BobaCircle.tsx b/packages/ui/src/future/components/icons/network/circle/BobaCircle.tsx index a51b22c070..e7239b37f6 100644 --- a/packages/ui/src/future/components/icons/network/circle/BobaCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/BobaCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const BobaCircle = (props: React.ComponentProps<'svg'>) => ( +export const BobaCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/BttcCircle.tsx b/packages/ui/src/future/components/icons/network/circle/BttcCircle.tsx index 4faef50200..01db20e1e1 100644 --- a/packages/ui/src/future/components/icons/network/circle/BttcCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/BttcCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const BttcCircle = (props: React.ComponentProps<'svg'>) => ( +export const BttcCircle: IconComponent = (props) => ( ) => ( +export const CeloCircle: IconComponent = (props) => ( ) => ( +export const EthereumCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/FantomCircle.tsx b/packages/ui/src/future/components/icons/network/circle/FantomCircle.tsx index 3e6da9845f..9a5f584baa 100644 --- a/packages/ui/src/future/components/icons/network/circle/FantomCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/FantomCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const FantomCircle = (props: React.ComponentProps<'svg'>) => ( +export const FantomCircle: IconComponent = (props) => ( ) => ( +export const FuseCircle: IconComponent = (props) => ( ) => ( +export const GnosisCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/HarmonyCircle.tsx b/packages/ui/src/future/components/icons/network/circle/HarmonyCircle.tsx index b52a972499..c2be6c2ccc 100644 --- a/packages/ui/src/future/components/icons/network/circle/HarmonyCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/HarmonyCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const HarmonyCircle = (props: React.ComponentProps<'svg'>) => ( +export const HarmonyCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/HecoCircle.tsx b/packages/ui/src/future/components/icons/network/circle/HecoCircle.tsx index 836217346d..9a6ecfa5e8 100644 --- a/packages/ui/src/future/components/icons/network/circle/HecoCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/HecoCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const HecoCircle = (props: React.ComponentProps<'svg'>) => ( +export const HecoCircle: IconComponent = (props) => ( ) => ( +export const KavaCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/MetisCircle.tsx b/packages/ui/src/future/components/icons/network/circle/MetisCircle.tsx index db9fb0e3f3..90b45fef0c 100644 --- a/packages/ui/src/future/components/icons/network/circle/MetisCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/MetisCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const MetisCircle = (props: React.ComponentProps<'svg'>) => ( +export const MetisCircle: IconComponent = (props) => ( ) => ( +export const MoonbeamCircle: IconComponent = (props) => ( ) => ( +export const MoonriverCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/OkexCircle.tsx b/packages/ui/src/future/components/icons/network/circle/OkexCircle.tsx index 3873210e86..d78827be1f 100644 --- a/packages/ui/src/future/components/icons/network/circle/OkexCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/OkexCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const OkexCircle = (props: React.ComponentProps<'svg'>) => ( +export const OkexCircle: IconComponent = (props) => ( ) => ( +export const OptimismCircle: IconComponent = (props) => ( ) => ( +export const PalmCircle: IconComponent = (props) => ( ) => ( +export const PolygonCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/PolygonZKCircle.tsx b/packages/ui/src/future/components/icons/network/circle/PolygonZKCircle.tsx index 8df2edf6b2..2e3580e06f 100644 --- a/packages/ui/src/future/components/icons/network/circle/PolygonZKCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/PolygonZKCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const PolygonZKCircle = (props: React.ComponentProps<'svg'>) => ( +export const PolygonZKCircle: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/circle/TelosCircle.tsx b/packages/ui/src/future/components/icons/network/circle/TelosCircle.tsx index 4eebb935b9..10c06e5aaf 100644 --- a/packages/ui/src/future/components/icons/network/circle/TelosCircle.tsx +++ b/packages/ui/src/future/components/icons/network/circle/TelosCircle.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const TelosCircle = (props: React.ComponentProps<'svg'>) => ( +export const TelosCircle: IconComponent = (props) => ( ) => { +export const ThunderCoreCircle: IconComponent = (props) => { return ( diff --git a/packages/ui/src/future/components/icons/network/circle/index.tsx b/packages/ui/src/future/components/icons/network/circle/index.tsx index dd034099c3..506c6409dd 100644 --- a/packages/ui/src/future/components/icons/network/circle/index.tsx +++ b/packages/ui/src/future/components/icons/network/circle/index.tsx @@ -27,6 +27,7 @@ import { PolygonCircle } from './PolygonCircle' import { TelosCircle } from './TelosCircle' import { PolygonZKCircle } from './PolygonZKCircle' import { ThunderCoreCircle } from './ThunderCoreCircle' +import { IconComponent } from '../../../../types' export * from './ArbitrumCircle' export * from './ArbitrumNovaCircle' @@ -55,7 +56,7 @@ export * from './TelosCircle' export * from './PolygonZKCircle' export * from './ThunderCoreCircle' -export const NETWORK_CIRCLE_ICON: Record) => JSX.Element> = { +export const NETWORK_CIRCLE_ICON: Record = { [ChainId.ETHEREUM]: EthereumCircle, [ChainId.FANTOM]: FantomCircle, [ChainId.POLYGON]: PolygonCircle, diff --git a/packages/ui/src/future/components/icons/network/naked/ArbitrumNaked.tsx b/packages/ui/src/future/components/icons/network/naked/ArbitrumNaked.tsx index c3eb95b51e..9186f4099c 100644 --- a/packages/ui/src/future/components/icons/network/naked/ArbitrumNaked.tsx +++ b/packages/ui/src/future/components/icons/network/naked/ArbitrumNaked.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const ArbitrumNaked = (props: React.ComponentProps<'svg'>) => ( +export const ArbitrumNaked: IconComponent = (props) => ( ) => ( +export const ArbitrumNovaNaked: IconComponent = (props) => ( ) => ( +export const AvalancheNaked: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/naked/BinanceNaked.tsx b/packages/ui/src/future/components/icons/network/naked/BinanceNaked.tsx index 46a2baa131..3c567d7b7a 100644 --- a/packages/ui/src/future/components/icons/network/naked/BinanceNaked.tsx +++ b/packages/ui/src/future/components/icons/network/naked/BinanceNaked.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const BinanceNaked = (props: React.ComponentProps<'svg'>) => ( +export const BinanceNaked: IconComponent = (props) => ( ) => ( +export const BobaAvaxNaked: IconComponent = (props) => ( ) => ( +export const BobaBNBNaked: IconComponent = (props) => ( ) => ( +export const BobaNaked: IconComponent = (props) => ( ) => ( +export const BttcNaked: IconComponent = (props) => ( ) => ( +export const CeloNaked: IconComponent = (props) => ( ) => ( +export const EthereumNaked: IconComponent = (props) => ( ) => ( +export const FantomNaked: IconComponent = (props) => ( ) => ( +export const FuseNaked: IconComponent = (props) => ( ) => ( +export const GnosisNaked: IconComponent = (props) => ( ) => ( +export const HarmonyNaked: IconComponent = (props) => ( ) => ( +export const HecoNaked: IconComponent = (props) => ( ) => ( +export const KavaNaked: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/naked/MetisNaked.tsx b/packages/ui/src/future/components/icons/network/naked/MetisNaked.tsx index 2b4d03f67d..0cba3e43e3 100644 --- a/packages/ui/src/future/components/icons/network/naked/MetisNaked.tsx +++ b/packages/ui/src/future/components/icons/network/naked/MetisNaked.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const MetisNaked = (props: React.ComponentProps<'svg'>) => ( +export const MetisNaked: IconComponent = (props) => ( ) => ( +export const MoonbeamNaked: IconComponent = (props) => ( ) => ( +export const MoonriverNaked: IconComponent = (props) => ( ) => ( +export const OkexNaked: IconComponent = (props) => ( ) => ( +export const OptimismNaked: IconComponent = (props) => ( ) => ( +export const PalmNaked: IconComponent = (props) => ( ) => ( +export const PolygonNaked: IconComponent = (props) => ( ) => ( +export const PolygonZKNaked: IconComponent = (props) => ( diff --git a/packages/ui/src/future/components/icons/network/naked/TelosNaked.tsx b/packages/ui/src/future/components/icons/network/naked/TelosNaked.tsx index 9eb39b0581..99a97df09d 100644 --- a/packages/ui/src/future/components/icons/network/naked/TelosNaked.tsx +++ b/packages/ui/src/future/components/icons/network/naked/TelosNaked.tsx @@ -1,6 +1,7 @@ import * as React from 'react' +import { IconComponent } from '../../../../types' -export const TelosNaked = (props: React.ComponentProps<'svg'>) => ( +export const TelosNaked: IconComponent = (props) => ( ) => { +export const ThunderCoreNaked: IconComponent = (props) => { return ( ) => JSX.Element> = { +export const NETWORK_NAKED_ICON: Record = { [ChainId.ETHEREUM]: EthereumNaked, [ChainId.FANTOM]: FantomNaked, [ChainId.POLYGON]: PolygonNaked, diff --git a/packages/ui/src/future/components/input/Search.tsx b/packages/ui/src/future/components/input/Search.tsx index b007449a7e..847ce65942 100644 --- a/packages/ui/src/future/components/input/Search.tsx +++ b/packages/ui/src/future/components/input/Search.tsx @@ -76,7 +76,7 @@ export const Search: FC = forwardRef(function
diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx index 5d239f996b..d5c409e5ec 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx @@ -33,8 +33,8 @@ export const NetworkSelectorMenu = ({ .filter((el) => (query ? chains[el].name.toLowerCase().includes(query.toLowerCase()) : Boolean)) .map((el) => ( -
- +
+ {Chain.from(el).name}
diff --git a/packages/ui/src/future/components/overlay/Header.tsx b/packages/ui/src/future/components/overlay/Header.tsx index 30a2cba0f7..bc9c400a2b 100644 --- a/packages/ui/src/future/components/overlay/Header.tsx +++ b/packages/ui/src/future/components/overlay/Header.tsx @@ -2,7 +2,7 @@ import { XMarkIcon } from '@heroicons/react/24/solid' import classNames from 'classnames' import React, { FC } from 'react' -import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon } from '@heroicons/react/20/solid' +import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon } from '@heroicons/react/24/solid' import { IconButton } from '../iconbutton' export interface Header { @@ -18,6 +18,7 @@ export const Header: FC
= ({ className, title, onBack, onClose, arrowDir
{onBack && ( = ({ className, title, onBack, onClose, arrowDir ? ArrowUpIcon : ArrowDownIcon } - iconProps={{ - width: 24, - height: 24, - }} - className="flex items-center justify-center w-6 h-6 gap-2 cursor-pointer" onClick={onBack} name="Back" /> @@ -43,18 +39,7 @@ export const Header: FC
= ({ className, title, onBack, onClose, arrowDir > {title} - {onClose && ( - - )} + {onClose && }
) } diff --git a/packages/ui/src/future/components/popovernew.tsx b/packages/ui/src/future/components/popovernew.tsx index d7e23d4979..30ef896d36 100644 --- a/packages/ui/src/future/components/popovernew.tsx +++ b/packages/ui/src/future/components/popovernew.tsx @@ -11,14 +11,15 @@ const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( +>(({ className, align = 'center', collisionPadding = 8, sideOffset = 8, ...props }, ref) => ( >(({ className, ...props }, ref) => ( -
- -
+ )) @@ -63,12 +55,14 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, position = 'popper', ...props }, ref) => ( +>(({ className, children, collisionPadding = 8, sideOffset = 4, position = 'popper', ...props }, ref) => ( diff --git a/packages/ui/src/future/components/settings/ExpertMode.tsx b/packages/ui/src/future/components/settings/ExpertMode.tsx index bed1a143d0..ca74423748 100644 --- a/packages/ui/src/future/components/settings/ExpertMode.tsx +++ b/packages/ui/src/future/components/settings/ExpertMode.tsx @@ -14,7 +14,7 @@ export const ExpertMode: FC = () => { className="!bg-transparent cursor-default" as="div" icon={LightBulbIcon} - iconProps={{ width: 20, height: 20, className: '!text-red' }} + iconProps={{ className: '!text-red' }} title="Expert mode" subtitle="Enabling Expert Mode will allow for high slippage trades. Only use if you are an advanced user and know what you are doing. Use at your own risk." value={ diff --git a/packages/ui/src/future/components/settings/index.tsx b/packages/ui/src/future/components/settings/index.tsx index 21a3d00bd8..6e22035f1d 100644 --- a/packages/ui/src/future/components/settings/index.tsx +++ b/packages/ui/src/future/components/settings/index.tsx @@ -7,6 +7,7 @@ import { SlippageTolerance } from './SlippageTolerance' import { RoutingApi } from './RoutingApi' import { Dialog } from '../dialog' import { List } from '../list/List' +import { IconButton } from '../iconbutton' export enum SettingsModule { CarbonOffset = 'CarbonOffset', @@ -36,12 +37,7 @@ export const SettingsOverlay: FC = ({ modules, children, o {children ? ( children({ setOpen }) ) : ( - setOpen(true)} - width={26} - height={26} - className="cursor-pointer hover:animate-spin-slow hover:dark:text-slate-50 dark:text-slate-200 text-gray-700 hover:text-gray-900 mr-3" - /> + setOpen(true)} /> )} setOpen(false)}> diff --git a/packages/ui/src/future/components/table/Paginator.tsx b/packages/ui/src/future/components/table/Paginator.tsx index dab5a9478e..b9382f2fbf 100644 --- a/packages/ui/src/future/components/table/Paginator.tsx +++ b/packages/ui/src/future/components/table/Paginator.tsx @@ -43,7 +43,6 @@ export const Paginator: FC = ({
= ({ )}
, 'children'> & { children: ReactNode } @@ -15,9 +16,9 @@ const _Tab: FC = forwardRef(function _T return ( {({ selected }) => ( - + )} ) diff --git a/packages/ui/src/future/components/toast/ToastButtons.tsx b/packages/ui/src/future/components/toast/ToastButtons.tsx index 4a9be13cf5..fe3fc99a79 100644 --- a/packages/ui/src/future/components/toast/ToastButtons.tsx +++ b/packages/ui/src/future/components/toast/ToastButtons.tsx @@ -10,13 +10,15 @@ interface ToastButtons { export const ToastButtons: FC = ({ href, onDismiss }) => { return (
- {href && ( - )}
diff --git a/packages/ui/src/future/components/toggle.tsx b/packages/ui/src/future/components/toggle.tsx new file mode 100644 index 0000000000..cd6c8258d9 --- /dev/null +++ b/packages/ui/src/future/components/toggle.tsx @@ -0,0 +1,38 @@ +'use client' + +import * as React from 'react' +import * as TogglePrimitive from '@radix-ui/react-toggle' +import { cva, type VariantProps } from 'class-variance-authority' +import { classNames } from '../../index' + +const toggleVariants = cva( + 'inline-flex gap-2 items-center justify-center rounded-lg text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground !ring-0 disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-muted-foreground', + { + variants: { + variant: { + default: 'bg-transparent', + outline: 'bg-transparent border border-input hover:bg-accent hover:text-accent-foreground', + }, + size: { + default: 'h-10 px-3', + sm: 'h-9 px-2.5', + lg: 'h-11 px-5', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + } +) + +const Toggle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, variant, size, ...props }, ref) => ( + +)) + +Toggle.displayName = TogglePrimitive.Root.displayName + +export { Toggle, toggleVariants } diff --git a/packages/ui/src/future/types.ts b/packages/ui/src/future/types.ts new file mode 100644 index 0000000000..9436540fc1 --- /dev/null +++ b/packages/ui/src/future/types.ts @@ -0,0 +1,4 @@ +import { FC } from 'react' + +export type IconProps = React.ComponentProps<'svg'> +export type IconComponent = FC diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index b5c61c9567..466e9e946b 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -1,3 +1,19 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --muted: #0000000a; + --muted-foreground: #6b7280; + --accent: #0000000a; + --accent-foreground: #111827; + } + + .dark { + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + } +} diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 518378a414..93272fd565 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -147,3 +147,20 @@ html[class='[color-scheme:dark]'] .paper { @apply appearance-none w-6 h-6 bg-blue rounded-full } } + + +@layer base { + :root { + --muted: rgba(0, 0, 0, 0.04); + --muted-foreground: #6b7280; + --accent: rgba(0, 0, 0, 0.04); + --accent-foreground: #111827; + } + + .dark { + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + } +} diff --git a/packages/wagmi/package.json b/packages/wagmi/package.json index 665950306c..838c0157ca 100644 --- a/packages/wagmi/package.json +++ b/packages/wagmi/package.json @@ -55,6 +55,7 @@ "@ethersproject/solidity": "5.7.0", "@headlessui/react": "1.7.7", "@heroicons/react": "2.0.13", + "@radix-ui/react-slot": "^1.0.2", "@sushiswap/abi": "workspace:*", "@sushiswap/amm": "workspace:*", "@sushiswap/bentobox": "1.0.1", diff --git a/packages/wagmi/src/future/components/ConnectButton.tsx b/packages/wagmi/src/future/components/ConnectButton.tsx index 95f4012249..b9046a639e 100644 --- a/packages/wagmi/src/future/components/ConnectButton.tsx +++ b/packages/wagmi/src/future/components/ConnectButton.tsx @@ -1,22 +1,26 @@ -import { Popover, Transition } from '@headlessui/react' -import { ChevronDownIcon } from '@heroicons/react/20/solid' -import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline' -import { Button, ButtonComponent } from '@sushiswap/ui/future/components/button' +import {ChevronDoubleDownIcon} from '@heroicons/react/24/outline' +import {Button, ButtonProps} from '@sushiswap/ui/future/components/button' import { CoinbaseWalletIcon, + FrameIcon, GnosisSafeIcon, + LedgerIcon, MetamaskIcon, + RabbyIcon, TrustWalletIcon, - WalletConnectIcon, - RabbyIcon, - FrameIcon, - LedgerIcon + WalletConnectIcon } from '@sushiswap/ui/future/components/icons' -import { List } from '@sushiswap/ui/future/components/list/List' -import { Loader } from '@sushiswap/ui/future/components/loader' -import React, { FC, Fragment, useCallback, useMemo } from 'react' -import { useConnect } from 'wagmi' -import { classNames, ExtractProps } from '@sushiswap/ui' +import React, {FC, useCallback, useMemo} from 'react' +import {useConnect} from 'wagmi' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger +} from "@sushiswap/ui/future/components/dropdown-menu"; const Icons: Record = { Injected: ChevronDoubleDownIcon, @@ -31,11 +35,7 @@ const Icons: Record = { Ledger: LedgerIcon, } -interface Props extends ExtractProps { - hideChevron?: boolean -} - -export const ConnectButton: FC = ({ children, hideChevron, ...rest }) => { +export const ConnectButton: FC = ({ children, ...props }) => { const { connectors, connect, pendingConnector } = useConnect() const onSelect = useCallback( @@ -62,67 +62,39 @@ export const ConnectButton: FC = ({ children, hideChevron, ...rest }) => // Awaiting wallet confirmation if (pendingConnector) { return ( - ) } return ( - - {({ open }) => ( - <> - - {children || 'Connect Wallet'} - {children || 'Connect'} - {!hideChevron && ( - - )} - - -
- - - {_connectors.map((connector) => { - return ( - onSelect(connector.id)} - icon={Icons[connector.name]} - title={ - connector.name == 'Safe' - ? 'Gnosis Safe' - : connector.name == 'WalletConnectLegacy' + + + + + + + {_connectors.map((connector) => { + const Icon = Icons[connector.name] + return ( + onSelect(connector.id)} + key={connector.id} + > + + { connector.name == 'Safe' + ? 'Gnosis Safe' + : connector.name == 'WalletConnectLegacy' ? 'WalletConnect' - : connector.name - } - key={connector.id} - /> - ) - })} - - -
- - - )} - + : connector.name} + + ) + })} + + + ) } diff --git a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx index 70b85503ba..19f9b538e5 100644 --- a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx +++ b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx @@ -7,7 +7,6 @@ import React, {FC, useCallback} from 'react' import {ProviderRpcError, useNetwork, UserRejectedRequestError, useSwitchNetwork} from 'wagmi' import {SelectPrimitive} from "@sushiswap/ui/future/components/select"; import {Button} from "@sushiswap/ui/future/components/button"; -import {ChevronDownIcon} from "@heroicons/react/20/solid"; export const HeaderNetworkSelector: FC<{ networks: ChainId[] @@ -50,14 +49,10 @@ export const HeaderNetworkSelector: FC<{ onSelect={onSwitchNetwork} networks={networks} > - - diff --git a/packages/wagmi/src/future/components/NetworkCheck.tsx b/packages/wagmi/src/future/components/NetworkCheck.tsx index 8ded2da76f..c45c85a945 100644 --- a/packages/wagmi/src/future/components/NetworkCheck.tsx +++ b/packages/wagmi/src/future/components/NetworkCheck.tsx @@ -39,8 +39,8 @@ export const NetworkCheck: FC<{ chainId: ChainId }> = ({ chainId }) => { + ) } diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx index 5a39d480ed..873d94635b 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelector.tsx @@ -13,14 +13,14 @@ import { TokenSelectorImportRow } from './TokenSelectorImportRow' import { useAccount } from 'wagmi' import { TokenSelectorCustomTokensOverlay } from './TokenSelectorCustomTokensOverlay' import { Button } from '@sushiswap/ui/future/components/button' -import { Currency } from '@sushiswap/ui/future/components/currency' import { COMMON_BASES } from '@sushiswap/router-config' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' - +import { Currency } from "@sushiswap/ui/future/components/currency"; import { useCustomTokens } from '@sushiswap/hooks' import { useSortedTokenList } from './hooks/useSortedTokenList' import { useTokenWithCache } from '../../hooks' import { isAddress } from '@ethersproject/address' +import {buttonIconVariants} from "@sushiswap/ui/future/components/button"; interface TokenSelectorProps { id: string @@ -97,12 +97,11 @@ export const TokenSelector: FC = ({ id, selected, onSelect,
{COMMON_BASES[chainId].map((base) => ( ))} diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx index fd913db11e..e82ab7a430 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomRow.tsx @@ -29,17 +29,13 @@ export const TokenSelectorCustomTokenRow: FC<{
diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomTokensOverlay.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomTokensOverlay.tsx index d679becb85..1e39531fc5 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomTokensOverlay.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorCustomTokensOverlay.tsx @@ -31,7 +31,7 @@ export const TokenSelectorCustomTokensOverlay: FC = () => { return ( <> - setOpen(false)} className="!mt-0"> diff --git a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx index 5e189f63b6..dd3d20d31d 100644 --- a/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx +++ b/packages/wagmi/src/future/components/TokenSelector/TokenSelectorImportRow.tsx @@ -87,14 +87,14 @@ export const TokenSelectorImportRow: FC = ({ currencies, }, [])} -
+
{tokenSecurity?.isSupported && (
Honeypot detection powered by GoPlus
)} -
@@ -168,7 +168,7 @@ export const TokenSelectorImportRow: FC = ({ currencies,
)} -
@@ -197,7 +197,7 @@ export const TokenSelectorImportRow: FC = ({ currencies,
-
diff --git a/packages/wagmi/src/future/components/TxStatusModal.tsx b/packages/wagmi/src/future/components/TxStatusModal.tsx index a612cfdba4..2e4ff63eb3 100644 --- a/packages/wagmi/src/future/components/TxStatusModal.tsx +++ b/packages/wagmi/src/future/components/TxStatusModal.tsx @@ -76,8 +76,8 @@ export const TxStatusModalContent: FC = ({
diff --git a/packages/wagmi/src/future/components/UserProfile/index.tsx b/packages/wagmi/src/future/components/UserProfile/index.tsx index fcc967da52..33c9ebb648 100644 --- a/packages/wagmi/src/future/components/UserProfile/index.tsx +++ b/packages/wagmi/src/future/components/UserProfile/index.tsx @@ -14,6 +14,8 @@ import { ConnectView } from './ConnectView' import { DefaultView } from './DefaultView' import { TransactionsView } from './TransactionsView' import { SettingsView } from './SettingsView' +import {PopoverNew, PopoverTrigger, PopoverContent} from "@sushiswap/ui/future/components/popovernew"; +import {ConnectButton} from "../ConnectButton"; export enum ProfileView { Disconnected, @@ -38,12 +40,37 @@ export const UserProfile: FC = () => { const chainId = (chain?.id as ChainId) || ChainId.ETHEREUM + if (!address) return + + return ( + + + + + e.preventDefault()}> + {!address && } + {view === ProfileView.Default && address && ( + + )} + {view === ProfileView.Settings && } + {view === ProfileView.Transactions && address && ( + + )} + + + ) + if (isSm) return ( {({ open, close }) => ( <> - + {address ? ( <>
@@ -103,7 +130,7 @@ export const UserProfile: FC = () => { {({ open, close }) => ( <> - + {address ? ( <>
diff --git a/packages/wagmi/src/future/components/Web3Input/Currency/BalancePanel.tsx b/packages/wagmi/src/future/components/Web3Input/Currency/BalancePanel.tsx index 00595cc0f9..e8c676bb53 100644 --- a/packages/wagmi/src/future/components/Web3Input/Currency/BalancePanel.tsx +++ b/packages/wagmi/src/future/components/Web3Input/Currency/BalancePanel.tsx @@ -51,7 +51,7 @@ export const BalancePanel: FC = memo(function BalancePanel({ id={`${id}-balance-button`} testdata-id={`${id}-balance-button`} type="button" - // variant="empty" + // variant="ghost" onClick={onClick} className={classNames( type === 'INPUT' diff --git a/packages/wagmi/src/future/systems/Checker/Amounts.tsx b/packages/wagmi/src/future/systems/Checker/Amounts.tsx index 0cbff20309..ddc3895479 100644 --- a/packages/wagmi/src/future/systems/Checker/Amounts.tsx +++ b/packages/wagmi/src/future/systems/Checker/Amounts.tsx @@ -7,10 +7,10 @@ import React, { FC, useMemo } from 'react' import { useAccount } from 'wagmi' import { useBalances } from '../../../hooks' -import { CheckerButton } from './types' import dynamic from 'next/dynamic' +import {ButtonProps} from "@sushiswap/ui/future/components/button"; -export interface AmountsProps extends CheckerButton { +export interface AmountsProps extends ButtonProps { chainId: number | undefined amounts: (Amount | undefined)[] } @@ -19,11 +19,9 @@ export const Component: FC = ({ type, amounts, chainId, children, - className, - variant, - fullWidth, - as, - size, + fullWidth = true, + size = 'xl', + ...props }) => { const { address } = useAccount() const amountsAreDefined = useMemo(() => amounts.every((el) => el?.greaterThan(ZERO)), [amounts]) @@ -45,32 +43,27 @@ export const Component: FC = ({ }) }, [amounts, balances]) - return useMemo(() => { if (!amountsAreDefined) - return ( - - ) + return ( + + ) if (!sufficientBalance) - return ( - - ) + return ( + + ) return <>{children} - }, [type, amountsAreDefined, as, children, className, fullWidth, size, sufficientBalance, variant]) } export const Amounts = dynamic(() => Promise.resolve(Component), { diff --git a/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx b/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx index 4f46b37f89..61e7b9e60c 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx @@ -1,17 +1,16 @@ -import React, { FC, Fragment, useState } from 'react' +import React, { FC } from 'react' import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' import { ApprovalState } from '../../../hooks' -import { Menu, Transition } from '@headlessui/react' import { ChevronRightIcon, InformationCircleIcon } from '@heroicons/react/24/solid' import { ApproveBentoboxController } from '../../components' import { Address } from 'wagmi' import { Signature } from '@ethersproject/bytes' import { BentoBoxV1ChainId } from '@sushiswap/bentobox' import dynamic from 'next/dynamic' +import {Explainer} from "@sushiswap/ui/future/components/explainer"; -export interface ApproveBentoboxProps extends ButtonProps<'button'> { +export interface ApproveBentoboxProps extends ButtonProps { chainId: BentoBoxV1ChainId - id: string contract: Address enabled?: boolean onSignature?: (data: Signature) => void @@ -19,20 +18,14 @@ export interface ApproveBentoboxProps extends ButtonProps<'button'> { export const Component: FC = ({ chainId, - id, contract, children, - className, - variant, - fullWidth, - as, - size, enabled = true, + fullWidth = true, + size = 'xl', onSignature, - type, + ...props }) => { - const [showTooltip, setShowTooltip] = useState(false) - return ( {({ approvalState, onApprove, signature }) => { @@ -42,53 +35,28 @@ export const Component: FC = ({ return ( ) }} diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx index e9209ce80b..ed40172e16 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx @@ -1,17 +1,17 @@ -import React, { FC, Fragment, useCallback, useState, MouseEvent } from 'react' -import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' -import { Amount, Type } from '@sushiswap/currency' -import { Popover, Transition } from '@headlessui/react' -import { ChevronRightIcon } from '@heroicons/react/24/solid' -import { ApprovalState, useTokenApproval } from '../../hooks' -import { Address } from 'wagmi' -import { ChevronDownIcon, InformationCircleIcon } from '@heroicons/react/20/solid' -import { classNames } from '@sushiswap/ui' -import { List } from '@sushiswap/ui/future/components/list/List' +import React, {FC, useState} from 'react' +import {Button, ButtonProps} from '@sushiswap/ui/future/components/button' +import {Amount, Type} from '@sushiswap/currency' +import {ChevronRightIcon} from '@heroicons/react/24/solid' +import {ApprovalState, useTokenApproval} from '../../hooks' +import {Address} from 'wagmi' +import {ChevronDownIcon, InformationCircleIcon} from '@heroicons/react/20/solid' +import {classNames} from '@sushiswap/ui' import dynamic from 'next/dynamic' import {Explainer} from "@sushiswap/ui/future/components/explainer"; +import {Select, SelectContent, SelectItem, SelectPrimitive} from "@sushiswap/ui/future/components/select"; +import {IconButton} from "@sushiswap/ui/future/components/iconbutton"; -export interface ApproveERC20Props extends ButtonProps<'button'> { +export interface ApproveERC20Props extends ButtonProps { id: string amount: Amount | undefined contract: Address | undefined @@ -23,13 +23,11 @@ export const Component: FC = ({ amount, contract, children, - className, - variant, - fullWidth, - as, - size, + className, + fullWidth = true, + size = 'xl', enabled = true, - type, + ...props }) => { const [max, setMax] = useState(false) const [state, { write }] = useTokenApproval({ @@ -39,33 +37,19 @@ export const Component: FC = ({ approveMax: max, }) - const onMenuItemClick = useCallback((e: MouseEvent, isMax: boolean, cb: () => void) => { - e.stopPropagation() - - if (isMax) { - setMax(true) - } else { - setMax(false) - } - - cb() - }, []) - if (state === ApprovalState.APPROVED || !enabled) { return <>{children} } + return (
-
-
- - {({ open, close }) => ( - <> - - - - - -
e.stopPropagation()} - className="fixed inset-0 bg-black/50 backdrop-blur transform-gpu" - /> - -
-
- - ) => onMenuItemClick(e, false, close)} - title="Approve one-time only" - subtitle={`You'll give your approval to spend ${amount?.toSignificant(6)} ${ - amount?.currency?.symbol - } on your behalf`} - /> - ) => onMenuItemClick(e, true, close)} - title="Approve unlimited amount" - subtitle={`You won't need to approve again next time you want to spend ${amount?.currency?.symbol}.`} - /> - -
-
- - - )} - -
+
+
) diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20Multiple.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20Multiple.tsx index 17a971f00f..01753d9a6b 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20Multiple.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20Multiple.tsx @@ -5,7 +5,7 @@ import { Address } from 'wagmi' import dynamic from 'next/dynamic' import { ApproveERC20 } from './ApproveERC20' -export interface ApproveERC20MultipleProps extends ButtonProps<'button'> { +export interface ApproveERC20MultipleProps extends ButtonProps { id: string amounts: { amount: Amount; contract: Address }[] enabled?: boolean @@ -15,13 +15,14 @@ export interface ApproveERC20MultipleProps extends ButtonProps<'button'> { /* * Recursive component for multiple ApproveERC20s */ -export const Component: FC = ({ index, id, amounts, children, ...props }) => { +export const Component: FC = ({ fullWidth = true, + size = 'xl', index, id, amounts, children, ...props }) => { if (amounts === undefined) return <>{children} const _index = typeof index === 'number' ? index : amounts.length - 1 if (_index < 0) return <>{children} return ( - + {children} diff --git a/packages/wagmi/src/future/systems/Checker/Connect.tsx b/packages/wagmi/src/future/systems/Checker/Connect.tsx index ecc7200662..cdc30246c0 100644 --- a/packages/wagmi/src/future/systems/Checker/Connect.tsx +++ b/packages/wagmi/src/future/systems/Checker/Connect.tsx @@ -3,34 +3,23 @@ import { FC } from 'react' import { useAccount } from 'wagmi' import { ConnectButton } from '../../components' -import { Button, ButtonProps } from '@sushiswap/ui/future/components/button' +import { ButtonProps } from '@sushiswap/ui/future/components/button' import dynamic from 'next/dynamic' -export const Component: FC> = ({ +export const Component: FC = ({ children, - className, - variant, - fullWidth, - size, - name, - onBlur, - type, -}) => { + fullWidth = true, + size = 'xl', + ...props}) => { const isMounted = useIsMounted() const { address } = useAccount() if (isMounted && !address) return ( Connect Wallet diff --git a/packages/wagmi/src/future/systems/Checker/Custom.tsx b/packages/wagmi/src/future/systems/Checker/Custom.tsx index bc3acca7b3..1885696253 100644 --- a/packages/wagmi/src/future/systems/Checker/Custom.tsx +++ b/packages/wagmi/src/future/systems/Checker/Custom.tsx @@ -3,7 +3,7 @@ import { ButtonProps } from '@sushiswap/ui/future/components/button' export interface CustomProps { showGuardIfTrue: boolean - guard: ReactElement> + guard: ReactElement children: ReactNode } diff --git a/packages/wagmi/src/future/systems/Checker/Network.tsx b/packages/wagmi/src/future/systems/Checker/Network.tsx index bd43134b11..ce4f8a5fa1 100644 --- a/packages/wagmi/src/future/systems/Checker/Network.tsx +++ b/packages/wagmi/src/future/systems/Checker/Network.tsx @@ -3,14 +3,15 @@ import { Button } from '@sushiswap/ui/future/components/button' import React, { FC, ReactElement } from 'react' import { useNetwork, useSwitchNetwork } from 'wagmi' -import { CheckerButton } from './types' import dynamic from 'next/dynamic' +import {ButtonProps} from "@sushiswap/ui/future/components/button"; -export interface NetworkProps extends CheckerButton { +export interface NetworkProps extends ButtonProps { chainId: number | undefined } -export const Component: FC = ({ chainId, children, ...rest }): ReactElement | null => { +export const Component: FC = ({ chainId, fullWidth = true, + size = 'xl', children, ...rest }): ReactElement | null => { const { chain } = useNetwork() const { switchNetwork } = useSwitchNetwork() @@ -18,7 +19,7 @@ export const Component: FC = ({ chainId, children, ...rest }): Rea if (chain?.id !== chainId) return ( - ) diff --git a/packages/wagmi/src/future/systems/Checker/index.ts b/packages/wagmi/src/future/systems/Checker/index.ts index 395dc994a6..9a038ece5e 100644 --- a/packages/wagmi/src/future/systems/Checker/index.ts +++ b/packages/wagmi/src/future/systems/Checker/index.ts @@ -17,7 +17,7 @@ export type CheckerProps = { Custom: FC ApproveERC20: ComponentType ApproveERC20Multiple: ComponentType - Connect: ComponentType> + Connect: ComponentType ApproveBentobox: ComponentType Success: FC Root: FC diff --git a/packages/wagmi/src/future/systems/Checker/types.ts b/packages/wagmi/src/future/systems/Checker/types.ts deleted file mode 100644 index 297d410a11..0000000000 --- a/packages/wagmi/src/future/systems/Checker/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ReactNode } from 'react' -import { ButtonProps } from '@sushiswap/ui/future/components/button' - -export interface CheckerButton extends ButtonProps<'button'> { - children: ReactNode -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29bad9aa39..17e3e663eb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2526,6 +2526,7 @@ importers: '@heroicons/react': 2.0.13 '@popperjs/core': 2.11.7 '@radix-ui/react-checkbox': ^1.0.4 + '@radix-ui/react-dropdown-menu': ^2.0.5 '@radix-ui/react-label': ^2.0.2 '@radix-ui/react-popover': ^1.0.6 '@radix-ui/react-progress': ^1.0.3 @@ -2534,6 +2535,7 @@ importers: '@radix-ui/react-separator': ^1.0.3 '@radix-ui/react-slot': ^1.0.2 '@radix-ui/react-switch': ^1.0.3 + '@radix-ui/react-toggle': ^1.0.3 '@radix-ui/react-tooltip': ^1.0.6 '@react-hook/window-scroll': 1.3.0 '@sushiswap/chain': workspace:* @@ -2566,7 +2568,6 @@ importers: next: 13.4.4 next-themes: 0.2.1 postcss: 8.4.23 - rc-tooltip: 5.2.2 react: 18.2.0 react-datepicker: 4.8.0 react-day-picker: ^8.7.1 @@ -2592,6 +2593,7 @@ importers: '@heroicons/react': 2.0.13_react@18.2.0 '@popperjs/core': 2.11.7 '@radix-ui/react-checkbox': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-dropdown-menu': 2.0.5_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-label': 2.0.2_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-popover': 1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-progress': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i @@ -2600,6 +2602,7 @@ importers: '@radix-ui/react-separator': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-slot': 1.0.2_s3k22s5ab4eu26xuel7hiaraxy '@radix-ui/react-switch': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-toggle': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-tooltip': 1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i '@react-hook/window-scroll': 1.3.0_react@18.2.0 '@sushiswap/chain': link:../chain @@ -2619,7 +2622,6 @@ importers: lucide-react: 0.233.0_react@18.2.0 nanoid: 4.0.0 next-themes: 0.2.1_z4pol2qj2yv3um3jqqobs4b3eu - rc-tooltip: 5.2.2_biqbaboplfbrettd7655fr4n2y react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y react-day-picker: 8.7.1_r6j3756ioqf5pjc2u22wj25rla react-dropzone: 14.2.2_react@18.2.0 @@ -2781,6 +2783,7 @@ importers: '@ethersproject/solidity': 5.7.0 '@headlessui/react': 1.7.7 '@heroicons/react': 2.0.13 + '@radix-ui/react-slot': ^1.0.2 '@sushiswap/abi': workspace:* '@sushiswap/amm': workspace:* '@sushiswap/bentobox': 1.0.1 @@ -2843,6 +2846,7 @@ importers: '@ethersproject/solidity': 5.7.0 '@headlessui/react': 1.7.7_biqbaboplfbrettd7655fr4n2y '@heroicons/react': 2.0.13_react@18.2.0 + '@radix-ui/react-slot': 1.0.2_s3k22s5ab4eu26xuel7hiaraxy '@sushiswap/abi': link:../abi '@sushiswap/amm': link:../amm '@sushiswap/bentobox': link:../../protocols/bentobox @@ -10725,6 +10729,33 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-dropdown-menu/2.0.5_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-id': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-menu': 2.0.5_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-use-controllable-state': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-focus-guards/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: @@ -10798,6 +10829,44 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-menu/2.0.5_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collection': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-direction': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-dismissable-layer': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-focus-guards': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-focus-scope': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-id': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-popper': 1.1.2_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-portal': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-presence': 1.0.1_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-roving-focus': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-slot': 1.0.2_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-callback-ref': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + aria-hidden: 1.2.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.5_s3k22s5ab4eu26xuel7hiaraxy + dev: false + /@radix-ui/react-popover/1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==} peerDependencies: @@ -10949,6 +11018,35 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-roving-focus/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collection': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-direction': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-id': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-use-callback-ref': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-controllable-state': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-scroll-area/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==} peerDependencies: @@ -11082,6 +11180,29 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-toggle/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-use-controllable-state': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-tooltip/1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==} peerDependencies: @@ -14822,7 +14943,7 @@ packages: '@walletconnect/jsonrpc-provider': 1.0.13 '@walletconnect/jsonrpc-types': 1.0.3 '@walletconnect/jsonrpc-utils': 1.0.8 - '@walletconnect/modal': 2.4.5_react@18.2.0 + '@walletconnect/modal': 2.4.5 '@walletconnect/sign-client': 2.8.0 '@walletconnect/types': 2.8.0 '@walletconnect/universal-provider': 2.8.0 @@ -19250,10 +19371,6 @@ packages: resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} dev: true - /dom-align/1.12.4: - resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==} - dev: false - /dom-walk/0.1.2: resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==} dev: false @@ -29590,75 +29707,6 @@ packages: iconv-lite: 0.4.24 unpipe: 1.0.0 - /rc-align/4.0.15_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@babel/runtime': 7.21.5 - classnames: 2.3.2 - dom-align: 1.12.4 - rc-util: 5.31.1_biqbaboplfbrettd7655fr4n2y - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - resize-observer-polyfill: 1.5.1 - dev: false - - /rc-motion/2.7.3_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-2xUvo8yGHdOHeQbdI8BtBsCIrWKchEmFEIskf0nmHtJsou+meLd/JE+vnvSX2JxcBrJtXY2LuBpxAOxrbY/wMQ==} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@babel/runtime': 7.21.5 - classnames: 2.3.2 - rc-util: 5.31.1_biqbaboplfbrettd7655fr4n2y - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - dev: false - - /rc-tooltip/5.2.2_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@babel/runtime': 7.21.5 - classnames: 2.3.2 - rc-trigger: 5.3.4_biqbaboplfbrettd7655fr4n2y - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - dev: false - - /rc-trigger/5.3.4_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==} - engines: {node: '>=8.x'} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@babel/runtime': 7.21.5 - classnames: 2.3.2 - rc-align: 4.0.15_biqbaboplfbrettd7655fr4n2y - rc-motion: 2.7.3_biqbaboplfbrettd7655fr4n2y - rc-util: 5.31.1_biqbaboplfbrettd7655fr4n2y - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - dev: false - - /rc-util/5.31.1_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-ecgQsqv7j0ZTNMsQU1M/xLBnboSoiJxwE9R0rQEe0MaxOCZmhTTCjDP+6KPQjTaXlyIkVuZT3lC4CNkr+cp9Lw==} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@babel/runtime': 7.21.5 - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - react-is: 16.13.1 - dev: false - /rc/1.2.8: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true @@ -30524,10 +30572,6 @@ packages: /reselect/4.1.8: resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} - /resize-observer-polyfill/1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - dev: false - /resolve-alpn/1.2.1: resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==} From 9cf6e0e7a8c20416b52815edd6cfa9150accab53 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Wed, 21 Jun 2023 16:11:15 +0100 Subject: [PATCH 27/59] refactor(packages/ui): add size xl --- .../ui/swap/widget/SwapButtonCrossChain.tsx | 1 + .../AddSection/AddSectionLegacy.tsx | 2 +- .../components/AddSection/AddSectionStake.tsx | 1 + .../AddSection/AddSectionTrident.tsx | 2 +- .../ConcentratedLiquidityRemoveWidget.tsx | 1 + .../ConcentratedLiquidityWidget.tsx | 2 +- apps/earn/components/PoolPage/MigrateTab.tsx | 3 ++- .../PoolActionBarPositionRewards.tsx | 2 +- .../components/PoolSection/PoolMyRewards.tsx | 2 +- .../RemoveSection/RemoveSectionLegacy.tsx | 1 + .../RemoveSection/RemoveSectionTrident.tsx | 1 + .../RemoveSection/RemoveSectionUnstake.tsx | 1 + .../components/RewardsSection/RewardSlide.tsx | 2 +- .../pages/add/trident/[chainId]/index.tsx | 2 +- apps/earn/pages/add/v2/[chainId]/index.tsx | 7 +++++- apps/earn/pages/position/[tokenId]/index.tsx | 24 +++++-------------- apps/furo/components/CancelModal.tsx | 1 + apps/furo/components/TransferModal.tsx | 1 + .../stream/CreateForm/ExecuteSection.tsx | 1 + .../ExecuteMultipleSection.tsx | 1 + apps/furo/components/stream/WithdrawModal.tsx | 1 + .../CreateForm/CreateFormReviewModal.tsx | 1 + .../ExecuteMultipleSection.tsx | 1 + .../furo/components/vesting/WithdrawModal.tsx | 1 + 24 files changed, 35 insertions(+), 27 deletions(-) diff --git a/apps/_root/ui/swap/widget/SwapButtonCrossChain.tsx b/apps/_root/ui/swap/widget/SwapButtonCrossChain.tsx index 66bd0ba87d..289c36b253 100644 --- a/apps/_root/ui/swap/widget/SwapButtonCrossChain.tsx +++ b/apps/_root/ui/swap/widget/SwapButtonCrossChain.tsx @@ -53,6 +53,7 @@ export const SwapButtonCrossChain: FC = () => { color={warningSeverity(trade?.priceImpact) >= 3 ? 'red' : 'blue'} fullWidth onClick={() => setReview(true)} + size="xl" > {!checked && warningSeverity(trade?.priceImpact) >= 3 ? 'Price impact too high' diff --git a/apps/earn/components/AddSection/AddSectionLegacy.tsx b/apps/earn/components/AddSection/AddSectionLegacy.tsx index 08831cbbb4..6b5e3945fe 100644 --- a/apps/earn/components/AddSection/AddSectionLegacy.tsx +++ b/apps/earn/components/AddSection/AddSectionLegacy.tsx @@ -106,7 +106,7 @@ export const AddSectionLegacy: FC<{ pool: Pool }> = ({ pool: _pool }) => { contract={getSushiSwapRouterContractConfig(chainId).address as Address} > - diff --git a/apps/earn/components/AddSection/AddSectionStake.tsx b/apps/earn/components/AddSection/AddSectionStake.tsx index 12dde33d1d..307507b010 100644 --- a/apps/earn/components/AddSection/AddSectionStake.tsx +++ b/apps/earn/components/AddSection/AddSectionStake.tsx @@ -116,6 +116,7 @@ const _AddSectionStake: FC = withCheckerRoot(({ pool, chef > diff --git a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx index 31d884f53d..7d19113848 100644 --- a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx +++ b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx @@ -269,6 +269,7 @@ export const ConcentratedLiquidityRemoveWidget: FC )} diff --git a/apps/earn/components/PoolPage/MigrateTab.tsx b/apps/earn/components/PoolPage/MigrateTab.tsx index d392f3bd9a..21d1dbca76 100644 --- a/apps/earn/components/PoolPage/MigrateTab.tsx +++ b/apps/earn/components/PoolPage/MigrateTab.tsx @@ -438,6 +438,7 @@ export const MigrateTab: FC<{ pool: Pool }> = withCheckerRoot(({ pool }) => { > )} diff --git a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx index 427f802691..a5ea7de503 100644 --- a/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx +++ b/apps/earn/components/PoolSection/PoolActionBar/PoolActionBarPositionRewards.tsx @@ -63,7 +63,7 @@ export const PoolActionBarPositionRewards: FC
- diff --git a/apps/earn/components/PoolSection/PoolMyRewards.tsx b/apps/earn/components/PoolSection/PoolMyRewards.tsx index 20dd7ae2a6..54ae9d6b9d 100644 --- a/apps/earn/components/PoolSection/PoolMyRewards.tsx +++ b/apps/earn/components/PoolSection/PoolMyRewards.tsx @@ -59,7 +59,7 @@ export const PoolMyRewards: FC = ({ pool }) => {
- diff --git a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx index f2405977c9..43ed6b7054 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionLegacy.tsx @@ -278,6 +278,7 @@ export const RemoveSectionLegacy: FC = withCheckerRoot > diff --git a/apps/earn/pages/add/trident/[chainId]/index.tsx b/apps/earn/pages/add/trident/[chainId]/index.tsx index 2486ba0cd3..8bc7c56227 100644 --- a/apps/earn/pages/add/trident/[chainId]/index.tsx +++ b/apps/earn/pages/add/trident/[chainId]/index.tsx @@ -343,7 +343,7 @@ const _Add: FC = ({ enabled={isBentoBoxV1ChainId(chainId)} > - diff --git a/apps/earn/pages/add/v2/[chainId]/index.tsx b/apps/earn/pages/add/v2/[chainId]/index.tsx index 3e9be55f0a..3a92fa6af5 100644 --- a/apps/earn/pages/add/v2/[chainId]/index.tsx +++ b/apps/earn/pages/add/v2/[chainId]/index.tsx @@ -261,7 +261,12 @@ const _Add: FC = ({ chainId, setChainId, pool, poolState, title, token contract={getSushiSwapRouterContractConfig(chainId).address as Address} > - diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index 38f5c9361e..0a1d3ba9c1 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -299,15 +299,9 @@ const Position: FC = () => {
{({ write, isLoading }) => ( - - - @@ -359,15 +353,9 @@ const Position: FC = () => { chainId={chainId} > {({ sendTransaction, isLoading }) => ( - - - diff --git a/apps/furo/components/CancelModal.tsx b/apps/furo/components/CancelModal.tsx index 3417be62ba..ca2950d408 100644 --- a/apps/furo/components/CancelModal.tsx +++ b/apps/furo/components/CancelModal.tsx @@ -122,6 +122,7 @@ export const CancelModal: FC = ({ } > } > diff --git a/apps/earn/components/AddSection/AddSectionWidget.tsx b/apps/earn/components/AddSection/AddSectionWidget.tsx index 62d9a0f68e..f67ffae8e6 100644 --- a/apps/earn/components/AddSection/AddSectionWidget.tsx +++ b/apps/earn/components/AddSection/AddSectionWidget.tsx @@ -4,12 +4,12 @@ import { PlusIcon } from '@heroicons/react/solid' import { ChainId } from '@sushiswap/chain' import { Type } from '@sushiswap/currency' import { useIsMounted } from '@sushiswap/hooks' -import { classNames } from '@sushiswap/ui' import { Web3Input } from '@sushiswap/wagmi/future/components/Web3Input' -import React, { FC, ReactNode } from 'react' +import React, { FC, ReactNode, Fragment } from 'react' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' -import { Button } from '@sushiswap/ui/future/components/button' import { Widget, WidgetHeader, WidgetContent } from '@sushiswap/ui/future/components/widget' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' +import { SelectIcon } from '@sushiswap/ui/future/components/select' interface AddSectionWidgetProps { isFarm: boolean @@ -60,26 +60,19 @@ export const AddSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - + setOpen(true)} + /> )} - -
-
- -
-
+ + + +
@@ -97,9 +90,13 @@ export const AddSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - + setOpen(true)} + /> )}
diff --git a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx index 7d19113848..fe3b042732 100644 --- a/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx +++ b/apps/earn/components/ConcentratedLiquidityRemoveWidget.tsx @@ -178,16 +178,36 @@ export const ConcentratedLiquidityRemoveWidget: FC{value}%
- - - -
diff --git a/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx b/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx index 746b3b1c8e..4264233199 100644 --- a/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx +++ b/apps/earn/components/LiquidityChartRangeInput/Zoom.tsx @@ -83,7 +83,7 @@ export const Zoom: FC = ({ {showResetButton ? ( diff --git a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx index 9119bb2181..ef8cccf73d 100644 --- a/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectPricesWidget.tsx @@ -167,10 +167,10 @@ export const SelectPricesWidget: FC = ({
{switchTokens ? (
- + {isSorted ? token0?.symbol : token1?.symbol} - + {isSorted ? token1?.symbol : token0?.symbol}
diff --git a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx index b5abd1f264..d62b00d847 100644 --- a/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectTokensWidget.tsx @@ -1,5 +1,3 @@ -import { ChevronDownIcon } from '@heroicons/react/solid' -import { classNames } from '@sushiswap/ui' import React, { FC } from 'react' import { ChainId } from '@sushiswap/chain' import { Type } from '@sushiswap/currency' @@ -7,6 +5,7 @@ import { TokenSelector } from '@sushiswap/wagmi/future/components/TokenSelector/ import { Button } from '@sushiswap/ui/future/components/button' import { ContentBlock } from '../AddPage/ContentBlock' import { Currency } from '@sushiswap/ui/future/components/currency' +import { SelectIcon } from '@sushiswap/ui/future/components/select' interface SelectTokensWidget { chainId: ChainId @@ -27,34 +26,27 @@ export const SelectTokensWidget: FC = ({ chainId, token0, to >
- {({ open, setOpen }) => ( + {({ setOpen }) => ( )} - {({ open, setOpen }) => ( + {({ setOpen }) => ( )} diff --git a/apps/earn/components/PoolPageV3.tsx b/apps/earn/components/PoolPageV3.tsx index 1415773a8a..b08cbb101e 100644 --- a/apps/earn/components/PoolPageV3.tsx +++ b/apps/earn/components/PoolPageV3.tsx @@ -197,7 +197,7 @@ const Pool: FC = () => { 1D @@ -206,7 +206,7 @@ const Pool: FC = () => { value={Granularity.Week} as={Toggle} pressed={granularity === Granularity.Week} - size="sm" + size="xs" > 1W diff --git a/apps/earn/components/PoolSection/PoolButtons.tsx b/apps/earn/components/PoolSection/PoolButtons.tsx index 0228464331..0607f2274e 100644 --- a/apps/earn/components/PoolSection/PoolButtons.tsx +++ b/apps/earn/components/PoolSection/PoolButtons.tsx @@ -26,10 +26,10 @@ export const PoolButtons: FC = ({ pool }) => { variant="secondary" fullWidth > - Withdraw + Withdraw
- - - {({ open }) => ( - <> - - - - -
-
- - - V3 Position{' '} - {isRouteProcessor3ChainId(chainId) ? ( -
- New 🔥 -
- ) : ( -
- Unavailable -
- )} -
- } - subtitle={'Most efficient way of providing liquidity.'} - /> - {isUniswapV2FactoryChainId(chainId) ? ( - - ) : null} - {/* isConstantProductPoolFactoryChainId(chainId) || isStablePoolFactoryChainId(chainId) */} - {TRIDENT_ENABLED_NETWORKS.includes( - chainId as (typeof TRIDENT_ENABLED_NETWORKS)[number] - ) ? ( - - Trident Position{' '} -
- Deprecating 💀 -
-
- } - subtitle={'If you prefer creating a trident liquidity position.'} - /> - ) : null} - + + + + + + + + + + +
+ V3 Position + + {isRouteProcessor3ChainId(chainId) ? 'New 🔥' : 'Unavailable'} +
-
- - - )} - +

+ Provide highly-efficient concentrated liquidity. +

+ + + + {isUniswapV2FactoryChainId(chainId) ? ( + + +
V2 Position
+

+ Create a legacy V2 liquidity position. +

+ + + ) : null} + {TRIDENT_ENABLED_NETWORKS.includes(chainId as (typeof TRIDENT_ENABLED_NETWORKS)[number]) ? ( + + +
+ Trident Position Deprecated 💀 +
+

+ If you prefer creating a trident liquidity position. +

+ + + ) : null} + + +
Looking for a partnership with Sushi? - - Join Onsen - +
Need Help? - - Join our discord - +
diff --git a/apps/earn/components/PoolsSection/PoolsSection.tsx b/apps/earn/components/PoolsSection/PoolsSection.tsx index 7e08ec7b8b..5bd6fe2f8a 100644 --- a/apps/earn/components/PoolsSection/PoolsSection.tsx +++ b/apps/earn/components/PoolsSection/PoolsSection.tsx @@ -4,11 +4,11 @@ import { useAccount } from '@sushiswap/wagmi' import { PoolsTable } from './Tables' import { TableFilters } from './Tables/TableFilters' -import { Button } from '@sushiswap/ui/future/components/button' import { useIsMounted } from '@sushiswap/hooks' import { Container } from '@sushiswap/ui/future/components/container' import { PositionsTab } from './PositionsTab' import { RewardsTab } from './RewardsTab' +import { Toggle } from '@sushiswap/ui/future/components/toggle' export const PoolsSection: FC = () => { const { address } = useAccount() @@ -22,25 +22,25 @@ export const PoolsSection: FC = () => {
{({ selected }) => ( - + )} {address && isMounted && ( <> {({ selected }) => ( - + )} {({ selected }) => ( - + )} diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx index a069905650..f77d567138 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/PoolQuickHoverTooltip.tsx @@ -34,7 +34,7 @@ export const PoolQuickHoverTooltip: FC = ({ row }) = {row.protocol === Protocol.SUSHISWAP_V3 && ( )}
diff --git a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx index 0083fa196d..30cf4cf503 100644 --- a/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx +++ b/apps/earn/components/PoolsSection/Tables/PositionsTable/PositionQuickHoverTooltip.tsx @@ -64,10 +64,10 @@ const _PositionQuickHoverTooltip: FC = ({ row })
diff --git a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx index 685a66afc2..3a00243e19 100644 --- a/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx +++ b/apps/earn/components/RemoveSection/RemoveSectionWidget.tsx @@ -15,6 +15,8 @@ import { usePoolPosition } from '../PoolPositionProvider' import { SettingsModule, SettingsOverlay } from '@sushiswap/ui/future/components/settings' import { Button } from '@sushiswap/ui/future/components/button' import { AppearOnMount } from '@sushiswap/ui/future/components/animation' +import { IconButton } from '@sushiswap/ui/future/components/iconbutton' +import { SelectIcon } from '@sushiswap/ui/future/components/select' interface RemoveSectionWidgetProps { isFarm: boolean @@ -68,8 +70,8 @@ export const RemoveSectionWidget: FC = ({ {({ open }) => ( <> {isFarm && isMounted ? ( - -
+ +
= ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - + setOpen(true)} + /> )} - -
-
- -
-
+ + + +
@@ -118,9 +113,13 @@ export const RemoveSectionWidget: FC = ({ modules={[SettingsModule.CustomTokens, SettingsModule.SlippageTolerance]} > {({ setOpen }) => ( - + setOpen(true)} + /> )} {' '}
@@ -150,7 +149,7 @@ export const RemoveSectionWidget: FC = ({
- ) : ( - <> - )} + ) : null} diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index 0a1d3ba9c1..f10facef38 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useMemo, useState } from 'react' +import React, { FC, useMemo, useState, Fragment } from 'react' import { Layout } from '../../../components' import Link from 'next/link' import { ArrowLeftIcon, MinusIcon, PlusIcon } from '@heroicons/react/solid' @@ -43,6 +43,7 @@ import { ConcentratedLiquidityHarvestButton } from '../../../components/Concentr import { Checker } from '@sushiswap/wagmi/future/systems' import { ChainId } from '@sushiswap/chain' import { Explainer } from '@sushiswap/ui/future/components/explainer' +import { Toggle } from '@sushiswap/ui/future/components/toggle' const PositionPage = () => { return ( @@ -161,7 +162,7 @@ const Position: FC = () => {
@@ -299,9 +300,9 @@ const Position: FC = () => {
{({ write, isLoading }) => ( - - - @@ -353,9 +354,9 @@ const Position: FC = () => { chainId={chainId} > {({ sendTransaction, isLoading }) => ( - - - @@ -394,26 +395,20 @@ const Position: FC = () => {
Price Range {_token0 && _token1 && ( - - - {_token0.symbol} + + + {({ checked }) => ( + + {_token0.symbol} + + )} - - {_token1.symbol} + + {({ checked }) => ( + + {_token1.symbol} + + )} )} diff --git a/config/tailwindcss/src/index.ts b/config/tailwindcss/src/index.ts index 4be90b2439..0bf0b30446 100644 --- a/config/tailwindcss/src/index.ts +++ b/config/tailwindcss/src/index.ts @@ -59,6 +59,7 @@ const config = { yellow: { DEFAULT: '#eab308', }, + secondary: 'var(--secondary)', muted: 'var(--muted)', 'muted-foreground': 'var(--muted-foreground)', accent: 'var(--accent)', diff --git a/packages/ui/src/future/components/button.tsx b/packages/ui/src/future/components/button.tsx index 9dc9b52792..693ddc3e58 100644 --- a/packages/ui/src/future/components/button.tsx +++ b/packages/ui/src/future/components/button.tsx @@ -6,20 +6,19 @@ import { Loader2 } from 'lucide-react' import { IconComponent } from '../types' const buttonVariants = cva( - 'whitespace-nowrap truncate inline-flex gap-2 items-center justify-center rounded-xl font-medium transition-colors !ring-0 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', + 'cursor-pointer whitespace-nowrap truncate inline-flex gap-2 items-center justify-center rounded-xl font-medium transition-colors !ring-0 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', { variants: { variant: { default: 'bg-blue hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-600 text-white', destructive: 'bg-red hover:bg-red-600 focus:bg-red-700 active:bg-red-600 text-white', - outline: - 'border dark:border-slate-200/5 border-gray-900/5 hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.08] dark:focus:bg-white/[0.16]', - secondary: - 'bg-black/[0.04] dark:bg-white/[0.06] hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.08] dark:focus:bg-white/[0.16]', - ghost: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.08] dark:focus:bg-white/[0.16]', - link: 'underline-offset-4 hover:underline text-primary', + outline: 'border dark:border-slate-200/5 border-gray-900/5 hover:bg-muted focus:bg-accent', + secondary: 'bg-secondary hover:bg-muted focus:bg-accent', + ghost: 'hover:bg-secondary focus:bg-accent', + link: 'text-blue hover:text-blue-700 font-semibold !p-0 !h-[unset] !min-h-[unset]', }, size: { + xs: 'min-h-[26px] h-[26px] px-1 text-xs', sm: 'min-h-9 h-9 px-3 text-sm', default: 'min-h-10 h-10 py-2 px-4 text-sm', lg: 'min-h-11 h-11 px-4', @@ -36,7 +35,8 @@ const buttonVariants = cva( const buttonLoaderVariants = cva('animate-spin', { variants: { size: { - sm: 'w-4 h-4', + xs: 'w-4 h-4', + sm: 'w-[18px] h-[18px]', default: 'w-5 h-5', lg: 'w-5 h-5 stroke-[2px]', xl: 'w-5 h-5 stroke-[2px]', @@ -50,8 +50,9 @@ const buttonLoaderVariants = cva('animate-spin', { const buttonIconVariants = cva('', { variants: { size: { - default: 'w-5 h-5', + xs: 'w-4 h-4', sm: 'w-[18px] h-[18px]', + default: 'w-5 h-5', lg: 'w-5 h-5', xl: 'w-5 h-5', }, @@ -85,6 +86,8 @@ const Button = React.forwardRef( children, asChild = false, loading = false, + testId, + id, ...props }, ref @@ -98,6 +101,7 @@ const Button = React.forwardRef( )} ref={ref} {...props} + testdata-id={`${testId || id}-button`} > {loading ? ( diff --git a/packages/ui/src/future/components/chip.tsx b/packages/ui/src/future/components/chip.tsx index 417a3957f2..83cac1acef 100644 --- a/packages/ui/src/future/components/chip.tsx +++ b/packages/ui/src/future/components/chip.tsx @@ -7,11 +7,10 @@ const chipVariants = cva( { variants: { variant: { - default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground', + default: 'bg-blue hover:bg-primary/80 border-transparent text-primary-foreground', secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground', destructive: 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground', - ghost: - 'bg-black/[0.04] hover:bg-black/[0.06] focus:bg-black/[0.12] dark:bg-white/[0.08] dark:hover:bg-white/[0.12] dark:focus:bg-white/[0.16]', + ghost: 'hover:bg-muted focus:bg-accent', outline: 'text-foreground', }, }, diff --git a/packages/ui/src/future/components/dropdown-menu.tsx b/packages/ui/src/future/components/dropdown-menu.tsx index d1f6237439..c54f001948 100644 --- a/packages/ui/src/future/components/dropdown-menu.tsx +++ b/packages/ui/src/future/components/dropdown-menu.tsx @@ -81,7 +81,7 @@ const DropdownMenuItem = React.forwardRef< (({ className, value, ...props }, ref) => ( >(({ className, ...props }, ref) => ( - + )) @@ -40,7 +40,7 @@ const SelectTrigger = React.forwardRef< , - React.ComponentPropsWithoutRef & VariantProps ->(({ className, variant, size, ...props }, ref) => ( - -)) +export interface ToggleProps + extends React.ComponentPropsWithoutRef, + VariantProps { + testId?: string +} + +const Toggle = React.forwardRef, ToggleProps>( + ({ testId, id, className, variant, size, ...props }, ref) => ( + + ) +) Toggle.displayName = TogglePrimitive.Root.displayName diff --git a/packages/ui/src/future/components/widget.tsx b/packages/ui/src/future/components/widget.tsx index 5e6eb53dd5..7d91db6f11 100644 --- a/packages/ui/src/future/components/widget.tsx +++ b/packages/ui/src/future/components/widget.tsx @@ -52,7 +52,9 @@ const WidgetHeader = React.forwardRef( className={classNames(className, 'p-3 mx-0.5 grid grid-cols-2 items-center pb-4 font-medium')} {...props} > -

{title}

+

+ {title} +

{children}
) diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index 466e9e946b..bc6b03c8ba 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -4,16 +4,18 @@ @layer base { :root { - --muted: #0000000a; + --secondary: #0000000a; + --muted: #0000000f; --muted-foreground: #6b7280; - --accent: #0000000a; + --accent: #00000014; --accent-foreground: #111827; } .dark { - --muted: 223 47% 11%; + --secondary: #ffffff0a; + --muted: #ffffff0f; --muted-foreground: 215.4 16.3% 56.9%; - --accent: 216 34% 17%; + --accent: #ffffff14; --accent-foreground: 210 40% 98%; } } diff --git a/packages/wagmi/src/future/components/ConnectButton.tsx b/packages/wagmi/src/future/components/ConnectButton.tsx index b9046a639e..efb0b11ee4 100644 --- a/packages/wagmi/src/future/components/ConnectButton.tsx +++ b/packages/wagmi/src/future/components/ConnectButton.tsx @@ -17,8 +17,6 @@ import { DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger } from "@sushiswap/ui/future/components/dropdown-menu"; From 7bad9c13f04c79667e789b0693bb26fb42dd967f Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Wed, 21 Jun 2023 23:07:17 +0100 Subject: [PATCH 29/59] refactor(packages/ui): search component --- apps/_root/ui/swap/search/SearchPanel.tsx | 2 +- .../components/Filters/SearchFilter.tsx | 2 +- .../TableFilters/TableFiltersSearchToken.tsx | 12 +- packages/ui/src/future/components/chip.tsx | 24 +- .../ui/src/future/components/input/Search.tsx | 308 ++++++++---------- .../networkselector/NetworkSelectorDialog.tsx | 2 +- .../networkselector/NetworkSelectorMenu.tsx | 8 +- .../TokenSelector/TokenSelector.tsx | 2 +- 8 files changed, 164 insertions(+), 196 deletions(-) diff --git a/apps/_root/ui/swap/search/SearchPanel.tsx b/apps/_root/ui/swap/search/SearchPanel.tsx index 6f7b2af041..43d0bb3dee 100644 --- a/apps/_root/ui/swap/search/SearchPanel.tsx +++ b/apps/_root/ui/swap/search/SearchPanel.tsx @@ -71,7 +71,7 @@ export const SearchPanel: FC = () => {
- + diff --git a/apps/analytics/components/Filters/SearchFilter.tsx b/apps/analytics/components/Filters/SearchFilter.tsx index 42a7d28d1d..ea9d1cfd4a 100644 --- a/apps/analytics/components/Filters/SearchFilter.tsx +++ b/apps/analytics/components/Filters/SearchFilter.tsx @@ -30,5 +30,5 @@ export const SearchFilter: FC = () => { } }, [extra, setFilters]) - return + return } diff --git a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx index 7c5ce0b9db..8913a64373 100644 --- a/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx +++ b/apps/earn/components/PoolsSection/Tables/TableFilters/TableFiltersSearchToken.tsx @@ -15,15 +15,5 @@ export const TableFiltersSearchToken: FC = () => { } }, [_query, debouncedQuery, setFilters, tokenSymbols]) - return ( - - ) + return } diff --git a/packages/ui/src/future/components/chip.tsx b/packages/ui/src/future/components/chip.tsx index 83cac1acef..776056088c 100644 --- a/packages/ui/src/future/components/chip.tsx +++ b/packages/ui/src/future/components/chip.tsx @@ -1,15 +1,16 @@ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { classNames } from '../../index' +import { IconComponent } from '../types' const chipVariants = cva( 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { - default: 'bg-blue hover:bg-primary/80 border-transparent text-primary-foreground', - secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground', - destructive: 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground', + default: 'bg-blue hover:bg-blue-600 focus:bg-blue-700 border-transparent text-primary-foreground', + secondary: 'bg-secondary hover:bg-muted focus:bg-accent border-transparent text-secondary-foreground', + destructive: 'bg-red hover:bg-red-600 focus:bg-red-700 border-transparent text-destructive-foreground', ghost: 'hover:bg-muted focus:bg-accent', outline: 'text-foreground', }, @@ -20,10 +21,21 @@ const chipVariants = cva( } ) -export interface BadgeProps extends React.HTMLAttributes, VariantProps {} +export interface BadgeProps extends React.HTMLAttributes, VariantProps { + icon: IconComponent + iconProps?: Omit, 'width' | 'height'> +} -function Chip({ className, variant, ...props }: BadgeProps) { - return
+function Chip({ className, variant, icon: Icon, iconProps, children, ...props }: BadgeProps) { + return ( +
+ {Icon ? : null} + {children} +
+ ) } export { Chip, chipVariants } diff --git a/packages/ui/src/future/components/input/Search.tsx b/packages/ui/src/future/components/input/Search.tsx index 847ce65942..ab4c29ca32 100644 --- a/packages/ui/src/future/components/input/Search.tsx +++ b/packages/ui/src/future/components/input/Search.tsx @@ -1,118 +1,164 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' import classNames from 'classnames' -import React, { FC, forwardRef, KeyboardEvent, ReactElement, useCallback, useEffect, useState } from 'react' +import React, { forwardRef, KeyboardEvent, useCallback, useEffect, useState } from 'react' +import { cva, type VariantProps } from 'class-variance-authority' +import { Loader2 } from 'lucide-react' -import { Loader } from '../loader' import { XMarkIcon } from '@heroicons/react/24/outline' +import { Chip } from '../chip' -interface Search { +const containerVariants = cva('font-medium relative w-full flex items-center gap-1.5 rounded-xl bg-secondary', { + variants: { + size: { + sm: 'min-h-9 h-9 px-3 text-sm', + default: 'min-h-10 h-10 py-2 px-4 text-sm', + }, + }, + defaultVariants: { + size: 'default', + }, +}) + +const containerIconVariants = cva('', { + variants: { + size: { + sm: 'w-5 h-5', + default: 'w-5 h-5', + }, + }, + defaultVariants: { + size: 'default', + }, +}) + +export interface SearchProps extends React.HTMLAttributes, VariantProps { className?: string id: string - input?(props: any): ReactElement | null value: string - loading: boolean - onChange(val: string): void - size?: 'sm' | 'default' + onValueChange(val: string): void + loading?: boolean delimiter?: string } -export const Search: FC = forwardRef(function Search( - { className, id, loading, input: Input, value, onChange, size = 'default', delimiter }, - ref -) { - const [values, setValues] = useState({ - all: value.split(delimiter || ' '), - typed: '', - }) +const Search = forwardRef( + ({ id, loading, value, onValueChange, size = 'default', delimiter }, ref) => { + const [values, setValues] = useState({ + all: value.split(delimiter || ' '), + typed: '', + }) + + const _onChange = useCallback( + (val: string) => { + if (val.slice(-1) === (delimiter || ' ')) { + setValues((prev) => ({ + typed: '', + all: [...prev.all, prev.typed], + })) + } else { + setValues((prev) => ({ + typed: val, + all: prev.all, + })) + } + }, + [delimiter] + ) + + const remove = useCallback((val: string) => { + setValues((prev) => ({ + typed: prev.typed, + all: prev.all.filter((_val) => _val !== val), + })) + }, []) - const _onChange = useCallback( - (val: string) => { - if (val.slice(-1) === (delimiter || ' ')) { + const handleKeyDown = useCallback((event: KeyboardEvent) => { + if (event.key === 'Backspace') { setValues((prev) => ({ - typed: '', - all: [...prev.all, prev.typed], + typed: prev.typed, + all: prev.all.slice(0, -1), })) - } else { + } + + if (event.key === 'Enter') { setValues((prev) => ({ - typed: val, - all: prev.all, + typed: '', + all: [...prev.all, prev.typed], })) } - }, - [delimiter] - ) - - const remove = useCallback((val: string) => { - setValues((prev) => ({ - typed: prev.typed, - all: prev.all.filter((_val) => _val !== val), - })) - }, []) + }, []) - const handleKeyDown = useCallback((event: KeyboardEvent) => { - if (event.key === 'Backspace') { - setValues((prev) => ({ - typed: prev.typed, - all: prev.all.slice(0, -1), - })) - } - - if (event.key === 'Enter') { - setValues((prev) => ({ - typed: '', - all: [...prev.all, prev.typed], - })) - } - }, []) + useEffect(() => { + if (delimiter) { + onValueChange(`${values.typed} ${values.all.filter((el) => el !== ' ' && el !== '').join(' ')}`) + } + }, [delimiter, onValueChange, values]) - useEffect(() => { if (delimiter) { - onChange(`${values.typed} ${values.all.filter((el) => el !== ' ' && el !== '').join(' ')}`) - } - }, [delimiter, onChange, values]) + return ( +
+ +
+ {values.all + .filter((el) => el !== ' ' && el !== '') + .map((el, i) => ( + remove(el)} + key={i} + variant="secondary" + className="cursor-pointer" + > + {el} + + ))} +
- if (delimiter) { - return ( -
-
- _onChange(e.target.value)} + onKeyDown={handleKeyDown} + className={classNames('bg-transparent')} + autoCorrect="off" + autoCapitalize="off" + spellCheck="false" + autoComplete="off" /> -
- -
- {values.all - .filter((el) => el !== ' ' && el !== '') - .map((el, i) => ( -
remove(el)} - key={i} - className="font-semibold text-gray-600 dark:text-slate-300 flex items-center text-sm rounded-full p-1 pl-2.5 bg-black/[0.08] dark:bg-white/[0.16] gap-1" - > - {el} -
- + {(loading || value) && ( +
+ {loading ? ( +
+
-
- ))} + ) : value ? ( +
+ setValues({ + all: [], + typed: '', + }) + } + > + +
+ ) : null} +
+ )}
+ ) + } + return ( +
+ _onChange(e.target.value)} - onKeyDown={handleKeyDown} + value={value} + onChange={(e) => onValueChange(e.target.value)} className={classNames( 'truncate font-semibold w-full bg-transparent !p-0 placeholder:font-medium placeholder:text-gray-400 placeholder:dark:text-slate-500 text-gray-900 dark:text-slate-200' )} @@ -125,94 +171,20 @@ export const Search: FC = forwardRef(function
{loading ? (
- +
) : value ? ( -
- setValues({ - all: [], - typed: '', - }) - } - > - +
onValueChange('')}> +
- ) : ( - <> - )} + ) : null}
)}
) } +) - return ( -
- - {Input ? ( - - ) : ( - onChange(e.target.value)} - className={classNames( - 'truncate font-semibold w-full bg-transparent !p-0 placeholder:font-medium placeholder:text-gray-400 placeholder:dark:text-slate-500 text-gray-900 dark:text-slate-200' - )} - autoCorrect="off" - autoCapitalize="off" - spellCheck="false" - autoComplete="off" - /> - )} - {(loading || value) && ( -
- {loading ? ( -
- -
- ) : value ? ( -
onChange('')}> - -
- ) : ( - <> - )} -
- )} -
- ) -}) +Search.displayName = 'Search' + +export { Search } diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx index 70ff380dc7..3bc701f020 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorDialog.tsx @@ -24,7 +24,7 @@ export const NetworkSelectorDialog = ({ close()}> - +
{networks .filter((el) => (query ? chains[el].name.toLowerCase().includes(query.toLowerCase()) : Boolean)) diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx index d5c409e5ec..e1f420a9d1 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx @@ -20,13 +20,7 @@ export const NetworkSelectorMenu = ({ ({ networks, diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx index e1f420a9d1..c3e0ad715d 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx @@ -1,12 +1,10 @@ -import chains, { Chain } from '@sushiswap/chain' +import { Chain } from '@sushiswap/chain' import React, { useState } from 'react' import { NetworkIcon } from '../icons' -import { Search } from '../input/Search' import { NetworkSelectorProps } from './index' -import { Select, SelectContent, SelectItem } from '../select' -import { ScrollArea } from '../scroll-area' -import { Separator } from '../separator' +import { PopoverContent, PopoverNew, PopoverTrigger } from '../popovernew' +import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command' export const NetworkSelectorMenu = ({ selected, @@ -14,27 +12,31 @@ export const NetworkSelectorMenu = ({ networks = [], children, }: Omit, 'variant'>) => { - const [query, setQuery] = useState('') + const [open, setOpen] = useState(false) return ( - + + + + ) } diff --git a/packages/ui/src/future/components/popovernew.tsx b/packages/ui/src/future/components/popovernew.tsx index 30ef896d36..bd86be73ac 100644 --- a/packages/ui/src/future/components/popovernew.tsx +++ b/packages/ui/src/future/components/popovernew.tsx @@ -28,4 +28,4 @@ const PopoverContent = React.forwardRef< )) PopoverContent.displayName = PopoverPrimitive.Content.displayName -export { PopoverNew, PopoverTrigger, PopoverContent } +export { PopoverNew, PopoverTrigger, PopoverContent, PopoverPrimitive } diff --git a/packages/ui/src/future/components/select.tsx b/packages/ui/src/future/components/select.tsx index 5691730bf1..c760f8f6de 100644 --- a/packages/ui/src/future/components/select.tsx +++ b/packages/ui/src/future/components/select.tsx @@ -28,7 +28,7 @@ const SelectIcon = React.forwardRef< React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )) diff --git a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx index 19f9b538e5..362dc73512 100644 --- a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx +++ b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx @@ -5,7 +5,7 @@ import {createErrorToast} from '@sushiswap/ui/future/components/toast' import {useBreakpoint} from '@sushiswap/ui/future/lib/useBreakpoint' import React, {FC, useCallback} from 'react' import {ProviderRpcError, useNetwork, UserRejectedRequestError, useSwitchNetwork} from 'wagmi' -import {SelectPrimitive} from "@sushiswap/ui/future/components/select"; +import {PopoverPrimitive } from "@sushiswap/ui/future/components/popovernew"; import {Button} from "@sushiswap/ui/future/components/button"; export const HeaderNetworkSelector: FC<{ @@ -49,12 +49,12 @@ export const HeaderNetworkSelector: FC<{ onSelect={onSwitchNetwork} networks={networks} > - + - + ) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17e3e663eb..5486b08f28 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2526,6 +2526,7 @@ importers: '@heroicons/react': 2.0.13 '@popperjs/core': 2.11.7 '@radix-ui/react-checkbox': ^1.0.4 + '@radix-ui/react-dialog': ^1.0.4 '@radix-ui/react-dropdown-menu': ^2.0.5 '@radix-ui/react-label': ^2.0.2 '@radix-ui/react-popover': ^1.0.6 @@ -2561,6 +2562,7 @@ importers: class-variance-authority: ^0.6.0 classnames: 2.3.2 clsx: ^1.2.1 + cmdk: ^0.2.0 date-fns: 2.29.3 eslint: 8.41.0 lucide-react: ^0.233.0 @@ -2593,6 +2595,7 @@ importers: '@heroicons/react': 2.0.13_react@18.2.0 '@popperjs/core': 2.11.7 '@radix-ui/react-checkbox': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-dialog': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-dropdown-menu': 2.0.5_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-label': 2.0.2_lhsvdmrfrkqkmxtqosqgyd3k4i '@radix-ui/react-popover': 1.0.6_lhsvdmrfrkqkmxtqosqgyd3k4i @@ -2618,6 +2621,7 @@ importers: class-variance-authority: 0.6.0_typescript@5.0.4 classnames: 2.3.2 clsx: 1.2.1 + cmdk: 0.2.0_tqcjxml4rosq5qpg5cznikfcd4 date-fns: 2.29.3 lucide-react: 0.233.0_react@18.2.0 nanoid: 4.0.0 @@ -10583,6 +10587,12 @@ packages: '@babel/runtime': 7.21.5 dev: false + /@radix-ui/primitive/1.0.0: + resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==} + dependencies: + '@babel/runtime': 7.21.5 + dev: false + /@radix-ui/primitive/1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: @@ -10662,6 +10672,15 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-compose-refs/1.0.0_react@18.2.0: + resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + react: 18.2.0 + dev: false + /@radix-ui/react-compose-refs/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: @@ -10676,6 +10695,15 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-context/1.0.0_react@18.2.0: + resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + react: 18.2.0 + dev: false + /@radix-ui/react-context/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: @@ -10690,6 +10718,67 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-dialog/1.0.0_tqcjxml4rosq5qpg5cznikfcd4: + resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-dismissable-layer': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0 + '@radix-ui/react-focus-scope': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-portal': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-slot': 1.0.0_react@18.2.0 + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + aria-hidden: 1.2.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.4_s3k22s5ab4eu26xuel7hiaraxy + transitivePeerDependencies: + - '@types/react' + dev: false + + /@radix-ui/react-dialog/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: + resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-context': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-dismissable-layer': 1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-focus-guards': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-focus-scope': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-id': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-portal': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-presence': 1.0.1_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-primitive': 1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i + '@radix-ui/react-slot': 1.0.2_s3k22s5ab4eu26xuel7hiaraxy + '@radix-ui/react-use-controllable-state': 1.0.1_s3k22s5ab4eu26xuel7hiaraxy + '@types/react': 18.2.6 + '@types/react-dom': 18.2.4 + aria-hidden: 1.2.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.5_s3k22s5ab4eu26xuel7hiaraxy + dev: false + /@radix-ui/react-direction/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} peerDependencies: @@ -10704,6 +10793,22 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-dismissable-layer/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + '@radix-ui/react-use-escape-keydown': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-dismissable-layer/1.0.4_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==} peerDependencies: @@ -10756,6 +10861,15 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-focus-guards/1.0.0_react@18.2.0: + resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + react: 18.2.0 + dev: false + /@radix-ui/react-focus-guards/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: @@ -10770,6 +10884,20 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-focus-scope/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-focus-scope/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==} peerDependencies: @@ -10793,6 +10921,16 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-id/1.0.0_react@18.2.0: + resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + /@radix-ui/react-id/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: @@ -10932,6 +11070,18 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-portal/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-portal/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==} peerDependencies: @@ -10953,6 +11103,19 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-presence/1.0.1_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: @@ -10975,6 +11138,18 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-primitive/1.0.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-slot': 1.0.0_react@18.2.0 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /@radix-ui/react-primitive/1.0.3_lhsvdmrfrkqkmxtqosqgyd3k4i: resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -11138,6 +11313,16 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-slot/1.0.0_react@18.2.0: + resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + /@radix-ui/react-slot/1.0.2_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -11235,6 +11420,15 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0: + resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + react: 18.2.0 + dev: false + /@radix-ui/react-use-callback-ref/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: @@ -11249,6 +11443,16 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0: + resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + /@radix-ui/react-use-controllable-state/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} peerDependencies: @@ -11264,6 +11468,16 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-use-escape-keydown/1.0.0_react@18.2.0: + resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0 + react: 18.2.0 + dev: false + /@radix-ui/react-use-escape-keydown/1.0.3_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} peerDependencies: @@ -11279,6 +11493,15 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0: + resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.5 + react: 18.2.0 + dev: false + /@radix-ui/react-use-layout-effect/1.0.1_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} peerDependencies: @@ -14943,7 +15166,7 @@ packages: '@walletconnect/jsonrpc-provider': 1.0.13 '@walletconnect/jsonrpc-types': 1.0.3 '@walletconnect/jsonrpc-utils': 1.0.8 - '@walletconnect/modal': 2.4.5 + '@walletconnect/modal': 2.4.5_react@18.2.0 '@walletconnect/sign-client': 2.8.0 '@walletconnect/types': 2.8.0 '@walletconnect/universal-provider': 2.8.0 @@ -18021,6 +18244,20 @@ packages: engines: {node: '>=0.10.0'} dev: false + /cmdk/0.2.0_tqcjxml4rosq5qpg5cznikfcd4: + resolution: {integrity: sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + dependencies: + '@radix-ui/react-dialog': 1.0.0_tqcjxml4rosq5qpg5cznikfcd4 + command-score: 0.1.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + transitivePeerDependencies: + - '@types/react' + dev: false + /co/4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} @@ -18127,6 +18364,10 @@ packages: table-layout: 1.0.2 typical: 5.2.0 + /command-score/0.1.2: + resolution: {integrity: sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w==} + dev: false + /commander/2.18.0: resolution: {integrity: sha512-6CYPa+JP2ftfRU2qkDK+UTVeQYosOg/2GbcjIcKPHfinyOLPVGXu/ovN86RP49Re5ndJK1N0kuiidFFuepc4ZQ==} @@ -29990,6 +30231,25 @@ packages: tslib: 2.5.3 dev: false + /react-remove-scroll/2.5.4_s3k22s5ab4eu26xuel7hiaraxy: + resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.2.6 + react: 18.2.0 + react-remove-scroll-bar: 2.3.4_s3k22s5ab4eu26xuel7hiaraxy + react-style-singleton: 2.2.1_s3k22s5ab4eu26xuel7hiaraxy + tslib: 2.5.3 + use-callback-ref: 1.3.0_s3k22s5ab4eu26xuel7hiaraxy + use-sidecar: 1.1.2_s3k22s5ab4eu26xuel7hiaraxy + dev: false + /react-remove-scroll/2.5.5_s3k22s5ab4eu26xuel7hiaraxy: resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} engines: {node: '>=10'} From 86c13ce4c8d651ae1d94c35e3299e9483d72d3b6 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 00:48:19 +0100 Subject: [PATCH 31/59] fix(packages/ui): add index file --- .../app/internal/bentobox/strategies/page.tsx | 13 ++-- apps/_root/app/internal/tokens/page.tsx | 13 ++-- apps/_root/ui/swap/trade/TradeStats.tsx | 3 +- apps/_root/ui/swap/widget/ChainSelectors.tsx | 61 ++++++------------- .../_root/ui/swap/widget/CrossChainBanner.tsx | 15 ++--- .../SelectNetworkWidget.tsx | 13 ++-- .../Tables/PoolsTable/Cells/columns.tsx | 5 +- .../components/RewardsSection/RewardSlide.tsx | 2 +- .../Tables/RewardsTableV3/Cells/columns.tsx | 4 +- .../RewardsTableV3RowPopover.tsx | 5 +- apps/earn/pages/position/[tokenId]/index.tsx | 2 +- .../ui/src/future/components/explainer.tsx | 15 ++++- packages/ui/src/future/components/index.ts | 48 +++++++++++++++ .../ui/src/future/components/list/index.ts | 1 + .../ui/src/future/components/modal/index.ts | 1 + .../networkselector/NetworkSelectorMenu.tsx | 5 +- .../components/settings/SlippageTolerance.tsx | 2 +- packages/ui/src/globals.css | 18 ------ packages/ui/src/index.css | 11 ++-- .../components/HeaderNetworkSelector.tsx | 2 - .../systems/Checker/ApproveBentobox.tsx | 2 +- .../future/systems/Checker/ApproveERC20.tsx | 2 +- 22 files changed, 120 insertions(+), 123 deletions(-) create mode 100644 packages/ui/src/future/components/list/index.ts create mode 100644 packages/ui/src/future/components/modal/index.ts diff --git a/apps/_root/app/internal/bentobox/strategies/page.tsx b/apps/_root/app/internal/bentobox/strategies/page.tsx index 172c48fbb3..228e70ba66 100644 --- a/apps/_root/app/internal/bentobox/strategies/page.tsx +++ b/apps/_root/app/internal/bentobox/strategies/page.tsx @@ -9,7 +9,6 @@ import useSWR from 'swr' import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Button } from '@sushiswap/ui/future/components/button' -import { SelectPrimitive } from '@sushiswap/ui/future/components/select' export default function BentoBoxStrategiesPage() { const { data } = useSWR('bentobox-strategies', () => getStrategies()) @@ -40,13 +39,11 @@ export default function BentoBoxStrategiesPage() { onSelect={setSelectedChainId} variant="menu" > - - - + )}
diff --git a/apps/_root/app/internal/tokens/page.tsx b/apps/_root/app/internal/tokens/page.tsx index f0c502291f..4a8347aa0d 100644 --- a/apps/_root/app/internal/tokens/page.tsx +++ b/apps/_root/app/internal/tokens/page.tsx @@ -13,7 +13,6 @@ import useSWR from 'swr' import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { Button } from '@sushiswap/ui/future/components/button' -import { SelectPrimitive } from '@sushiswap/ui/future/components/select' import { ChevronDownIcon } from '@heroicons/react/24/outline' const TokensPage: FC = () => { @@ -53,13 +52,11 @@ const TokensPage: FC = () => {
- - - + diff --git a/apps/_root/ui/swap/trade/TradeStats.tsx b/apps/_root/ui/swap/trade/TradeStats.tsx index 5581addbcd..afbdc3d07d 100644 --- a/apps/_root/ui/swap/trade/TradeStats.tsx +++ b/apps/_root/ui/swap/trade/TradeStats.tsx @@ -18,7 +18,6 @@ import { isAddress } from 'ethers/lib/utils' import { useAccount } from '@sushiswap/wagmi' import { Explainer } from '@sushiswap/ui/future/components/explainer' import { AddressToEnsResolver } from '@sushiswap/wagmi/future/components/Account/AddressToEnsResolver' -import { InformationCircleIcon } from '@heroicons/react/20/solid' export const TradeStats: FC = () => { const { address } = useAccount() @@ -125,7 +124,7 @@ export const TradeStats: FC = () => { }} {address !== recipient && ( - }> + Recipient is different from the connected wallet address. If this is expected, ignore this warning. )} diff --git a/apps/_root/ui/swap/widget/ChainSelectors.tsx b/apps/_root/ui/swap/widget/ChainSelectors.tsx index c4b3dc1061..729907b22d 100644 --- a/apps/_root/ui/swap/widget/ChainSelectors.tsx +++ b/apps/_root/ui/swap/widget/ChainSelectors.tsx @@ -1,12 +1,13 @@ import React, { FC, useCallback } from 'react' import { NetworkSelector, NetworkSelectorOnSelectCallback } from '@sushiswap/ui/future/components/networkselector' import { Chain } from '@sushiswap/chain' -import { Popover } from '@headlessui/react' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { useSwapActions, useSwapState } from '../trade/TradeProvider' -import { ArrowRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline' +import { ArrowRightIcon } from '@heroicons/react/24/outline' import { STARGATE_SUPPORTED_CHAIN_IDS, StargateChainId } from '@sushiswap/stargate' import { classNames } from '@sushiswap/ui' +import { Button } from '@sushiswap/ui/future/components/button' +import { SelectIcon } from '@sushiswap/ui/future/components/select' export const ChainSelectors: FC<{ open: boolean }> = ({ open }) => { const { network0, network1 } = useSwapState() @@ -45,56 +46,34 @@ export const ChainSelectors: FC<{ open: boolean }> = ({ open }) => {
-
- +
+ From network + - - - From - -
-
- - {Chain.from(network0).name} -
-
- -
-
- +
-
+
+ To network - - - To - -
-
- - {Chain.from(network1).name} -
-
- -
-
- +
diff --git a/apps/_root/ui/swap/widget/CrossChainBanner.tsx b/apps/_root/ui/swap/widget/CrossChainBanner.tsx index f1dbb13742..50d037e050 100644 --- a/apps/_root/ui/swap/widget/CrossChainBanner.tsx +++ b/apps/_root/ui/swap/widget/CrossChainBanner.tsx @@ -3,12 +3,10 @@ import { Switch } from '@sushiswap/ui/future/components/switch' import { useSwapActions, useSwapState } from '../trade/TradeProvider' import { AppType } from '@sushiswap/ui/types' import { classNames } from '@sushiswap/ui' -import { ShuffleIcon } from '@sushiswap/ui/future/components/icons' import { ChevronRightIcon } from '@heroicons/react/24/outline' import { ChainSelectors } from './ChainSelectors' import { Explainer } from '@sushiswap/ui/future/components/explainer' import { STARGATE_SUPPORTED_CHAIN_IDS, StargateChainId } from '@sushiswap/stargate' -import { InformationCircleIcon } from '@heroicons/react/20/solid' export const CrossChainBanner: FC = () => { const { appType, network0 } = useSwapState() @@ -31,20 +29,19 @@ export const CrossChainBanner: FC = () => { >
-

- + Cross Chain - }> +
Cross-chain Swap - + Swap your funds on one network and swap them into a token on a different network {

- - Swap tokens from one network to another. - + Swap tokens from one network to another.
diff --git a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx index 6d40758018..c59607ff55 100644 --- a/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx +++ b/apps/earn/components/NewPositionSection/SelectNetworkWidget.tsx @@ -6,7 +6,6 @@ import { V3_SUPPORTED_CHAIN_IDS } from '@sushiswap/v3-sdk' import { NetworkSelector } from '@sushiswap/ui/future/components/networkselector' import { Button } from '@sushiswap/ui/future/components/button' import { ContentBlock } from '../AddPage/ContentBlock' -import { SelectPrimitive } from '@sushiswap/ui/future/components/select' import { SelectIcon } from '@sushiswap/ui/future/components/select' interface SelectNetworkWidgetProps { @@ -35,13 +34,11 @@ export const SelectNetworkWidget: FC = memo(function S onSelect={onSelect} variant="menu" > - - - +
diff --git a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx index 61421dacd3..609fc4c6aa 100644 --- a/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx +++ b/apps/earn/components/PoolsSection/Tables/PoolsTable/Cells/columns.tsx @@ -6,7 +6,6 @@ import { PoolFees1dCell } from './PoolFees1dCell' import { PoolNameCell, PoolChainCell, PoolAPRCell, PoolVolume1dCell } from '../../SharedCells' import { PoolTVLCell } from './PoolTVLCell' import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' -import { InformationCircleIcon } from '@heroicons/react/solid' import { Explainer } from '@sushiswap/ui/future/components/explainer' import { ChainId } from '@sushiswap/chain' @@ -63,9 +62,7 @@ export const APR_COLUMN: ColumnDef = { header: () => (
APR - }> - The APRs displayed for the liquidity pools are algorithmic and subject to change. - + The APRs displayed for the liquidity pools are algorithmic and subject to change.
), accessorFn: (row) => row.totalApr1d, diff --git a/apps/earn/components/RewardsSection/RewardSlide.tsx b/apps/earn/components/RewardsSection/RewardSlide.tsx index 0136cf7f9d..a8404c702f 100644 --- a/apps/earn/components/RewardsSection/RewardSlide.tsx +++ b/apps/earn/components/RewardsSection/RewardSlide.tsx @@ -49,7 +49,7 @@ export const RewardSlide: FC<{ Claimable{' '} {unclaimed.length > 0 && ( - }> + Claimable on {Chain.from(data.chainId).name} diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx index ef6561ab6e..d878edad85 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/Cells/columns.tsx @@ -50,9 +50,7 @@ export const REWARDS_V3_APR_COLUMN: ColumnDef = { header: () => (
APR - }> - The APRs displayed for the liquidity pools are algorithmic and subject to change. - + The APRs displayed for the liquidity pools are algorithmic and subject to change.
), accessorFn: (row) => row.meanAPR ?? 0, diff --git a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx index da8e1d7ad3..6e2e0f0e45 100644 --- a/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx +++ b/apps/earn/components/RewardsSection/Tables/RewardsTableV3/RewardsTableV3RowPopover.tsx @@ -8,7 +8,6 @@ import { List } from '@sushiswap/ui/future/components/list/List' import { format } from 'date-fns' import { Explainer } from '@sushiswap/ui/future/components/explainer' import { rewardPerDay } from './utils' -import { InformationCircleIcon } from '@heroicons/react/solid' export const RewardsTableV3RowPopover: FC = ({ row }) => { const ongoingFarms = row.distributionData.filter((el) => el.isLive) @@ -51,7 +50,7 @@ export const RewardsTableV3RowPopover: FC = ({ row }) => title={
Reward - }> + Your share calculated as your LP divided by the total LP in the pool multiplied by the rewards set per day. @@ -86,7 +85,7 @@ export const RewardsTableV3RowPopover: FC = ({ row }) => title={
Details - }> + Weight that fees earned by positions represent in their rewards score. A higher % means that more rewards will be attributed to positions that earn more fees during the distribution. diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index f10facef38..bf2d04270c 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -262,7 +262,7 @@ const Position: FC = () => {
Unclaimed rewards{' '} - }> + Accumulated rewards since inception diff --git a/packages/ui/src/future/components/explainer.tsx b/packages/ui/src/future/components/explainer.tsx index 7009fe3d40..b70ab920b3 100644 --- a/packages/ui/src/future/components/explainer.tsx +++ b/packages/ui/src/future/components/explainer.tsx @@ -1,14 +1,23 @@ import React, { FC, ReactNode } from 'react' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip' +import { IconComponent, IconProps } from '../types' +import { InformationCircleIcon } from '@heroicons/react/20/solid' export const Explainer: FC<{ children: ReactNode - icon: ReactNode -}> = ({ icon, children }) => { + icon?: IconComponent + iconProps?: IconProps +}> = ({ icon: Icon, iconProps, children }) => { return ( - {icon} + + {Icon ? ( + + ) : ( + + )} + {children} diff --git a/packages/ui/src/future/components/index.ts b/packages/ui/src/future/components/index.ts index 8f1b90de14..93e73789fd 100644 --- a/packages/ui/src/future/components/index.ts +++ b/packages/ui/src/future/components/index.ts @@ -1 +1,49 @@ +export * from './animation' +export * from './currency' +export * from './dialog' export * from './GlobalNav' +export * from './drawer' +export * from './icons' +export * from './input' +export * from './list' +export * from './modal' +export * from './networkselector' +export * from './overlay' +export * from './Popover' +export * from './settings' +export * from './table' +export * from './toast' +export * from './Badge' +export * from './BarLoader' +export * from './Blink' +export * from './button' +export * from './calendar' +export * from './Carousel' +export * from './checkbox' +export * from './chip' +export * from './ClipboardController' +export * from './command' +export * from './container' +export * from './dialognew' +export * from './dots' +export * from './dropdown-menu' +export * from './dropzone' +export * from './explainer' +export * from './form' +export * from './GlobalFooter' +export * from './GlobalNav' +export * from './iconbutton' +export * from './label' +export * from './loader' +export * from './popovernew' +export * from './progress' +export * from './scroll-area' +export * from './select' +export * from './separator' +export * from './skeleton' +export * from './SplashController' +export * from './switch' +export * from './time-ago' +export * from './toggle' +export * from './tooltip' +export * from './widget' diff --git a/packages/ui/src/future/components/list/index.ts b/packages/ui/src/future/components/list/index.ts new file mode 100644 index 0000000000..df6b726b25 --- /dev/null +++ b/packages/ui/src/future/components/list/index.ts @@ -0,0 +1 @@ +export * from './List' diff --git a/packages/ui/src/future/components/modal/index.ts b/packages/ui/src/future/components/modal/index.ts new file mode 100644 index 0000000000..8d3bcd7a06 --- /dev/null +++ b/packages/ui/src/future/components/modal/index.ts @@ -0,0 +1 @@ +export * from './Modal' diff --git a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx index c3e0ad715d..82b3d1cd55 100644 --- a/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx +++ b/packages/ui/src/future/components/networkselector/NetworkSelectorMenu.tsx @@ -3,11 +3,10 @@ import React, { useState } from 'react' import { NetworkIcon } from '../icons' import { NetworkSelectorProps } from './index' -import { PopoverContent, PopoverNew, PopoverTrigger } from '../popovernew' +import { PopoverContent, PopoverNew, PopoverPrimitive } from '../popovernew' import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command' export const NetworkSelectorMenu = ({ - selected, onSelect, networks = [], children, @@ -16,7 +15,7 @@ export const NetworkSelectorMenu = ({ return ( - {children} + {children} diff --git a/packages/ui/src/future/components/settings/SlippageTolerance.tsx b/packages/ui/src/future/components/settings/SlippageTolerance.tsx index 8546646c5d..56f2c94f40 100644 --- a/packages/ui/src/future/components/settings/SlippageTolerance.tsx +++ b/packages/ui/src/future/components/settings/SlippageTolerance.tsx @@ -56,7 +56,7 @@ export const SlippageTolerance: FC<{

{options?.title || 'Slippage'}{' '} - }> + Slippage {' '} diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index bc6b03c8ba..b5c61c9567 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -1,21 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -@layer base { - :root { - --secondary: #0000000a; - --muted: #0000000f; - --muted-foreground: #6b7280; - --accent: #00000014; - --accent-foreground: #111827; - } - - .dark { - --secondary: #ffffff0a; - --muted: #ffffff0f; - --muted-foreground: 215.4 16.3% 56.9%; - --accent: #ffffff14; - --accent-foreground: 210 40% 98%; - } -} diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 93272fd565..c574226920 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -148,19 +148,20 @@ html[class='[color-scheme:dark]'] .paper { } } - @layer base { :root { - --muted: rgba(0, 0, 0, 0.04); + --secondary: #0000000a; + --muted: #0000000f; --muted-foreground: #6b7280; - --accent: rgba(0, 0, 0, 0.04); + --accent: #00000014; --accent-foreground: #111827; } .dark { - --muted: 223 47% 11%; + --secondary: #ffffff0a; + --muted: #ffffff0f; --muted-foreground: 215.4 16.3% 56.9%; - --accent: 216 34% 17%; + --accent: #ffffff14; --accent-foreground: 210 40% 98%; } } diff --git a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx index 362dc73512..808ceda29d 100644 --- a/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx +++ b/packages/wagmi/src/future/components/HeaderNetworkSelector.tsx @@ -49,12 +49,10 @@ export const HeaderNetworkSelector: FC<{ onSelect={onSwitchNetwork} networks={networks} > - - ) } diff --git a/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx b/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx index 61e7b9e60c..6a034dc794 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveBentobox.tsx @@ -42,7 +42,7 @@ export const Component: FC = ({ {...props} > Approve Bentobox - }> +
BentoBox Approval We need your approval first to access your wallet using BentoBox; you will only have to approve this diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx index ed40172e16..d302c73455 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx @@ -52,7 +52,7 @@ export const Component: FC = ({ {...props} > Approve {amount?.currency.symbol} {max ? 'Permanently' : ''} - }> +
We need your approval to execute this transaction on your behalf. Date: Thu, 22 Jun 2023 00:56:33 +0100 Subject: [PATCH 32/59] fix(packages/ui): add self center --- packages/ui/src/future/components/explainer.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/future/components/explainer.tsx b/packages/ui/src/future/components/explainer.tsx index b70ab920b3..0cbda45d24 100644 --- a/packages/ui/src/future/components/explainer.tsx +++ b/packages/ui/src/future/components/explainer.tsx @@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip' import { IconComponent, IconProps } from '../types' import { InformationCircleIcon } from '@heroicons/react/20/solid' +import { classNames } from '../../index' export const Explainer: FC<{ children: ReactNode @@ -13,9 +14,9 @@ export const Explainer: FC<{ {Icon ? ( - + ) : ( - + )} From 24e29242bbfad334073e0d386ba10d9ef70f1719 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:03:19 +0100 Subject: [PATCH 33/59] fix(packages/ui): deprecataed chip --- apps/earn/components/Pools.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/earn/components/Pools.tsx b/apps/earn/components/Pools.tsx index 3de6943031..26d2d43858 100644 --- a/apps/earn/components/Pools.tsx +++ b/apps/earn/components/Pools.tsx @@ -100,7 +100,7 @@ export const Pools: FC<{ filters?: Partial }> = ({ filters }) => { className="flex flex-col !items-start gap-1 cursor-pointer" >
- Trident Position Deprecated 💀 + Trident Position Deprecated 💀

If you prefer creating a trident liquidity position. From 666303f8861d9411f2ca757c58953bc44a8eb286 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:19:11 +0100 Subject: [PATCH 34/59] fix(packages/ui): search input --- .../ui/src/future/components/input/Search.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/future/components/input/Search.tsx b/packages/ui/src/future/components/input/Search.tsx index 458882e33d..127d1ca288 100644 --- a/packages/ui/src/future/components/input/Search.tsx +++ b/packages/ui/src/future/components/input/Search.tsx @@ -31,6 +31,18 @@ const containerIconVariants = cva('', { }, }) +const inputVariants = cva('truncate bg-transparent w-full', { + variants: { + size: { + sm: 'min-h-9 h-9', + default: 'min-h-10 h-10', + }, + }, + defaultVariants: { + size: 'default', + }, +}) + export interface SearchProps extends React.HTMLAttributes, VariantProps { className?: string id: string @@ -120,7 +132,7 @@ const Search = forwardRef( value={values.typed} onChange={(e) => _onChange(e.target.value)} onKeyDown={handleKeyDown} - className={classNames('bg-transparent')} + className={inputVariants({ size, className: 'pr-6' })} autoCorrect="off" autoCapitalize="off" spellCheck="false" @@ -141,7 +153,7 @@ const Search = forwardRef( }) } > - +

) : null}
@@ -159,9 +171,7 @@ const Search = forwardRef( placeholder="Search" value={value} onChange={(e) => onValueChange(e.target.value)} - className={classNames( - 'truncate font-semibold w-full bg-transparent !p-0 placeholder:font-medium placeholder:text-gray-400 placeholder:dark:text-slate-500 text-gray-900 dark:text-slate-200' - )} + className={inputVariants({ size, className: 'pr-6' })} autoCorrect="off" autoCapitalize="off" spellCheck="false" @@ -175,7 +185,7 @@ const Search = forwardRef(

) : value ? (
onValueChange('')}> - +
) : null}
From 9332571d6d6219cce8f3c34ace5a63820ef64039 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:19:55 +0100 Subject: [PATCH 35/59] fix(packages/ui): explainer muted text color --- packages/ui/src/future/components/explainer.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/future/components/explainer.tsx b/packages/ui/src/future/components/explainer.tsx index 0cbda45d24..39105cc89c 100644 --- a/packages/ui/src/future/components/explainer.tsx +++ b/packages/ui/src/future/components/explainer.tsx @@ -16,7 +16,11 @@ export const Explainer: FC<{ {Icon ? ( ) : ( - + )} From f0bdbbd63369b30039c199b57284e0f8cdc29a16 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:26:14 +0100 Subject: [PATCH 36/59] fix(apps/earn): broken link --- apps/earn/pages/position/[tokenId]/index.tsx | 3 +-- packages/ui/src/future/components/list/ListControl.tsx | 6 +----- packages/ui/src/future/components/list/ListMenuItem.tsx | 2 +- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/earn/pages/position/[tokenId]/index.tsx b/apps/earn/pages/position/[tokenId]/index.tsx index bf2d04270c..6590805705 100644 --- a/apps/earn/pages/position/[tokenId]/index.tsx +++ b/apps/earn/pages/position/[tokenId]/index.tsx @@ -20,7 +20,6 @@ import { Amount } from '@sushiswap/currency' import { usePriceInverter } from '../../../lib/hooks' import { formatTickPrice, getPriceOrderingFromPositionForUI, unwrapToken } from '../../../lib/functions' import { ConcentratedLiquidityWidget } from '../../../components/ConcentratedLiquidityWidget' -import { InformationCircleIcon } from '@heroicons/react/solid' import { useAccount } from '@sushiswap/wagmi' import { ConcentratedLiquidityProvider, @@ -162,7 +161,7 @@ const Position: FC = () => {
diff --git a/packages/ui/src/future/components/list/ListControl.tsx b/packages/ui/src/future/components/list/ListControl.tsx index e8c9c74575..e10180f1e6 100644 --- a/packages/ui/src/future/components/list/ListControl.tsx +++ b/packages/ui/src/future/components/list/ListControl.tsx @@ -8,10 +8,6 @@ export interface ListControlProps { export const ListControl: FC = ({ children, className }) => { return ( -
- {children} -
+
{children}
) } diff --git a/packages/ui/src/future/components/list/ListMenuItem.tsx b/packages/ui/src/future/components/list/ListMenuItem.tsx index eb14480667..5d14fc614b 100644 --- a/packages/ui/src/future/components/list/ListMenuItem.tsx +++ b/packages/ui/src/future/components/list/ListMenuItem.tsx @@ -51,7 +51,7 @@ export const ListMenuItem: ListMenuItemComponent = ({ className, disabled ? 'opacity-40 !pointer-events-none cursor-default' : '', subtitle ? 'items-start' : 'items-center', - 'hover:bg-black/[0.04] active:bg-black/[0.06] hover:dark:bg-white/[0.02] active:dark:bg-white/[0.03] relative flex gap-4 px-4 py-3 w-full cursor-pointer rounded-xl' + 'hover:bg-muted relative flex gap-4 px-4 py-3 w-full cursor-pointer rounded-xl' )} > {Icon && ( From f31a6e2f9b19dcee88469d5fb7610dbacb55259c Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:28:35 +0100 Subject: [PATCH 37/59] fix(apps/earn): align --- packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx index d302c73455..258db38d26 100644 --- a/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx +++ b/packages/wagmi/src/future/systems/Checker/ApproveERC20.tsx @@ -45,7 +45,7 @@ export const Component: FC = ({ ) From 89e1f6385445e62f94e3f2d1f6606eb5dc3bf600 Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 01:45:57 +0100 Subject: [PATCH 40/59] fix(apps/earn): css variables --- packages/ui/src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index caeecbb534..4a714b673a 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -160,8 +160,8 @@ html[class='dark'] .paper { .dark { --secondary: #ffffff0a; --muted: #ffffff0f; - --muted-foreground: 215.4 16.3% 56.9%; + --muted-foreground: #94a3b8; --accent: #ffffff14; - --accent-foreground: 210 40% 98%; + --accent-foreground: #e2e8f0; } } From 180b0bf44b662a0539a2243d62c838ef20deb44e Mon Sep 17 00:00:00 2001 From: Chilli Chelli Date: Thu, 22 Jun 2023 13:12:52 +0100 Subject: [PATCH 41/59] fix(packages/ui): remove typography and input --- .../(landing)/components/AnimatedTitle.tsx | 10 +- .../app/(landing)/components/BuildFuture.tsx | 3 +- .../app/(landing)/components/BuildWealth.tsx | 9 +- apps/_root/app/(landing)/components/Hero.tsx | 9 +- .../app/(landing)/components/Partners.tsx | 12 +- .../_root/app/(landing)/components/Search.tsx | 37 +++-- .../Story/Section1/CustodyImage.tsx | 2 +- .../components/Story/Section2/MoveImage.tsx | 2 +- .../components/Story/Section3/GuardImage.tsx | 2 +- apps/_root/app/(landing)/page.tsx | 2 +- apps/_root/app/(landing)/stats/route.ts | 8 -- .../_root/app/(landing)/terms-of-use/page.tsx | 11 +- .../_root/app/claims/components/ClaimItem.tsx | 2 +- .../bentobox/components/BentoBoxKpis.tsx | 4 +- apps/_root/app/internal/bentobox/page.tsx | 5 +- .../app/internal/bentobox/strategies/page.tsx | 5 +- .../subgraphs/components/SubgraphTable.tsx | 4 +- .../internal/tokens/components/TokenTable.tsx | 2 +- apps/_root/app/internal/tokens/page.tsx | 7 +- .../components/Form/FormFieldHelperText.tsx | 5 +- .../Form/FormSection/FormSectionHeader.tsx | 11 +- .../components/Form/FormSelectField/index.tsx | 5 +- .../Form/FormTextAreaField/index.tsx | 5 +- .../components/Form/FormTextField/index.tsx | 5 +- .../app/partner/components/ImageCanvas.tsx | 17 +-- .../partner/components/Slider/SizeSlider.tsx | 3 +- .../app/partner/components/Slider/Slider.tsx | 6 +- .../partner/components/UploadImageField.tsx | 10 +- apps/_root/app/partner/lib/api.ts | 3 +- apps/_root/app/swap/page.tsx | 14 +- apps/_root/functions/graph/pager.ts | 2 +- apps/_root/lib/api.ts | 2 +- apps/_root/lib/swap/SushiXSwap.ts | 4 +- apps/_root/lib/swap/queryParamsSchema.ts | 4 +- apps/_root/lib/swap/useClientTrade.ts | 12 +- .../swap/useCrossChainTrade/getBridgeFees.ts | 5 +- .../lib/swap/useCrossChainTrade/types.ts | 1 - .../useCrossChainTrade/useCrossChainTrade.ts | 3 +- apps/_root/lib/swap/warningSeverity.ts | 2 +- apps/_root/next.config.mjs | 3 +- apps/_root/playwright.config.ts | 4 +- apps/_root/providers/WagmiProvider.tsx | 3 +- apps/_root/test/pages/swap.test.ts | 2 - .../ConfirmationDialogCrossChain.tsx | 2 +- apps/_root/ui/swap/search/SearchPanel.tsx | 4 +- apps/_root/ui/swap/token/TokenProvider.tsx | 2 +- .../trade/TradeReviewDialogCrossChain.tsx | 2 +- .../swap/trade/TradeReviewDialogSameChain.tsx | 2 +- apps/_root/ui/swap/trade/TradeStats.tsx | 2 +- apps/_root/ui/swap/widget/SwitchAppType.tsx | 2 +- .../academy/common/components/ArticleList.tsx | 5 +- apps/academy/common/components/Breadcrumb.tsx | 5 +- apps/academy/common/components/Card/Card.tsx | 14 +- apps/academy/common/components/MobileMenu.tsx | 22 ++- .../common/components/PreviewBanner.tsx | 1 - .../article/ArticleHeaderSelector.tsx | 10 +- .../common/components/product/ProductFaq.tsx | 6 +- apps/academy/pages/articles/[slug].tsx | 2 +- apps/academy/pages/products/onsen.tsx | 10 +- .../components/ChartSection/ChartSection.tsx | 2 +- .../components/ChartSection/TVLChart.tsx | 10 +- .../components/ChartSection/TVLChart2.tsx | 10 +- .../components/ChartSection/VolumeChart.tsx | 10 +- .../components/ChartSection/VolumeChart2.tsx | 10 +- .../FarmRewardsAvailableTooltip.tsx | 2 +- .../components/Filters/FilterProvider.tsx | 20 +-- apps/analytics/components/Layout/index.tsx | 6 +- .../components/PoolQuickHoverTooltip.tsx | 4 +- .../BentoBoxTokens/BentoBoxTokenFilters.tsx | 2 +- .../Cells/TokenLiquidityCell.tsx | 7 +- .../BentoBoxTokens/Cells/TokenNameCell.tsx | 9 +- .../BentoBoxTokens/Cells/TokenPriceCell.tsx | 7 +- .../TableSection/BentoBoxTokens/columns.tsx | 2 +- .../TableSection/Common/Cells/StringCell.tsx | 7 +- .../FuroTokens/Cells/TokenLiquidityCell.tsx | 7 +- .../FuroTokens/Cells/TokenNameCell.tsx | 9 +- .../FuroTokens/Cells/TokenPriceCell.tsx | 7 +- .../FuroTokens/FuroTokenFilters.tsx | 2 +- .../TableSection/FuroTokens/columns.tsx | 2 +- .../TableSection/FuroTokens/useFuroTokens.ts | 1 - .../TableSection/Pools/Cells/PoolAPRCell.tsx | 5 +- .../Pools/Cells/PoolFees1dCell.tsx | 7 +- .../Pools/Cells/PoolFees1mCell.tsx | 7 +- .../Pools/Cells/PoolFees1wCell.tsx | 7 +- .../TableSection/Pools/Cells/PoolNameCell.tsx | 2 +- .../TableSection/Pools/Cells/PoolTVLCell.tsx | 7 +- .../Pools/Cells/PoolVolume1dCell.tsx | 7 +- .../Pools/Cells/PoolVolume1mCell.tsx | 7 +- .../Pools/Cells/PoolVolume1wCell.tsx | 7 +- .../TableSection/Pools/PoolTable.tsx | 6 +- .../components/TableSection/Pools/columns.tsx | 6 +- .../Tokens/Cells/TokenLiquidityCell.tsx | 7 +- .../Tokens/Cells/TokenNameCell.tsx | 9 +- .../Tokens/Cells/TokenPriceCell.tsx | 7 +- .../Tokens/Cells/TokenVolumeCell.tsx | 7 +- .../TableSection/Tokens/columns.tsx | 2 +- .../TokenSection/TokenInformation.tsx | 18 +-- .../components/TokenSection/TokenPairs.tsx | 22 ++- .../components/TokenSection/TokenStats.tsx | 51 +++---- apps/analytics/pages/_app.tsx | 8 +- apps/analytics/pages/index.tsx | 4 +- apps/analytics/pages/token/[id].tsx | 4 +- apps/blog/components/ArticleListItem.tsx | 7 +- apps/blog/components/Card/Card.tsx | 14 +- .../blog/components/article/ArticleFooter.tsx | 1 - apps/blog/pages/archive.tsx | 8 +- .../AddSectionConfirmModalConcentrated.tsx | 10 +- .../AddPage/AddSectionReviewModal.tsx | 35 ++--- .../AddPage/AddSectionReviewModalLegacy.tsx | 10 +- .../AddSection/AddSectionLegacy.tsx | 8 +- .../AddSectionMyPosition.tsx | 30 ++--- .../AddSectionMyPositionStaked.tsx | 21 +-- .../AddSectionMyPositionUnstaked.tsx | 21 +-- .../AddSection/AddSectionReviewModal.tsx | 35 +++-- .../components/AddSection/AddSectionStake.tsx | 8 +- .../AddSection/AddSectionStakeWidget.tsx | 30 ++++- .../AddSection/AddSectionTrident.tsx | 8 +- .../AddSection/AddSectionWidget.tsx | 4 +- .../ConcentratedLiquidityCollectButton.tsx | 3 +- .../ConcentratedLiquidityRemoveWidget.tsx | 3 +- .../FarmRewardsAvailableTooltip.tsx | 2 +- apps/earn/components/Layout/index.tsx | 3 +- .../LiquidityChartRangeInput/Brush.tsx | 8 +- .../components/MigratePage/PositionCard.tsx | 4 +- apps/earn/components/PoolPage/MigrateTab.tsx | 20 +-- apps/earn/components/PoolPositionProvider.tsx | 3 +- .../PoolPositionRewardsProvider.tsx | 3 +- .../PoolActionBar/PoolActionBar.tsx | 9 +- .../PoolActionBarPositionDialog.tsx | 49 +++---- .../PoolActionBarPositionRewards.tsx | 17 +-- .../components/PoolSection/PoolButtons.tsx | 2 +- .../PoolSection/PoolChart/PoolChartGraph.tsx | 10 +- .../PoolSection/PoolChart/PoolChartTypes.tsx | 2 +- .../components/PoolSection/PoolHeader.tsx | 52 +++----- .../components/PoolSection/PoolMyRewards.tsx | 19 ++- .../PoolSection/PoolPosition/PoolPosition.tsx | 9 +- .../PoolPosition/PoolPositionDesktop.tsx | 25 ++-- .../PoolPositionStakedDesktop.tsx | 25 ++-- .../V3/PoolDepthWidget/PoolDepthWidget.tsx | 2 +- .../PoolTransactionsV3/useTransactionsV3.ts | 2 +- .../Tables/PoolsTable/Cells/columns.tsx | 5 +- .../PoolsTable/PoolQuickHoverTooltip.tsx | 1 - .../Tables/PoolsTable/PoolsTable.tsx | 2 +- .../PositionsTable/Cells/PoolValueCell.tsx | 7 +- .../Tables/PositionsTable/Cells/columns.tsx | 2 +- .../PositionQuickHoverTooltip.tsx | 3 +- .../Tables/SharedCells/PoolAPRCell.tsx | 2 - .../Tables/SharedCells/PoolNameCell.tsx | 2 +- .../TableFilters/TableFiltersNetwork.tsx | 8 +- apps/earn/components/Rate.tsx | 10 +- .../RemoveSection/RemoveSectionLegacy.tsx | 23 +--- .../RemoveSection/RemoveSectionTrident.tsx | 22 +-- .../RemoveSection/RemoveSectionUnstake.tsx | 4 +- .../RemoveSectionUnstakeWidget.tsx | 28 +++- .../RemoveSection/RemoveSectionWidget.tsx | 65 +++++---- .../components/RewardsSection/RewardSlide.tsx | 1 - .../Tables/RewardsTableV3/Cells/columns.tsx | 3 +- apps/earn/components/future/PoolHeader.tsx | 4 +- apps/earn/lib/functions.ts | 4 +- apps/earn/lib/hooks/api/useGraphPools.ts | 3 +- apps/earn/lib/hooks/useTicks.ts | 2 +- apps/earn/middleware.ts | 2 +- apps/earn/pages/[id]/add.tsx | 12 +- apps/earn/pages/[id]/index.tsx | 4 +- apps/earn/pages/[id]/migrate.tsx | 2 +- apps/earn/pages/[id]/remove.tsx | 12 +- apps/earn/pages/_app.tsx | 2 +- .../pages/add/trident/[chainId]/index.tsx | 42 +++--- apps/earn/pages/add/v2/[chainId]/index.tsx | 41 +++--- apps/earn/pages/position/[tokenId]/index.tsx | 5 +- apps/earn/playwright.config.ts | 4 +- apps/earn/test/pages/index.test.ts | 6 +- apps/furo/components/CancelModal.tsx | 5 +- apps/furo/components/Dashboard.tsx | 2 +- apps/furo/components/Layout.tsx | 3 +- apps/furo/components/Table/constants.tsx | 2 +- .../CreateForm/GeneralDetailsSection.tsx | 2 +- .../stream/CreateForm/StreamAmountDetails.tsx | 2 +- .../ExecuteMultipleSection.tsx | 2 +- apps/furo/components/stream/UpdateModal.tsx | 24 +--- apps/furo/components/stream/WithdrawModal.tsx | 9 +- .../CreateForm/CliffDetailsSection.tsx | 6 +- .../CreateForm/GeneralDetailsSection.tsx | 2 +- .../GradedVestingDetailsSection.tsx | 8 +- .../ExecuteMultipleSection.tsx | 2 +- .../furo/components/vesting/WithdrawModal.tsx | 5 +- apps/furo/lib/hooks/useStreamBalance.ts | 3 +- apps/furo/lib/hooks/useStreamBalances.ts | 3 +- apps/furo/lib/hooks/useVestingBalance.ts | 3 +- apps/furo/pages/stream/[id].tsx | 11 +- apps/furo/pages/vesting/[id].tsx | 9 +- apps/furo/playwright.config.ts | 4 +- apps/furo/test/pages/stream/index.test.ts | 2 +- .../pages/vesting/create/multiple.test.ts | 2 +- .../test/pages/vesting/create/single.test.ts | 2 +- apps/furo/test/pages/vesting/index.test.ts | 6 +- apps/furo/test/utils.ts | 2 +- packages/ui/src/future/components/button.tsx | 12 +- .../src/future/components/input/Percent.tsx | 59 ++++++++ .../ui/src/future/components/input/index.ts | 3 + .../future/components/table/GenericTable.tsx | 5 +- .../src/future/components/table/Paginator.tsx | 5 +- packages/ui/src/future/components/toggle.tsx | 10 +- packages/ui/src/index.css | 1 - packages/ui/src/index.ts | 2 - packages/ui/src/input/Address.tsx | 57 -------- packages/ui/src/input/Counter.tsx | 67 ---------- packages/ui/src/input/DatePicker.tsx | 3 - packages/ui/src/input/DatetimeLocal.tsx | 33 ----- packages/ui/src/input/Numeric.tsx | 77 ----------- packages/ui/src/input/Percent.tsx | 60 --------- packages/ui/src/input/index.ts | 58 -------- packages/ui/src/input/styles.css | 126 ------------------ packages/ui/src/input/utils.ts | 5 - packages/ui/src/typography/Typography.tsx | 73 ---------- packages/ui/src/typography/index.ts | 1 - .../src/future/systems/Checker/Custom.tsx | 17 ++- 217 files changed, 730 insertions(+), 1621 deletions(-) create mode 100644 packages/ui/src/future/components/input/Percent.tsx delete mode 100644 packages/ui/src/input/Address.tsx delete mode 100644 packages/ui/src/input/Counter.tsx delete mode 100644 packages/ui/src/input/DatePicker.tsx delete mode 100644 packages/ui/src/input/DatetimeLocal.tsx delete mode 100644 packages/ui/src/input/Numeric.tsx delete mode 100644 packages/ui/src/input/Percent.tsx delete mode 100644 packages/ui/src/input/index.ts delete mode 100644 packages/ui/src/input/styles.css delete mode 100644 packages/ui/src/input/utils.ts delete mode 100644 packages/ui/src/typography/Typography.tsx delete mode 100644 packages/ui/src/typography/index.ts diff --git a/apps/_root/app/(landing)/components/AnimatedTitle.tsx b/apps/_root/app/(landing)/components/AnimatedTitle.tsx index a8dd7f41ac..5c0dcd5c37 100644 --- a/apps/_root/app/(landing)/components/AnimatedTitle.tsx +++ b/apps/_root/app/(landing)/components/AnimatedTitle.tsx @@ -1,4 +1,4 @@ -import { classNames, Typography } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { useInView } from 'framer-motion' import { FC, ReactNode, useRef } from 'react' @@ -7,10 +7,8 @@ export const AnimatedTitle: FC<{ children: ReactNode; className?: string }> = ({ const isInView = useInView(ref, { once: true }) return ( - = ({ }} > {children} - +

) } diff --git a/apps/_root/app/(landing)/components/BuildFuture.tsx b/apps/_root/app/(landing)/components/BuildFuture.tsx index e7ba95082a..bb369cd35c 100644 --- a/apps/_root/app/(landing)/components/BuildFuture.tsx +++ b/apps/_root/app/(landing)/components/BuildFuture.tsx @@ -4,8 +4,7 @@ import React, { FC } from 'react' import { ExpandableCard } from './ExpandableCard' import { AnimatedTitle } from './AnimatedTitle' -import { BentoBoxSVG } from './svgs' -import { SwitchSVG } from './svgs' +import { BentoBoxSVG, SwitchSVG } from './svgs' import { Button } from '@sushiswap/ui/future/components/button' import { Container } from '@sushiswap/ui/future/components/container' diff --git a/apps/_root/app/(landing)/components/BuildWealth.tsx b/apps/_root/app/(landing)/components/BuildWealth.tsx index a1df769a8d..398f4ae81f 100644 --- a/apps/_root/app/(landing)/components/BuildWealth.tsx +++ b/apps/_root/app/(landing)/components/BuildWealth.tsx @@ -1,4 +1,3 @@ -import { Typography } from '@sushiswap/ui' import Image from 'next/legacy/image' import React, { FC } from 'react' @@ -26,13 +25,13 @@ export const BuildWealth: FC = () => { />
- +

Earn passive income with
your coins. - - +

+

With multiple ways to passively earn yield on your coins, you can choose your own yield stack and make your money work for you, all in the background, 24/7. - +

{
- +

Buy and Sell Instantly on Sushi. {TITLES[index]}. - - +

+

No registration needed. Over 400 tokens to trade at your fingertips. - +

diff --git a/apps/_root/app/(landing)/components/Partners.tsx b/apps/_root/app/(landing)/components/Partners.tsx index 740bfbd33f..2b6ff90790 100644 --- a/apps/_root/app/(landing)/components/Partners.tsx +++ b/apps/_root/app/(landing)/components/Partners.tsx @@ -1,17 +1,15 @@ -import { Typography } from '@sushiswap/ui' import { FC } from 'react' import { ArbitrumSVG, BarnBridgeSVG, - BobaSVG, LayerzeroSVG, MagnaSVG, MetamaskSVG, OptimismSVG, PolygonSVG, - ZkSyncSVG, ThunderCoreSVG, + ZkSyncSVG, } from './svgs' import { Container } from '@sushiswap/ui/future/components/container' @@ -24,13 +22,11 @@ export const Partners: FC = () => {
- - {diff} Days. - - +

{diff} Days.

+

Since the inception of Sushi. We appreciate all the friends we’ve made along the way to the Future of Finance. - +

diff --git a/apps/_root/app/(landing)/components/Search.tsx b/apps/_root/app/(landing)/components/Search.tsx index d35b8e36d1..012595c86e 100644 --- a/apps/_root/app/(landing)/components/Search.tsx +++ b/apps/_root/app/(landing)/components/Search.tsx @@ -2,12 +2,12 @@ import { ChevronDownIcon, SearchIcon, StarIcon } from '@heroicons/react-v1/solid import chains, { ChainId, chainShortName } from '@sushiswap/chain' import { Native, Token, Type } from '@sushiswap/currency' import { useDebounce, useOnClickOutside } from '@sushiswap/hooks' -import { classNames, DEFAULT_INPUT_UNSTYLED, Typography } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import type { TokenList } from '@uniswap/token-lists' import { isAddress } from 'ethers/lib/utils' import { FC, useEffect, useMemo, useRef, useState } from 'react' import { useQuery, useToken } from '@sushiswap/wagmi' -import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonCircle, SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { Currency } from '@sushiswap/ui/future/components/currency' import { NetworkIcon } from '@sushiswap/ui/future/components/icons' import { SUPPORTED_CHAIN_IDS } from '../../../config' @@ -117,20 +117,21 @@ export const Search: FC = () => { value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search by token or address" - className={classNames('!text-lg w-full placeholder:text-neutral-500', DEFAULT_INPUT_UNSTYLED)} + className={classNames( + '!text-lg w-full placeholder:text-neutral-500', + 'p-0 bg-transparent border-none focus:outline-none focus:ring-0 w-full truncate font-medium text-left text-base md:text-sm placeholder:font-normal font-medium' + )} autoComplete="new-password" autoCorrect="off" />
- setSelectNetwork((prev) => !prev)} - as="button" - weight={600} - variant="sm" - className="flex items-center gap-1 py-2 pl-3 pr-2 rounded-lg cursor-pointer bg-neutral-700 hover:bg-neutral-600 text-neutral-300 hover:text-neutral-200" + role="button" + className="font-semibold text-sm flex items-center gap-1 py-2 pl-3 pr-2 rounded-lg cursor-pointer bg-neutral-700 hover:bg-neutral-600 text-neutral-300 hover:text-neutral-200" > {chainShortName[chainId].toUpperCase()} - +

{ > {selectNetwork ? ( <> - - Networks - +

Networks

{SUPPORTED_CHAIN_IDS.map((el) => ( { ) : query.length > 2 ? ( <> - - Tokens - +

Tokens

{isAddress(query) && web3Loading ? ( skeleton ) : web3Token ? ( @@ -199,9 +196,9 @@ export const Search: FC = () => { ) : ( <> - +

Popular Tokens - +

{EXAMPLE_CURRENCIES.map((el) => ( @@ -234,10 +231,8 @@ const Row: FC<{ currency: Type; onClick?(): void; isNetwork?: boolean }> = ({ )}
- {isNetwork ? chains[currency.chainId].name : currency.name} - - {currency.symbol} - +

{isNetwork ? chains[currency.chainId].name : currency.name}

+

{currency.symbol}

) diff --git a/apps/_root/app/(landing)/components/Story/Section1/CustodyImage.tsx b/apps/_root/app/(landing)/components/Story/Section1/CustodyImage.tsx index 9baae77303..c78f718afc 100644 --- a/apps/_root/app/(landing)/components/Story/Section1/CustodyImage.tsx +++ b/apps/_root/app/(landing)/components/Story/Section1/CustodyImage.tsx @@ -1,5 +1,5 @@ import { useIsSmScreen } from '@sushiswap/hooks' -import { motion, useScroll, useTransform, MotionTransform } from 'framer-motion' +import { motion, MotionTransform, useScroll, useTransform } from 'framer-motion' import Image from 'next/legacy/image' import { useRef } from 'react' diff --git a/apps/_root/app/(landing)/components/Story/Section2/MoveImage.tsx b/apps/_root/app/(landing)/components/Story/Section2/MoveImage.tsx index bc487b9dc0..9d4779a79d 100644 --- a/apps/_root/app/(landing)/components/Story/Section2/MoveImage.tsx +++ b/apps/_root/app/(landing)/components/Story/Section2/MoveImage.tsx @@ -1,6 +1,6 @@ import { useIsSmScreen } from '@sushiswap/hooks' import { motion, useScroll, useTransform } from 'framer-motion' -import Image from "next/legacy/image"; +import Image from 'next/legacy/image' import { useRef } from 'react' export const MoveImage = () => { diff --git a/apps/_root/app/(landing)/components/Story/Section3/GuardImage.tsx b/apps/_root/app/(landing)/components/Story/Section3/GuardImage.tsx index 4d907b0df6..0e11333c73 100644 --- a/apps/_root/app/(landing)/components/Story/Section3/GuardImage.tsx +++ b/apps/_root/app/(landing)/components/Story/Section3/GuardImage.tsx @@ -1,6 +1,6 @@ import { useIsSmScreen } from '@sushiswap/hooks' import { motion, useScroll, useTransform } from 'framer-motion' -import Image from "next/legacy/image"; +import Image from 'next/legacy/image' import { useRef } from 'react' export const GuardImage = () => { diff --git a/apps/_root/app/(landing)/page.tsx b/apps/_root/app/(landing)/page.tsx index ce754c2b77..b6830f9477 100644 --- a/apps/_root/app/(landing)/page.tsx +++ b/apps/_root/app/(landing)/page.tsx @@ -5,7 +5,7 @@ import React from 'react' import { useIsSmScreen } from '@sushiswap/hooks' -import { BuildFuture, BuildWealth, Ecosystem, Hero, NeedHelp, Story, Partners, Stats } from './components' +import { BuildFuture, BuildWealth, Ecosystem, Hero, NeedHelp, Partners, Stats, Story } from './components' export default async function LandingPage() { const isSmallScreen = useIsSmScreen() diff --git a/apps/_root/app/(landing)/stats/route.ts b/apps/_root/app/(landing)/stats/route.ts index 0107db3aa5..aa86fb023c 100644 --- a/apps/_root/app/(landing)/stats/route.ts +++ b/apps/_root/app/(landing)/stats/route.ts @@ -1,13 +1,5 @@ import { NextResponse } from 'next/server' -import { formatNumber, formatUSD } from '@sushiswap/format' -import { SUSHI_ADDRESS } from '@sushiswap/currency' -import { ChainId } from '@sushiswap/chain' - -import getBentoTVL from 'functions/graph/fetchers/bentobox' -import { getLegacyExchangeData } from 'functions/graph/fetchers/exchange' -import { getTridentExchangeData } from 'functions/graph/queries/trident' - export const fetchCache = 'auto' export async function GET() { diff --git a/apps/_root/app/(landing)/terms-of-use/page.tsx b/apps/_root/app/(landing)/terms-of-use/page.tsx index 4efa4252e4..b06e2631a4 100644 --- a/apps/_root/app/(landing)/terms-of-use/page.tsx +++ b/apps/_root/app/(landing)/terms-of-use/page.tsx @@ -1,18 +1,13 @@ 'use client' -import { Typography } from '@sushiswap/ui' -import React, { FC } from 'react' +import React from 'react' export default async function TermsOfUsePage() { return ( <>
- - Sushi Website Terms Of Use - - - Legal Information & Notices - +

Sushi Website Terms Of Use

+

Legal Information & Notices

diff --git a/apps/_root/app/claims/components/ClaimItem.tsx b/apps/_root/app/claims/components/ClaimItem.tsx index c89fab9ce8..a93517883f 100644 --- a/apps/_root/app/claims/components/ClaimItem.tsx +++ b/apps/_root/app/claims/components/ClaimItem.tsx @@ -11,7 +11,7 @@ import { useTokenRevokeApproval, useTokenWithCache, } from '@sushiswap/wagmi/future/hooks' -import { SkeletonText, SkeletonCircle } from '@sushiswap/ui/future/components/skeleton' +import { SkeletonCircle, SkeletonText } from '@sushiswap/ui/future/components/skeleton' import { Amount } from '@sushiswap/currency' import { BigNumber } from 'ethers' diff --git a/apps/_root/app/internal/bentobox/components/BentoBoxKpis.tsx b/apps/_root/app/internal/bentobox/components/BentoBoxKpis.tsx index 3e09cd53c6..b77f1b8b18 100644 --- a/apps/_root/app/internal/bentobox/components/BentoBoxKpis.tsx +++ b/apps/_root/app/internal/bentobox/components/BentoBoxKpis.tsx @@ -1,8 +1,8 @@ 'use client' -import { formatNumber } from '@sushiswap/format' +import {formatNumber} from '@sushiswap/format' import useSWR from 'swr' -import { getBentoBoxKpis } from '../lib' +import {getBentoBoxKpis} from '../lib' // const stats = [ // { name: 'Total Subscribers', value: '71,897' }, diff --git a/apps/_root/app/internal/bentobox/page.tsx b/apps/_root/app/internal/bentobox/page.tsx index f5fad538f0..1752073e3b 100644 --- a/apps/_root/app/internal/bentobox/page.tsx +++ b/apps/_root/app/internal/bentobox/page.tsx @@ -1,12 +1,9 @@ -import { Typography } from '@sushiswap/ui/typography' import { BentoBoxKpis } from './components/BentoBoxKpis' export default function BentoBoxPage() { return (
- - BentoBox KPIs - +

BentoBox KPIs

Cross Chain BentoBox Kpis

diff --git a/apps/_root/app/internal/bentobox/strategies/page.tsx b/apps/_root/app/internal/bentobox/strategies/page.tsx index 228e70ba66..0db8f6de06 100644 --- a/apps/_root/app/internal/bentobox/strategies/page.tsx +++ b/apps/_root/app/internal/bentobox/strategies/page.tsx @@ -1,7 +1,6 @@ 'use client' import { Chain, ChainId } from '@sushiswap/chain' -import { Typography } from '@sushiswap/ui/typography' import React, { useMemo, useState } from 'react' import { getStrategies } from './lib' import { ChevronDownIcon } from '@heroicons/react/24/outline' @@ -29,9 +28,7 @@ export default function BentoBoxStrategiesPage() { return (
- - BentoBox Strategies - +

BentoBox Strategies

{strategyChainIds && ( {
setFilter(e.target.value)} />
diff --git a/apps/_root/app/partner/components/Form/FormFieldHelperText.tsx b/apps/_root/app/partner/components/Form/FormFieldHelperText.tsx index 70f47f8d8c..a3e13dd081 100644 --- a/apps/_root/app/partner/components/Form/FormFieldHelperText.tsx +++ b/apps/_root/app/partner/components/Form/FormFieldHelperText.tsx @@ -1,4 +1,3 @@ -import { Typography } from '@sushiswap/ui' import { classNames } from '@sushiswap/ui' import React, { FC } from 'react' @@ -8,9 +7,9 @@ export interface FormFieldHelperTextProps extends React.HTMLProps = ({ children, className = '', ...props }) => { return ( - +

{children}
- +

) } diff --git a/apps/_root/app/partner/components/Form/FormSection/FormSectionHeader.tsx b/apps/_root/app/partner/components/Form/FormSection/FormSectionHeader.tsx index 758131a6af..e84232cf24 100644 --- a/apps/_root/app/partner/components/Form/FormSection/FormSectionHeader.tsx +++ b/apps/_root/app/partner/components/Form/FormSection/FormSectionHeader.tsx @@ -1,4 +1,3 @@ -import { Typography } from '@sushiswap/ui' import React, { FC } from 'react' export interface FormSectionHeaderProps { @@ -10,14 +9,8 @@ const FormSectionHeader: FC = ({ header, subheader }) => return (
- - {header} - - {subheader && ( - - {subheader} - - )} +

{header}

+ {subheader &&

{subheader}

}
) diff --git a/apps/_root/app/partner/components/Form/FormSelectField/index.tsx b/apps/_root/app/partner/components/Form/FormSelectField/index.tsx index 0c5b2f82c6..eb4bae7f26 100644 --- a/apps/_root/app/partner/components/Form/FormSelectField/index.tsx +++ b/apps/_root/app/partner/components/Form/FormSelectField/index.tsx @@ -1,4 +1,4 @@ -import { classNames, Typography } from '@sushiswap/ui' +import { classNames } from '@sushiswap/ui' import { FormType } from '../../../page' import React, { FC, ReactElement, useEffect } from 'react' import { useFormContext } from 'react-hook-form' @@ -24,13 +24,14 @@ const FormSelectField: FC = ({ name, label, children, help // Unregister on unmount useEffect(() => { return () => { + // @ts-ignore unregister(name) } }, [name, unregister]) return ( <> - {label} +

{label}