Skip to content

Commit

Permalink
fix: Update according to the latest API changes and fix github comments
Browse files Browse the repository at this point in the history
  • Loading branch information
reza-bm committed Dec 3, 2023
1 parent 5798859 commit c333875
Show file tree
Hide file tree
Showing 104 changed files with 1,996 additions and 509 deletions.
9 changes: 9 additions & 0 deletions components/common/ButtonCopyIcon/ButtonCopyIcon.type.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import type { HTMLAttributes } from 'react';

type ButtonOnclick = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;

export type PropsType = ButtonOnclick & {
text: string;
className?: string;
hasTooltip?: boolean;
};
43 changes: 43 additions & 0 deletions components/common/ButtonCopyIcon/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { CopyIcon, CheckIcon } from 'components/icons';
import { PropsType } from './ButtonCopyIcon.type';
import { CopyText } from 'utils/copyText';
import { useState } from 'react';
import Tooltip from '../Tooltip';

function ButtonCopyIcon(props: PropsType) {
const { text, className, hasTooltip = true } = props;
const [copied, setCopied] = useState<boolean>(false);

const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
if (text && !copied) {
CopyText(text);
setCopied(true);
setTimeout(() => setCopied(false), 3000);
}
};

return (
<button
className={`flex items-center ${className || ''}`}
onClick={handleClick}>
{copied ? (
<>
<CheckIcon />
</>
) : (
<>
{hasTooltip ? (
<Tooltip label="Copied To Clipboard">
<CopyIcon className="text-neutral-400 hover:text-hoverIcon" />
</Tooltip>
) : (
<CopyIcon className="text-neutral-400 hover:text-hoverIcon" />
)}
</>
)}
</button>
);
}

export default ButtonCopyIcon;
26 changes: 14 additions & 12 deletions components/common/Footer/Footer.helper.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import discord from 'public/icons/socialMedia/discord.svg';
import github from 'public/icons/socialMedia/github.svg';
import medium from 'public/icons/socialMedia/medium.svg';
import telegram from 'public/icons/socialMedia/telegram.svg';
import twitter from 'public/icons/socialMedia/twitter.svg';
import youtube from 'public/icons/socialMedia/youtube.svg';
import {
DiscordIcon,
GithubIcon,
MediumIcon,
TelegramIcon,
TwitterIcon,
YoutubeIcon,
} from 'components/icons';
import { ListItemProps } from './Footer.type';

export const products: ListItemProps[] = [
Expand Down Expand Up @@ -57,37 +59,37 @@ export const socialMedia: ListItemProps[] = [
location: 'https://discord.com/invite/q3EngGyTrZ',
title: 'Discord',
openInNewTab: true,
icon: discord,
icon: DiscordIcon,
},
{
location: 'https://twitter.com/RangoExchange',
title: 'Twitter',
openInNewTab: true,
icon: twitter,
icon: TwitterIcon,
},
{
location: 'https://t.me/rangoexchange',
title: 'Telegram',
openInNewTab: true,
icon: telegram,
icon: TelegramIcon,
},
{
location: 'https://medium.com/@rangoexchange',
title: 'Medium',
openInNewTab: true,
icon: medium,
icon: MediumIcon,
},

{
location: 'https://www.youtube.com/@rangoexchange',
title: 'YouTube',
openInNewTab: true,
icon: youtube,
icon: YoutubeIcon,
},
{
location: 'https://github.com/rango-exchange',
title: 'GitHub',
openInNewTab: true,
icon: github,
icon: GithubIcon,
},
];
4 changes: 3 additions & 1 deletion components/common/Footer/Footer.type.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { SvgIconProps } from '../SvgIcon';

export interface ListItemProps {
location: string;
openInNewTab: boolean;
title: string;
icon?: any;
icon?: React.ComponentType<SvgIconProps>;
}
7 changes: 3 additions & 4 deletions components/common/Footer/ListItem.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import Image from 'next/image';
import Link from 'next/link';
import { ListItemProps } from './Footer.type';

