Skip to content

Commit

Permalink
Merge pull request #36 from MyTonSwap/develop
Browse files Browse the repository at this point in the history 
Add tonco support on widget
  • Loading branch information
@Ho3einWave
Ho3einWave authored Jan 4, 2025
2 parents e813a3f + 7c8170f commit d8a6c16
Show file tree
Hide file tree
Showing 17 changed files with 116 additions and 95 deletions.
137 changes: 76 additions & 61 deletions lib/components/SwapCard/CardDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import clsx from "clsx";
import clsx from 'clsx';
import {
CSSProperties,
Dispatch,
Expand All @@ -7,36 +7,36 @@ import {
useEffect,
useRef,
useState,
} from "react";
import { IoClose } from "react-icons/io5";
import { MdOutlineSearch } from "react-icons/md";
import { AnimatePresence, motion } from "framer-motion";
import Token from "./Token";
import InfiniteScroll from "react-infinite-scroll-component";
import { useSwapStore } from "../../store/swap.store";
import { Asset } from "@mytonswap/sdk";
import sortAssets from "../../utils/sortAssets";
import { CgSpinnerTwo } from "react-icons/cg";
import { address } from "@ton/ton";
import { TiWarning } from "react-icons/ti";
import "./CardDialog.scss";
import { useMediaQuery, useOnClickOutside } from "usehooks-ts";
import { modalAnimationDesktop, modalAnimationMobile } from "../../constants";
import catchError from "../../utils/catchErrors";
} from 'react';
import { IoClose } from 'react-icons/io5';
import { MdOutlineSearch } from 'react-icons/md';
import { AnimatePresence, motion } from 'framer-motion';
import Token from './Token';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useSwapStore } from '../../store/swap.store';
import { Asset } from '@mytonswap/sdk';
import sortAssets from '../../utils/sortAssets';
import { CgSpinnerTwo } from 'react-icons/cg';
import { address } from '@ton/ton';
import { TiWarning } from 'react-icons/ti';
import './CardDialog.scss';
import { useMediaQuery, useOnClickOutside } from 'usehooks-ts';
import { modalAnimationDesktop, modalAnimationMobile } from '../../constants';
import catchError from '../../utils/catchErrors';

import { reportErrorWithToast } from "../../services/errorAnalytics";
import { useTranslation } from "react-i18next";
import FavList from "./FavList";
import { reportErrorWithToast } from '../../services/errorAnalytics';
import { useTranslation } from 'react-i18next';
import FavList from './FavList';
type CardDialogProps = {
isSelectVisible: boolean;
setIsSelectVisible: Dispatch<SetStateAction<boolean>>;
type: "pay" | "receive";
type: 'pay' | 'receive';
onTokenSelect: (asset: Asset) => void;
};

enum TABS {
ALL = "ALL",
FAVORITES = "FAVORITES",
ALL = 'ALL',
FAVORITES = 'FAVORITES',
}

