Skip to content

Commit

Permalink
Merge pull request #23 from MyTonSwap/develop
Browse files Browse the repository at this point in the history 
style: Fixed shimmer on pay token & some style fixes
  • Loading branch information
@Ho3einWave
Ho3einWave authored Nov 26, 2024
2 parents 8ed7ee6 + 6c45acd commit 6e55af7
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 70 deletions.
1 change: 1 addition & 0 deletions lib/components/Header/SettingPopover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
}
.modal-backdrop {
Expand Down
1 change: 0 additions & 1 deletion lib/components/Swap/Swap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
button {
cursor: pointer;
border: none;
background: transparent;
font-family: Inter, sans-serif;
}
input {
Expand Down
51 changes: 25 additions & 26 deletions lib/components/Swap/Swap.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { Swap } from "./Swap";
import { tonConnectUi } from "../../../.storybook/preview";
import { Swap } from './Swap';
import { tonConnectUi } from '../../../.storybook/preview';

const meta: Meta<typeof Swap> = {
component: Swap,
Expand All @@ -14,8 +14,8 @@ const meta: Meta<typeof Swap> = {
args={{
...args.args,
tonConnectInstance: tonConnectUi,
onTokenSelect: action("onTokenSelect"),
onSwap: action("onSwap"),
onTokenSelect: action('onTokenSelect'),
onSwap: action('onSwap'),
}}
/>
</div>
Expand Down Expand Up @@ -52,8 +52,8 @@ export const WithPinnedTokens: Story = {
args: {
options: {
pin_tokens: [
"EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c",
"EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
'EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_',
],
},
},
Expand All @@ -63,9 +63,8 @@ export const WithDefaultTokens: Story = {
args: {
options: {
default_pay_token:
"EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
default_receive_token:
"EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
'EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_',
default_receive_token: 'RAFF',
},
},
};
Expand All @@ -74,9 +73,9 @@ export const WithLockedToken: Story = {
args: {
options: {
default_pay_token:
"EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
'EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_',
default_receive_token:
"EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
'EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7',
lock_pay_token: true,
},
},
Expand All @@ -86,13 +85,13 @@ export const WithLockedInput: Story = {
args: {
options: {
default_pay_token:
"EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
'EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_',
default_receive_token:
"EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c",
'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
lock_pay_token: true,
lock_receive_token: true,
lock_input: true,
default_pay_amount: "1000000",
default_pay_amount: '1000000',

ui_preferences: {
disable_provided_text: false,
Expand All @@ -111,13 +110,13 @@ export const WithoutRefresh: Story = {
args: {
options: {
default_pay_token:
"EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
'EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_',
default_receive_token:
"EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c",
'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
lock_pay_token: true,
lock_receive_token: true,
lock_input: true,
default_pay_amount: "1000000",
default_pay_amount: '1000000',

ui_preferences: {
show_refresh: false,
Expand All @@ -139,7 +138,7 @@ export const TonJiggle: Story = {
export const WithAppId: Story = {
args: {
options: {
app_id: "tonjiggle",
app_id: 'tonjiggle',
},
},
decorators: [
Expand All @@ -154,7 +153,7 @@ export const WithAppId: Story = {
export const HideSwapDetail: Story = {
args: {
options: {
app_id: "tonjiggle",
app_id: 'tonjiggle',

ui_preferences: {
show_swap_details: false,
Expand All @@ -166,30 +165,30 @@ export const HideSwapDetail: Story = {

export const Russian: Story = {
args: {
locale: "ru",
locale: 'ru',
},
};

export const Arabic: Story = {
args: {
locale: "ar",
locale: 'ar',
},
};

export const Spanish: Story = {
args: {
locale: "es",
locale: 'es',
},
};

export const SimplifiedChinese: Story = {
args: {
locale: "cn",
locale: 'cn',
},
};

export const Farsi: Story = {
args: {
locale: "fa",
locale: 'fa',
},
};
46 changes: 23 additions & 23 deletions lib/components/SwapCard/CardButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { FC, PropsWithChildren } from "react";
import clsx from "clsx";
import { MdKeyboardArrowDown } from "react-icons/md";
import "./CardButton.scss";
import { useOptionsStore } from "../../store/options.store";
import { useTranslation } from "react-i18next";
import { useSwapStore } from "../../store/swap.store";
import { FC, PropsWithChildren } from 'react';
import clsx from 'clsx';
import { MdKeyboardArrowDown } from 'react-icons/md';
import './CardButton.scss';
import { useOptionsStore } from '../../store/options.store';
import { useTranslation } from 'react-i18next';
import { useSwapStore } from '../../store/swap.store';
type CardButtonProps = {
isLoading: boolean;
onClick: () => void;
type: "pay" | "receive";
type: 'pay' | 'receive';
};

const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
Expand All @@ -22,51 +22,51 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
const { isSelectingToken } = useSwapStore();
const isDisabled = (() => {
if (isSelectingToken) return true;
if (type === "pay" && options.lock_pay_token) return true;
if (type === "receive" && options.lock_receive_token) return true;
if (type === 'pay' && options.lock_pay_token) return true;
if (type === 'receive' && options.lock_receive_token) return true;
return false;
})();
return (
<button
disabled={isDisabled}
onClick={isDisabled ? () => {} : onClick}
{...{
...(isLoading && type === "pay"
? { "data-skeleton": true }
...(isLoading && type === 'pay'
? { 'data-skeleton': true }
: {}),
}}
data-testid={`card-button-${type}`}
className={clsx(
"selection-box-container",
isLoading && "loading",
type === "pay" && isLoading && "pay-loading",
type === "receive" && isLoading && "receive-loading"
'selection-box-container',
isLoading && 'loading',
type === 'pay' && isLoading && 'pay-loading',
type === 'receive' && isLoading && 'receive-loading'
)}
style={{
...(isDisabled && { opacity: 0.7, cursor: "auto" }),
...(isLoading && type === "pay"
...(isDisabled && { opacity: 0.7, cursor: 'auto' }),
...(isLoading && type === 'pay'
? { color: `var(--text-black-color)` }
: {
background: `var(--input-token-color)`,
color: `var(--text-black-color)`,
}),
...{
"--skeleton-bg": `var(--input-token-color)`,
"--skeleton-shine": `var(--skeleton-shine-color)`,
'--skeleton-bg': `var(--input-token-color)`,
'--skeleton-shine': `var(--skeleton-shine-color)`,
},
}}
>
{!isLoading ? (
children
) : type === "receive" ? (
) : type === 'receive' ? (
<>
{t("select")}{" "}
{t('select')}{' '}
<div className="dropdown-icon">
<MdKeyboardArrowDown />
</div>
</>
) : (
""
''
)}
</button>
);
Expand Down
1 change: 1 addition & 0 deletions lib/components/SwapCard/CardDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@
.tab-item {
position: relative;
transition: all 0.3s ease-in-out;
background: transparent;
color: var(--text-black-color);
font-size: var(--font-size-base);
&.active {
Expand Down
39 changes: 19 additions & 20 deletions lib/components/SwapCard/Token.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { Asset, fromNano } from "@mytonswap/sdk";
import { useWalletStore } from "../../store/wallet.store";
import { FC } from "react";
import formatNumber from "../../utils/formatNum";
import "./Token.scss";
import { RiExternalLinkLine } from "react-icons/ri";
import { PiStarBold } from "react-icons/pi";
import { Asset, fromNano } from '@mytonswap/sdk';
import { useWalletStore } from '../../store/wallet.store';
import { FC } from 'react';
import formatNumber from '../../utils/formatNum';
import './Token.scss';
import { RiExternalLinkLine } from 'react-icons/ri';
import { PiStarBold } from 'react-icons/pi';

import { PiStarFill } from "react-icons/pi";
import { PiStarFill } from 'react-icons/pi';

import { TokenTon } from "../icons/TokenTon";
import { TON_ADDR } from "../../constants";
import { toFixedDecimal } from "../../utils/toFixedDecimals";
import { useFavoriteStore } from "../../store/favtorite.store";
import clsx from "clsx";
import { useSwapStore } from "../../store/swap.store";
import { TokenTon } from '../icons/TokenTon';
import { TON_ADDR } from '../../constants';
import { toFixedDecimal } from '../../utils/toFixedDecimals';
import { useFavoriteStore } from '../../store/favtorite.store';
import clsx from 'clsx';
import { useSwapStore } from '../../store/swap.store';
type TokenProps = {
asset: Asset;
onTokenSelect: (asset: Asset) => void;
type: "pay" | "receive";
type: 'pay' | 'receive';
};

const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
Expand All @@ -37,15 +37,14 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
const fixedPrice = price === 0 ? 0 : formatNumber(price, 2);

const isSelected =
type === "pay"
type === 'pay'
? pay_token?.address === asset.address
: receive_token?.address === asset.address ||
pay_token?.address === asset.address;
console.log(type);
return (
<div
onClick={isSelected ? undefined : () => onTokenSelect(asset)}
className={clsx("token-container", isSelected && "selected")}
className={clsx('token-container', isSelected && 'selected')}
data-testid={asset.address}
>
<div className="token-content">
Expand All @@ -56,7 +55,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
<div className="token-details">
<div className="token-details-symbol-balance">
<div className="symbol">
{asset.symbol}{" "}
{asset.symbol}{' '}
<span>
<a
href={`https://tonviewer.com/${asset.address}`}
Expand All @@ -82,7 +81,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
</div>
</div>
<div>
<div className={clsx("fav", isTokenFav && "faved")}>
<div className={clsx('fav', isTokenFav && 'faved')}>
{isTokenFav ? (
<PiStarFill
onClick={(e) => {
Expand Down

0 comments on commit 6e55af7

Please sign in to comment.