function ListItem(props: ListItemProps) {
const { title, openInNewTab, location, icon } = props;
const { title, openInNewTab, location, icon: Icon } = props;
return (
<li className="item-center flex pb-2.5 text-16 font-medium leading-[0.8rem] text-neutral-200 lg:text-16 lg:leading-5 ">
{icon && <Image src={icon} alt="icon" width={16} height={16} />}
{Icon && <Icon className="text-neutral-200" />}
<Link
target={openInNewTab ? '_blank' : '_self'}
rel={openInNewTab ? 'noreferrer' : 'none'}
className={icon ? 'ml-1' : ''}
className={Icon ? 'ml-1' : ''}
href={location}>
{title}
</Link>
Expand Down
4 changes: 1 addition & 3 deletions components/common/IconStatus/IconStatus.helper.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import SuccessIcon from 'public/icons/success.svg';
import RunningIcon from 'public/icons/running.svg';
import FailIcon from 'public/icons/fail.svg';
import { FailIcon, RunningIcon, SuccessIcon } from 'components/icons';

export const SwapStatusIcon = {
running: RunningIcon,
Expand Down
17 changes: 3 additions & 14 deletions components/common/IconStatus/index.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
import Image from 'next/image';
import { PropsType } from './IconStatus.type';
import {
BackgroundStatus,
SwapStatusIcon,
TextColorStatus,
} from './IconStatus.helper';
import { SwapStatusIcon, TextColorStatus } from './IconStatus.helper';

function IconStatus(props: PropsType) {
const { status, hasTitle } = props;
const statusIcon = SwapStatusIcon[status];
const backgroundColor = BackgroundStatus[status];
const StatusIcon = SwapStatusIcon[status];
const textColor = TextColorStatus[status];

return (
<>
<div
className={`${
hasTitle ? 'mr-5' : ''
} w-[24px] h-[24px] rounded-full flex items-center justify-center ${backgroundColor}`}>
<Image src={statusIcon} width={24} alt="status" />
</div>
<StatusIcon size="1.25rem" className={`${hasTitle ? 'mr-5' : ''}`} />
{hasTitle && <div className={`text-16 ${textColor}`}>{status}</div>}
</>
);
Expand Down
45 changes: 21 additions & 24 deletions components/common/Navbar/Menu.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Image from 'next/image';
import Link from 'next/link';
import { MenuProps } from './Navbar.type';

Expand Down Expand Up @@ -28,29 +27,27 @@ function Menu(props: MenuProps) {
className={`${
theme === 'dark' ? 'bg-surfacesBackground' : 'bg-neutral-500'
} p-4 rounded-md absolute right-0 top-8`}>
{subMenu.map((item, index) => (
<li
className={`text-18 ${
theme === 'dark' ? 'text-primary-500' : 'text-baseForeground'
} min-w-[9.625rem] whitespace-nowrap ${
index !== 0 ? 'pt-6' : ''
}`}
key={index}>
<Link
target={item.openInNewTab ? '_blank' : '_self'}
rel={item.openInNewTab ? 'noreferrer' : 'none'}
className="flex items-center hover:text-secondary-500"
href={item.location}>
<Image
src={item.icon}
alt={item.title}
width={18}
height={18}
/>
<span className="pl-1.5">{item.title}</span>
</Link>
</li>
))}
{subMenu.map((item, index) => {
const { icon: Icon } = item;
return (
<li
className={`text-18 ${
theme === 'dark' ? 'text-primary-500' : 'text-baseForeground'
} min-w-[9.625rem] whitespace-nowrap ${
index !== 0 ? 'pt-6' : ''
}`}
key={index}>
<Link
target={item.openInNewTab ? '_blank' : '_self'}
rel={item.openInNewTab ? 'noreferrer' : 'none'}
className="flex items-center hover:text-secondary-500"
href={item.location}>
<Icon size="1.12rem" className="text-secondary-500" />
<span className="pl-1.5">{item.title}</span>
</Link>
</li>
);
})}
</ul>
)}
</div>
Expand Down
18 changes: 10 additions & 8 deletions components/common/Navbar/Navbar.helper.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import widgetIcon from 'public/icons/widget.svg';
import apiIcon from 'public/icons/apiManagement.svg';
import affiliateIcon from 'public/icons/affiliate.svg';
import docsIcon from 'public/icons/docs.svg';
import {
AffiliateIcon,
ApiManagementIcon,
DocsIcon,
WidgetIcon,
} from 'components/icons';
import { LinkTypes, MenuTypes } from './Navbar.type';

export const links: Array<LinkTypes | MenuTypes> = [
Expand All @@ -28,25 +30,25 @@ export const links: Array<LinkTypes | MenuTypes> = [
title: 'API/SDK',
location: 'https://rango-api.readme.io/reference/meta',
openInNewTab: true,
icon: apiIcon,
icon: ApiManagementIcon,
},
{
title: 'Widget',
location: 'https://docs.rango.exchange/widget-integration/overview',
openInNewTab: true,
icon: widgetIcon,
icon: WidgetIcon,
},
{
title: 'Affiliate',
location: 'https://rango.exchange/affiliate',
openInNewTab: true,
icon: affiliateIcon,
icon: AffiliateIcon,
},
{
title: 'Docs',
location: 'https://docs.rango.exchange',
openInNewTab: true,
icon: docsIcon,
icon: DocsIcon,
},
],
},
Expand Down
4 changes: 3 additions & 1 deletion components/common/Navbar/Navbar.type.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { SvgIconProps } from '../SvgIcon';

export interface LinkTypes {
location: string;
title: string;
Expand All @@ -14,7 +16,7 @@ export type MenuTypes = Pick<LinkTypes, 'id' | 'title'> & {
export type SubMenuTypes = Pick<
LinkTypes,
'location' | 'title' | 'openInNewTab'
> & { icon: any };
> & { icon: React.ComponentType<SvgIconProps> };

export interface NavbarProps {
theme: 'dark' | 'light';
Expand Down
11 changes: 2 additions & 9 deletions components/common/SearchBox/SearchInput.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import Image from 'next/image';
import { useRouter } from 'next/router';
import { FormEvent, MouseEvent, useState } from 'react';
import SearchIcon from 'public/icons/Search.svg';
import { Button } from '../Button';
import { SearchIcon } from 'components/icons';

function SearchInput() {
const [query, setQuery] = useState<string>('');
Expand All @@ -24,13 +23,7 @@ function SearchInput() {
onSubmit={onSubmit}
className="bg-neutral-500 w-[66%] py-8 flex items-center rounded-soft">
<div className="w-full px-25 flex justify-center items-center">
<Image
src={SearchIcon}
className="mr-5"
alt="icon"
width={16}
height={16}
/>
<SearchIcon className="mr-5 text-neutral-400" />
<input
className="w-full text-neutral-200 bg-neutral-500 focus:outline-0 overflow-hidden text-16"
placeholder="Search by Request ID / Wallet Address / Txn Hash"
Expand Down
17 changes: 17 additions & 0 deletions components/common/SvgIcon/SvgIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { SvgIconPropsWithChildren } from './SvgIcon.types';

import React from 'react';

export function SvgIcon(props: SvgIconPropsWithChildren) {
const { size = '1em', color, children, className } = props;
const originalSvgProps = children?.props;
const commonProps = {
...originalSvgProps,
width: size,
height: size,
color,
className,
};

return <svg {...commonProps}>{children?.props.children}</svg>;
}
8 changes: 8 additions & 0 deletions components/common/SvgIcon/SvgIcon.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export interface SvgIconProps {
size?: string;
color?: string;
className?: string;
}
export type SvgIconPropsWithChildren = SvgIconProps & {
children?: React.ReactElement;
};
2 changes: 2 additions & 0 deletions components/common/SvgIcon/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { SvgIcon } from './SvgIcon';
export type { SvgIconPropsWithChildren, SvgIconProps } from './SvgIcon.types';
Loading

0 comments on commit c333875

Please sign in to comment.