const CardDialog: FC<CardDialogProps> = ({
Expand All @@ -60,15 +60,15 @@ const CardDialog: FC<CardDialogProps> = ({
const [activeTab, setActiveTab] = useState<TABS>(TABS.ALL);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [searchInput, setSearchInput] = useState("");
const [searchInput, setSearchInput] = useState('');
const [contractCommunity, setContractCommunity] = useState<Asset | null>(
null
);
const [promptForCommunity, setPromptForCommunity] = useState(false);
const isDesktop = useMediaQuery("(min-width: 768px)");
const isDesktop = useMediaQuery('(min-width: 768px)');
const ref = useRef(null);
const onNextPage = async (currPage: number) => {
if (type === "pay") {
if (type === 'pay') {
const result = await catchError(() =>
client.assets.getPaginatedAssets(
currPage,
Expand All @@ -79,19 +79,20 @@ const CardDialog: FC<CardDialogProps> = ({
if (result.error) {
reportErrorWithToast(
result.error,
"Failed to fetch assets",
"CardDialog.tsx onNextPage pay :86"
'Failed to fetch assets',
'CardDialog.tsx onNextPage pay :86'
);
return;
}
console.log(result);
const { assets, meta } = result.data;
setPage(currPage + 1);
addToAssets(assets);
setHasMore(!meta.isLastPage);
return;
}
if (type === "receive" && !pay_token) return;
if (type === "receive") {
if (type === 'receive' && !pay_token) return;
if (type === 'receive') {
const newAssets = await catchError(() =>
client.assets.getPairs(
pay_token!.address,
Expand All @@ -103,8 +104,8 @@ const CardDialog: FC<CardDialogProps> = ({
if (newAssets.error) {
reportErrorWithToast(
newAssets.error,
"Failed to fetch assets",
"CardDialog.tsx onNextPage receive :105"
'Failed to fetch assets',
'CardDialog.tsx onNextPage receive :105'
);
return;
}
Expand All @@ -130,7 +131,7 @@ const CardDialog: FC<CardDialogProps> = ({
}
};
useEffect(() => {
if (pay_token && type === "pay") {
if (pay_token && type === 'pay') {
return;
}

Expand Down Expand Up @@ -158,7 +159,7 @@ const CardDialog: FC<CardDialogProps> = ({
}
}, [searchInput]);

const assetList = type === "pay" ? assets : receiveAssets;
const assetList = type === 'pay' ? assets : receiveAssets;

const handleOnTokenSelect = (asset: Asset) => {
if (!communityTokens && asset.warning) {
Expand All @@ -168,7 +169,7 @@ const CardDialog: FC<CardDialogProps> = ({
if (promptForCommunity) {
setPromptForCommunity(false);
}
setSearchInput("");
setSearchInput('');
onTokenSelect(asset);
setPage(1);
setHasMore(true);
Expand All @@ -181,8 +182,8 @@ const CardDialog: FC<CardDialogProps> = ({
.sort(sortAssets)
.filter((item) => {
if (
searchInput.toLowerCase() === "usdt" &&
item.symbol === "USD₮"
searchInput.toLowerCase() === 'usdt' &&
item.symbol === 'USD₮'
) {
return true;
}
Expand All @@ -199,7 +200,7 @@ const CardDialog: FC<CardDialogProps> = ({

const handleOnClose = () => {
setIsSelectVisible(false);
setSearchInput("");
setSearchInput('');
};

useEffect(() => {
Expand All @@ -215,8 +216,8 @@ const CardDialog: FC<CardDialogProps> = ({
if (assetByAddrResult.error) {
reportErrorWithToast(
assetByAddrResult.error,
"Failed to fetch asset",
"CardDialog.tsx getToken :197"
'Failed to fetch asset',
'CardDialog.tsx getToken :197'
);
return;
}
Expand Down Expand Up @@ -260,20 +261,20 @@ const CardDialog: FC<CardDialogProps> = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={clsx("card-dialog-container")}
className={clsx('card-dialog-container')}
>
<motion.div
initial={modalAnimation.initial}
animate={modalAnimation.animate}
exit={modalAnimation.exit}
className={clsx("card-dialog")}
className={clsx('card-dialog')}
ref={ref}
onClick={(e) => {
e.stopPropagation();
}}
>
<div className="dialog-head">
<div>{t("select_a_token")}</div>
<div>{t('select_a_token')}</div>
<button
onClick={handleOnClose}
className="card-dialog-close"
Expand All @@ -287,7 +288,7 @@ const CardDialog: FC<CardDialogProps> = ({
<input
className="dialog-search-input"
type="text"
placeholder={t("search")}
placeholder={t('search')}
data-testid="dialog-search-input"
onChange={(e) => {
setSearchInput(e.target.value);
Expand Down Expand Up @@ -323,9 +324,9 @@ const CardDialog: FC<CardDialogProps> = ({
<div className="tab-container">
<button
className={clsx(
"tab-item",
'tab-item',
activeTab === TABS.ALL &&
"active"
'active'
)}
onClick={() =>
setActiveTab(TABS.ALL)
Expand All @@ -346,9 +347,9 @@ const CardDialog: FC<CardDialogProps> = ({
</button>
<button
className={clsx(
"tab-item",
'tab-item',
activeTab === TABS.FAVORITES &&
"active"
'active'
)}
onClick={() =>
setActiveTab(TABS.FAVORITES)
Expand All @@ -369,7 +370,7 @@ const CardDialog: FC<CardDialogProps> = ({
className="dialog-tokens-container"
style={{
...({
"--thumb-scrollbar": `var(--primary-color)`,
'--thumb-scrollbar': `var(--primary-color)`,
} as CSSProperties),
}}
id="scroll-div"
Expand All @@ -387,17 +388,31 @@ const CardDialog: FC<CardDialogProps> = ({
</div>
}
endMessage={
<div
className="no-token-found"
data-testid="token-not-found"
>
{t("token_notfound")}
<span>
filteredAssets.length ===
0 ? (
<div
className="no-token-found"
data-testid="token-not-found"
>
{t(
"not_found_desc"
'token_notfound'
)}
</span>
</div>
<span>
{t(
'not_found_desc'
)}
</span>
</div>
) : (
<div
className="no-token-found"
data-testid="no-more-token"
>
{t(
'no_more_tokens'
)}
</div>
)
}
>
{filteredAssets?.map((item) => (
Expand Down Expand Up @@ -430,12 +445,12 @@ const CardDialog: FC<CardDialogProps> = ({
<TiWarning className="icon" />
<h1 className="title">
{t(
"trade_warning.trade_title"
'trade_warning.trade_title'
)}
</h1>
<p className="description">
{t(
"trade_warning.trade_description"
'trade_warning.trade_description'
)}
</p>
</div>
Expand Down Expand Up @@ -463,7 +478,7 @@ const CardDialog: FC<CardDialogProps> = ({
);
}}
>
{t("trade_warning.agree")}
{t('trade_warning.agree')}
</button>
</>
)}
Expand Down
14 changes: 6 additions & 8 deletions lib/components/SwapDetails/SwapDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,17 +110,15 @@ const SwapDetails = () => {
background: `url(${
bestRoute
.selected_pool
.dex ===
'dedust'
? 'https://dedust.io/favicon-32x32.png'
: 'https://ston.fi/images/tild3432-3236-4431-b139-376231383134__favicon.svg'
.dex_details
.icon_url
})`,
}}
></div>
{bestRoute.selected_pool.dex ===
'dedust'
? 'Dedust'
: 'Ston.fi'}
{
bestRoute.selected_pool
.dex_details.name
}
<BsArrowRightShort />
</span>
<RouteView
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/ar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "تلقائي",
"search": "بحث ...",
"not_found_desc": "تحقق من طلبك وحاول مرة أخرى",
"no_more_tokens": "لا توجد المزيد من الرموز",
"service_provided": "الخدمة مقدمة من",
"mytonswap": "MyTonSwap",
"fetching_best_route": "جارٍ البحث عن أفضل مسار",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/bn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "অটো",
"search": "অনুসন্ধান করুন ...",
"not_found_desc": "আপনার অনুরোধটি পুনরায় যাচাই করুন এবং আবার চেষ্টা করুন",
"no_more_tokens": "আর কোনো টোকেন নেই",
"service_provided": "সেবা প্রদান করেছে",
"mytonswap": "MyTonSwap",
"fetching_best_route": "সর্বোত্তম পথ খুঁজছি",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/cn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "自动",
"search": "搜索 ...",
"not_found_desc": "检查您的请求并重试",
"no_more_tokens": "没有更多代币",
"service_provided": "服务由提供",
"mytonswap": "MyTonSwap",
"fetching_best_route": "正在获取最佳路径",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "Auto",
"search": "Suche ...",
"not_found_desc": "Überprüfen Sie Ihre Anfrage und versuchen Sie es erneut",
"no_more_tokens": "Keine weiter Tokens",
"service_provided": "Dienst bereitgestellt von",
"mytonswap": "MyTonSwap",
"fetching_best_route": "Die beste Route wird gesucht",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "Auto",
"search": "Search ...",
"not_found_desc": "Double-check your request and try again",
"no_more_tokens": "No more tokens",
"service_provided": "Service provided by",
"mytonswap": "MyTonSwap",
"fetching_best_route": "Fetching best route",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "Auto",
"search": "Buscar ...",
"not_found_desc": "Revise su solicitud e intente nuevamente",
"no_more_tokens": "No hay más tokens",
"service_provided": "Servicio provisto por",
"mytonswap": "MyTonSwap",
"fetching_best_route": "Buscando la mejor ruta",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/fa.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "خودکار",
"search": "جستجو ...",
"not_found_desc": "درخواست خود را دوباره بررسی کنید و دوباره امتحان کنید",
"no_more_tokens": "توکن دیگری وجود ندارد",
"service_provided": "خدمات ارائه‌شده توسط",
"mytonswap": "MyTonSwap",
"fetching_best_route": "در حال یافتن بهترین مسیر",
Expand Down
1 change: 1 addition & 0 deletions lib/i18n/langs/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"auto": "Auto",
"search": "Rechercher ...",
"not_found_desc": "Vérifiez votre demande et réessayez",
"no_more_tokens": "Plus de jetons",
"service_provided": "Service fourni par",
"mytonswap": "MyTonSwap",
"fetching_best_route": "Recherche du meilleur itinéraire",
Expand Down
Loading

0 comments on commit d8a6c16

Please sign in to comment.