-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #740 from ionicprotocol/feat/footer-add-id
Feat/footer add
- Loading branch information
Showing
34 changed files
with
693 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Info } from 'lucide-react'; | ||
|
|
||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger | ||
| } from '@ui/components/ui/tooltip'; | ||
|
|
||
| const CustomTooltip = ({ | ||
| content, | ||
| color | ||
| }: { | ||
| content: string; | ||
| color?: string; | ||
| }) => ( | ||
| <TooltipProvider delayDuration={0}> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <div | ||
| className={`w-4 h-4 inline-flex items-center justify-center rounded-full text-xs cursor-help ${color}`} | ||
| > | ||
| <Info /> | ||
| </div> | ||
| </TooltipTrigger> | ||
| <TooltipContent | ||
| className="bg-grayUnselect text-white border-white/10 max-w-sm" | ||
| sideOffset={5} | ||
| > | ||
| <p>{content}</p> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
|
|
||
| export default CustomTooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
192 changes: 119 additions & 73 deletions
192
packages/ui/app/_components/markets/NetworkSelector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,145 @@ | ||
| /* eslint-disable @next/next/no-img-element */ | ||
| 'use client'; | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import React from 'react'; | ||
|
|
||
| import dynamic from 'next/dynamic'; | ||
| import Image from 'next/image'; | ||
| import Link from 'next/link'; | ||
| import { usePathname } from 'next/navigation'; | ||
|
|
||
| import { useStore } from 'ui/store/Store'; | ||
| import { usePathname, useSearchParams } from 'next/navigation'; | ||
|
|
||
| import { Button } from '@ui/components/ui/button'; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger | ||
| } from '@ui/components/ui/tooltip'; | ||
| import { pools } from '@ui/constants/index'; | ||
| import { useStore } from '@ui/store/Store'; | ||
|
|
||
| interface INetworkSelector { | ||
| chain?: string; | ||
| dropdownSelectedChain: number; | ||
| nopool?: boolean; | ||
| enabledChains?: number[]; | ||
| upcomingChains?: string[]; | ||
| } | ||
| const NETWORK_ORDER = ['Mode', 'Base', 'Optimism', 'Fraxtal', 'Lisk', 'BoB']; | ||
|
|
||
| function NetworkSelector({ | ||
| dropdownSelectedChain, | ||
| nopool = false, | ||
| enabledChains, | ||
| chain, | ||
| upcomingChains | ||
| }: INetworkSelector) { | ||
| const pathname = usePathname(); | ||
| const searchParams = useSearchParams(); | ||
| const setDropChain = useStore((state) => state.setDropChain); | ||
|
|
||
| const orderedNetworks = NETWORK_ORDER.map((networkName) => | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| Object.entries(pools).find(([_, pool]) => pool.name === networkName) | ||
| ).filter( | ||
| (entry): entry is [string, any] => | ||
| entry !== undefined && | ||
| (!enabledChains || enabledChains.includes(+entry[0])) | ||
| ); | ||
|
|
||
| const getUrlWithParams = (chainId: string) => { | ||
| const params = new URLSearchParams(searchParams.toString()); | ||
| params.set('chain', chainId); | ||
| if (!nopool && !params.has('pool')) { | ||
| params.set('pool', '0'); | ||
| } | ||
| if (nopool && params.has('pool')) { | ||
| params.delete('pool'); | ||
| } | ||
| return `${pathname}?${params.toString()}`; | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className={` left-0 md:min-w-max w-full text-lime origin-top shadow-xl shadow-black/10 rounded-b-md flex flex-wrap gap-x-1 items-center `} | ||
| > | ||
| <Link | ||
| className={`flex justify-start gap-2 items-center p-2 mb-1 text-xs md:text-base w-max text-white rounded-md ${+chain! === +dropdownSelectedChain ? ' bg-graySelecte bg-grayone' : 'bg-grayon bg-graylite'} border border-gray-800 `} | ||
| href={`${pathname}?chain=${dropdownSelectedChain}${nopool ? '' : '&pool=0'}`} | ||
| > | ||
| <img | ||
| alt="checkmark--v1" | ||
| className={`w-4 h-4 stroke-lime`} | ||
| src={`/img/logo/${pools[dropdownSelectedChain].name.toUpperCase()}.png`} | ||
| />{' '} | ||
| {pools[dropdownSelectedChain].name} | ||
| </Link> | ||
| {Object.entries(pools) | ||
| .filter(([chainId]) => | ||
| enabledChains | ||
| ? enabledChains?.includes(+chainId) && | ||
| +chainId !== dropdownSelectedChain | ||
| : +chainId !== dropdownSelectedChain | ||
| ) | ||
| .sort((a, b) => { | ||
| const sortingOrder = ['Mode', 'Base', 'Optimism', 'Fraxtal', 'Bob']; | ||
| const indexA = sortingOrder.indexOf(a[1].name); | ||
| const indexB = sortingOrder.indexOf(b[1].name); | ||
| <div className="flex flex-wrap gap-2"> | ||
| {orderedNetworks.map(([chainId, network], idx) => { | ||
| const isSelected = +chainId === +dropdownSelectedChain; | ||
|
|
||
| return ( | ||
| <TooltipProvider key={idx}> | ||
| <Tooltip delayDuration={100}> | ||
| <TooltipTrigger asChild> | ||
| <div> | ||
| <Button | ||
| variant={isSelected ? 'secondary' : 'ghost'} | ||
| asChild | ||
| className={`h-9 rounded-md ${isSelected ? 'min-w-[80px] p-2' : 'min-w-[32px] p-1 '}`} | ||
| > | ||
| <Link | ||
| href={getUrlWithParams(chainId)} | ||
| onClick={() => setDropChain(chainId)} | ||
| className="flex items-center justify-center gap-2" | ||
| > | ||
| <Image | ||
| alt={network.name} | ||
| className="w-6 h-6" | ||
| src={`/img/logo/${network.name.toUpperCase()}.png`} | ||
| width={24} | ||
| height={24} | ||
| /> | ||
| {isSelected && ( | ||
| <span className="text-sm">{network.name}</span> | ||
| )} | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="flex items-center gap-2 bg-background"> | ||
| <Image | ||
| alt={network.name} | ||
| className="w-4 h-4" | ||
| src={`/img/logo/${network.name.toUpperCase()}.png`} | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| <p>{network.name}</p> | ||
| <span className="text-emerald-400 text-xs">Active</span> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
| })} | ||
|
|
||
| if (indexA === -1 || indexB === -1) { | ||
| return 0; // if the network name is not found, don't change the order | ||
| } | ||
| return indexA - indexB; | ||
| }) | ||
| .map(([chainId, network], idx: number) => ( | ||
| <Link | ||
| className={`flex flex-wrap justify-start gap-2 items-center p-2 mb-1 text-xs md:text-sm w-max text-white rounded-md bg-graySelected border border-gray-800 `} | ||
| href={`${pathname}?chain=${chainId}${nopool ? '' : '&pool=0'}`} | ||
| key={idx} | ||
| onClick={() => setDropChain(chainId)} | ||
| > | ||
| <img | ||
| alt="checkmark--v1" | ||
| className={`w-4 h-4 stroke-lime`} | ||
| src={`/img/logo/${network.name.toUpperCase()}.png`} | ||
| />{' '} | ||
| {network.name} | ||
| </Link> | ||
| ))} | ||
| {!!upcomingChains && | ||
| upcomingChains.map((upcomingChain, idx) => ( | ||
| <div | ||
| className={`flex flex-wrap justify-start gap-2 items-center p-2 mb-1 text-xs md:text-sm w-max text-white rounded-md relative border border-gray-800 `} | ||
| // href={`${pathname}?chain=${dropdownSelectedChain}${nopool ? '' : '&pool=0'}`} | ||
| key={idx} | ||
| > | ||
| <img | ||
| alt="checkmark--v1" | ||
| className={`w-4 h-4 stroke-lime `} | ||
| src={`/img/logo/${upcomingChain.toUpperCase()}.png`} | ||
| />{' '} | ||
| {upcomingChain} | ||
| <div | ||
| className={`absolute right-0 w-full h-full bg-gray-700/50 `} | ||
| /> | ||
| </div> | ||
| ))} | ||
| {upcomingChains?.map((upcomingChain, idx) => ( | ||
| <TooltipProvider key={idx}> | ||
| <Tooltip delayDuration={100}> | ||
| <TooltipTrigger asChild> | ||
| <div> | ||
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| className="p-1 h-8 min-w-[32px] opacity-75 cursor-not-allowed hover:opacity-75" | ||
| disabled | ||
| > | ||
| <Image | ||
| alt={upcomingChain} | ||
| className="w-6 h-6 grayscale-[30%]" | ||
| src={`/img/logo/${upcomingChain.toUpperCase()}.png`} | ||
| width={24} | ||
| height={24} | ||
| /> | ||
| </Button> | ||
| </div> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="flex items-center gap-2 bg-background"> | ||
| <Image | ||
| alt={upcomingChain} | ||
| className="w-4 h-4 grayscale-[30%]" | ||
| src={`/img/logo/${upcomingChain.toUpperCase()}.png`} | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| <p>{upcomingChain}</p> | ||
| <span className="text-yellow-400 text-xs">Coming Soon</span> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default dynamic(() => Promise.resolve(NetworkSelector), { ssr: false }); | ||
| export default NetworkSelector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.