Show Tutorials
-
-
- 
-
- {desktopScreen && linksDisplay}
-
-
- {!desktopScreen && = ({
const controls = useAnimation();
const isMobile = useMediaQuery('(max-width: 500px)');
- // eslint-disable-next-line
+ // eslint-disable-next-line
const [isDragging, setIsDragging] = useState(false);
const variants = {
@@ -93,9 +93,9 @@ const BottomSheet: React.FC = ({
)}
-
- setIsDropdownOpen(!isDropdownOpen)}
- />
- {/* */}
- {isDropdownOpen && (
-
- {dropdownData.map((item, idx) => (
- {
- openInNewTab(item.link);
+
-
+
-
+
+
+
+ {desktopScreen && linksDisplay}
+
+
+ {!desktopScreen &&
+ setIsDropdownOpen(!isDropdownOpen)}
+ />
+ {/* */}
+ {isDropdownOpen && (
+
+ {dropdownData.map((item, idx) => (
+ {
+ openInNewTab(item.link);
- setIsDropdownOpen(false);
- }}
+ setIsDropdownOpen(false);
+ }}
+ >
+
+ ))}
+
-
- ))}
-
- {isConnected &&
- `Connected address: ${
- ensName ? ensName : accountAddress
- }`}
-
- {skipAnimationToggle}
- {showTutosToggle}
-
- Version 1.0.0
-
-
- {isUserConnected ? 'LOG OUT' : 'CONNECT WALLET'}
-
-
- )}
- {/* */}
+ {isConnected &&
+ `Connected address: ${
+ ensName ? ensName : accountAddress
+ }`}
+
+ {skipAnimationToggle}
+ {showTutosToggle}
+
+ Version 1.0.0
+
+
+ {isUserConnected
+ ? 'LOG OUT'
+ : 'CONNECT WALLET'}
+
+
+ )}
+ {/* */}
+
+ {item.label}
+
+
- {item.label}
-
-
- >;
}
export default function MobileDetailTabs(props: PropsIF) {
- const { setShowShareComponent, showShareComponent} = props
+ const { setShowShareComponent, showShareComponent } = props;
return (
- )
-
-
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/Global/DetailModals/OrderDetails/OrderDetailsSimplify/OrderDetailsSimplify.module.css b/src/components/Global/DetailModals/OrderDetails/OrderDetailsSimplify/OrderDetailsSimplify.module.css
index ea03157320..db10dc2d0d 100644
--- a/src/components/Global/DetailModals/OrderDetails/OrderDetailsSimplify/OrderDetailsSimplify.module.css
+++ b/src/components/Global/DetailModals/OrderDetails/OrderDetailsSimplify/OrderDetailsSimplify.module.css
@@ -99,15 +99,12 @@
}
}
-
@media (max-width: 768px) {
- .main_container{
- padding: 0;
+ .main_container {
+ padding: 0;
}
- .main_container section{
+ .main_container section {
overflow-y: auto;
}
-
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/DetailModals/RangeDetails/RangeDetailsSimplify/RangeDetailsSimplify.module.css b/src/components/Global/DetailModals/RangeDetails/RangeDetailsSimplify/RangeDetailsSimplify.module.css
index cd695987c5..9711e15870 100644
--- a/src/components/Global/DetailModals/RangeDetails/RangeDetailsSimplify/RangeDetailsSimplify.module.css
+++ b/src/components/Global/DetailModals/RangeDetails/RangeDetailsSimplify/RangeDetailsSimplify.module.css
@@ -41,15 +41,13 @@
gap: 4px;
}
@media (max-width: 768px) {
- .main_container{
- padding: 0;
+ .main_container {
+ padding: 0;
}
- .main_container section{
+ .main_container section {
overflow-y: auto;
}
-
-
}
@media only screen and (min-width: 767px) {
diff --git a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.module.css b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.module.css
index dbf4db4763..c632a60194 100644
--- a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.module.css
+++ b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsPriceInfo/TransactionDetailsPriceInfo.module.css
@@ -24,7 +24,6 @@
align-items: center;
gap: 8px;
border-radius: var(--border-radius);
-
font-weight: 300;
color: var(--text2);
@@ -108,8 +107,8 @@
line-height: var(--header1-lh);
color: var(--text1);
font-weight: 300;
-
- padding-left: 8px;
+
+ padding-left: 8px;
}
.tx_details {
/* cursor: pointer; */
@@ -150,25 +149,23 @@
gap: 4px;
}
-.dividerMobile{
+.dividerMobile {
width: 100%;
height: 1px;
- background: var(--dark3)
+ background: var(--dark3);
}
-
@media only screen and (min-width: 768px) {
.token_pair_details p {
font-size: var(--header2-size);
line-height: var(--header2-lh);
-
}
- .min_max_price{
+ .min_max_price {
padding-top: 0;
}
- .info_container{
+ .info_container {
padding: 0.6rem;
}
.price_info_container,
@@ -176,14 +173,14 @@
gap: 1rem;
}
- .dividerMobile{
+ .dividerMobile {
display: none;
}
- .token_pair_details{
+ .token_pair_details {
padding-bottom: 0;
}
- .rowPadding{
+ .rowPadding {
padding-bottom: none;
}
}
diff --git a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsSimplify/TransactionDetailsSimplify.module.css b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsSimplify/TransactionDetailsSimplify.module.css
index bdf6a91f2a..e1063033a8 100644
--- a/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsSimplify/TransactionDetailsSimplify.module.css
+++ b/src/components/Global/DetailModals/TransactionDetails/TransactionDetailsSimplify/TransactionDetailsSimplify.module.css
@@ -8,9 +8,6 @@
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
border: none;
-
-
-
}
.info_content {
@@ -22,7 +19,6 @@
padding: 1rem;
}
-
.link_row {
display: flex;
flex-direction: row;
@@ -31,20 +27,18 @@
cursor: default;
}
@media (max-width: 768px) {
- .tx_details_container{
+ .tx_details_container {
border: 1px solid var(--dark3);
min-height: 60vh;
}
-.info_content{
- padding: 0;
- border: none;
-}
-
-
-.info_content > div:nth-child(even) {
- background-color: var(--dark2)
-}
+ .info_content {
+ padding: 0;
+ border: none;
+ }
+ .info_content > div:nth-child(even) {
+ background-color: var(--dark2);
+ }
}
@keyframes fadeIn {
diff --git a/src/components/Global/DetailModals/TransactionDetailsGraph/TransactionDetailsLiquidityGraph.tsx b/src/components/Global/DetailModals/TransactionDetailsGraph/TransactionDetailsLiquidityGraph.tsx
index 3dfebe29c8..3aae159845 100644
--- a/src/components/Global/DetailModals/TransactionDetailsGraph/TransactionDetailsLiquidityGraph.tsx
+++ b/src/components/Global/DetailModals/TransactionDetailsGraph/TransactionDetailsLiquidityGraph.tsx
@@ -10,8 +10,14 @@ import {
import * as d3 from 'd3';
import * as d3fc from 'd3fc';
import { fetchPoolLiquidity } from '../../../../ambient-utils/api';
-import { CachedDataContext, CachedDataContextIF } from '../../../../contexts/CachedDataContext';
-import { CrocEnvContext, CrocEnvContextIF } from '../../../../contexts/CrocEnvContext';
+import {
+ CachedDataContext,
+ CachedDataContextIF,
+} from '../../../../contexts/CachedDataContext';
+import {
+ CrocEnvContext,
+ CrocEnvContextIF,
+} from '../../../../contexts/CrocEnvContext';
import {
CandleDataIF,
LiquidityRangeIF,
@@ -29,7 +35,10 @@ import {
} from '../../../../pages/platformAmbient/Chart/Liquidity/LiquiditySeries/AreaSeries';
import { createLiquidityLineSeries } from '../../../../pages/platformAmbient/Chart/Liquidity/LiquiditySeries/LineSeries';
import { ChartThemeIF } from '../../../../contexts/ChartContext';
-import { AppStateContext, AppStateContextIF } from '../../../../contexts/AppStateContext';
+import {
+ AppStateContext,
+ AppStateContextIF,
+} from '../../../../contexts/AppStateContext';
interface propsIF {
tx: TransactionIF;
@@ -51,9 +60,7 @@ type liquidityChartData = {
liquidityDataBid: LiquidityRangeIF[];
};
-export default function TransactionDetailsLiquidityGraph(
- props: propsIF,
-) {
+export default function TransactionDetailsLiquidityGraph(props: propsIF) {
const { activeNetwork } = useContext(AppStateContext);
const { cachedFetchTokenPrice, cachedQuerySpotTick } =
useContext(CachedDataContext);
diff --git a/src/components/Global/Divider/Divider.module.css b/src/components/Global/Divider/Divider.module.css
index 6285cdc8ee..e64344f5b7 100644
--- a/src/components/Global/Divider/Divider.module.css
+++ b/src/components/Global/Divider/Divider.module.css
@@ -1,6 +1,6 @@
.divider {
background: var(--dark3);
width: 100%;
-
+
height: 1px;
}
diff --git a/src/components/Global/DropdownMenu2/DropdownMenu2.module.css b/src/components/Global/DropdownMenu2/DropdownMenu2.module.css
index ddbe32d43d..468982aae1 100644
--- a/src/components/Global/DropdownMenu2/DropdownMenu2.module.css
+++ b/src/components/Global/DropdownMenu2/DropdownMenu2.module.css
@@ -4,7 +4,7 @@ gap={4}
justifyContent='center'
fullWidth */
-.menu{
+.menu {
width: 100%;
display: flex;
justify-content: center;
@@ -14,39 +14,36 @@ fullWidth */
border-right: 4px solid transparent;
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
z-index: 999;
-
}
-.menuItem{
+.menuItem {
display: flex;
cursor: pointer;
z-index: 999;
gap: 4px;
}
-.menuContainer{
+.menuContainer {
width: 100%;
display: flex;
flex-direction: column;
}
-.iconContainer{
+.iconContainer {
display: flex;
justify-content: center;
align-items: center;
}
-.iconContainer img{
+.iconContainer img {
margin-right: 0.5em;
}
@media only screen and (min-width: 768px) {
-.menuContainer{
- position: absolute;
- z-index: 999;
-}
-
-
+ .menuContainer {
+ position: absolute;
+ z-index: 999;
+ }
}
@media only screen and (min-width: 1020px) {
.menu {
gap: 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/Explore/DexTokens/DexTokens.module.css b/src/components/Global/Explore/DexTokens/DexTokens.module.css
index 44cdfba245..c6ece2a385 100644
--- a/src/components/Global/Explore/DexTokens/DexTokens.module.css
+++ b/src/components/Global/Explore/DexTokens/DexTokens.module.css
@@ -1,4 +1,3 @@
-
.mainContainer {
box-sizing: border-box;
width: 100%;
@@ -139,7 +138,7 @@
}
@media only screen and (min-width: 600px) {
- .contentContainer{
+ .contentContainer {
padding-right: 1rem;
overflow-x: auto;
}
@@ -148,15 +147,11 @@
width: 2px;
right: 18px;
}
-
-
}
@media only screen and (min-width: 768px) {
.mainContainer {
border: none;
-
-
}
.no_results {
height: 70%;
diff --git a/src/components/Global/Explore/ExploreToggle/ExploreToggle.module.css b/src/components/Global/Explore/ExploreToggle/ExploreToggle.module.css
index 1a6a91764b..f04a1b3bd8 100644
--- a/src/components/Global/Explore/ExploreToggle/ExploreToggle.module.css
+++ b/src/components/Global/Explore/ExploreToggle/ExploreToggle.module.css
@@ -1,34 +1,30 @@
-
-
-
-.container button{
+.container button {
background: transparent;
outline: none;
border: none;
color: var(--text3);
font-size: 13px;
-font-style: normal;
-font-weight: 500;
-border-bottom: 1px solid transparent;
-width: 150px;
-cursor: pointer;
-padding: 4px;
+ font-style: normal;
+ font-weight: 500;
+ border-bottom: 1px solid transparent;
+ width: 150px;
+ cursor: pointer;
+ padding: 4px;
}
-.activeButton{
- color: var(--accent1) !important ;
- border-bottom: 1px solid var(--accent1) !important;
+.activeButton {
+ color: var(--accent1) !important ;
+ border-bottom: 1px solid var(--accent1) !important;
}
@media only screen and (max-width: 768px) {
-.container{
- width: 100%;
- display: grid;
- grid-template-columns: 1fr 1fr;
-}
+ .container {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
-.container button{
- width: 100%;
+ .container button {
+ width: 100%;
+ }
}
-
-}
\ No newline at end of file
diff --git a/src/components/Global/Explore/ExploreToggle/ExploreToggle.tsx b/src/components/Global/Explore/ExploreToggle/ExploreToggle.tsx
index a1195d58ba..1c2138b8d0 100644
--- a/src/components/Global/Explore/ExploreToggle/ExploreToggle.tsx
+++ b/src/components/Global/Explore/ExploreToggle/ExploreToggle.tsx
@@ -1,18 +1,26 @@
-import styles from './ExploreToggle.module.css'
+import styles from './ExploreToggle.module.css';
-interface PropsIF{
+interface PropsIF {
view: 'pools' | 'tokens';
- handleToggle(): void
+ handleToggle(): void;
}
export default function ExploreToggle(props: PropsIF) {
- const { view, handleToggle} = props
-
-
+ const { view, handleToggle } = props;
return (
{displayItems
.filter((item) => item !== null) // Filter out null values
diff --git a/src/components/Global/Explore/TokenRow/TokenRow.module.css b/src/components/Global/Explore/TokenRow/TokenRow.module.css
index 3f7bc19da9..8df5d84903 100644
--- a/src/components/Global/Explore/TokenRow/TokenRow.module.css
+++ b/src/components/Global/Explore/TokenRow/TokenRow.module.css
@@ -1,4 +1,4 @@
-.gridContainer{
+.gridContainer {
box-sizing: border-box;
width: 100%;
display: flex;
@@ -6,25 +6,22 @@
align-items: center;
min-width: 100%;
min-height: 40px;
-
+
gap: 4px;
-
- white-space: nowrap;
+
+ white-space: nowrap;
padding-left: 8px;
cursor: pointer !important;
/* padding: 0 8px; */
-
-
-
}
-.gridContainer:hover{
+.gridContainer:hover {
background: var(--dark2);
transition: all var(--animation-speed) ease-in-out;
border-radius: 4px;
}
-.gridItem{
+.gridItem {
box-sizing: border-box;
display: flex;
flex-grow: 1;
@@ -36,31 +33,23 @@
font-size: 12px;
width: 60px;
justify-content: end;
-
-
-
-
}
-.tokenIcon{
+.tokenIcon {
width: 100%;
display: flex;
justify-content: flex-start !important;
}
-.tradeButton{
+.tradeButton {
width: 25px;
-
}
-
-.poolName{
- justify-content: flex-start !important;
-
-
+.poolName {
+ justify-content: flex-start !important;
}
-.tradeIcon{
+.tradeIcon {
width: 25px;
height: 25px;
background: var(--dark2);
@@ -81,7 +70,7 @@
background-position: -100% 0;
}
}
-.skeletonItem{
+.skeletonItem {
background: linear-gradient(
to right,
var(--dark2) 0%,
@@ -95,39 +84,39 @@
color: transparent;
pointer-events: none !important;
-
}
/* END OF SKELETON */
@media only screen and (min-width: 768px) {
-
- .gridContainer{
+ .gridContainer {
gap: 8px;
}
- .gridItem{
+ .gridItem {
width: 70px;
justify-content: flex-end;
}
- .tradeButton{
-width: 70px;
+ .tradeButton {
+ width: 70px;
}
+}
-
+@media only screen and (min-width: 1024px) {
+ .gridItem,
+ .tradeButton,
+ .tradeButton,
+ .poolName {
+ width: 100px;
}
- @media only screen and (min-width: 1024px) {
- .gridItem, .tradeButton, .tradeButton, .poolName{
- width: 100px;
- }
-
- .gridItem{
- font-size: 14px;
- }
+ .gridItem {
+ font-size: 14px;
}
- @media only screen and (min-width: 1280px) {
- .gridItem, .tradeButton, .tradeButton, .poolName{
- width: 133px;
- }
-
-
- }
\ No newline at end of file
+}
+@media only screen and (min-width: 1280px) {
+ .gridItem,
+ .tradeButton,
+ .tradeButton,
+ .poolName {
+ width: 133px;
+ }
+}
diff --git a/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx b/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx
index a2f4d50825..f05f12ac96 100644
--- a/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx
+++ b/src/components/Global/Explore/TokenRow/TokenRowSkeleton.tsx
@@ -1,9 +1,8 @@
import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
-import styles from './TokenRow.module.css'
+import styles from './TokenRow.module.css';
export default function TokenRowSkeleton() {
const desktopView = useMediaQuery('(min-width: 768px)');
-
const displayItems = [
// mobileScrenView ? null :
{
@@ -31,21 +30,20 @@ export default function TokenRowSkeleton() {
classname: styles.tradeButton,
},
];
-
return (
+ );
+}
diff --git a/src/components/Global/Explore/TopPools/TopPools.module.css b/src/components/Global/Explore/TopPools/TopPools.module.css
index 0d29131ec6..e32bae0939 100644
--- a/src/components/Global/Explore/TopPools/TopPools.module.css
+++ b/src/components/Global/Explore/TopPools/TopPools.module.css
@@ -1,4 +1,3 @@
-
.mainContainer {
box-sizing: border-box;
width: 100%;
@@ -17,8 +16,6 @@
border-radius: 4px;
}
-
-
.headerContainer {
box-sizing: border-box;
width: 100%;
@@ -115,8 +112,6 @@
display: flex;
justify-content: center;
align-items: center;
-
-
}
.no_results button {
@@ -144,7 +139,7 @@
color: var(--text2);
}
@media only screen and (min-width: 600px) {
- .contentContainer{
+ .contentContainer {
padding-right: 1rem;
overflow-x: auto;
}
@@ -153,8 +148,6 @@
width: 2px;
right: 18px;
}
-
-
}
@media only screen and (min-width: 768px) {
@@ -162,7 +155,6 @@
border: none;
}
-
.no_results {
height: 70%;
}
@@ -197,7 +189,6 @@
.tradeButton,
.poolName {
width: 100px;
-
}
}
@media only screen and (min-width: 1280px) {
@@ -206,6 +197,5 @@
.tradeButton,
.poolName {
width: 133px;
-
}
}
diff --git a/src/components/Global/Explore/TopPools/TopPools.tsx b/src/components/Global/Explore/TopPools/TopPools.tsx
index 6775d5be04..88a46bc56c 100644
--- a/src/components/Global/Explore/TopPools/TopPools.tsx
+++ b/src/components/Global/Explore/TopPools/TopPools.tsx
@@ -163,8 +163,7 @@ function TopPools(props: propsIF) {
const skeletonDisplay = tempItems.map((item, idx) => (
- {children}
-
+
+
);
diff --git a/src/components/Global/CurrencyDisplay/CurrencyDisplay.module.css b/src/components/Global/CurrencyDisplay/CurrencyDisplay.module.css
index 48250367de..d2f3826c05 100644
--- a/src/components/Global/CurrencyDisplay/CurrencyDisplay.module.css
+++ b/src/components/Global/CurrencyDisplay/CurrencyDisplay.module.css
@@ -101,7 +101,9 @@
height: calc(1.5em + 0.75rem + 2px);
padding: 0.395rem 0.75rem;
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition:
+ border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out;
text-align: end;
border: none;
diff --git a/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.module.css b/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.module.css
index 6a6b7675b3..2106590451 100644
--- a/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.module.css
+++ b/src/components/Global/DetailModals/DetailsHeader/DetailsHeader.module.css
@@ -7,15 +7,14 @@
padding: 1rem;
cursor: default;
height: 60px; */
-display: flex;
-align-items: center;
-justify-content: space-between;
-height: 60px;
-padding: 0 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 60px;
+ padding: 0 1rem;
}
.logo_container {
-
display: flex;
flex-direction: row;
align-items: center;
@@ -25,12 +24,10 @@ padding: 0 1rem;
.logo {
height: 35px;
-
}
.logo_text {
width: 176px;
-
}
.settings_control {
@@ -41,17 +38,15 @@ padding: 0 1rem;
justify-content: center;
gap: 8px;
-
-
}
-.settings_control div, .settings_control svg{
+.settings_control div,
+.settings_control svg {
display: flex;
justify-content: center;
align-items: center;
}
-
.info_button {
cursor: pointer;
outline: none;
@@ -62,24 +57,22 @@ padding: 0 1rem;
height: 23px;
}
-@media only screen and (max-width: 600px){
- .container{
+@media only screen and (max-width: 600px) {
+ .container {
height: 40px;
-
}
-
-.info_button{
- background: transparent;
- width: auto;
- height: auto;
-}
+ .info_button {
+ background: transparent;
+ width: auto;
+ height: auto;
+ }
-.logo_text, .logo{
-
- margin-left: none;
-}
-.logo_text{
- width: 110px;
+ .logo_text,
+ .logo {
+ margin-left: none;
+ }
+ .logo_text {
+ width: 110px;
+ }
}
-}
\ No newline at end of file
diff --git a/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.module.css b/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.module.css
index 5c123735b8..9f476e730d 100644
--- a/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.module.css
+++ b/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.module.css
@@ -29,4 +29,4 @@
.mobile_tabs_container .active_button {
border: 1px solid var(--accent-accent1, #7371fc);
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.tsx b/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.tsx
index e6c924b4a9..627dfbfb45 100644
--- a/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.tsx
+++ b/src/components/Global/DetailModals/MobileDetailTabs/MobileDetailTabs.tsx
@@ -1,11 +1,11 @@
import { Dispatch, SetStateAction } from 'react';
-import styles from './MobileDetailTabs.module.css'
-interface PropsIF{
+import styles from './MobileDetailTabs.module.css';
+interface PropsIF {
showShareComponent: boolean;
setShowShareComponent: Dispatch{children}
-
-
+
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/Global/Explore/PoolRow/PoolRow.module.css b/src/components/Global/Explore/PoolRow/PoolRow.module.css
index b26e9d4bc6..3aea1c488f 100644
--- a/src/components/Global/Explore/PoolRow/PoolRow.module.css
+++ b/src/components/Global/Explore/PoolRow/PoolRow.module.css
@@ -14,14 +14,13 @@
/* padding: 0 8px; */
}
-.gridContainer:hover{
+.gridContainer:hover {
background: var(--dark2);
transition: all var(--animation-speed) ease-in-out;
cursor: pointer;
border-radius: 4px;
}
-
.gridItem {
box-sizing: border-box;
display: flex;
@@ -72,7 +71,7 @@
background-position: -100% 0;
}
}
-.skeletonItem{
+.skeletonItem {
background: linear-gradient(
to right,
var(--dark2) 0%,
@@ -86,7 +85,6 @@
color: transparent;
pointer-events: none !important;
-
}
/* END OF SKELETON */
@@ -106,14 +104,11 @@
}
@media only screen and (min-width: 1024px) {
-
-
.gridItem,
.tradeButton,
.tradeButton,
.poolName {
width: 100px;
-
}
.gridItem {
@@ -126,9 +121,5 @@
.tradeButton,
.poolName {
width: 133px;
-
}
-
-
}
-
diff --git a/src/components/Global/Explore/PoolRow/PoolRow.tsx b/src/components/Global/Explore/PoolRow/PoolRow.tsx
index 66b78435ab..bc583189aa 100644
--- a/src/components/Global/Explore/PoolRow/PoolRow.tsx
+++ b/src/components/Global/Explore/PoolRow/PoolRow.tsx
@@ -54,7 +54,6 @@ export default function PoolRow(props: propsIF) {
}) + '%'
: '...';
-
const tokenIconsDisplay = (
- {displayItems
- .filter((item) => item !== null) // Filter out null values
- .map((item, idx) => (
-
- )
-}
\ No newline at end of file
+ {displayItems
+ .filter((item) => item !== null) // Filter out null values
+ .map((item, idx) => (
+
- {item?.element}
-
- ))}
-
+ {item?.element}
+
+ ))}
+
No pools match the search query: {searchQuery}
diff --git a/src/components/Global/FooterNav/FooterNav.module.css b/src/components/Global/FooterNav/FooterNav.module.css
index 97a138fac0..9fe00aafa5 100644
--- a/src/components/Global/FooterNav/FooterNav.module.css
+++ b/src/components/Global/FooterNav/FooterNav.module.css
@@ -1,5 +1,5 @@
.nav {
- position: fixed;
+ position: fixed;
bottom: 0;
left: 0;
right: 0;
@@ -11,24 +11,22 @@
border-top-left-radius: 32px;
border-top-right-radius: 32px;
box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.8);
-
+
height: 56px;
- z-index:999;
+ z-index: 999;
width: 98%;
margin: 0 auto;
border-top: 1px solid var(--dark3);
gap: 4px;
-
}
.navItem {
- width: 100%;
+ width: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer !important;
transition: all 0.2s ease-out;
-
}
.link {
@@ -41,7 +39,6 @@
gap: 4px;
font-size: var(--body-size);
line-height: var(--body-lh);
-
}
.icon {
@@ -50,10 +47,9 @@
}
.active {
-
gap: 4px;
color: var(--accent1);
}
-.navText{
+.navText {
display: flex;
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/LevelsCard/LevelsCard.module.css b/src/components/Global/LevelsCard/LevelsCard.module.css
index d2d9b388df..5cfa4ca6e1 100644
--- a/src/components/Global/LevelsCard/LevelsCard.module.css
+++ b/src/components/Global/LevelsCard/LevelsCard.module.css
@@ -1,48 +1,46 @@
-.main_container{
+.main_container {
display: flex;
-padding: 8px 32px;
-flex-direction: column;
-/* justify-content: center; */
-align-items: center;
-gap: 16px;
-background: rgba(23, 29, 39, 0.30);
-margin: 0 auto;
+ padding: 8px 32px;
+ flex-direction: column;
+ /* justify-content: center; */
+ align-items: center;
+ gap: 16px;
+ background: rgba(23, 29, 39, 0.3);
+ margin: 0 auto;
-/* blur/card */
-backdrop-filter: blur(10px);
-border-radius: 4px;
+ /* blur/card */
+ backdrop-filter: blur(10px);
+ border-radius: 4px;
}
-.main_container_full{
+.main_container_full {
display: flex;
padding: 8px 32px;
flex-direction: column;
/* align-items: center; */
gap: 16px;
- background: rgba(23, 29, 39, 0.30);
+ background: rgba(23, 29, 39, 0.3);
margin: 0 auto;
-
+
/* blur/card */
backdrop-filter: blur(10px);
border-radius: 4px;
-
- }
+}
-.user_image{
+.user_image {
width: 50px;
height: 50px;
border-radius: 50%;
-
}
-.user_image img{
+.user_image img {
max-height: 100%;
max-width: 100%;
/* object-fit: contain; */
border-radius: 50%;
}
-.point_display_container{
+.point_display_container {
width: 100%;
display: flex;
flex-direction: column;
@@ -55,13 +53,12 @@ border-radius: 4px;
border-radius: 4px;
}
-.divider{
+.divider {
width: 100%;
height: 1px;
- background: var(--dark3)
+ background: var(--dark3);
}
-
.level_only_container {
display: flex;
flex-direction: row;
@@ -93,43 +90,35 @@ border-radius: 4px;
align-items: center;
}
-.auto_width{
+.auto_width {
min-width: 60px !important;
height: 60px !important;
}
- .link{
-
- font-size: var(--body-size);
- line-height: var(--body-lh);
- color: var(--accent5);
- text-decoration: underline;
- display: flex;
- justify-content: center;
- cursor: pointer;
-
- }
+.link {
+ font-size: var(--body-size);
+ line-height: var(--body-lh);
+ color: var(--accent5);
+ text-decoration: underline;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+}
-.mobile_dropdown{
+.mobile_dropdown {
width: 100%;
justify-content: space-between;
}
@media (min-width: 768px) {
-
- .main_container{
-
-height: 650px;
-margin: auto;
-
+ .main_container {
+ height: 650px;
+ margin: auto;
}
- .main_container_full{
-
+ .main_container_full {
height: 650px;
- }
+ }
.point_display_container {
- height: 65px;
+ height: 65px;
}
-
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.module.css b/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.module.css
index 424c4e6ad8..81e0090f2c 100644
--- a/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.module.css
+++ b/src/components/Global/LevelsCard/PointsHistoryDisplay/PointsHistoryDisplay.module.css
@@ -1,15 +1,12 @@
-.point_history_container{
-
+.point_history_container {
padding: 8px;
display: flex;
flex-direction: column;
- gap:8px;
-
-width: 100%;
-
+ gap: 8px;
+ width: 100%;
}
-.points_history_content{
+.points_history_content {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--dark3);
@@ -19,17 +16,15 @@ width: 100%;
padding: 0 8px;
}
-
-
-.points_history_header{
+.points_history_header {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 8px;
}
-.hide_scroll{
+.hide_scroll {
overflow-y: hidden;
}
-.view_more_link{
+.view_more_link {
background: var(--dark2);
border: none;
outline: none;
@@ -40,11 +35,11 @@ width: 100%;
padding: 1px 12px;
text-decoration: none;
border-radius: 6.25rem;
- cursor: pointer;
+ cursor: pointer;
font-size: 11px;
color: var(--text2);
display: flex;
justify-content: center;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/LevelsCard/UserLevelDisplay.tsx b/src/components/Global/LevelsCard/UserLevelDisplay.tsx
index ff52a2e7b9..0acee752d1 100644
--- a/src/components/Global/LevelsCard/UserLevelDisplay.tsx
+++ b/src/components/Global/LevelsCard/UserLevelDisplay.tsx
@@ -33,8 +33,8 @@ export default function UserLevelDisplay(props: propsIF) {
const linkToNavigateTo: string = user
? `/${user}/xp`
: resolvedAddressFromContext
- ? `/${resolvedAddressFromContext}/xp`
- : `/${userAddress}/xp`;
+ ? `/${resolvedAddressFromContext}/xp`
+ : `/${userAddress}/xp`;
const progressPercentage = progressToNextLevel(globalPoints ?? 0);
@@ -51,7 +51,10 @@ export default function UserLevelDisplay(props: propsIF) {
});
return (
-
+
);
diff --git a/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.module.css b/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.module.css
index 3725837933..f927f75c6f 100644
--- a/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.module.css
+++ b/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.module.css
@@ -9,19 +9,19 @@
background-color: var(--dark1);
height: 64px;
-
+
display: none;
position: sticky;
}
-
-.sidebar_footer span{
+.sidebar_footer span {
background-color: transparent;
outline: none;
border: none;
cursor: pointer;
}
-.sidebar_footer a, .sidebar_footer span {
+.sidebar_footer a,
+.sidebar_footer span {
cursor: pointer;
display: flex;
flex: 1 0;
@@ -30,18 +30,20 @@
padding: 9px 3px;
font-size: 11px;
}
-.sidebar_footer a img, .sidebar_footer span img,
-.sidebar_footer a svg, .sidebar_footer span svg {
+.sidebar_footer a img,
+.sidebar_footer span img,
+.sidebar_footer a svg,
+.sidebar_footer span svg {
width: 20px;
}
@media only screen and (min-width: 500px) {
- .sidebar_footer a, .sidebar button {
+ .sidebar_footer a,
+ .sidebar button {
flex: 1 0;
padding: 9px 8px;
font-size: var(--body-size);
}
-
}
/* Small screens */
diff --git a/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.tsx b/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.tsx
index 07dd05d7c0..c09bbaefc7 100644
--- a/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.tsx
+++ b/src/components/Global/Sidebar/SidebarFooter/SidebarFooter.tsx
@@ -15,17 +15,15 @@ function SidebarFooter() {
const currentLocation = location.pathname;
-
-
const tradeDestination = location.pathname.includes('trade/market')
? '/trade/market/'
: location.pathname.includes('trade/limit')
- ? '/trade/limit/'
- : location.pathname.includes('trade/pool')
- ? '/trade/pool/'
- : location.pathname.includes('trade/edit')
- ? '/trade/edit/'
- : '/trade/market/';
+ ? '/trade/limit/'
+ : location.pathname.includes('trade/pool')
+ ? '/trade/pool/'
+ : location.pathname.includes('trade/edit')
+ ? '/trade/edit/'
+ : '/trade/market/';
const { tokenA, tokenB } = useContext(TradeDataContext);
diff --git a/src/components/Global/Sidebar/SidebarRangePositions/SidebarRangePositionsCard.tsx b/src/components/Global/Sidebar/SidebarRangePositions/SidebarRangePositionsCard.tsx
index ab7ccba3c6..92b038a530 100644
--- a/src/components/Global/Sidebar/SidebarRangePositions/SidebarRangePositionsCard.tsx
+++ b/src/components/Global/Sidebar/SidebarRangePositions/SidebarRangePositionsCard.tsx
@@ -50,13 +50,13 @@ export default function SidebarRangePositionsCard(props: propsIF) {
})
: '...'
: position.quoteUsdPrice
- ? getFormattedNumber({
- value:
- position.bidTickInvPriceDecimalCorrected *
- position.quoteUsdPrice,
- prefix: '$',
- })
- : '...';
+ ? getFormattedNumber({
+ value:
+ position.bidTickInvPriceDecimalCorrected *
+ position.quoteUsdPrice,
+ prefix: '$',
+ })
+ : '...';
const formattedHighUsdPrice = position.isBaseTokenMoneynessGreaterOrEqual
? position.baseUsdPrice
@@ -68,23 +68,23 @@ export default function SidebarRangePositionsCard(props: propsIF) {
})
: '...'
: position.quoteUsdPrice
- ? getFormattedNumber({
- value:
- position.askTickInvPriceDecimalCorrected *
- position.quoteUsdPrice,
- prefix: '$',
- })
- : '...';
+ ? getFormattedNumber({
+ value:
+ position.askTickInvPriceDecimalCorrected *
+ position.quoteUsdPrice,
+ prefix: '$',
+ })
+ : '...';
const rangeDisplayUsd = `${formattedLowUsdPrice}-${formattedHighUsdPrice}`;
const rangeDisplay = isTradeDollarizationEnabled
? rangeDisplayUsd
: position?.positionType === 'ambient'
- ? 'ambient'
- : isDenomBase
- ? `${quoteTokenCharacter}${position?.lowRangeDisplayInBase}-${quoteTokenCharacter}${position?.highRangeDisplayInBase}`
- : `${baseTokenCharacter}${position?.lowRangeDisplayInQuote}-${baseTokenCharacter}${position?.highRangeDisplayInQuote}`;
+ ? 'ambient'
+ : isDenomBase
+ ? `${quoteTokenCharacter}${position?.lowRangeDisplayInBase}-${quoteTokenCharacter}${position?.highRangeDisplayInBase}`
+ : `${baseTokenCharacter}${position?.lowRangeDisplayInQuote}-${baseTokenCharacter}${position?.highRangeDisplayInQuote}`;
// human-readable string showing total value of the position
const value = getFormattedNumber({
@@ -114,8 +114,8 @@ export default function SidebarRangePositionsCard(props: propsIF) {
position.positionType === 'ambient'
? 'ambient'
: position.isPositionInRange
- ? 'positive'
- : 'negative'
+ ? 'positive'
+ : 'negative'
}
/>
diff --git a/src/components/Global/SlippageTolerance/SlippageTolerance.tsx b/src/components/Global/SlippageTolerance/SlippageTolerance.tsx
index 59ed1e44d6..9ac09c08b3 100644
--- a/src/components/Global/SlippageTolerance/SlippageTolerance.tsx
+++ b/src/components/Global/SlippageTolerance/SlippageTolerance.tsx
@@ -20,7 +20,7 @@ export default function SlippageTolerance(props: propsIF) {
);
// type derived from preset values received in props
- type presetValues = typeof presets[number];
+ type presetValues = (typeof presets)[number];
return (
2 ? styles.auto_width : ''
diff --git a/src/components/Global/Medal/Medal.module.css b/src/components/Global/Medal/Medal.module.css
index c4ca17a048..e594cb993b 100644
--- a/src/components/Global/Medal/Medal.module.css
+++ b/src/components/Global/Medal/Medal.module.css
@@ -20,7 +20,9 @@
border-width: 0.2em;
border-style: solid;
z-index: 1;
- box-shadow: inset 0 0 0 #a7b2b8, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #a7b2b8,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: #edeff1;
text-shadow: 2px 2px 0 #98a6ad;
background: linear-gradient(to bottom right, #d1d7da 50%, #c3cbcf 50%);
@@ -44,32 +46,42 @@
border-width: 0.2em;
border-style: solid;
z-index: 1;
- box-shadow: inset 0 0 0 #a7b2b8, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #a7b2b8,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: var(--dark2);
text-shadow: 2px 2px 0 #98a6ad;
background: var(--title-gradient);
}
.quiz_medal__circle__gold {
- box-shadow: inset 0 0 0 #b67d05, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #b67d05,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: #fadd40;
text-shadow: 0 0 4px #9d6c04;
background: linear-gradient(to bottom right, #f9ad0e 50%, #e89f06 50%);
}
.quiz_medal__circle__silver {
- box-shadow: inset 0 0 0 #a7b2b8, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #a7b2b8,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: #edeff1;
text-shadow: 0px 0px 4px #98a6ad;
background: linear-gradient(to bottom right, #d1d7da 50%, #c3cbcf 50%);
}
.quiz_medal__circle__bronze {
- box-shadow: inset 0 0 0 #955405, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #955405,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: #f7bb23;
text-shadow: 0 0 4px #7d4604;
background: linear-gradient(to bottom right, #df7e08 50%, #c67007 50%);
}
.quiz_medal__circle__simple {
- box-shadow: inset 0 0 0 #a7b2b8, 2px 2px 0 rgba(0, 0, 0, 0.08);
+ box-shadow:
+ inset 0 0 0 #a7b2b8,
+ 2px 2px 0 rgba(0, 0, 0, 0.08);
border-color: var(--dark2);
text-shadow: 0px 0px 4px #98a6ad;
background: linear-gradient(to bottom right, #00070b 50%, #000e14 50%);
diff --git a/src/components/Global/Modal/Modal.module.css b/src/components/Global/Modal/Modal.module.css
index ff72e7eb5d..f8ba3d6659 100644
--- a/src/components/Global/Modal/Modal.module.css
+++ b/src/components/Global/Modal/Modal.module.css
@@ -9,7 +9,6 @@
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 999;
-
}
/* Modal container (for desktop) */
@@ -50,7 +49,6 @@
/* max-height: 80vh; */
color: var(--text1);
/* min-height: 80vh; */
-
}
.no_background_modal {
@@ -102,7 +100,6 @@
/* Bottom Sheet (for mobile) */
.bottom_sheet {
-
position: fixed;
left: 0;
right: 0;
@@ -121,11 +118,9 @@
height 0.3s ease,
backdrop-filter 0.3s ease;
- max-height: 70sdh;
- overflow-y: auto;
- z-index: 999;
-
-
+ max-height: 70sdh;
+ overflow-y: auto;
+ z-index: 999;
}
/* Drag handle for bottom sheet */
diff --git a/src/components/Global/Modal/useModal.ts b/src/components/Global/Modal/useModal.ts
index 5e66f5edad..2f6c66bd41 100644
--- a/src/components/Global/Modal/useModal.ts
+++ b/src/components/Global/Modal/useModal.ts
@@ -35,7 +35,6 @@ export const useModal = (
// useKeyPress('Escape', closeModal);
-
// return all data and functions needed for local use
return [isModalOpen, openModal, closeModal];
};
diff --git a/src/components/Global/ModalHeader/ModalHeader.module.css b/src/components/Global/ModalHeader/ModalHeader.module.css
index 1f404398e6..83443571fc 100644
--- a/src/components/Global/ModalHeader/ModalHeader.module.css
+++ b/src/components/Global/ModalHeader/ModalHeader.module.css
@@ -10,7 +10,6 @@
justify-content: space-between;
align-items: center;
-
padding: 1rem;
border-radius: var(--border-radius);
}
diff --git a/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.module.css b/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.module.css
index 9cd9b3d3e7..1848ff7309 100644
--- a/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.module.css
+++ b/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.module.css
@@ -1,5 +1,4 @@
-
-.circleContainer{
+.circleContainer {
position: relative;
width: 20px;
height: 20px;
@@ -12,13 +11,13 @@
padding: none;
}
-.circleContainerFuta{
+.circleContainerFuta {
width: 16.66px;
height: 16.66px;
background-color: var(--accent1);
border-radius: 0;
}
-.circleButton{
+.circleButton {
outline: none;
padding: none;
border: none;
@@ -54,8 +53,6 @@
user-select: none;
}
-
-
.activityIndicatorDiv span {
background: var(--title-gradient);
-webkit-background-clip: text;
diff --git a/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.tsx b/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.tsx
index ae9e21e0ff..38f7bce8f7 100644
--- a/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.tsx
+++ b/src/components/Global/NotificationCenter/ActivityIndicator/ActivityIndicator.tsx
@@ -6,8 +6,7 @@ import React, {
useContext,
} from 'react';
import { AnimatePresence, useAnimation, motion } from 'framer-motion';
-import styles from './ActivityIndicator.module.css'
-
+import styles from './ActivityIndicator.module.css';
import { AppStateContext } from '../../../../contexts/AppStateContext';
import { BrandContext } from '../../../../contexts/BrandContext';
@@ -57,8 +56,13 @@ const ActivityIndicator = (props: AcitivtyIndicatorProps) => {
const isFuta = ['futa'].includes(platformName);
const pendingCircle = (
-
{isAmbient ? 'Ambient' : isInRange - ? 'In Range' - : fullTextDisplay} + ? 'In Range' + : fullTextDisplay}
diff --git a/src/components/Global/SnackbarComponent/SNACKBAR.MD b/src/components/Global/SnackbarComponent/SNACKBAR.MD
index 1d5d8504cf..0c6cbd9fa1 100644
--- a/src/components/Global/SnackbarComponent/SNACKBAR.MD
+++ b/src/components/Global/SnackbarComponent/SNACKBAR.MD
@@ -4,18 +4,18 @@ This directory contains code to create snackbars in the Ambient app and data to
The snackbar component makes use of two components from MaterialUi. `Snackbar` and `Alert`. The `Alert` component is responsible for rendering a different variant message based on success rate and the `Snackbar` component is responsible for displaying the snackbar itself.
-To read more on the component, see the official docs:
+To read more on the component, see the official docs:
Snackbar : https://mui.com/material-ui/react-snackbar/
Alert: https://mui.com/material-ui/react-alert/
# Location and Files
-* This directory is located at `/src/components/SnackbarComponent/SnackbarComponent`
-* `SnackbarComponent.tsx` contains:
- * JSX for the snackbar skeleton
- * code to handle optional `` amd `` elements
-* `SnackbarComponent.component.css` is a CSS component which holds styling for the snackbar skeleton.
+- This directory is located at `/src/components/SnackbarComponent/SnackbarComponent`
+- `SnackbarComponent.tsx` contains:
+ - JSX for the snackbar skeleton
+ - code to handle optional `` amd `` elements
+- `SnackbarComponent.component.css` is a CSS component which holds styling for the snackbar skeleton.
# Developer Notes
-The snackbar has been updated to be a global component (like globalPopup). It can be accessed via the `appStateContext` and passing in `content` and `severity` into the `open` function.
+The snackbar has been updated to be a global component (like globalPopup). It can be accessed via the `appStateContext` and passing in `content` and `severity` into the `open` function.
diff --git a/src/components/Global/SnackbarComponent/SnackbarComponent.module.css b/src/components/Global/SnackbarComponent/SnackbarComponent.module.css
index 4a8817b6ac..ace5708068 100644
--- a/src/components/Global/SnackbarComponent/SnackbarComponent.module.css
+++ b/src/components/Global/SnackbarComponent/SnackbarComponent.module.css
@@ -1,23 +1,20 @@
-.mainContainer{
+.mainContainer {
width: 100%;
background: var(--dark2);
box-shadow: 100px 100px 100px 50px rgba(0, 0, 0, 0.25);
-
- align-items: center;
- flex-direction: column;
+
+ align-items: center;
+ flex-direction: column;
position: fixed;
bottom: 56px;
-
-
+
z-index: 9999999999999999999;
-
+
font-size: 12px;
border-top: 1px solid var(--text3);
-
}
-.closeButton{
-
+.closeButton {
outline: none;
border: none;
background: transparent;
@@ -25,8 +22,7 @@
display: flex;
justify-content: flex-end;
align-items: flex-end;
-
}
-.mainContent{
-padding: 1rem 8px;
-}
\ No newline at end of file
+.mainContent {
+ padding: 1rem 8px;
+}
diff --git a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx
index fc0a3b1871..c314940a95 100644
--- a/src/components/Global/SnackbarComponent/SnackbarComponent.tsx
+++ b/src/components/Global/SnackbarComponent/SnackbarComponent.tsx
@@ -1,15 +1,21 @@
// START: Import React and Dongles
-import { forwardRef, memo, SyntheticEvent, useContext, useEffect, useRef } from 'react';
+import {
+ forwardRef,
+ memo,
+ SyntheticEvent,
+ useContext,
+ useEffect,
+ useRef,
+} from 'react';
import { Snackbar } from '@material-ui/core';
import { Alert, AlertProps } from '@mui/material';
import { motion } from 'framer-motion';
import { AppStateContext } from '../../../contexts/AppStateContext';
import useMediaQuery from '../../../utils/hooks/useMediaQuery';
import { IoMdClose } from 'react-icons/io';
-import styles from './SnackbarComponent.module.css'
+import styles from './SnackbarComponent.module.css';
import useOnClickOutside from '../../../utils/hooks/useOnClickOutside';
-
const SnackbarAlert = forwardRef(
function SnackbarAlert(props, ref) {
return (
@@ -67,16 +73,16 @@ function SnackbarComponent() {
if (isSmallScreen)
return (
-
-
+
);
return (
diff --git a/src/components/Global/TabComponent/TabComponent.module.css b/src/components/Global/TabComponent/TabComponent.module.css
index 795d5b2140..a1634f3bf9 100644
--- a/src/components/Global/TabComponent/TabComponent.module.css
+++ b/src/components/Global/TabComponent/TabComponent.module.css
@@ -60,7 +60,6 @@
color: var(--accent1);
}
-
.active_label_container {
font-size: 15px;
color: var(--accent1);
@@ -214,11 +213,11 @@
grid-template-columns: repeat(3, 33%);
}
- .navbar_header_container{
+ .navbar_header_container {
grid-template-columns: 75% 25%;
}
- .single_tab{
+ .single_tab {
justify-content: center;
}
}
diff --git a/src/components/Global/TabComponent/TabComponent.tsx b/src/components/Global/TabComponent/TabComponent.tsx
index 745486b2a8..8c6c987b97 100644
--- a/src/components/Global/TabComponent/TabComponent.tsx
+++ b/src/components/Global/TabComponent/TabComponent.tsx
@@ -218,12 +218,8 @@ export default function TabComponent(props: TabPropsIF) {
});
const tabsWithRightOption = (
-
+
+ {content}
-
-
-
+
+
{data.map((item) => (
`
left: 10px;
right: 50%;
background: var(--dark2);
- transition: left 0.5s, right 0.4s 0.2s;
+ transition:
+ left 0.5s,
+ right 0.4s 0.2s;
}
}
input:not(:checked) {
@@ -113,7 +115,9 @@ const SwitchContainer = styled.span`
left: 50%;
right: 10px;
background: var(--accent1);
- transition: left 0.4s 0.2s, right 0.5s,
+ transition:
+ left 0.4s 0.2s,
+ right 0.5s,
background 0.35s -0.1s;
}
}
diff --git a/src/components/Global/TokenSelectContainer/SoloTokenSelect.module.css b/src/components/Global/TokenSelectContainer/SoloTokenSelect.module.css
index 72af17d8e8..f34a5a579f 100644
--- a/src/components/Global/TokenSelectContainer/SoloTokenSelect.module.css
+++ b/src/components/Global/TokenSelectContainer/SoloTokenSelect.module.css
@@ -101,7 +101,8 @@
padding: 1rem;
}
-.header, .container header {
+.header,
+.container header {
height: 41px !important;
display: flex;
flex-direction: row;
@@ -112,4 +113,3 @@
font-weight: 200;
color: var(--text1);
}
-
diff --git a/src/components/Global/TokenSelectContainer/SoloTokenSelectModal.module.css b/src/components/Global/TokenSelectContainer/SoloTokenSelectModal.module.css
index e8e14915c2..b0dfcbe11b 100644
--- a/src/components/Global/TokenSelectContainer/SoloTokenSelectModal.module.css
+++ b/src/components/Global/TokenSelectContainer/SoloTokenSelectModal.module.css
@@ -5,11 +5,6 @@
flex-direction: column;
padding: 1rem;
border-radius: var(--border-radius);
-
-
-
-
-
}
.container::-webkit-scrollbar {
@@ -21,7 +16,7 @@
line-height: var(--header2-lh);
color: var(--text2);
}
-.scrollContainer{
+.scrollContainer {
height: 100%;
overflow-y: auto;
}
@@ -47,8 +42,6 @@
flex-direction: row;
align-items: center;
gap: 4px;
-
-
}
/* search input field */
diff --git a/src/components/Global/TooltipComponent/TOOLTIP.MD b/src/components/Global/TooltipComponent/TOOLTIP.MD
index a9e21c9f18..e3435395ff 100644
--- a/src/components/Global/TooltipComponent/TOOLTIP.MD
+++ b/src/components/Global/TooltipComponent/TOOLTIP.MD
@@ -3,45 +3,41 @@
This directory contains code to create tooltips in the Ambient app and data to fill out the tooltip skeleton.
The tooltip component makes use of a component from MaterialUi. `Tooltip`.
-To read more on the component, see the official docs:
+To read more on the component, see the official docs:
Tooltip : https://mui.com/material-ui/react-tooltip/
-
# Location and Files
-* This directory is located at `/src/components/TooltipComponent/TooltipComponent`
-* `TooltipComponent.tsx` contains:
- * JSX for the tooltip skeleton
- * code to handle optional `` and `<placement>` elements
-* `TooltipComponent.component.css` is a CSS component which holds styling for the tooltip skeleton.
+- This directory is located at `/src/components/TooltipComponent/TooltipComponent`
+- `TooltipComponent.tsx` contains:
+ - JSX for the tooltip skeleton
+ - code to handle optional `<title>` and `<placement>` elements
+- `TooltipComponent.component.css` is a CSS component which holds styling for the tooltip skeleton.
# Developer Notes
To call a Tooltip anywhere in the app, you should:
+
1. Import the React functional component from `TooltipComponent.tsx`
2. Render the tooltip component with a `title` attribute, which is the text the tooltip displays when a user hovers.
3. The tooltip component optionally takes a `placement` prop, which is where the title of the tooltip will be displayed, relative to it's container.
- - Some options for the placements are
- | 'right'
- | 'bottom-end'
- | 'bottom-start'
- | 'bottom'
- | 'left-end'
- | 'left-start'
- | 'left'
- | 'right-end'
- | 'right-start'
- | 'top-end'
- | 'top-start'
- | 'top'
-- The default placement is on the right.
+
+- Some options for the placements are
+ | 'right'
+ | 'bottom-end'
+ | 'bottom-start'
+ | 'bottom'
+ | 'left-end'
+ | 'left-start'
+ | 'left'
+ | 'right-end'
+ | 'right-start'
+ | 'top-end'
+ | 'top-start'
+ | 'top'
+- The default placement is on the right.
Full example of usablity:
` <TooltipComponent title='Snackbar title' placement='right />`
To open the tooltip component, simply hover over the question svg that comes with the tooltip component.
-
-
-
-
-
diff --git a/src/components/Global/TooltipComponent/TooltipComponent.module.css b/src/components/Global/TooltipComponent/TooltipComponent.module.css
index 8749d3df42..871406b8e1 100644
--- a/src/components/Global/TooltipComponent/TooltipComponent.module.css
+++ b/src/components/Global/TooltipComponent/TooltipComponent.module.css
@@ -11,15 +11,13 @@
justify-content: center;
}
-.mobilePopupContainer{
+.mobilePopupContainer {
background: var(--dark2);
position: absolute;
bottom: 0;
- height:55%;
+ height: 55%;
width: 100%;
font-size: var(--body-size);
line-height: var(--body-lh);
padding-right: 8px;
-
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/TutorialComponent/TutorialComponent.module.css b/src/components/Global/TutorialComponent/TutorialComponent.module.css
index cf69bd7aa9..bc00622eec 100644
--- a/src/components/Global/TutorialComponent/TutorialComponent.module.css
+++ b/src/components/Global/TutorialComponent/TutorialComponent.module.css
@@ -1,33 +1,37 @@
-.tutorial_overlay{
+.tutorial_overlay {
position: fixed;
top: 5rem;
- left: 0 ;
+ left: 0;
display: block;
width: 100vw;
height: 100vh;
}
-.focus_outline{
- transition: all .3s ease-in-out;
+.focus_outline {
+ transition: all 0.3s ease-in-out;
position: fixed;
z-index: 9999;
- display: block;
+ display: block;
width: 0;
height: 0;
left: 50%;
top: 0;
background: transparent;
- box-shadow: 0 0 4px 0px color-mix(in srgb, var(--accent1) 20%, transparent), 0 0 0 9999px color-mix(in srgb, var(--accent1) 5%, transparent);
- box-shadow: 0 0 3px 0px color-mix(in srgb, var(--accent1) 20%, transparent),0 0 0 9999px rgba(0,0,0, .4 ), 0 0 0 9999px color-mix(in srgb, var(--accent1) 10%, transparent);
+ box-shadow:
+ 0 0 4px 0px color-mix(in srgb, var(--accent1) 20%, transparent),
+ 0 0 0 9999px color-mix(in srgb, var(--accent1) 5%, transparent);
+ box-shadow:
+ 0 0 3px 0px color-mix(in srgb, var(--accent1) 20%, transparent),
+ 0 0 0 9999px rgba(0, 0, 0, 0.4),
+ 0 0 0 9999px color-mix(in srgb, var(--accent1) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
overflow: hidden;
}
-
-.focus_outline.animated{
+.focus_outline.animated {
}
-.focus_outline.animated::after{
+.focus_outline.animated::after {
content: '';
position: absolute;
display: block;
@@ -36,12 +40,12 @@
width: 100vw;
height: 100vh;
background: var(--accent1);
- animation: focusOutlineAnim .3s ease-in-out 2;
- animation-delay: .5s;
+ animation: focusOutlineAnim 0.3s ease-in-out 2;
+ animation-delay: 0.5s;
opacity: 0;
}
-.tooltip_wrapper{
+.tooltip_wrapper {
position: fixed;
background: var(--dark1);
z-index: 10000;
@@ -52,52 +56,51 @@
left: 100vw;
}
-.tooltip_wrapper.animated{
- animation: tooltipAnim .5s ease-in-out forwards;
+.tooltip_wrapper.animated {
+ animation: tooltipAnim 0.5s ease-in-out forwards;
}
-.tooltip_title{
+.tooltip_title {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
/* margin-bottom: .5rem; */
- padding: .3rem 1rem;
+ padding: 0.3rem 1rem;
width: 100%;
background-color: color-mix(in srgb, var(--accent1) 5%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
position: relative;
}
-.tooltip_content{
+.tooltip_content {
padding: 1rem 1rem;
}
-@keyframes focusOutlineAnim{
- 0%, 100%{
+@keyframes focusOutlineAnim {
+ 0%,
+ 100% {
opacity: 0;
}
- 50%{
- opacity: .2;
+ 50% {
+ opacity: 0.2;
}
}
-
-@keyframes tooltipAnim{
- 0%{
+@keyframes tooltipAnim {
+ 0% {
opacity: 0;
transform: scale(1);
}
- 50%{
+ 50% {
transform: scale(1.1);
}
- 100%{
+ 100% {
transform: scale(1);
opacity: 1;
}
}
-
-.tutorial_steps{
+.tutorial_steps {
position: fixed;
z-index: 10000;
bottom: 2rem;
@@ -106,128 +109,120 @@
transform: translateX(-70%);
}
-.tooltip_buttons_wrapper{
+.tooltip_buttons_wrapper {
display: flex;
-
+
justify-content: center;
}
-.step_btn{
- transition: all .2s ease-in-out;
- padding: .5rem 1rem;
+.step_btn {
+ transition: all 0.2s ease-in-out;
+ padding: 0.5rem 1rem;
background: var(--dark1);
cursor: pointer;
- margin-left: .4rem;
+ margin-left: 0.4rem;
}
-.step_btn.navigate{
+.step_btn.navigate {
background: var(--accent1);
color: black;
font-weight: bold;
-
}
-.step_btn:not(.disabled){
-
+.step_btn:not(.disabled) {
/* border: 1px solid color-mix(in srgb, white 30%, transparent); */
}
-.prev_btn{
+.prev_btn {
border: 1px solid color-mix(in srgb, white 30%, transparent);
}
-.step_btn:not(.disabled):not(.dismiss_button):hover{
+.step_btn:not(.disabled):not(.dismiss_button):hover {
background: var(--accent1);
color: black;
}
-.step_btn.dismiss_button:hover{
+.step_btn.dismiss_button:hover {
opacity: 1;
}
-
-.step_btn.disabled{
- opacity: .5;
+.step_btn.disabled {
+ opacity: 0.5;
cursor: default;
}
-.steps_indicator{
+.steps_indicator {
background: var(--dark1);
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
border: 1px solid color-mix(in srgb, white 30%, transparent);
}
-.steps_on_tooltip{
+.steps_on_tooltip {
position: absolute;
right: 1rem;
- top: .5rem;
- font-size: .8rem;
-
+ top: 0.5rem;
+ font-size: 0.8rem;
}
-
-.step_dots_wrapper{
+.step_dots_wrapper {
display: flex;
justify-content: center;
align-items: center;
- padding-top: .5rem;
- padding-bottom: .5rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
}
-.step_dot{
- transition: all .2s ease-in-out;
+.step_dot {
+ transition: all 0.2s ease-in-out;
display: inline-block;
- width: .25rem;
- height: .25rem;
- background-color: rgba(255,255,255, .2);
- margin: .5rem;
+ width: 0.25rem;
+ height: 0.25rem;
+ background-color: rgba(255, 255, 255, 0.2);
+ margin: 0.5rem;
border-radius: 100vw;
}
-.step_dot.active{
+.step_dot.active {
transform: scale(1.5);
background-color: var(--accent1);
}
-.next_button{
+.next_button {
border: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
color: var(--accent1);
}
-.dismiss_button{
- opacity: .7;
+.dismiss_button {
+ opacity: 0.7;
border: 1px solid color-mix(in srgb, white 50%, transparent);
color: white;
}
-.for_tooltip{
+.for_tooltip {
position: absolute;
right: -3rem;
top: 0;
}
-.complete_button{
+.complete_button {
border: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
color: var(--accent1);
}
-
-
-@media only screen and (max-width: 600px){
-
- .tooltip_wrapper{
+@media only screen and (max-width: 600px) {
+ .tooltip_wrapper {
max-width: 80vw;
- }
+ }
- .steps_indicator{
+ .steps_indicator {
white-space: nowrap;
}
- .step_btn{
+ .step_btn {
white-space: nowrap;
}
- .tutorial_steps{
+ .tutorial_steps {
transform: translateX(-50%);
bottom: 5rem;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/TutorialComponent/TutorialComponent.tsx b/src/components/Global/TutorialComponent/TutorialComponent.tsx
index 55aeb8708e..d987bcec83 100644
--- a/src/components/Global/TutorialComponent/TutorialComponent.tsx
+++ b/src/components/Global/TutorialComponent/TutorialComponent.tsx
@@ -1,7 +1,10 @@
import { memo, useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import useMediaQuery from '../../../utils/hooks/useMediaQuery';
-import { TutorialStepExternalComponent, TutorialStepIF } from '../../Chat/ChatIFs';
+import {
+ TutorialStepExternalComponent,
+ TutorialStepIF,
+} from '../../Chat/ChatIFs';
import styles from './TutorialComponent.module.css';
/* eslint-disable @typescript-eslint/no-explicit-any */
@@ -12,13 +15,12 @@ interface propsIF {
showSteps?: boolean;
initialStep?: number;
onComplete?: () => void;
- externalComponents?: Map<string, TutorialStepExternalComponent>
+ externalComponents?: Map<string, TutorialStepExternalComponent>;
}
function TutorialComponent(props: propsIF) {
-
const { steps, tutoKey, initialStep, showSteps, onComplete } = props;
- console.log(tutoKey, steps)
+ console.log(tutoKey, steps);
const [hasTriggered, setHasTriggered] = useState<boolean>(false);
const hasTriggeredRef = useRef<boolean>(false);
@@ -29,7 +31,7 @@ function TutorialComponent(props: propsIF) {
const stepIndexRef = useRef<number>();
stepIndexRef.current = stepIndex;
- const [step, setStep] = useState<| TutorialStepIF | undefined>(
+ const [step, setStep] = useState<TutorialStepIF | undefined>(
steps.length > 0 && steps[stepIndex] ? steps[stepIndex] : undefined,
);
hasTriggeredRef.current = hasTriggered;
@@ -40,21 +42,22 @@ function TutorialComponent(props: propsIF) {
const focusOffsetH = 20;
const tooltipOffsetV = 20;
-
const isMobile = useMediaQuery('(max-width: 800px)');
- const [initialTimeoutDone, setInitialTimeoutDone] = useState<boolean>(false);
+ const [initialTimeoutDone, setInitialTimeoutDone] =
+ useState<boolean>(false);
const [onCompleteActions, setOnCompleteActions] = useState<string[]>([]);
const onCompleteActionsRef = useRef<string[]>([]);
onCompleteActionsRef.current = onCompleteActions;
- const [stepExternalComponent, setStepExternalComponent] = useState<TutorialStepExternalComponent>();
+ const [stepExternalComponent, setStepExternalComponent] =
+ useState<TutorialStepExternalComponent>();
useEffect(() => {
if (hasTriggeredRef.current) return;
buildOnCompletes();
if (steps.length > 0) {
triggerTutorial();
- }else{
+ } else {
completeTutorial();
}
}, [tutoKey]);
@@ -67,8 +70,7 @@ function TutorialComponent(props: propsIF) {
if (refVal < steps.length - 1) {
setStepIndex(refVal + 1);
- }
- else if (refVal === steps.length -1){
+ } else if (refVal === steps.length - 1) {
completeTutorial();
}
};
@@ -126,16 +128,16 @@ function TutorialComponent(props: propsIF) {
};
const buildOnCompletes = () => {
- const completeActions:string[] = [];
+ const completeActions: string[] = [];
steps.forEach((step) => {
- if(step.actionOnComplete){
+ if (step.actionOnComplete) {
completeActions.push(step.actionOnComplete);
}
- })
-
+ });
+
setOnCompleteActions([...completeActions]);
- }
+ };
const handleTooltip = () => {
const targetEl = getTargetEl();
@@ -233,71 +235,81 @@ function TutorialComponent(props: propsIF) {
}, []);
const handleAssignments = () => {
- if(step?.assignment){
+ if (step?.assignment) {
const assignments = step.assignment.split(';');
assignments.map((assign) => {
const selector = assign.split('>')[0];
const value = assign.split('>')[1];
const el = document.querySelector(selector);
- if(el && el instanceof HTMLInputElement){
+ if (el && el instanceof HTMLInputElement) {
el.value = value;
}
- })
+ });
}
- }
+ };
- const handleActionTriggers = () => {
- if(step?.actionTrigger){
+ const handleActionTriggers = () => {
+ if (step?.actionTrigger) {
const el = document.querySelector(step.actionTrigger);
- if(el && el instanceof HTMLElement){
+ if (el && el instanceof HTMLElement) {
el.click();
}
}
- }
+ };
const handleOnCompletes = () => {
- if(onCompleteActionsRef.current && onCompleteActionsRef.current.length > 0){
+ if (
+ onCompleteActionsRef.current &&
+ onCompleteActionsRef.current.length > 0
+ ) {
onCompleteActionsRef.current.map((action) => {
const el = document.querySelector(action);
- if(el && el instanceof HTMLElement){
+ if (el && el instanceof HTMLElement) {
el.click();
}
- })
-
+ });
}
- }
+ };
-
const navigate = useNavigate();
const handlenNavigate = (url: string) => {
navigate(url);
- }
+ };
const renderNavigate = () => {
- if(step && step.navigate){
+ if (step && step.navigate) {
const path = step.navigate.path;
return (
<div
- className={styles.step_btn + ' ' + styles.navigate}
- onClick={() => handlenNavigate(path)}
- >
- {'>>'} {step.navigate.label}
- </div>
- )
+ className={styles.step_btn + ' ' + styles.navigate}
+ onClick={() => handlenNavigate(path)}
+ >
+ {'>>'} {step.navigate.label}
+ </div>
+ );
}
- }
+ };
useEffect(() => {
-
- const delay = stepIndex === 0 && props.initialTimeout && !initialTimeoutDone ? props.initialTimeout : 0;
- if(delay > 0 && focusOverlay.current){
+ const delay =
+ stepIndex === 0 && props.initialTimeout && !initialTimeoutDone
+ ? props.initialTimeout
+ : 0;
+ if (delay > 0 && focusOverlay.current) {
focusOverlay.current.style.display = 'none';
}
- if(step && step.element && props.externalComponents && props.externalComponents.get(step.element.toString()) !== undefined){
- setStepExternalComponent(props.externalComponents.get(step.element.toString()));
- }else{
+ if (
+ step &&
+ step.element &&
+ props.externalComponents &&
+ props.externalComponents.get(step.element.toString()) !== undefined
+ ) {
+ setStepExternalComponent(
+ props.externalComponents.get(step.element.toString()),
+ );
+ } else {
setStepExternalComponent(undefined);
}
@@ -306,14 +318,13 @@ function TutorialComponent(props: propsIF) {
handleTooltip();
handleAssignments();
handleActionTriggers();
- if(delay > 0){
+ if (delay > 0) {
setInitialTimeoutDone(true);
- if(focusOverlay.current){
+ if (focusOverlay.current) {
focusOverlay.current.style.display = 'block';
}
}
- },delay);
-
+ }, delay);
}, [step]);
const triggerTutorial = () => {
@@ -322,47 +333,50 @@ function TutorialComponent(props: propsIF) {
const navButtons = (forTooltip?: boolean) => (
<>
- {
- forTooltip && isMobile ?
- (<>
+ {forTooltip && isMobile ? (
+ <>
{
- <div
- className={`${styles.step_btn} ${styles.prev_btn} ${stepIndex == 0 ? styles.disabled : ''}`}
- onClick={prevStep}
- >
- {'<'}
- </div>
- }
- {stepIndex < steps.length - 1 && (
- <div
- className={styles.step_btn + ' ' + styles.next_button}
- onClick={nextStep}
- >
- {'>'}
- </div>
- )}
- </>)
- :
- (<>
+ <div
+ className={`${styles.step_btn} ${styles.prev_btn} ${stepIndex == 0 ? styles.disabled : ''}`}
+ onClick={prevStep}
+ >
+ {'<'}
+ </div>
+ }
+ {stepIndex < steps.length - 1 && (
+ <div
+ className={
+ styles.step_btn + ' ' + styles.next_button
+ }
+ onClick={nextStep}
+ >
+ {'>'}
+ </div>
+ )}
+ </>
+ ) : (
+ <>
{
- <div
- className={`${styles.step_btn} ${styles.prev_btn} ${stepIndex == 0 ? styles.disabled : ''}`}
- onClick={prevStep}
- >
- {'<'} Prev
- </div>
- }
- {stepIndex < steps.length - 1 && (
- <div
- className={styles.step_btn + ' ' + styles.next_button}
- onClick={nextStep}
- >
- Next {'>'}
- </div>
- )}
- </>)
- }
-
+ <div
+ className={`${styles.step_btn} ${styles.prev_btn} ${stepIndex == 0 ? styles.disabled : ''}`}
+ onClick={prevStep}
+ >
+ {'<'} Prev
+ </div>
+ }
+ {stepIndex < steps.length - 1 && (
+ <div
+ className={
+ styles.step_btn + ' ' + styles.next_button
+ }
+ onClick={nextStep}
+ >
+ Next {'>'}
+ </div>
+ )}
+ </>
+ )}
+
{stepIndex == steps.length - 1 && (
<div
className={styles.step_btn + ' ' + styles.complete_button}
@@ -372,22 +386,28 @@ function TutorialComponent(props: propsIF) {
</div>
)}
- { !forTooltip && !isMobile && (
+ {!forTooltip && !isMobile && (
<div
- className={styles.step_btn + ' ' + styles.dismiss_button}
- onClick={completeTutorial}
- >
- {'X'}
- </div>
+ className={styles.step_btn + ' ' + styles.dismiss_button}
+ onClick={completeTutorial}
+ >
+ {'X'}
+ </div>
)}
- { forTooltip && !isMobile && (
+ {forTooltip && !isMobile && (
<div
- className={styles.step_btn + ' ' + styles.dismiss_button + ' ' + styles.for_tooltip }
- onClick={completeTutorial}
- >
- {'X'}
- </div>
+ className={
+ styles.step_btn +
+ ' ' +
+ styles.dismiss_button +
+ ' ' +
+ styles.for_tooltip
+ }
+ onClick={completeTutorial}
+ >
+ {'X'}
+ </div>
)}
</>
);
@@ -399,34 +419,38 @@ function TutorialComponent(props: propsIF) {
{step && (
<div ref={tooltipWrapper} className={styles.tooltip_wrapper}>
-
- <div className={styles.tooltip_title}>{step.title}
-
-
- {showSteps && (
- <span className={styles.steps_on_tooltip}>
- {stepIndex + 1}
- <span style={{ opacity: 0.5 }}>/{steps.length}</span>
- </span>
- )}
-
+ <div className={styles.tooltip_title}>
+ {step.title}
+
+ {showSteps && (
+ <span className={styles.steps_on_tooltip}>
+ {stepIndex + 1}
+ <span style={{ opacity: 0.5 }}>
+ /{steps.length}
+ </span>
+ </span>
+ )}
</div>
- <div className={styles.tooltip_content}>{step.intro}</div>
+ <div className={styles.tooltip_content}>{step.intro}</div>
- {stepExternalComponent && (stepExternalComponent.placement === 'nav-before' || !stepExternalComponent.placement) &&
- (<>{stepExternalComponent.component}</>)
- }
+ {stepExternalComponent &&
+ (stepExternalComponent.placement === 'nav-before' ||
+ !stepExternalComponent.placement) && (
+ <>{stepExternalComponent.component}</>
+ )}
<div className={styles.tooltip_buttons_wrapper}>
{navButtons(true)}
{renderNavigate()}
- {stepExternalComponent && stepExternalComponent.placement === 'nav-end' &&
- (<>{stepExternalComponent.component}</>)
- }
+ {stepExternalComponent &&
+ stepExternalComponent.placement === 'nav-end' && (
+ <>{stepExternalComponent.component}</>
+ )}
</div>
- {stepExternalComponent && stepExternalComponent.placement === 'nav-after' &&
- (<>{stepExternalComponent.component}</>)
- }
+ {stepExternalComponent &&
+ stepExternalComponent.placement === 'nav-after' && (
+ <>{stepExternalComponent.component}</>
+ )}
<div className={styles.step_dots_wrapper}>
{steps.map((_, i) => (
diff --git a/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.module.css b/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.module.css
index 46fae3b7ae..e593a0bb37 100644
--- a/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.module.css
+++ b/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.module.css
@@ -1,5 +1,4 @@
-
-.replay_tuto_btn{
+.replay_tuto_btn {
position: fixed;
z-index: 99999;
top: 1.2rem;
@@ -10,43 +9,41 @@
border-radius: 100vw;
font-size: 1.3rem;
cursor: pointer;
- animation: opaAnim .5s ease-in-out forwards;
+ animation: opaAnim 0.5s ease-in-out forwards;
opacity: 0;
-
}
-@keyframes opaAnim{
- from{
+@keyframes opaAnim {
+ from {
opacity: 0;
}
- to{
+ to {
opacity: 1;
}
}
-.not_connected{
+.not_connected {
right: 14rem;
}
-.replay_tuto_btn svg{
+.replay_tuto_btn svg {
/* color: black; */
}
-@media only screen and (max-width: 600px){
- .replay_tuto_btn{
+@media only screen and (max-width: 600px) {
+ .replay_tuto_btn {
right: 7rem;
}
- .not_connected{
+ .not_connected {
right: 12rem;
}
}
-.connectButton{
+.connectButton {
background: var(--accent1, #0ccdff);
- padding: 0 .5rem;
- margin: 0 .5rem;
+ padding: 0 0.5rem;
+ margin: 0 0.5rem;
cursor: pointer;
border: none;
}
-
\ No newline at end of file
diff --git a/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.tsx b/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.tsx
index 1c6dc42220..490c2bc8ed 100644
--- a/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.tsx
+++ b/src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.tsx
@@ -34,33 +34,47 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
const [stepsFiltered, setStepsFiltered] = useState<Step[]>([]);
const [replayTutorial, setReplayTutorial] = useState<boolean>(false);
-
+
const {
walletModal: { open: openWalletModal },
} = useContext(AppStateContext);
- const {showTutosLocalStorage} = useFutaHomeContext();
-
+ const { showTutosLocalStorage } = useFutaHomeContext();
- const connectButton = (<button
- id='connect_wallet_button_page_header'
- onClick={openWalletModal}
- className={styles.connectButton}
->
- CONNECT WALLET
-</button>)
+ const connectButton = (
+ <button
+ id='connect_wallet_button_page_header'
+ onClick={openWalletModal}
+ className={styles.connectButton}
+ >
+ CONNECT WALLET
+ </button>
+ );
const getTutorialObjectForPage = (page: string) => {
switch (page) {
case 'auctions':
return { lsKey: 'tuto_auctions', steps: futaAuctionsSteps };
case 'account':
- return { lsKey: 'tuto_futa_account', steps: futaAccountSteps, disableDefault: true};
+ return {
+ lsKey: 'tuto_futa_account',
+ steps: futaAccountSteps,
+ disableDefault: true,
+ };
case 'auctionCreate':
- return { lsKey: 'tuto_futa_create',
- steps: futaCreateSteps,
- externalComponents:
- new Map<string, TutorialStepExternalComponent>([['#auctions_create_connect_button', {component: connectButton, placement: 'nav-end' }]])};
+ return {
+ lsKey: 'tuto_futa_create',
+ steps: futaCreateSteps,
+ externalComponents: new Map<
+ string,
+ TutorialStepExternalComponent
+ >([
+ [
+ '#auctions_create_connect_button',
+ { component: connectButton, placement: 'nav-end' },
+ ],
+ ]),
+ };
default:
return undefined;
}
@@ -174,7 +188,9 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
stepsFiltered.length > 0 &&
showTutorial &&
isTutoBuild &&
- (selectedTutorialRef.current && !selectedTutorialRef.current.disableDefault && showTutosLocalStorage);
+ selectedTutorialRef.current &&
+ !selectedTutorialRef.current.disableDefault &&
+ showTutosLocalStorage;
return (
<>
@@ -188,7 +204,9 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
showSteps={true}
onComplete={handleTutoFinish}
initialTimeout={600}
- externalComponents={selectedTutorialRef.current.externalComponents}
+ externalComponents={
+ selectedTutorialRef.current.externalComponents
+ }
/>
</>
)}
diff --git a/src/components/Home/CarouselControl/DotAnimation.module.css b/src/components/Home/CarouselControl/DotAnimation.module.css
index ecfcb595aa..30fe55aff7 100644
--- a/src/components/Home/CarouselControl/DotAnimation.module.css
+++ b/src/components/Home/CarouselControl/DotAnimation.module.css
@@ -1,5 +1,4 @@
-
-.dots{
+.dots {
position: fixed;
z-index: 100;
top: 50%;
@@ -11,28 +10,25 @@
display: flex;
flex-direction: column;
align-items: center;
- gap:8px;
- }
+ gap: 8px;
+}
- .dots span{
+.dots span {
cursor: pointer;
- background-color: var(--text3);;
-
- }
-
+ background-color: var(--text3);
+}
- .show_arrow{
-opacity: 1;
- }
+.show_arrow {
+ opacity: 1;
+}
- .disable_arrow{
+.disable_arrow {
opacity: 0;
pointer-events: none;
- }
-
- @media (max-width: 500px) {
+}
-.dots{
- display: none;
+@media (max-width: 500px) {
+ .dots {
+ display: none;
+ }
}
- }
\ No newline at end of file
diff --git a/src/components/Home/Section/Section.module.css b/src/components/Home/Section/Section.module.css
index 5d3d42824f..4d0c1c51c2 100644
--- a/src/components/Home/Section/Section.module.css
+++ b/src/components/Home/Section/Section.module.css
@@ -6,14 +6,9 @@
align-items: center; */
scroll-snap-align: center;
position: relative;
- }
-
+}
-
-
-
-
- .section .downarrow {
+.section .downarrow {
position: absolute;
bottom: 20px;
left: 0;
@@ -25,13 +20,10 @@
width: 40px;
height: 40px;
z-index: 2;
- }
-
+}
- @media (max-height: 715px) {
+@media (max-height: 715px) {
.section {
- height: auto;
-
-
- }
- }
\ No newline at end of file
+ height: auto;
+ }
+}
diff --git a/src/components/InitPool/InitPoolExtraInfo/InitPoolExtraInfo.module.css b/src/components/InitPool/InitPoolExtraInfo/InitPoolExtraInfo.module.css
index 857c6a6426..fa1f7f963a 100644
--- a/src/components/InitPool/InitPoolExtraInfo/InitPoolExtraInfo.module.css
+++ b/src/components/InitPool/InitPoolExtraInfo/InitPoolExtraInfo.module.css
@@ -46,7 +46,6 @@
.extra_row {
display: flex;
-
justify-content: space-between;
align-items: center;
diff --git a/src/components/LimitActionModal/LimitActionSettings/LimitActionSettings.tsx b/src/components/LimitActionModal/LimitActionSettings/LimitActionSettings.tsx
index c3da3f1c65..1cb9f3f768 100644
--- a/src/components/LimitActionModal/LimitActionSettings/LimitActionSettings.tsx
+++ b/src/components/LimitActionModal/LimitActionSettings/LimitActionSettings.tsx
@@ -17,7 +17,7 @@ export default function LimitActionSettings(props: propsIF) {
// values to generate preset buttons
const presets: number[] = [0.1, 0.3, 0.5];
// type derived as number-literal union for defined presets
- type presetValues = typeof presets[number];
+ type presetValues = (typeof presets)[number];
const slippageValue = 2;
diff --git a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css
index 4cb3fa6228..62e64ec0d8 100644
--- a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css
+++ b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.module.css
@@ -16,7 +16,7 @@
overflow: hidden;
}
-.portfolio_motion_container{
+.portfolio_motion_container {
display: flex;
flex-direction: column;
align-items: center;
@@ -45,8 +45,7 @@
border-radius: var(--border-radius);
}
-
-.tab_component_container{
+.tab_component_container {
position: relative;
width: 100%;
height: 100%;
@@ -56,14 +55,12 @@
background: var(--dark1);
}
@media only screen and (max-width: 768px) {
- .portfolio_control_container{
+ .portfolio_control_container {
display: none;
}
-
}
@media only screen and (min-width: 1280px) {
.portfolio_motion_container {
max-width: 400px;
}
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx
index faa566ca0d..217c6a1cc5 100644
--- a/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx
+++ b/src/components/Portfolio/ExchangeBalance/ExchangeBalance.tsx
@@ -2,7 +2,7 @@ import Deposit from './Deposit/Deposit';
import Withdraw from './Withdraw/Withdraw';
import Transfer from './Transfer/Transfer';
import closeSidebarImage from '../../../assets/images/sidebarImages/closeSidebar.svg';
-import styles from './ExchangeBalance.module.css'
+import styles from './ExchangeBalance.module.css';
import transferImage from '../../../assets/images/sidebarImages/transfer.svg';
import withdrawImage from '../../../assets/images/sidebarImages/withdraw.svg';
import depositImage from '../../../assets/images/sidebarImages/deposit.svg';
@@ -19,7 +19,6 @@ import IconWithTooltip from '../../Global/IconWithTooltip/IconWithTooltip';
import { CrocEnvContext } from '../../../contexts/CrocEnvContext';
import { ChainDataContext } from '../../../contexts/ChainDataContext';
-
import { UserDataContext } from '../../../contexts/UserDataContext';
import { TokenBalanceContext } from '../../../contexts/TokenBalanceContext';
import { TradeDataContext } from '../../../contexts/TradeDataContext';
@@ -38,7 +37,7 @@ export default function ExchangeBalance(props: propsIF) {
setFullLayoutActive,
isModalView = false,
setTokenModalOpen = () => null,
- setIsAutoLayout
+ setIsAutoLayout,
} = props;
const { mainnetProvider } = useContext(CrocEnvContext);
@@ -243,10 +242,11 @@ export default function ExchangeBalance(props: propsIF) {
];
const toggleFullLayoutActive = () => {
setFullLayoutActive(!fullLayoutActive);
- setIsAutoLayout && setIsAutoLayout(false); // Mark that the layout is now manually controlled
- };
+ setIsAutoLayout && setIsAutoLayout(false); // Mark that the layout is now manually controlled
+ };
const exchangeControl = (
- <div className={styles.portfolio_control_container}
+ <div
+ className={styles.portfolio_control_container}
id='portfolio_sidebar_toggle'
onClick={toggleFullLayoutActive}
>
@@ -261,14 +261,15 @@ export default function ExchangeBalance(props: propsIF) {
</div>
);
-
return (
<>
-
<div className={styles.portfolio_motion_container}>
- <div className={styles.portfolio_motion_sub_container} id='subcont'>
+ <div
+ className={styles.portfolio_motion_sub_container}
+ id='subcont'
+ >
<div className={styles.tab_component_container}>
- {(!fullLayoutActive || isModalView) && (
+ {(!fullLayoutActive || isModalView) && (
<TabComponent
data={accountData}
rightTabOptions={false}
@@ -279,15 +280,14 @@ export default function ExchangeBalance(props: propsIF) {
{!isModalView && exchangeControl}
</div>
</div>
- {(!fullLayoutActive || isModalView) && (
+ {(!fullLayoutActive || isModalView) && (
<p className={styles.portfolio_info_text}>
Collateral deposited into the Ambient Finance exchange
can be traded at lower gas costs and withdrawn at any
time.
</p>
)}
- </div>
-
+ </div>
</>
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Portfolio/PortfolioBanner/AddressPrint.tsx b/src/components/Portfolio/PortfolioBanner/AddressPrint.tsx
index c2ae40eb3f..f5ada30a8e 100644
--- a/src/components/Portfolio/PortfolioBanner/AddressPrint.tsx
+++ b/src/components/Portfolio/PortfolioBanner/AddressPrint.tsx
@@ -5,7 +5,8 @@ interface propsIF {
}
export default function AddressPrint(props: propsIF) {
- const address = props.address ?? '0x0000000000000000000000000000000000000000';
+ const address =
+ props.address ?? '0x0000000000000000000000000000000000000000';
const [paths, setPaths] = useState<
{ path: string | undefined; opacity: number; id: string }[]
@@ -127,7 +128,12 @@ export default function AddressPrint(props: propsIF) {
ref={containerRef}
width={'100%'}
height={'100%'}
- style={{ position: 'absolute', cursor: 'default', pointerEvents: 'none', overflow: 'hidden' }}
+ style={{
+ position: 'absolute',
+ cursor: 'default',
+ pointerEvents: 'none',
+ overflow: 'hidden',
+ }}
>
<defs>
{Array.from({ length: numLines }, (_, index) => (
diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx
index 73957bd2c1..bf21dd8b6a 100644
--- a/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx
+++ b/src/components/Portfolio/PortfolioBanner/PortfolioBanner.tsx
@@ -101,7 +101,7 @@ export default function PortfolioBanner(props: propsIF) {
// ... gets a new address for programmatic generation
const noisyLines = useMemo<JSX.Element | null>(() => {
// early return if address is not available (first render)
- if (!addressOfAccountDisplayed ) return null;
+ if (!addressOfAccountDisplayed) return null;
// locate rendered parent element in DOM by element ID
// const parentElem: HTMLElement | null =
// document.getElementById(BANNER_ID);
@@ -119,7 +119,7 @@ export default function PortfolioBanner(props: propsIF) {
return (
<div
- className={styles.portfolio_banner_rectangle_container}
+ className={styles.portfolio_banner_rectangle_container}
id={BANNER_ID}
>
{noisyLines}
diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css
index 1eee7ee839..776d0ffe8f 100644
--- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css
+++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.module.css
@@ -5,7 +5,6 @@
gap: 16px;
-
border-radius: 4px;
}
.NFTBannerHeader {
@@ -19,7 +18,7 @@
justify-content: space-between;
}
-.NFTHeaderSettings{
+.NFTHeaderSettings {
display: flex;
gap: 5px;
@@ -72,11 +71,10 @@
.NFTBannerAccountContainer {
display: grid;
box-shadow: 4px 4px 6px #0d1117;
- /* position: absolute; */
- position: absolute;
- top: 160px;
- left: 100px;
-
+ /* position: absolute; */
+ position: absolute;
+ top: 160px;
+ left: 100px;
border-color: var(--accent1);
background: #0d1117;
@@ -86,7 +84,5 @@
width: 350px;
max-height: 570px;
height: auto;
-
-
}
}
diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx
index 9e55c1fffc..d960d7b3bb 100644
--- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx
+++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccount.tsx
@@ -43,7 +43,7 @@ import { getAvatarForType } from '../../../Chat/ChatRenderUtils';
import { isAutoGeneratedAvatar } from '../../../Chat/ChatUtils';
import useOnClickOutside from '../../../../utils/hooks/useOnClickOutside';
import ChatToaster from '../../../Chat/ChatToaster/ChatToaster';
-import styles from './NFTBannerAccount.module.css'
+import styles from './NFTBannerAccount.module.css';
interface NFTBannerAccountProps {
showNFTPage: boolean;
setShowNFTPage: React.Dispatch<boolean>;
@@ -390,26 +390,21 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) {
const handleSaveButtonClick = (event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation();
-
+
if (isSaveActive === 0) {
handleNftSelection();
setIsSaveActive(!isVerified ? 3 : 1);
-
}
-
- };
-
+ };
return (
-
-
- <section className={styles.NFTBannerAccountContainer}
+ <section
+ className={styles.NFTBannerAccountContainer}
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation();
setIsContractNameOptionTabActive(false);
}}
ref={NftComponentItemRef}
-
>
<div>
<NFTBannerHeader>
@@ -757,7 +752,7 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) {
<NFTBannerFooter>
<SaveButton
isActive={isSaveActive}
- onClick={ handleSaveButtonClick}
+ onClick={handleSaveButtonClick}
>
{isSaveActive === 1
? 'Saving..'
@@ -775,7 +770,6 @@ export default function NFTBannerAccount(props: NFTBannerAccountProps) {
text={toastrText}
type={toastrType}
/>
- </section>
-
+ </section>
);
}
diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts
index fb5a107ac1..e1d19f9fe0 100644
--- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts
+++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/NFTBannerAccountCss.ts
@@ -27,9 +27,9 @@ const NFTBannerAccountContainer = styled.div<{
background: #0d1117;
- z-index: 9999999 ;
+ z-index: 9999999;
- @media (max-width: 768px) {
+ @media (max-width: 768px) {
border: none;
position: static;
transform: none;
diff --git a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css
index e6f6e76ea9..169f8371d0 100644
--- a/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css
+++ b/src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css
@@ -1,7 +1,7 @@
.portfolio_banner_account {
display: flex;
flex-direction: column;
- align-items:flex-start;
+ align-items: flex-start;
width: 100%;
gap: 8px;
background: rgba(18, 18, 26, 0.3);
@@ -15,8 +15,6 @@
align-items: flex-end;
z-index: 1;
gap: 12px;
-
-
}
.jazzicon {
@@ -87,32 +85,28 @@
color: var(--text1);
}
@media only screen and (max-width: 568px) {
-.user_facing_content{
- width: 100%;
- max-width: 100%;
- display: flex;
- display: grid;
- grid-template-columns: 65px 100px auto;
-}
-
-.button_bank{
+ .user_facing_content {
+ width: 100%;
+ max-width: 100%;
+ display: flex;
+ display: grid;
+ grid-template-columns: 65px 100px auto;
+ }
- width: 100%;
- /* max-width: 200px; */
- display: flex;
- justify-content: flex-end;
- align-items: flex-end;
-
-}
+ .button_bank {
+ width: 100%;
+ /* max-width: 200px; */
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ }
-.button_bank button{
- margin: 0 5px;
-}
+ .button_bank button {
+ margin: 0 5px;
+ }
}
@media only screen and (max-width: 768px) {
-
-
.address_or_ens {
font-size: var(--body-size);
}
@@ -123,7 +117,6 @@
justify-content: space-between;
width: 100%;
-
max-width: 250px;
}
.portfolio_banner_account {
@@ -140,8 +133,5 @@
@media only screen and (min-width: 1280px) {
.portfolio_banner_account {
width: 380.16px;
-
}
-
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Portfolio/PortfolioTabs/PortfolioTabs.module.css b/src/components/Portfolio/PortfolioTabs/PortfolioTabs.module.css
index 95237c668a..491918ac40 100644
--- a/src/components/Portfolio/PortfolioTabs/PortfolioTabs.module.css
+++ b/src/components/Portfolio/PortfolioTabs/PortfolioTabs.module.css
@@ -6,44 +6,42 @@
background: var(--dark1);
align-items: stretch;
flex: 1;
- }
+}
- .mobile_tabs_container{
+.mobile_tabs_container {
display: flex;
flex-direction: column;
height: 100%;
gap: 8px;
- border: 1px solid var(--dark3)
- }
+ border: 1px solid var(--dark3);
+}
- .mobile_tabs_button_container{
+.mobile_tabs_button_container {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
- }
+}
- .mobile_tabs_button_container button{
+.mobile_tabs_button_container button {
background: transparent;
outline: none;
color: var(--text2);
border: none;
- border-bottom: 1px solid transparent;
+ border-bottom: 1px solid transparent;
font-size: 12px;
cursor: pointer;
+}
- }
-
- .tabActive{
+.tabActive {
color: var(--accent1);
border-bottom: 1px solid var(--accent1);
- }
-
- @media only screen and (min-device-width: 320px) and (max-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) {
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) {
.portfolio_tabs_container {
- margin: 0 auto;
- width: 100%;
- padding: 0 0.1rem;
+ margin: 0 auto;
+ width: 100%;
+ padding: 0 0.1rem;
}
- }
-
\ No newline at end of file
+}
diff --git a/src/components/RangeActionModal/RangeActionModal.module.css b/src/components/RangeActionModal/RangeActionModal.module.css
index 3a3916c8ba..a40fd6b1f9 100644
--- a/src/components/RangeActionModal/RangeActionModal.module.css
+++ b/src/components/RangeActionModal/RangeActionModal.module.css
@@ -15,7 +15,6 @@
position: relative;
padding: 16px;
padding-top: 0px;
-
}
.settings_button {
diff --git a/src/components/RangeActionModal/RangeActionSettings/RangeActionSettings.tsx b/src/components/RangeActionModal/RangeActionSettings/RangeActionSettings.tsx
index cf063831cd..e96fb13dd4 100644
--- a/src/components/RangeActionModal/RangeActionSettings/RangeActionSettings.tsx
+++ b/src/components/RangeActionModal/RangeActionSettings/RangeActionSettings.tsx
@@ -17,7 +17,7 @@ export default function RangeActionSettings(props: propsIF) {
);
// union type pf number-literal values in presets array
- type presetValues = typeof presets[number];
+ type presetValues = (typeof presets)[number];
return (
<div className={styles.main_container}>
diff --git a/src/components/RangeActionModal/RemoveRangeWidth/RemoveRangeWidth.tsx b/src/components/RangeActionModal/RemoveRangeWidth/RemoveRangeWidth.tsx
index de38537160..bc5a608bc5 100644
--- a/src/components/RangeActionModal/RemoveRangeWidth/RemoveRangeWidth.tsx
+++ b/src/components/RangeActionModal/RemoveRangeWidth/RemoveRangeWidth.tsx
@@ -13,7 +13,7 @@ export default function RemoveRangeWidth(props: propsIF) {
// values to generate remove liquidity preset buttons
const removalPresets: number[] = [10, 25, 50, 100];
// type annotation as union of number-literals in `removalPresets`
- type presetValues = typeof removalPresets[number];
+ type presetValues = (typeof removalPresets)[number];
// id attribute for removal slider input (referenced in multiple places)
const sliderFieldId = 'remove-range-slider';
diff --git a/src/components/Swap/SwapExtraInfo/SwapExtraInfo.tsx b/src/components/Swap/SwapExtraInfo/SwapExtraInfo.tsx
index 47e3ab8855..4f07734584 100644
--- a/src/components/Swap/SwapExtraInfo/SwapExtraInfo.tsx
+++ b/src/components/Swap/SwapExtraInfo/SwapExtraInfo.tsx
@@ -41,7 +41,7 @@ function SwapExtraInfo(props: propsIF) {
const displayPriceWithDenom =
isDenomBase && poolPriceDisplay
? 1 / poolPriceDisplay
- : poolPriceDisplay ?? 0;
+ : (poolPriceDisplay ?? 0);
const displayPriceString = displayPriceWithDenom
? getFormattedNumber({
diff --git a/src/components/Trade/Limit/ConfirmLimitModal/ConfirmLimitModal.tsx b/src/components/Trade/Limit/ConfirmLimitModal/ConfirmLimitModal.tsx
index 93fae554b4..94083a2789 100644
--- a/src/components/Trade/Limit/ConfirmLimitModal/ConfirmLimitModal.tsx
+++ b/src/components/Trade/Limit/ConfirmLimitModal/ConfirmLimitModal.tsx
@@ -54,7 +54,7 @@ export default function ConfirmLimitModal(props: propsIF) {
const displayPoolPriceWithDenom =
isDenomBase && poolPriceDisplay
? 1 / poolPriceDisplay
- : poolPriceDisplay ?? 0;
+ : (poolPriceDisplay ?? 0);
const displayPoolPriceString = getFormattedNumber({
value: displayPoolPriceWithDenom,
diff --git a/src/components/Trade/Limit/LimitExtraInfo/LimitExtraInfo.tsx b/src/components/Trade/Limit/LimitExtraInfo/LimitExtraInfo.tsx
index 538fccf38b..ee0469c90d 100644
--- a/src/components/Trade/Limit/LimitExtraInfo/LimitExtraInfo.tsx
+++ b/src/components/Trade/Limit/LimitExtraInfo/LimitExtraInfo.tsx
@@ -34,7 +34,7 @@ function LimitExtraInfo(props: propsIF) {
const displayPriceWithDenom =
isDenomBase && poolPriceDisplay
? 1 / poolPriceDisplay
- : poolPriceDisplay ?? 0;
+ : (poolPriceDisplay ?? 0);
const displayPriceString = displayPriceWithDenom
? getFormattedNumber({
diff --git a/src/components/Trade/Range/ConfirmRangeModal/SelectedRange/SelectedRange.tsx b/src/components/Trade/Range/ConfirmRangeModal/SelectedRange/SelectedRange.tsx
index f6d15e3d1a..06c0744024 100644
--- a/src/components/Trade/Range/ConfirmRangeModal/SelectedRange/SelectedRange.tsx
+++ b/src/components/Trade/Range/ConfirmRangeModal/SelectedRange/SelectedRange.tsx
@@ -67,7 +67,7 @@ function SelectedRange(props: propsIF) {
: 1 / initialPrice
: isDenomBase && poolPriceDisplay
? 1 / poolPriceDisplay
- : poolPriceDisplay ?? 0;
+ : (poolPriceDisplay ?? 0);
const displayPriceString = displayPriceWithDenom
? getFormattedNumber({
diff --git a/src/components/Trade/Range/RangeExtraInfo/RangeExtraInfo.tsx b/src/components/Trade/Range/RangeExtraInfo/RangeExtraInfo.tsx
index e21761730b..3618df7a82 100644
--- a/src/components/Trade/Range/RangeExtraInfo/RangeExtraInfo.tsx
+++ b/src/components/Trade/Range/RangeExtraInfo/RangeExtraInfo.tsx
@@ -31,7 +31,7 @@ function RangeExtraInfo(props: propsIF) {
const displayPriceWithDenom =
isDenomBase && poolPriceDisplay
? 1 / poolPriceDisplay
- : poolPriceDisplay ?? 0;
+ : (poolPriceDisplay ?? 0);
const displayPriceString = displayPriceWithDenom
? getFormattedNumber({
diff --git a/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.module.css b/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.module.css
index 9fa6f135b6..f9bc50b4e4 100644
--- a/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.module.css
+++ b/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.module.css
@@ -1,11 +1,11 @@
-.main_container{
+.main_container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: var(--header1-size);
- color: var(--text2)
+ color: var(--text2);
}
.main_container svg {
diff --git a/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.tsx b/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.tsx
index 75639ea599..882f5d8c53 100644
--- a/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.tsx
+++ b/src/components/Trade/Reposition/RepositionHeader/RepositionHeader.tsx
@@ -44,8 +44,6 @@ function RepositionHeader(props: propsIF) {
return (
<>
<header className={styles.main_container}>
-
-
<img
className={styles.settings_icon}
src={settingsIcon}
diff --git a/src/components/Trade/Reposition/RepositionPriceInfo/RepositionPriceInfo.tsx b/src/components/Trade/Reposition/RepositionPriceInfo/RepositionPriceInfo.tsx
index 21ef345455..b4e75f311e 100644
--- a/src/components/Trade/Reposition/RepositionPriceInfo/RepositionPriceInfo.tsx
+++ b/src/components/Trade/Reposition/RepositionPriceInfo/RepositionPriceInfo.tsx
@@ -192,8 +192,8 @@ export default function RepositionPriceInfo(props: IRepositionPriceInfoProps) {
isCurrentPositionEmpty
? '...'
: rangeWidthPercentage === 100
- ? '0'
- : minPriceDisplay
+ ? '0'
+ : minPriceDisplay
}
/>
<RowDisplay
@@ -203,8 +203,8 @@ export default function RepositionPriceInfo(props: IRepositionPriceInfoProps) {
isCurrentPositionEmpty
? '...'
: rangeWidthPercentage === 100
- ? '∞'
- : maxPriceDisplay
+ ? '∞'
+ : maxPriceDisplay
}
/>
<aside className={styles.divider} />
diff --git a/src/components/Trade/TableInfo/TableInfo.styles.ts b/src/components/Trade/TableInfo/TableInfo.styles.ts
index a90826c157..65635dd896 100644
--- a/src/components/Trade/TableInfo/TableInfo.styles.ts
+++ b/src/components/Trade/TableInfo/TableInfo.styles.ts
@@ -8,11 +8,8 @@ interface BoxContainerProps {
}
const MainSection = styled.section`
-
height: 100%;
padding: 8px;
-
-
`;
const BoxContainer = styled.div<BoxContainerProps>`
@@ -24,9 +21,6 @@ const BoxContainer = styled.div<BoxContainerProps>`
` backdrop-filter: blur(10px);
border-radius: 0.25rem;`}
height: 100%;
-
-
-
`;
const FeaturedBoxInnerContainer = styled.div<BoxContainerProps>`
diff --git a/src/components/Trade/TableInfo/TableInfo.tsx b/src/components/Trade/TableInfo/TableInfo.tsx
index a3e76b4d4f..831258953a 100644
--- a/src/components/Trade/TableInfo/TableInfo.tsx
+++ b/src/components/Trade/TableInfo/TableInfo.tsx
@@ -62,7 +62,7 @@ export default function TableInfo() {
className='custom_scroll_ambient'
fullWidth
fullHeight
- style={{overflow: 'hidden'}}
+ style={{ overflow: 'hidden' }}
>
<GridContainer
numCols={smallScreen ? 1 : 2}
diff --git a/src/components/Trade/TradeModules/SubmitTransaction/TransactionException/TransactionException.module.css b/src/components/Trade/TradeModules/SubmitTransaction/TransactionException/TransactionException.module.css
index 59d5fd7642..1d01033ed8 100644
--- a/src/components/Trade/TradeModules/SubmitTransaction/TransactionException/TransactionException.module.css
+++ b/src/components/Trade/TradeModules/SubmitTransaction/TransactionException/TransactionException.module.css
@@ -14,39 +14,34 @@
color: var(--text2);
}
-.formatted_error{
+.formatted_error {
word-break: break-all;
height: 50px;
overflow-y: scroll;
}
-.formatted_error_container{
-
+.formatted_error_container {
display: flex;
flex-direction: column;
gap: 8px;
-
}
-.copy_error{
+.copy_error {
width: 80%;
background: none;
margin: 0 auto;
cursor: pointer;
outline: none;
display: flex;
-padding: 4px 8px;
-justify-content: space-between;
-align-items: center;
-border-radius: 4px;
-border: 1px solid var(--text2);
-align-self: stretch;
-color: var(--text2);
-
+ padding: 4px 8px;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 4px;
+ border: 1px solid var(--text2);
+ align-self: stretch;
+ color: var(--text2);
}
-.copy_error:hover{
+.copy_error:hover {
border: 1px solid var(--accent4);
color: var(--accent4);
-
-
-}
\ No newline at end of file
+}
diff --git a/src/components/Trade/TradeModules/TradeLinks.module.css b/src/components/Trade/TradeModules/TradeLinks.module.css
index d5d39ca07a..8e798ab133 100644
--- a/src/components/Trade/TradeModules/TradeLinks.module.css
+++ b/src/components/Trade/TradeModules/TradeLinks.module.css
@@ -1,10 +1,9 @@
-.container{
+.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
-
}
.trade_link {
width: 100%;
@@ -28,15 +27,12 @@
@media only screen and (min-width: 769px) {
.trade_link {
-
width: 116px;
height: 25px;
}
-
-
-.container{
- height: 25px;
- margin: 0 0 16px 0
-}
-}
\ No newline at end of file
+ .container {
+ height: 25px;
+ margin: 0 0 16px 0;
+ }
+}
diff --git a/src/components/Trade/TradeModules/TradeModuleHeader.module.css b/src/components/Trade/TradeModules/TradeModuleHeader.module.css
index e790a0b839..22e16e5e2a 100644
--- a/src/components/Trade/TradeModules/TradeModuleHeader.module.css
+++ b/src/components/Trade/TradeModules/TradeModuleHeader.module.css
@@ -1,11 +1,11 @@
-.main_container{
+.main_container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: var(--header1-size);
- color: var(--text2)
+ color: var(--text2);
}
.main_container svg {
@@ -18,40 +18,34 @@
color: var(--accent1) !important;
}
-
-.mobile_container{
+.mobile_container {
width: 100%;
-
-
-
+
align-items: center;
height: 35px;
display: grid;
grid-template-columns: 1fr 50px;
gap: 8px;
-
-
-
}
-.icon_container{
+.icon_container {
outline: transparent;
border: transparent;
background: var(--dark2);
- display: flex;
-
+ display: flex;
+
justify-content: center;
align-items: center;
padding: 2px 0;
border-radius: var(--border-radius);
}
-.token_pair{
+.token_pair {
color: var(--text1);
font-size: var(--header1-size);
cursor: pointer;
}
-.swap_title{
+.swap_title {
color: var(--text1);
-}
\ No newline at end of file
+}
diff --git a/src/components/Trade/TradeTabs/Orders/OrderTable/OrderRow.tsx b/src/components/Trade/TradeTabs/Orders/OrderTable/OrderRow.tsx
index 40daa6a6de..4908d3a778 100644
--- a/src/components/Trade/TradeTabs/Orders/OrderTable/OrderRow.tsx
+++ b/src/components/Trade/TradeTabs/Orders/OrderTable/OrderRow.tsx
@@ -220,7 +220,7 @@ function OrderRow(props: propsIF) {
sideTypeColumn,
tokensColumn,
statusDisplay,
- hiddenIDColumn
+ hiddenIDColumn,
} = orderRowConstants(orderRowConstantsProps);
const handleKeyPress: React.KeyboardEventHandler<HTMLDivElement> = (
diff --git a/src/components/Trade/TradeTabs/Orders/Orders.tsx b/src/components/Trade/TradeTabs/Orders/Orders.tsx
index 6f9c65269e..e6de475962 100644
--- a/src/components/Trade/TradeTabs/Orders/Orders.tsx
+++ b/src/components/Trade/TradeTabs/Orders/Orders.tsx
@@ -123,7 +123,9 @@ function Orders(props: propsIF) {
const selectedBaseAddress: string = baseToken.address;
const selectedQuoteAddress: string = quoteToken.address;
- const prevBaseQuoteAddressRef = useRef<string>(selectedBaseAddress + selectedQuoteAddress);
+ const prevBaseQuoteAddressRef = useRef<string>(
+ selectedBaseAddress + selectedQuoteAddress,
+ );
const [showInfiniteScroll, setShowInfiniteScroll] = useState<boolean>(
!isAccountView && showAllData,
@@ -134,8 +136,10 @@ function Orders(props: propsIF) {
}, [isAccountView, showAllData]);
useEffect(() => {
-
- if(prevBaseQuoteAddressRef.current !== selectedBaseAddress + selectedQuoteAddress){
+ if (
+ prevBaseQuoteAddressRef.current !==
+ selectedBaseAddress + selectedQuoteAddress
+ ) {
setPagesVisible([0, 1]);
setPageDataCountShouldReset(true);
setExtraPagesAvailable(0);
@@ -146,8 +150,9 @@ function Orders(props: propsIF) {
setLastFetchedCount(0);
setHotTransactions([]);
}
-
- prevBaseQuoteAddressRef.current = selectedBaseAddress + selectedQuoteAddress;
+
+ prevBaseQuoteAddressRef.current =
+ selectedBaseAddress + selectedQuoteAddress;
}, [selectedBaseAddress + selectedQuoteAddress]);
const [pageDataCountShouldReset, setPageDataCountShouldReset] =
diff --git a/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx b/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx
index b33e802cc9..6686bb62c2 100644
--- a/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx
+++ b/src/components/Trade/TradeTabs/Orders/orderRowConstants.tsx
@@ -151,8 +151,14 @@ export const orderRowConstants = (props: propsIF) => {
);
const hiddenIDColumn = (
- <RowItem hover data-label='hidden-id' role='button' style={{display: 'none'}} tabIndex={0}>
- <span>{posHash}</span>
+ <RowItem
+ hover
+ data-label='hidden-id'
+ role='button'
+ style={{ display: 'none' }}
+ tabIndex={0}
+ >
+ <span>{posHash}</span>
</RowItem>
);
@@ -523,6 +529,6 @@ export const orderRowConstants = (props: propsIF) => {
sideTypeColumn,
tokensColumn,
statusDisplay,
- hiddenIDColumn
+ hiddenIDColumn,
};
};
diff --git a/src/components/Trade/TradeTabs/Ranges/RangesTable/RangesRow.tsx b/src/components/Trade/TradeTabs/Ranges/RangesTable/RangesRow.tsx
index 4efcf30cd4..6f61964284 100644
--- a/src/components/Trade/TradeTabs/Ranges/RangesTable/RangesRow.tsx
+++ b/src/components/Trade/TradeTabs/Ranges/RangesTable/RangesRow.tsx
@@ -5,7 +5,7 @@ import {
memo,
Dispatch,
SetStateAction,
- MutableRefObject
+ MutableRefObject,
} from 'react';
import {
PositionIF,
@@ -44,7 +44,7 @@ function RangesRow(props: propsIF) {
openDetailsModal,
openActionModal,
setRangeModalAction,
- observedRowRef
+ observedRowRef,
} = props;
const {
snackbar: { open: openSnackbar },
@@ -234,7 +234,7 @@ function RangesRow(props: propsIF) {
tokenValues,
apyDisplay,
rangeDisplay,
- hiddenIDColumn
+ hiddenIDColumn,
} = rangeRowConstants(rangeRowConstantsProps);
return (
diff --git a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.module.css b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.module.css
index 4fda81c2cf..6ed52a5b22 100644
--- a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.module.css
+++ b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.module.css
@@ -1,52 +1,49 @@
-
-
-
-@keyframes opaAnim{
-
- 0%, 100%{
+@keyframes opaAnim {
+ 0%,
+ 100% {
opacity: 1;
}
- 50%{
- opacity: .2;
+ 50% {
+ opacity: 0.2;
}
}
-@keyframes barAnim{
- 0%, 100%{
+@keyframes barAnim {
+ 0%,
+ 100% {
width: 100%;
opacity: 1;
}
-
- 50%{
+
+ 50% {
width: 10%;
- opacity: .2;
+ opacity: 0.2;
}
}
-@keyframes barAnim2{
- 0%{
+@keyframes barAnim2 {
+ 0% {
left: -10%;
width: 10%;
- opacity: .3;
+ opacity: 0.3;
background-color: var(--accent2);
}
-
- 50%{
+
+ 50% {
width: 30%;
opacity: 1;
background-color: var(--accent1);
}
-
- 100%{
+
+ 100% {
width: 10%;
left: 120%;
- opacity: .2;
+ opacity: 0.2;
background-color: var(--accent2);
}
}
-
-.data_fetching_panel{
+.data_fetching_panel {
position: absolute;
bottom: 0;
width: 100%;
@@ -56,14 +53,13 @@
z-index: 4;
}
-.data_fetching_text{
+.data_fetching_text {
opacity: 1;
animation: opaAnim ease-in-out 1s infinite;
- margin-bottom: .5rem;
-
+ margin-bottom: 0.5rem;
}
-.data_fetching_bar{
+.data_fetching_bar {
display: block;
height: 2px;
background: var(--accent1);
@@ -71,10 +67,10 @@
margin: 0 auto;
}
-.data_fetching_bar2{
+.data_fetching_bar2 {
display: block;
width: 10%;
- height: .2rem;
+ height: 0.2rem;
position: absolute;
bottom: 0;
left: -20%;
@@ -82,5 +78,3 @@
z-index: 6;
animation: barAnim2 ease-in-out 1s infinite;
}
-
-
diff --git a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx
index 7f079d2add..2283f75e65 100644
--- a/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx
+++ b/src/components/Trade/TradeTabs/TableRowsInfiniteScroll.tsx
@@ -1,12 +1,22 @@
-import { Dispatch, memo, SetStateAction, useEffect, useRef, useState} from 'react';
+import {
+ Dispatch,
+ memo,
+ SetStateAction,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
import { RiArrowUpSLine } from 'react-icons/ri';
-import { } from '../../../ambient-utils/api';
+import {} from '../../../ambient-utils/api';
import {
LimitOrderIF,
PositionIF,
- TransactionIF
+ TransactionIF,
} from '../../../ambient-utils/types';
-import { ScrollToTopButton, ScrollToTopButtonMobile } from '../../../styled/Components/TransactionTable';
+import {
+ ScrollToTopButton,
+ ScrollToTopButtonMobile,
+} from '../../../styled/Components/TransactionTable';
import useMediaQuery from '../../../utils/hooks/useMediaQuery';
import { domDebug } from '../../Chat/DomDebugger/DomDebuggerUtils';
import TableRows from './TableRows';
@@ -29,8 +39,8 @@ interface propsIF {
extraPagesAvailable: number;
pageDataCount?: number[];
dataPerPage?: number;
- tableKey?: string
- lastFetchedCount?: number
+ tableKey?: string;
+ lastFetchedCount?: number;
setLastFetchedCount?: Dispatch<SetStateAction<number>>;
moreDataLoading: boolean;
componentLock?: boolean;
@@ -48,7 +58,7 @@ enum InfScrollAction {
ADD_MORE_DATA,
SLIGHT_SCROLL,
SUCCESS,
- FAIL
+ FAIL,
}
enum ScrollPosition {
@@ -56,7 +66,6 @@ enum ScrollPosition {
BOTTOM,
}
-
function TableRowsInfiniteScroll({
type,
data,
@@ -76,10 +85,8 @@ function TableRowsInfiniteScroll({
setLastFetchedCount,
moreDataLoading,
componentLock,
- scrollOnTopTresholdRatio
-
+ scrollOnTopTresholdRatio,
}: propsIF) {
-
const isIOS = (): boolean => {
const userAgent = navigator.userAgent;
return /iPad|iPhone|iPod/.test(userAgent);
@@ -89,18 +96,17 @@ function TableRowsInfiniteScroll({
const wrapperID = tableKey ? tableKey : '';
- const txSpanSelectorForScrollMethod = `#infinite_scroll_wrapper_${wrapperID} div[data-label='hidden-id'] > span`;
- const txSpanSelectorForBindMethod = 'div[data-label="hidden-id"]';
+ const txSpanSelectorForScrollMethod = `#infinite_scroll_wrapper_${wrapperID} div[data-label='hidden-id'] > span`;
+ const txSpanSelectorForBindMethod = 'div[data-label="hidden-id"]';
const debugMode = false;
const markRows = false;
- const[manualMode, setManualMode] = useState(false);
+ const [manualMode, setManualMode] = useState(false);
const manualModeRef = useRef<boolean>();
manualModeRef.current = manualMode;
const [showManualScrollDown, setShowManualScrollDown] = useState(false);
const [showManualScrollUp, setShowManualScrollUp] = useState(false);
-
const moreDataLoadingRef = useRef<boolean>();
moreDataLoadingRef.current = moreDataLoading;
@@ -108,11 +114,9 @@ function TableRowsInfiniteScroll({
const componentLockRef = useRef<boolean>();
componentLockRef.current = componentLock;
-
const lastRowRef = useRef<HTMLDivElement | null>(null);
const firstRowRef = useRef<HTMLDivElement | null>(null);
-
const [lastSeenTxID, setLastSeenTxID] = useState<string>('');
const lastSeenTxIDRef = useRef<string>();
lastSeenTxIDRef.current = lastSeenTxID;
@@ -152,61 +156,55 @@ function TableRowsInfiniteScroll({
const reqLockRef = useRef<boolean>();
reqLockRef.current = reqLock;
-
const [actionHistory, setActionHistory] = useState('');
-
const bindTmLockAutoScroll = () => {
const baseTimeout = 2000;
- if(lastFetchedCount && lastFetchedCount > 0){
- if(lastFetchedCount >= 30){
+ if (lastFetchedCount && lastFetchedCount > 0) {
+ if (lastFetchedCount >= 30) {
return baseTimeout;
- }else if ( lastFetchedCount >= 15){
- return baseTimeout * .75;
- } else{
- return baseTimeout * .5;
+ } else if (lastFetchedCount >= 15) {
+ return baseTimeout * 0.75;
+ } else {
+ return baseTimeout * 0.5;
}
-
- }else{
+ } else {
return baseTimeout;
}
- }
+ };
const tmReadyState = 100;
const tmLockShift = 500;
const tmLockReq = 700;
const tmLockAutoScroll = bindTmLockAutoScroll();
-
-
const bindWrapperEl = () => {
- if(isSmallScreen){
- return document.getElementById(`infinite_scroll_wrapper_${wrapperID}`)?.parentElement;
- }else{
- return document.getElementById(`infinite_scroll_wrapper_${wrapperID}`)?.parentElement?.parentElement?.parentElement;
+ if (isSmallScreen) {
+ return document.getElementById(
+ `infinite_scroll_wrapper_${wrapperID}`,
+ )?.parentElement;
+ } else {
+ return document.getElementById(
+ `infinite_scroll_wrapper_${wrapperID}`,
+ )?.parentElement?.parentElement?.parentElement;
}
- }
+ };
-
const wrapperEl = bindWrapperEl();
-
const bindTableReadyState = (newState: boolean) => {
- if(newState === true){
+ if (newState === true) {
setIsTableReady(true);
- }
- else{
+ } else {
setIsTableReady(false);
}
- }
-
-
+ };
const scrollToTop = () => {
setActionHistory('');
setLastSeenTxID('');
setPagesVisible([0, 1]);
- if(wrapperEl){
+ if (wrapperEl) {
wrapperEl.scrollTo({
top: 0,
behavior: 'instant' as ScrollBehavior,
@@ -218,26 +216,21 @@ function TableRowsInfiniteScroll({
behavior: 'instant' as ScrollBehavior,
});
doIphoneFix();
- }, tmReadyState)
+ }, tmReadyState);
}
lockShift();
};
-
- const triggerAutoScroll = (
- direction: ScrollDirection,
- ) => {
+
+ const triggerAutoScroll = (direction: ScrollDirection) => {
bindTableReadyState(true);
setAutoScroll(true);
setAutoScrollDirection(direction);
- setTimeout(
- () => {
- setAutoScroll(false);
- },
- tmLockAutoScroll,
- );
setTimeout(() => {
- bindTableReadyState(true)
- }, tmReadyState)
+ setAutoScroll(false);
+ }, tmLockAutoScroll);
+ setTimeout(() => {
+ bindTableReadyState(true);
+ }, tmReadyState);
};
const lockShift = () => {
@@ -245,72 +238,162 @@ function TableRowsInfiniteScroll({
setTimeout(() => {
setShiftLock(false);
}, tmLockShift);
- }
+ };
const shiftUp = (): void => {
- if(shiftLockRef.current === true) {
+ if (shiftLockRef.current === true) {
bindTableReadyState(true);
return;
}
lockShift();
setTimeout(() => {
bindTableReadyState(true);
- }, tmReadyState)
+ }, tmReadyState);
setPagesVisible((prev) => [prev[0] - 1, prev[1] - 1]);
triggerAutoScroll(ScrollDirection.UP);
addToActionHistory(InfScrollAction.SHIFT_UP);
};
-
+
const shiftDown = (): void => {
- if(shiftLockRef.current === true) {
+ if (shiftLockRef.current === true) {
bindTableReadyState(true);
return;
}
lockShift();
setTimeout(() => {
bindTableReadyState(true);
- }, tmReadyState)
+ }, tmReadyState);
setPagesVisible((prev) => [prev[0] + 1, prev[1] + 1]);
triggerAutoScroll(ScrollDirection.DOWN);
- addToActionHistory(InfScrollAction.SHIFT_DOWN)
+ addToActionHistory(InfScrollAction.SHIFT_DOWN);
};
-
-
const renderDebugData = () => {
-
- if(debugMode){
-
- const renderedRows = document.querySelectorAll(txSpanSelectorForScrollMethod).length;
-
- return (<>
- <span style={{fontSize: '.72rem'}}>
- <div style={{display: 'none', padding: '.5rem 1rem', background: 'black', color: `${isTableReady ? 'rgba(0, 255,0)' : 'rgba(255, 0,0)'}`, position: 'absolute', left: '1rem', top: '1.7rem'}} onClick={() => {setManualMode(!manualModeRef.current)}}>Ready? : </div>
- <div style={{display: 'none', padding: '.5rem 1rem', background: 'black', color: 'rgba(0, 255,0)', opacity: manualModeRef.current ? '1':'.7', position: 'absolute', right: '3rem', top: '0rem'}} onClick={() => {setManualMode(!manualModeRef.current)}}>{manualModeRef.current ? 'Manual' : 'Auto'} Mode</div>
- <div style={{position: 'absolute', background: 'black', color: 'rgba(0, 255,0)', left: '1rem', top: '3rem'}}>Page: {pagesVisibleRef.current ? pagesVisibleRef.current[0] : ''}</div>
- <div style={{display: 'none',position: 'absolute', background: 'black', color: 'rgba(0, 255,0)', left: '2rem', top: '1.2rem'}}>Rows : {renderedRows}</div>
- <div style={{left: '1rem', top: '0rem', color: 'rgba(255, 150,30)', position: 'absolute', background: 'black'}}>{actionHistory}</div>
- <div style={{right: '0rem', top: '1.2rem', display: 'block', width:'1rem', height: '1rem', borderRadius: '50vw', position: 'absolute', background: componentLock === true ? 'red': 'green'}}></div>
- {pageDataCount && pageDataCount.length > 0
- &&
- (<div style={{position: 'absolute', background: 'black', color: 'cyan', left: '1rem', top: '4.5rem'}}>
- Data Counts: [{pageDataCount.map(e=> e + ' ')}]
- </div>)
- }
- {data.length > 0
- &&
- (<div style={{position: 'absolute', background: 'black', color: 'cyan', left: '1rem', top: '6.5rem'}}>
- rendered rows: {data.length}
- </div>)
- }
-
-
- </span>
- </>)
- }else{
- return <></>
+ if (debugMode) {
+ const renderedRows = document.querySelectorAll(
+ txSpanSelectorForScrollMethod,
+ ).length;
+
+ return (
+ <>
+ <span style={{ fontSize: '.72rem' }}>
+ <div
+ style={{
+ display: 'none',
+ padding: '.5rem 1rem',
+ background: 'black',
+ color: `${isTableReady ? 'rgba(0, 255,0)' : 'rgba(255, 0,0)'}`,
+ position: 'absolute',
+ left: '1rem',
+ top: '1.7rem',
+ }}
+ onClick={() => {
+ setManualMode(!manualModeRef.current);
+ }}
+ >
+ Ready? :{' '}
+ </div>
+ <div
+ style={{
+ display: 'none',
+ padding: '.5rem 1rem',
+ background: 'black',
+ color: 'rgba(0, 255,0)',
+ opacity: manualModeRef.current ? '1' : '.7',
+ position: 'absolute',
+ right: '3rem',
+ top: '0rem',
+ }}
+ onClick={() => {
+ setManualMode(!manualModeRef.current);
+ }}
+ >
+ {manualModeRef.current ? 'Manual' : 'Auto'} Mode
+ </div>
+ <div
+ style={{
+ position: 'absolute',
+ background: 'black',
+ color: 'rgba(0, 255,0)',
+ left: '1rem',
+ top: '3rem',
+ }}
+ >
+ Page:{' '}
+ {pagesVisibleRef.current
+ ? pagesVisibleRef.current[0]
+ : ''}
+ </div>
+ <div
+ style={{
+ display: 'none',
+ position: 'absolute',
+ background: 'black',
+ color: 'rgba(0, 255,0)',
+ left: '2rem',
+ top: '1.2rem',
+ }}
+ >
+ Rows : {renderedRows}
+ </div>
+ <div
+ style={{
+ left: '1rem',
+ top: '0rem',
+ color: 'rgba(255, 150,30)',
+ position: 'absolute',
+ background: 'black',
+ }}
+ >
+ {actionHistory}
+ </div>
+ <div
+ style={{
+ right: '0rem',
+ top: '1.2rem',
+ display: 'block',
+ width: '1rem',
+ height: '1rem',
+ borderRadius: '50vw',
+ position: 'absolute',
+ background:
+ componentLock === true ? 'red' : 'green',
+ }}
+ ></div>
+ {pageDataCount && pageDataCount.length > 0 && (
+ <div
+ style={{
+ position: 'absolute',
+ background: 'black',
+ color: 'cyan',
+ left: '1rem',
+ top: '4.5rem',
+ }}
+ >
+ Data Counts: [
+ {pageDataCount.map((e) => e + ' ')}]
+ </div>
+ )}
+ {data.length > 0 && (
+ <div
+ style={{
+ position: 'absolute',
+ background: 'black',
+ color: 'cyan',
+ left: '1rem',
+ top: '6.5rem',
+ }}
+ >
+ rendered rows: {data.length}
+ </div>
+ )}
+ </span>
+ </>
+ );
+ } else {
+ return <></>;
}
- }
+ };
useEffect(() => {
domDebug('sortBy', sortBy);
@@ -320,35 +403,37 @@ function TableRowsInfiniteScroll({
domDebug('moreDataAvailable', moreDataAvailableRef.current);
const doIphoneFix = () => {
- if(isIOS()){
+ if (isIOS()) {
setTimeout(() => {
- if(wrapperEl){
+ if (wrapperEl) {
wrapperEl.scrollBy({
- top: -2,
- left: 0,
- behavior: 'smooth'
- });
+ top: -2,
+ left: 0,
+ behavior: 'smooth',
+ });
}
}, tmReadyState);
}
- }
+ };
const scrollByTxID = (txID: string, pos: ScrollPosition): void => {
- if(txID.length === 0) {
+ if (txID.length === 0) {
addToActionHistory(InfScrollAction.FAIL);
return;
- };
+ }
const txSpans = document.querySelectorAll(
- txSpanSelectorForScrollMethod
+ txSpanSelectorForScrollMethod,
);
txSpans.forEach((span) => {
if (span.textContent === txID) {
-
- const row = span.closest('div[data-type="infinite-scroll-row"]') as HTMLDivElement;
- if(row){
+ const row = span.closest(
+ 'div[data-type="infinite-scroll-row"]',
+ ) as HTMLDivElement;
+ if (row) {
if (debugMode && markRows) {
- row.style.background = pos == ScrollPosition.BOTTOM ? 'purple' : 'cyan';
+ row.style.background =
+ pos == ScrollPosition.BOTTOM ? 'purple' : 'cyan';
}
addToActionHistory(InfScrollAction.SUCCESS);
row.scrollIntoView({
@@ -356,14 +441,15 @@ function TableRowsInfiniteScroll({
behavior: 'instant' as ScrollBehavior,
});
doIphoneFix();
-
}
}
});
};
const bindFirstSeenRow = (): void => {
- const rows = document.querySelectorAll(`#infinite_scroll_wrapper_${wrapperID} > div`);
+ const rows = document.querySelectorAll(
+ `#infinite_scroll_wrapper_${wrapperID} > div`,
+ );
if (rows.length > 0) {
const firstRow = rows[0] as HTMLDivElement;
if (debugMode && markRows) {
@@ -379,7 +465,9 @@ function TableRowsInfiniteScroll({
};
const bindLastSeenRow = (): void => {
- const rows = document.querySelectorAll(`#infinite_scroll_wrapper_${wrapperID} > div`);
+ const rows = document.querySelectorAll(
+ `#infinite_scroll_wrapper_${wrapperID} > div`,
+ );
if (rows.length > 0) {
const lastRow = rows[rows.length - 1] as HTMLDivElement;
if (debugMode && markRows) {
@@ -397,27 +485,34 @@ function TableRowsInfiniteScroll({
const autoScrollAlternateSolutionActive = true;
const couldFirstPageLoop = () => {
- if(dataPerPage && pageDataCount && pagesVisibleRef.current && pageDataCount.length > pagesVisibleRef.current[0]){
+ if (
+ dataPerPage &&
+ pageDataCount &&
+ pagesVisibleRef.current &&
+ pageDataCount.length > pagesVisibleRef.current[0]
+ ) {
const firstPageIndex = pagesVisibleRef.current[0];
- if(scrollOnTopTresholdRatio){
- return pageDataCount[firstPageIndex] / dataPerPage < scrollOnTopTresholdRatio;
+ if (scrollOnTopTresholdRatio) {
+ return (
+ pageDataCount[firstPageIndex] / dataPerPage <
+ scrollOnTopTresholdRatio
+ );
}
- return pageDataCount[firstPageIndex] / dataPerPage < .5;
+ return pageDataCount[firstPageIndex] / dataPerPage < 0.5;
}
return false;
- }
-
+ };
const doScroll = () => {
if (sortBy === 'time' || !autoScrollAlternateSolutionActive) {
if (autoScrollDirection === ScrollDirection.DOWN) {
- if(pageDataCount && dataPerPage && couldFirstPageLoop()){
+ if (pageDataCount && dataPerPage && couldFirstPageLoop()) {
scrollByTxID(
lastSeenTxIDRef.current || '',
ScrollPosition.TOP,
);
- }else{
+ } else {
scrollByTxID(
lastSeenTxIDRef.current || '',
ScrollPosition.BOTTOM,
@@ -432,23 +527,23 @@ function TableRowsInfiniteScroll({
} else {
scrollWithAlternateStrategy();
}
- const wrapper = document.getElementById(`infinite_scroll_wrapper_${wrapperID}`);
- if( wrapper !== null){
+ const wrapper = document.getElementById(
+ `infinite_scroll_wrapper_${wrapperID}`,
+ );
+ if (wrapper !== null) {
wrapper.click();
}
- }
-
- const scrollWithAlternateStrategy = () => {
-
+ };
- if(wrapperEl){
- if(isSmallScreen){
+ const scrollWithAlternateStrategy = () => {
+ if (wrapperEl) {
+ if (isSmallScreen) {
wrapperEl.scrollTo({
// top: autoScrollDirection === ScrollDirection.DOWN ? 1400 : 1340,
top: wrapperEl.children[0].scrollHeight / 2,
behavior: 'instant' as ScrollBehavior,
});
- }else{
+ } else {
wrapperEl.scrollTo({
// top: autoScrollDirection === ScrollDirection.DOWN ? 1912 : 1850,
top: wrapperEl.children[0].scrollHeight / 2,
@@ -459,22 +554,29 @@ function TableRowsInfiniteScroll({
}
};
-
const firstRowIntersectAction = () => {
- const pagesVisibleVal = pagesVisibleRef.current ? pagesVisibleRef.current : pagesVisible;
+ const pagesVisibleVal = pagesVisibleRef.current
+ ? pagesVisibleRef.current
+ : pagesVisible;
// first row is visible
- if(pagesVisibleVal[0] > 0){
- shiftUp()
- }else{
+ if (pagesVisibleVal[0] > 0) {
+ shiftUp();
+ } else {
bindTableReadyState(true);
}
- }
+ };
const lastRowIntersectAction = () => {
- const pagesVisibleVal = pagesVisibleRef.current ? pagesVisibleRef.current : pagesVisible;
- const extraPagesAvailableVal = extraPagesAvailableRef.current ? extraPagesAvailableRef.current : extraPagesAvailable;
- const moreDataAvailableVal = moreDataAvailableRef.current ? moreDataAvailableRef.current : moreDataAvailable
-
+ const pagesVisibleVal = pagesVisibleRef.current
+ ? pagesVisibleRef.current
+ : pagesVisible;
+ const extraPagesAvailableVal = extraPagesAvailableRef.current
+ ? extraPagesAvailableRef.current
+ : extraPagesAvailable;
+ const moreDataAvailableVal = moreDataAvailableRef.current
+ ? moreDataAvailableRef.current
+ : moreDataAvailable;
+
bindTableReadyState(false);
// last row is visible
extraPagesAvailableVal + 1 > pagesVisibleVal[1]
@@ -482,35 +584,34 @@ function TableRowsInfiniteScroll({
: moreDataAvailableVal
? addMoreData()
: bindTableReadyState(true);
- }
+ };
const resetLastSeen = () => {
setLastSeenTxID('');
- }
+ };
useEffect(() => {
- if(moreDataLoadingRef.current || componentLockRef.current) return;
+ if (moreDataLoadingRef.current || componentLockRef.current) return;
resetLastSeen();
const observer = new IntersectionObserver(
(entries) => {
-
const entry = entries[0];
+ const moreDataLoadingVal = moreDataLoadingRef.current
+ ? moreDataLoadingRef.current
+ : moreDataLoading;
- const moreDataLoadingVal = moreDataLoadingRef.current ? moreDataLoadingRef.current : moreDataLoading;
-
if (moreDataLoadingVal) return;
-
- if (entry.isIntersecting) {
- if(manualModeRef.current){
- bindLastSeenRow();
+ if (entry.isIntersecting) {
+ if (manualModeRef.current) {
+ bindLastSeenRow();
setShowManualScrollDown(true);
- }else{
+ } else {
bindLastSeenRow();
lastRowIntersectAction();
}
- }else{
+ } else {
setShowManualScrollDown(false);
}
},
@@ -537,52 +638,44 @@ function TableRowsInfiniteScroll({
// pagesVisible[1],
]);
-
useEffect(() => {
- if(moreDataAvailable == false){
+ if (moreDataAvailable == false) {
bindTableReadyState(true);
}
- }, [moreDataAvailable])
+ }, [moreDataAvailable]);
useEffect(() => {
bindTableReadyState(!moreDataLoadingRef.current);
- }, [moreDataLoadingRef.current])
-
-
-
+ }, [moreDataLoadingRef.current]);
const addToActionHistory = (actionType: InfScrollAction) => {
-
- setActionHistory( prev => {
-
+ setActionHistory((prev) => {
let actionToken = '';
- switch(actionType){
- case InfScrollAction.SHIFT_UP:
- actionToken = '↑'
- break;
+ switch (actionType) {
+ case InfScrollAction.SHIFT_UP:
+ actionToken = '↑';
+ break;
case InfScrollAction.SHIFT_DOWN:
- actionToken = '↓'
- break;
+ actionToken = '↓';
+ break;
case InfScrollAction.ADD_MORE_DATA:
- actionToken = '…'
+ actionToken = '…';
break;
case InfScrollAction.SLIGHT_SCROLL:
- actionToken = '~'
+ actionToken = '~';
break;
case InfScrollAction.SUCCESS:
- actionToken = '✓'
+ actionToken = '✓';
break;
case InfScrollAction.FAIL:
- actionToken = '□'
+ actionToken = '□';
break;
}
-
- return prev += (' ' + actionToken);
- })
-
- }
+ return (prev += ' ' + actionToken);
+ });
+ };
useEffect(() => {
domDebug('moreDataLoading', moreDataLoading);
@@ -592,22 +685,21 @@ function TableRowsInfiniteScroll({
(entries) => {
const entry = entries[0];
-
- const moreDataLoadingVal = moreDataLoadingRef.current ? moreDataLoadingRef.current : moreDataLoading;
-
+ const moreDataLoadingVal = moreDataLoadingRef.current
+ ? moreDataLoadingRef.current
+ : moreDataLoading;
+
if (moreDataLoadingVal) return;
if (entry.isIntersecting) {
-
- if(manualModeRef.current){
+ if (manualModeRef.current) {
setShowManualScrollUp(true);
- bindFirstSeenRow();
- }else{
+ bindFirstSeenRow();
+ } else {
firstRowIntersectAction();
bindFirstSeenRow();
}
-
- }else{
+ } else {
setShowManualScrollUp(false);
}
},
@@ -628,79 +720,102 @@ function TableRowsInfiniteScroll({
};
}, [firstRowRef.current, moreDataLoading, pagesVisible[0]]);
-
-
-
const lockReq = () => {
setReqLock(true);
setTimeout(() => {
setReqLock(false);
}, tmLockReq);
- }
-
+ };
- const addMoreData = async() => {
- if(reqLockRef.current === true) return;
+ const addMoreData = async () => {
+ if (reqLockRef.current === true) return;
lockReq();
await fetcherFunction();
- addToActionHistory(InfScrollAction.ADD_MORE_DATA)
+ addToActionHistory(InfScrollAction.ADD_MORE_DATA);
lockShift();
- }
+ };
useEffect(() => {
- if(lastFetchedCount && lastFetchedCount > 0 && setLastFetchedCount){
+ if (lastFetchedCount && lastFetchedCount > 0 && setLastFetchedCount) {
triggerAutoScroll(ScrollDirection.DOWN);
setTimeout(() => {
setLastFetchedCount(0);
- }, tmLockShift)
+ }, tmLockShift);
}
- }, [lastFetchedCount])
-
+ }, [lastFetchedCount]);
useEffect(() => {
doScroll();
- }, [pagesVisible[0]])
+ }, [pagesVisible[0]]);
useEffect(() => {
-
domDebug('lastSeen', lastSeenTxIDRef.current);
domDebug('firstSeen', firstSeenTxIDRef.current);
- }, [lastSeenTxID, firstSeenTxID])
+ }, [lastSeenTxID, firstSeenTxID]);
return (
<>
-<div id={`infinite_scroll_wrapper_${wrapperID}`} style={{position: 'relative'}}>
- <TableRows
- type={type}
- data={data}
- fullData={data}
- isAccountView={isAccountView}
- tableView={tableView}
- lastRowRef={lastRowRef}
- firstRowRef={firstRowRef}
+ <div
+ id={`infinite_scroll_wrapper_${wrapperID}`}
+ style={{ position: 'relative' }}
+ >
+ <TableRows
+ type={type}
+ data={data}
+ fullData={data}
+ isAccountView={isAccountView}
+ tableView={tableView}
+ lastRowRef={lastRowRef}
+ firstRowRef={firstRowRef}
/>
</div>
{pagesVisible[0] > 0 && !isSmallScreen && (
- <ScrollToTopButton onClick={scrollToTop}>Scroll to Top</ScrollToTopButton>)}
- {pagesVisible[0] > 0 && isSmallScreen && (
- <ScrollToTopButtonMobile onClick={scrollToTop}>
-<RiArrowUpSLine size={20} color='white'/>
- </ScrollToTopButtonMobile>)}
-
- {showManualScrollUp && (<div style={{padding: '.5rem 1rem', background: 'magenta', position: 'absolute', zIndex: 99, right: '8rem', top: '12rem'}} onClick={firstRowIntersectAction}>Scroll Up</div>)}
- {showManualScrollDown && (<div style={{padding: '.5rem 1rem', background: 'orange', position: 'absolute', zIndex: 99, right: '8rem', top: '14rem'}} onClick={lastRowIntersectAction}>Scroll Down</div>)}
- {
- renderDebugData()
- }
- {
- (!isTableReadyRef.current && moreDataLoadingRef.current) &&
- (<div className={styles.data_fetching_panel}>
- <div className={styles.data_fetching_bar2}></div>
- </div>)
-
- }
-
-
+ <ScrollToTopButton onClick={scrollToTop}>
+ Scroll to Top
+ </ScrollToTopButton>
+ )}
+ {pagesVisible[0] > 0 && isSmallScreen && (
+ <ScrollToTopButtonMobile onClick={scrollToTop}>
+ <RiArrowUpSLine size={20} color='white' />
+ </ScrollToTopButtonMobile>
+ )}
+
+ {showManualScrollUp && (
+ <div
+ style={{
+ padding: '.5rem 1rem',
+ background: 'magenta',
+ position: 'absolute',
+ zIndex: 99,
+ right: '8rem',
+ top: '12rem',
+ }}
+ onClick={firstRowIntersectAction}
+ >
+ Scroll Up
+ </div>
+ )}
+ {showManualScrollDown && (
+ <div
+ style={{
+ padding: '.5rem 1rem',
+ background: 'orange',
+ position: 'absolute',
+ zIndex: 99,
+ right: '8rem',
+ top: '14rem',
+ }}
+ onClick={lastRowIntersectAction}
+ >
+ Scroll Down
+ </div>
+ )}
+ {renderDebugData()}
+ {!isTableReadyRef.current && moreDataLoadingRef.current && (
+ <div className={styles.data_fetching_panel}>
+ <div className={styles.data_fetching_bar2}></div>
+ </div>
+ )}
</>
);
}
diff --git a/src/components/Trade/TradeTabs/Transactions/Transactions.tsx b/src/components/Trade/TradeTabs/Transactions/Transactions.tsx
index 5e775ce02b..7194d2e01b 100644
--- a/src/components/Trade/TradeTabs/Transactions/Transactions.tsx
+++ b/src/components/Trade/TradeTabs/Transactions/Transactions.tsx
@@ -168,7 +168,6 @@ function Transactions(props: propsIF) {
changes: [...getInitialChangesData()],
});
-
const [hotTransactions, setHotTransactions] = useState<TransactionIF[]>([]);
const fetchedTransactionsRef = useRef<Changes>();
diff --git a/src/components/Trade/TradeTabs/useSortedLimits.ts b/src/components/Trade/TradeTabs/useSortedLimits.ts
index 5356d1dacc..ae3cfd4467 100644
--- a/src/components/Trade/TradeTabs/useSortedLimits.ts
+++ b/src/components/Trade/TradeTabs/useSortedLimits.ts
@@ -21,7 +21,7 @@ export const useSortedLimits = (
boolean,
Dispatch<SetStateAction<boolean>>,
LimitOrderIF[],
- (data:LimitOrderIF[]) => LimitOrderIF[]
+ (data: LimitOrderIF[]) => LimitOrderIF[],
] => {
// default sort function
const sortByTime = (unsortedData: LimitOrderIF[]): LimitOrderIF[] =>
@@ -113,5 +113,12 @@ export const useSortedLimits = (
[sortBy, reverseSort, limitOrders[0]?.limitOrderId, limitOrders.length],
);
- return [sortBy, setSortBy, reverseSort, setReverseSort, sortedLimitOrders, sortData];
+ return [
+ sortBy,
+ setSortBy,
+ reverseSort,
+ setReverseSort,
+ sortedLimitOrders,
+ sortData,
+ ];
};
diff --git a/src/components/Trade/TradeTabs/useSortedTxs.ts b/src/components/Trade/TradeTabs/useSortedTxs.ts
index 5b85691aee..78014166f2 100644
--- a/src/components/Trade/TradeTabs/useSortedTxs.ts
+++ b/src/components/Trade/TradeTabs/useSortedTxs.ts
@@ -19,7 +19,7 @@ export const useSortedTxs = (
boolean,
Dispatch<SetStateAction<boolean>>,
TransactionIF[],
- (data:TransactionIF[]) => TransactionIF[]
+ (data: TransactionIF[]) => TransactionIF[],
] => {
// default sort function
const sortByUpdateTime = (unsortedData: TransactionIF[]): TransactionIF[] =>
@@ -107,5 +107,12 @@ export const useSortedTxs = (
return sortData(transactions);
}, [sortBy, reverseSort, transactions[0]?.txHash, transactions.length]);
- return [sortBy, setSortBy, reverseSort, setReverseSort, sortedTransactions, sortData];
+ return [
+ sortBy,
+ setSortBy,
+ reverseSort,
+ setReverseSort,
+ sortedTransactions,
+ sortData,
+ ];
};
diff --git a/src/contexts/BottomSheetContext.tsx b/src/contexts/BottomSheetContext.tsx
index 4edcd55cf4..d960591d3a 100644
--- a/src/contexts/BottomSheetContext.tsx
+++ b/src/contexts/BottomSheetContext.tsx
@@ -1,49 +1,60 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import React, {
+ createContext,
+ useCallback,
+ useContext,
+ useMemo,
+ useState,
+} from 'react';
// Define the shape of the context
interface BottomSheetContextType {
- isBottomSheetOpen: boolean;
- openBottomSheet: () => void;
- closeBottomSheet: () => void;
+ isBottomSheetOpen: boolean;
+ openBottomSheet: () => void;
+ closeBottomSheet: () => void;
}
-const BottomSheetContext = createContext<BottomSheetContextType | undefined>(undefined);
+const BottomSheetContext = createContext<BottomSheetContextType | undefined>(
+ undefined,
+);
// Hook for accessing the context
export const useBottomSheet = () => {
- const context = useContext(BottomSheetContext);
- if (!context) {
- throw new Error('useBottomSheet must be used within a BottomSheetProvider');
- }
- return context;
+ const context = useContext(BottomSheetContext);
+ if (!context) {
+ throw new Error(
+ 'useBottomSheet must be used within a BottomSheetProvider',
+ );
+ }
+ return context;
};
-export const BottomSheetContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
- const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
-
-
- // Memoize the handler functions so they don't get recreated on every render
- const openBottomSheet = useCallback(() => {
- setIsBottomSheetOpen(true);
- }, []);
-
- const closeBottomSheet = useCallback(() => {
- setIsBottomSheetOpen(false);
- }, []);
-
- // Memoize the context value to prevent unnecessary re-renders of consuming components
- const value = useMemo(
- () => ({
- isBottomSheetOpen,
- openBottomSheet,
- closeBottomSheet,
- }),
- [isBottomSheetOpen, openBottomSheet, closeBottomSheet]
- );
-
- return (
- <BottomSheetContext.Provider value={value}>
- {children}
- </BottomSheetContext.Provider>
- );
-};
\ No newline at end of file
+export const BottomSheetContextProvider: React.FC<{
+ children: React.ReactNode;
+}> = ({ children }) => {
+ const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+
+ // Memoize the handler functions so they don't get recreated on every render
+ const openBottomSheet = useCallback(() => {
+ setIsBottomSheetOpen(true);
+ }, []);
+
+ const closeBottomSheet = useCallback(() => {
+ setIsBottomSheetOpen(false);
+ }, []);
+
+ // Memoize the context value to prevent unnecessary re-renders of consuming components
+ const value = useMemo(
+ () => ({
+ isBottomSheetOpen,
+ openBottomSheet,
+ closeBottomSheet,
+ }),
+ [isBottomSheetOpen, openBottomSheet, closeBottomSheet],
+ );
+
+ return (
+ <BottomSheetContext.Provider value={value}>
+ {children}
+ </BottomSheetContext.Provider>
+ );
+};
diff --git a/src/contexts/CandleContext.tsx b/src/contexts/CandleContext.tsx
index faf5d3d032..ce601a4956 100644
--- a/src/contexts/CandleContext.tsx
+++ b/src/contexts/CandleContext.tsx
@@ -205,13 +205,17 @@ export const CandleContextProvider = (props: { children: React.ReactNode }) => {
setIsFirstFetch(true);
}, [isFirstFetch]);
- useEffect(() => {
- const isChangeUserConnected = checkUserConnected.current === isUserConnected;
- isChangeUserConnected && isChartEnabled && isUserOnline && fetchCandles();
+ useEffect(() => {
+ const isChangeUserConnected =
+ checkUserConnected.current === isUserConnected;
+ isChangeUserConnected &&
+ isChartEnabled &&
+ isUserOnline &&
+ fetchCandles();
if (isManualCandleFetchRequested)
setIsManualCandleFetchRequested(false);
- checkUserConnected.current = isUserConnected;
+ checkUserConnected.current = isUserConnected;
}, [
isManualCandleFetchRequested,
isChartEnabled,
diff --git a/src/contexts/Futa/FutaHomeContext.tsx b/src/contexts/Futa/FutaHomeContext.tsx
index 09401b3185..d378c50ce1 100644
--- a/src/contexts/Futa/FutaHomeContext.tsx
+++ b/src/contexts/Futa/FutaHomeContext.tsx
@@ -38,13 +38,12 @@ export const FutaHomeContextProvider = ({
return saved === null ? true : saved === 'true';
},
);
- const [showTutosLocalStorage, setShowTutosLocalStorage] = useState(
- () => {
-
- const lsValue = localStorage.getItem('showTutosLocalStorage');
- return lsValue === null ? SHOW_TUTOS_DEFAULT === 'true' : lsValue === 'true';
- }
- )
+ const [showTutosLocalStorage, setShowTutosLocalStorage] = useState(() => {
+ const lsValue = localStorage.getItem('showTutosLocalStorage');
+ return lsValue === null
+ ? SHOW_TUTOS_DEFAULT === 'true'
+ : lsValue === 'true';
+ });
useEffect(() => {
localStorage.setItem(
@@ -52,15 +51,11 @@ export const FutaHomeContextProvider = ({
showHomeVideoLocalStorage.toString(),
);
}, [showHomeVideoLocalStorage]);
-
-
- const bindShowTutosLocalStorage = (value : boolean) => {
- localStorage.setItem(
- 'showTutosLocalStorage',
- value.toString(),
- );
+
+ const bindShowTutosLocalStorage = (value: boolean) => {
+ localStorage.setItem('showTutosLocalStorage', value.toString());
setShowTutosLocalStorage(value);
- }
+ };
return (
<FutaHomeContext.Provider
@@ -74,7 +69,7 @@ export const FutaHomeContextProvider = ({
showHomeVideoLocalStorage,
setShowHomeVideoLocalStorage,
showTutosLocalStorage,
- bindShowTutosLocalStorage
+ bindShowTutosLocalStorage,
}}
>
{children}
diff --git a/src/contexts/TokenBalanceContext.tsx b/src/contexts/TokenBalanceContext.tsx
index bac3bce4df..cdd073748d 100644
--- a/src/contexts/TokenBalanceContext.tsx
+++ b/src/contexts/TokenBalanceContext.tsx
@@ -50,9 +50,9 @@ export const TokenBalanceContext = createContext<TokenBalanceContextIF>(
export const TokenBalanceContextProvider = (props: {
children: React.ReactNode;
}) => {
- const [tokenBalances, setTokenBalances] = useState<
- TokenIF[] | undefined
- >(undefined);
+ const [tokenBalances, setTokenBalances] = useState<TokenIF[] | undefined>(
+ undefined,
+ );
const [NFTData, setNFTData] = useState<NftListByChain[] | undefined>(
undefined,
diff --git a/src/contexts/TradeDataContext.tsx b/src/contexts/TradeDataContext.tsx
index 1687e5a8bd..9070906d93 100644
--- a/src/contexts/TradeDataContext.tsx
+++ b/src/contexts/TradeDataContext.tsx
@@ -126,7 +126,9 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => {
: dfltTokenB,
);
- const [blackListedTimeParams, setBlackListedTimeParams] = useState<Map<string, Set<number>>>(new Map());
+ const [blackListedTimeParams, setBlackListedTimeParams] = useState<
+ Map<string, Set<number>>
+ >(new Map());
useEffect(() => {
// update tokenA and tokenB when chain changes
@@ -254,10 +256,9 @@ export const TradeDataContextProvider = (props: { children: ReactNode }) => {
return defaultWidth;
}, [baseToken.address + quoteToken.address + chainId]);
-
const addToBlackList = (tokenPair: string, timeParam: number) => {
- setBlackListedTimeParams(prev => {
- if(prev.has(tokenPair)){
+ setBlackListedTimeParams((prev) => {
+ if (prev.has(tokenPair)) {
prev.get(tokenPair)?.add(timeParam);
} else {
prev.set(tokenPair, new Set([timeParam]));
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index 9c403a1638..99d5c302c7 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -21,4 +21,4 @@ export { TradeTableContext } from './TradeTableContext';
export { TradeTokenContext } from './TradeTokenContext';
export { UserDataContext } from './UserDataContext';
export { UserPreferenceContext } from './UserPreferenceContext';
-export { XpLeadersContext } from './XpLeadersContext';
\ No newline at end of file
+export { XpLeadersContext } from './XpLeadersContext';
diff --git a/src/css/GlobalCssClassnames.css b/src/css/GlobalCssClassnames.css
index 2d263ba1fc..e08b11de9e 100644
--- a/src/css/GlobalCssClassnames.css
+++ b/src/css/GlobalCssClassnames.css
@@ -75,8 +75,6 @@
background: var(--dark2);
}
-
-
.hide_scrollvar::-webkit-scrollbar {
display: none;
}
@@ -142,7 +140,7 @@ aside.emoji-picker-react {
outline: none !important;
}
-.introjs-button:focus{
+.introjs-button:focus {
box-shadow: none !important;
}
@@ -187,28 +185,25 @@ aside.emoji-picker-react {
.css-1idz92c-MuiCircularProgress-svg {
color: var(--title-gradient) !important;
}
-.css-9tmuzo-MuiStepper-root{
+.css-9tmuzo-MuiStepper-root {
gap: 4px !important;
font-size: 18px;
-
-
}
.css-14sza3e-MuiStepLabel-root {
padding: 0 !important;
}
-.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root.Mui-completed{
- color: var(--accent1) !important
+.css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root.Mui-completed {
+ color: var(--accent1) !important;
}
-
.icon_hover:hover {
color: var(--accent1) !important;
cursor: pointer;
}
#current_row_scroll {
- height: 100%;
- box-sizing: border-box;
+ height: 100%;
+ box-sizing: border-box;
}
@media (max-width: 500px) {
@@ -216,13 +211,13 @@ aside.emoji-picker-react {
overflow-y: scroll;
height: 45dvh;
} */
- .css-th9gsg-MuiPaper-root-MuiAlert-root{
+ .css-th9gsg-MuiPaper-root-MuiAlert-root {
margin: 0 auto !important;
- text-wrap:wrap !important;
+ text-wrap: wrap !important;
word-wrap: break-word !important;
max-width: 330px !important;
}
- }
+}
@media only screen and (min-width: 1280px) {
.top-pools-analytics-table td,
.top-pools-analytics-table th {
@@ -230,17 +225,16 @@ aside.emoji-picker-react {
}
}
@media only screen and (max-width: 768px) {
- .mobile_auto_height{
- height: auto !important;
- }
+ .mobile_auto_height {
+ height: auto !important;
+ }
}
-
-.EmojiPickerReact{
+.EmojiPickerReact {
background: var(--dark2) !important;
}
-.epr-emoji-category-label{
+.epr-emoji-category-label {
background: var(--dark2) !important;
- font-size: .8rem !important;
-}
\ No newline at end of file
+ font-size: 0.8rem !important;
+}
diff --git a/src/index.css b/src/index.css
index ca098fd947..25ab3f3228 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,7 +76,7 @@
--footer-height: 24px;
/* gradients, shadows */
- --shimmer-start-color: #141E30;
+ --shimmer-start-color: #141e30;
--shimmer-end-color: #243b55;
--shimmer: linear-gradient(
to right,
@@ -84,7 +84,8 @@
var(--shimmer-end-color)
);
--gradient-box-shadow-color: rgba(115, 113, 252, 0.25);
- --gradient-box-shadow: 0px 0px 20px 0px var(--gradient-box-shadow-color) inset;
+ --gradient-box-shadow: 0px 0px 20px 0px var(--gradient-box-shadow-color)
+ inset;
--title-gradient: linear-gradient(
90deg,
@@ -172,8 +173,7 @@
[data-theme='futa_dark'] {
/* subtract full height from navbar(56px) and footer(20px on desktop, 64 on mobile) */
--content-height: calc(100vh - 76px);
- --content-height-mobile:
- calc(100svh - 120px);
+ --content-height-mobile: calc(100svh - 120px);
/* font */
--title-ts: 0px 0px 150px rgba(242, 153, 74, 0.5),
0px 0px 100px rgba(242, 153, 74, 0.5),
diff --git a/src/pages/Portfolio/Portfolio.module.css b/src/pages/Portfolio/Portfolio.module.css
index 5214718ff6..81771d26c7 100644
--- a/src/pages/Portfolio/Portfolio.module.css
+++ b/src/pages/Portfolio/Portfolio.module.css
@@ -8,27 +8,23 @@
gap: 16px;
}
-.mobile_container{
- display: flex;
- flex-direction: column;
- gap: 4px;
- margin: 0 auto;
- padding: 0 8px;
- /* height: calc(100dvh - 112px); */
- /* overflow-y: hidden !important; */
-
- display: grid;
- grid-template-rows: 100px 1fr ;
-
- gap: 8px;
- height: 70dvh;
- margin-bottom: 56px;
-overflow: hidden !important;
-
-
-
-}
+.mobile_container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin: 0 auto;
+ padding: 0 8px;
+ /* height: calc(100dvh - 112px); */
+ /* overflow-y: hidden !important; */
+ display: grid;
+ grid-template-rows: 100px 1fr;
+
+ gap: 8px;
+ height: 70dvh;
+ margin-bottom: 56px;
+ overflow: hidden !important;
+}
.portfolio_tabs_container {
width: 100%;
@@ -36,11 +32,9 @@ overflow: hidden !important;
transition: var(--transition);
overflow: hidden;
flex: 1;
- }
-
-
+}
- .mobile_data_toggle_container{
+.mobile_data_toggle_container {
background: var(--dark2);
display: flex;
justify-content: center;
@@ -48,12 +42,9 @@ overflow: hidden !important;
border-radius: 4px;
outline: 1px solid var(--dark3);
margin: 10px auto;
+}
-
-
- }
-
- .mobile_button {
+.mobile_button {
font-size: var(--body-size);
line-height: var(--body-lh);
padding: 4px 1.5rem;
@@ -62,71 +53,66 @@ overflow: hidden !important;
border: none;
outline: none;
width: 50%;
- }
-
- .mobile_button:hover {
+}
+
+.mobile_button:hover {
color: var(--text1);
- }
-
- .mobile_button.active {
+}
+
+.mobile_button.active {
color: black;
background: var(--accent1);
- }
-
- .mobile_button.inactive {
+}
+
+.mobile_button.inactive {
color: var(--text1);
background: transparent;
- }
-
- .mobile_layout{
+}
+
+.mobile_layout {
width: 100vw;
-
display: grid;
- grid-template-rows: 105px 1fr ;
+ grid-template-rows: 105px 1fr;
gap: 4px;
overflow: hidden;
-
-
-
}
- @media (min-width: 400px) {
- .mobile_layout{
- padding: 0 1rem
- }
+@media (min-width: 400px) {
+ .mobile_layout {
+ padding: 0 1rem;
+ }
}
- @media (min-width: 1200px) {
+@media (min-width: 1200px) {
.portfolio_tabs_container.fullLayoutContainer {
- grid-template-columns: auto 36px;
- column-gap: 16px;
+ grid-template-columns: auto 36px;
+ column-gap: 16px;
}
-
+
.portfolio_tabs_container:not(.fullLayoutContainer) {
- grid-template-columns: auto 380px;
- gap: 1rem;
+ grid-template-columns: auto 380px;
+ gap: 1rem;
}
-
+
.portfolio_tabs_container:not(.active) {
- grid-template-columns: auto;
- column-gap: 16px;
+ grid-template-columns: auto;
+ column-gap: 16px;
}
-
+
.portfolio_tabs_container.active.fullLayoutContainer {
- grid-template-columns: auto 36px;
- column-gap: 16px;
+ grid-template-columns: auto 36px;
+ column-gap: 16px;
}
-
+
.portfolio_tabs_container.active:not(.fullLayoutContainer) {
- grid-template-columns: auto 380px;
- gap: 1rem;
+ grid-template-columns: auto 380px;
+ gap: 1rem;
}
- }
-
+}
+
@media only screen and (max-width: 600px) {
.portfolio_container {
overflow-y: hidden;
max-height: calc(100svh - 7.5rem);
-
}
}
diff --git a/src/pages/TestPage/SwipeableTabs.module.css b/src/pages/TestPage/SwipeableTabs.module.css
index 9d7612ddfe..1e55c95da6 100644
--- a/src/pages/TestPage/SwipeableTabs.module.css
+++ b/src/pages/TestPage/SwipeableTabs.module.css
@@ -2,15 +2,15 @@
width: 100%;
max-width: 600px;
margin: 0 auto;
- }
-
- .tabLabels {
+}
+
+.tabLabels {
display: flex;
justify-content: space-around;
margin-bottom: 16px;
- }
-
- .tabLabel {
+}
+
+.tabLabel {
padding: 8px 16px;
cursor: pointer;
border: none;
@@ -18,23 +18,22 @@
font-size: 16px;
color: #666;
transition: color 0.3s ease;
- }
-
- .tabLabel:hover {
+}
+
+.tabLabel:hover {
color: #333;
- }
-
- .active {
+}
+
+.active {
color: #007bff;
border-bottom: 2px solid #007bff;
- }
-
- .tabContent {
+}
+
+.tabContent {
padding: 16px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: transparent;
min-height: 200px;
overflow: hidden;
- }
-
\ No newline at end of file
+}
diff --git a/src/pages/TestPage/SwipeableTabs.tsx b/src/pages/TestPage/SwipeableTabs.tsx
index dc91451bf8..700bfce47f 100644
--- a/src/pages/TestPage/SwipeableTabs.tsx
+++ b/src/pages/TestPage/SwipeableTabs.tsx
@@ -3,84 +3,88 @@ import { motion } from 'framer-motion';
import styles from './SwipeableTabs.module.css';
interface Tab {
- label: string;
- content: React.ReactNode;
+ label: string;
+ content: React.ReactNode;
}
interface SwipeableTabsProps {
- tabs: Tab[];
- activeTab: number;
- setActiveTab: (index: number) => void;
+ tabs: Tab[];
+ activeTab: number;
+ setActiveTab: (index: number) => void;
}
-const SwipeableTabs: React.FC<SwipeableTabsProps> = ({ tabs, activeTab, setActiveTab }) => {
- const [direction, setDirection] = React.useState(0); // 1 for right swipe, -1 for left swipe
+const SwipeableTabs: React.FC<SwipeableTabsProps> = ({
+ tabs,
+ activeTab,
+ setActiveTab,
+}) => {
+ const [direction, setDirection] = React.useState(0); // 1 for right swipe, -1 for left swipe
- const handleTabClick = (index: number) => {
- if (index !== activeTab) {
- setDirection(index > activeTab ? 1 : -1);
- setActiveTab(index);
- }
- };
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const handleDragEnd = (event: any, info: any) => {
- if (info.offset.x < -50 && activeTab < tabs.length - 1) {
- setDirection(1); // Right swipe
- setActiveTab(activeTab + 1);
- } else if (info.offset.x > 50 && activeTab > 0) {
- setDirection(-1); // Left swipe
- setActiveTab(activeTab - 1);
- }
- };
+ const handleTabClick = (index: number) => {
+ if (index !== activeTab) {
+ setDirection(index > activeTab ? 1 : -1);
+ setActiveTab(index);
+ }
+ };
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const handleDragEnd = (event: any, info: any) => {
+ if (info.offset.x < -50 && activeTab < tabs.length - 1) {
+ setDirection(1); // Right swipe
+ setActiveTab(activeTab + 1);
+ } else if (info.offset.x > 50 && activeTab > 0) {
+ setDirection(-1); // Left swipe
+ setActiveTab(activeTab - 1);
+ }
+ };
- const variants = {
- enter: (direction: number) => ({
- x: direction > 0 ? 300 : -300,
- opacity: 0,
- }),
- center: {
- x: 0,
- opacity: 1,
- },
- exit: (direction: number) => ({
- x: direction < 0 ? 300 : -300,
- opacity: 0,
- }),
- };
+ const variants = {
+ enter: (direction: number) => ({
+ x: direction > 0 ? 300 : -300,
+ opacity: 0,
+ }),
+ center: {
+ x: 0,
+ opacity: 1,
+ },
+ exit: (direction: number) => ({
+ x: direction < 0 ? 300 : -300,
+ opacity: 0,
+ }),
+ };
- return (
- <div className={styles.tabsContainer}>
- {/* Tab labels */}
- <div className={styles.tabLabels}>
- {tabs.map((tab, index) => (
- <button
- key={index}
- onClick={() => handleTabClick(index)}
- className={`${styles.tabLabel} ${activeTab === index ? styles.active : ''}`}
- >
- {tab.label}
- </button>
- ))}
- </div>
+ return (
+ <div className={styles.tabsContainer}>
+ {/* Tab labels */}
+ <div className={styles.tabLabels}>
+ {tabs.map((tab, index) => (
+ <button
+ key={index}
+ onClick={() => handleTabClick(index)}
+ className={`${styles.tabLabel} ${activeTab === index ? styles.active : ''}`}
+ >
+ {tab.label}
+ </button>
+ ))}
+ </div>
- {/* Tab content with swipe */}
- <motion.div
- key={activeTab}
- className={styles.tabContent}
- custom={direction}
- variants={variants}
- initial="enter"
- animate="center"
- exit="exit"
- transition={{ duration: 0.3 }}
- drag="x"
- dragConstraints={{ left: 0, right: 0 }}
- onDragEnd={handleDragEnd}
- >
- {tabs[activeTab].content}
- </motion.div>
- </div>
- );
+ {/* Tab content with swipe */}
+ <motion.div
+ key={activeTab}
+ className={styles.tabContent}
+ custom={direction}
+ variants={variants}
+ initial='enter'
+ animate='center'
+ exit='exit'
+ transition={{ duration: 0.3 }}
+ drag='x'
+ dragConstraints={{ left: 0, right: 0 }}
+ onDragEnd={handleDragEnd}
+ >
+ {tabs[activeTab].content}
+ </motion.div>
+ </div>
+ );
};
export default SwipeableTabs;
diff --git a/src/pages/TestPage/TestPage.tsx b/src/pages/TestPage/TestPage.tsx
index d29079241e..820699b5fc 100644
--- a/src/pages/TestPage/TestPage.tsx
+++ b/src/pages/TestPage/TestPage.tsx
@@ -1,15 +1,10 @@
// import { useContext } from 'react';
// import { BrandContext } from '../../contexts/BrandContext';
-
-
export default function TestPage() {
-
-
- return (
+ return (
<div>
- <h1>Swipeable Tabs Example</h1>
-
+ <h1>Swipeable Tabs Example</h1>
</div>
- );
- };
\ No newline at end of file
+ );
+}
diff --git a/src/pages/common/CSSDebug/CSSDebug.tsx b/src/pages/common/CSSDebug/CSSDebug.tsx
index 6ff09cd995..ec0cf48d4e 100644
--- a/src/pages/common/CSSDebug/CSSDebug.tsx
+++ b/src/pages/common/CSSDebug/CSSDebug.tsx
@@ -5,7 +5,7 @@ import ColorToggle from './ColorToggle';
import { skins } from '../../../App/hooks/useSkin';
import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
-export type colorFormats = 'text'|'background'|'border';
+export type colorFormats = 'text' | 'background' | 'border';
export interface cssColorIF {
name: string;
@@ -63,32 +63,29 @@ export default function CSSDebug(props: propsIF) {
return (
<>
- {<select onChange={(e) => skin.set(e.target.value as skins)}>
- {
- skin.available.map((s: skins) => {
- const makeReadable = (str: string): string => {
- switch (str) {
- case 'purple_dark':
- return 'Purple Dark';
- case 'purple_light':
- return 'Purple Light';
- case 'futa_dark':
- return 'FUTA Dark';
- default:
- return str;
- }
+ {
+ <select onChange={(e) => skin.set(e.target.value as skins)}>
+ {skin.available.map((s: skins) => {
+ const makeReadable = (str: string): string => {
+ switch (str) {
+ case 'purple_dark':
+ return 'Purple Dark';
+ case 'purple_light':
+ return 'Purple Light';
+ case 'futa_dark':
+ return 'FUTA Dark';
+ default:
+ return str;
}
- return (
- <option
- key={s}
- value={s}
- >
- {makeReadable(s)}
- </option>
- )
- })
- }
- </select>}
+ };
+ return (
+ <option key={s} value={s}>
+ {makeReadable(s)}
+ </option>
+ );
+ })}
+ </select>
+ }
<label htmlFor='sample_text_changer'>Sample text:</label>
<input
type='text'
@@ -97,42 +94,30 @@ export default function CSSDebug(props: propsIF) {
onChange={(e) => setSampleText(e.target.value)}
/>
<section className={styles.css_debug}>
- {
- textColors.map(
- (c: cssColorIF) => (
- <ColorToggle
- key={JSON.stringify(c)}
- cssProperty={c}
- sampleText={sampleText}
- allColors={allColors}
- />
- )
- )
- }
- {
- backgroundColors.map(
- (c: cssColorIF) => (
- <ColorToggle
- key={JSON.stringify(c)}
- cssProperty={c}
- sampleText={sampleText}
- allColors={allColors}
- />
- )
- )
- }
- {
- borderColors.map(
- (c: cssColorIF) => (
- <ColorToggle
- key={JSON.stringify(c)}
- cssProperty={c}
- sampleText={sampleText}
- allColors={allColors}
- />
- )
- )
- }
+ {textColors.map((c: cssColorIF) => (
+ <ColorToggle
+ key={JSON.stringify(c)}
+ cssProperty={c}
+ sampleText={sampleText}
+ allColors={allColors}
+ />
+ ))}
+ {backgroundColors.map((c: cssColorIF) => (
+ <ColorToggle
+ key={JSON.stringify(c)}
+ cssProperty={c}
+ sampleText={sampleText}
+ allColors={allColors}
+ />
+ ))}
+ {borderColors.map((c: cssColorIF) => (
+ <ColorToggle
+ key={JSON.stringify(c)}
+ cssProperty={c}
+ sampleText={sampleText}
+ allColors={allColors}
+ />
+ ))}
</section>
{noSwap || <Swap />}
</>
diff --git a/src/pages/common/CSSDebug/CSSModal.module.css b/src/pages/common/CSSDebug/CSSModal.module.css
index 31aae3745d..91000b0aca 100644
--- a/src/pages/common/CSSDebug/CSSModal.module.css
+++ b/src/pages/common/CSSDebug/CSSModal.module.css
@@ -3,7 +3,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 50%;
+ width: 50%;
max-width: 800px;
height: auto;
max-height: 80%;
@@ -13,4 +13,4 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
overflow: scroll;
-}
\ No newline at end of file
+}
diff --git a/src/pages/common/CSSDebug/CSSModal.tsx b/src/pages/common/CSSDebug/CSSModal.tsx
index 296ac550e9..21a00662b0 100644
--- a/src/pages/common/CSSDebug/CSSModal.tsx
+++ b/src/pages/common/CSSDebug/CSSModal.tsx
@@ -13,4 +13,4 @@ export default function CSSModal(props: propsIF) {
<CSSDebug noSwap />
</div>
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/common/CSSDebug/ColorToggle.tsx b/src/pages/common/CSSDebug/ColorToggle.tsx
index 3a71a79749..408163d5f4 100644
--- a/src/pages/common/CSSDebug/ColorToggle.tsx
+++ b/src/pages/common/CSSDebug/ColorToggle.tsx
@@ -16,10 +16,12 @@ export default function ColorToggle(props: propsIF) {
const { cssDebug } = useContext(UserPreferenceContext);
- const [color, setColor] = useState<string>(getCssCustomPropertyValue(cssProperty.name));
+ const [color, setColor] = useState<string>(
+ getCssCustomPropertyValue(cssProperty.name),
+ );
function getCssCustomPropertyValue(p: string): string {
- const cached: string|undefined = cssDebug.check(p);
+ const cached: string | undefined = cssDebug.check(p);
const root: HTMLElement = document.documentElement;
const value: string = getComputedStyle(root).getPropertyValue(p).trim();
return cached ?? value;
@@ -31,14 +33,18 @@ export default function ColorToggle(props: propsIF) {
document.documentElement.style.setProperty(cssProperty.name, c);
}
- const originalColor = useRef<string>(getCssCustomPropertyValue(cssProperty.name));
+ const originalColor = useRef<string>(
+ getCssCustomPropertyValue(cssProperty.name),
+ );
return (
<section className={styles.color_toggle}>
<div className={styles.toggle_area}>
<header>
<h4>Toggle {cssProperty.name}</h4>
- <RxReset onClick={() => handleChange(originalColor.current)}/>
+ <RxReset
+ onClick={() => handleChange(originalColor.current)}
+ />
</header>
<SketchPicker
color={color}
@@ -46,51 +52,41 @@ export default function ColorToggle(props: propsIF) {
/>
</div>
<div className={styles.preview_area}>
- {
- cssProperty.format === 'text' && (
- allColors.background.map((
- (c: cssColorIF) => (
- <section
- key={JSON.stringify(c)}
- className={styles.text_sample}
- >
- <h5>On {c.name}:</h5>
- <p
- style={{
- color: color,
- backgroundColor: `var(${c.name})`
- }}
- >
- {sampleText}
- </p>
- </section>
- )
- ))
- )
- }
- {
- cssProperty.format === 'background' && (
- allColors.text.map((
- (c: cssColorIF) => (
- <section
- key={JSON.stringify(c)}
- className={styles.text_sample}
- >
- <h5>Under {c.name}:</h5>
- <p
- style={{
- color: `var(${c.name})`,
- backgroundColor: color,
- }}
- >
- {sampleText}
- </p>
- </section>
- )
- ))
- )
- }
+ {cssProperty.format === 'text' &&
+ allColors.background.map((c: cssColorIF) => (
+ <section
+ key={JSON.stringify(c)}
+ className={styles.text_sample}
+ >
+ <h5>On {c.name}:</h5>
+ <p
+ style={{
+ color: color,
+ backgroundColor: `var(${c.name})`,
+ }}
+ >
+ {sampleText}
+ </p>
+ </section>
+ ))}
+ {cssProperty.format === 'background' &&
+ allColors.text.map((c: cssColorIF) => (
+ <section
+ key={JSON.stringify(c)}
+ className={styles.text_sample}
+ >
+ <h5>Under {c.name}:</h5>
+ <p
+ style={{
+ color: `var(${c.name})`,
+ backgroundColor: color,
+ }}
+ >
+ {sampleText}
+ </p>
+ </section>
+ ))}
</div>
</section>
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/common/TestPage/TestPage.tsx b/src/pages/common/TestPage/TestPage.tsx
index 98d15e7e17..b04a362d9a 100644
--- a/src/pages/common/TestPage/TestPage.tsx
+++ b/src/pages/common/TestPage/TestPage.tsx
@@ -4,30 +4,32 @@
import { useState } from 'react';
import SwipeableTabs from '../../TestPage/SwipeableTabs';
-
-
export default function TestPage() {
const [activeTab, setActiveTab] = useState(0);
const tabData = [
- { label: 'Trade', content: <div>Content for Trade</div> },
- { label: 'Explore', content: <div>Content for Explore</div> },
- { label: 'Account', content: <div>Content for Account</div> },
- { label: 'Chat', content: <div>Content for Chat</div> },
+ { label: 'Trade', content: <div>Content for Trade</div> },
+ { label: 'Explore', content: <div>Content for Explore</div> },
+ { label: 'Account', content: <div>Content for Account</div> },
+ { label: 'Chat', content: <div>Content for Chat</div> },
];
-
+
return (
- <div>
- {/* Control buttons in another component */}
<div>
- <button onClick={() => setActiveTab(0)}>Go to Trade</button>
- <button onClick={() => setActiveTab(1)}>Go to Explore</button>
- <button onClick={() => setActiveTab(2)}>Go to Account</button>
- <button onClick={() => setActiveTab(3)}>Go to Chat</button>
+ {/* Control buttons in another component */}
+ <div>
+ <button onClick={() => setActiveTab(0)}>Go to Trade</button>
+ <button onClick={() => setActiveTab(1)}>Go to Explore</button>
+ <button onClick={() => setActiveTab(2)}>Go to Account</button>
+ <button onClick={() => setActiveTab(3)}>Go to Chat</button>
+ </div>
+
+ {/* Pass activeTab and setActiveTab to SwipeableTabs */}
+ <SwipeableTabs
+ tabs={tabData}
+ activeTab={activeTab}
+ setActiveTab={setActiveTab}
+ />
</div>
-
- {/* Pass activeTab and setActiveTab to SwipeableTabs */}
- <SwipeableTabs tabs={tabData} activeTab={activeTab} setActiveTab={setActiveTab} />
- </div>
);
- };
+}
diff --git a/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx b/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx
index e108850467..85368d7549 100644
--- a/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx
+++ b/src/pages/platformAmbient/Chart/Axes/yAxis/YaxisCanvas.tsx
@@ -476,7 +476,10 @@ function YAxisCanvas(props: yAxisIF) {
: liqTransitionPointforDepth
: poolPriceDisplay;
- if ((simpleRangeWidth !== 100 || advancedMode) && !(low ===0 && high === 0)) {
+ if (
+ (simpleRangeWidth !== 100 || advancedMode) &&
+ !(low === 0 && high === 0)
+ ) {
const { tick: lowTick, tickSubString: lowTickSubString } =
prepareTickLabel(low);
diff --git a/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts b/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts
index db4d06d8c0..e8effad83e 100644
--- a/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts
+++ b/src/pages/platformAmbient/Chart/ChartUtils/chartUtils.ts
@@ -127,7 +127,7 @@ export type chartItemStates = {
liqMode: string;
showSwap: boolean;
setShowSwap: React.Dispatch<React.SetStateAction<boolean>>;
- showLatest: boolean;
+ showLatest: boolean;
setShowLatest: React.Dispatch<React.SetStateAction<boolean>>;
setLatest: React.Dispatch<React.SetStateAction<boolean>>;
rescale: boolean;
diff --git a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx
index 315c5734e8..5b96213afa 100644
--- a/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx
+++ b/src/pages/platformAmbient/Chart/Draw/DrawCanvas/DragCanvas.tsx
@@ -582,7 +582,7 @@ export default function DragCanvas(props: DragCanvasProps) {
? valueX > scaleData.xScale.invert(offsetX)
: valueX < scaleData.xScale.invert(offsetX);
- setCrossHairDataFunc(valueX,offsetX,offsetY);
+ setCrossHairDataFunc(valueX, offsetX, offsetY);
if (
hoveredDrawnShape &&
diff --git a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbar.tsx b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbar.tsx
index 41edc2bd12..8ef9df6c73 100644
--- a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbar.tsx
+++ b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbar.tsx
@@ -904,7 +904,7 @@ function FloatingToolbar(props: FloatingToolbarProps) {
.node() as HTMLDivElement;
let offsetX = 0;
let offsetY = 0;
-
+
if (floatingDiv && floatingMenuDiv && floatingDivContainer) {
const floatingDivDrag = d3
.drag<d3.DraggedElementBaseType, unknown, d3.SubjectPosition>()
@@ -1012,7 +1012,7 @@ function FloatingToolbar(props: FloatingToolbarProps) {
selectedDrawnShape,
isSettingsTabActive,
isNearestWindow,
- divTop === undefined
+ divTop === undefined,
]);
useEffect(() => {
diff --git a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.module.css b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.module.css
index 810df179f0..f0d5233404 100644
--- a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.module.css
+++ b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.module.css
@@ -17,7 +17,6 @@
overflow-x: hidden;
}
-
.scrollableDiv::-webkit-scrollbar {
width: 0;
display: none;
@@ -218,4 +217,3 @@
filter: invert(39%) sepia(27%) saturate(240%) hue-rotate(171deg)
brightness(50%) contrast(82%);
}
-
diff --git a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx
index 38d2a40b4e..04e7c3629a 100644
--- a/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx
+++ b/src/pages/platformAmbient/Chart/Draw/Toolbar/Toolbar.tsx
@@ -83,7 +83,7 @@ function ChartToolbar() {
} = useContext(ChartContext);
const scrollContainerRef = useRef<HTMLDivElement>(null);
- const { chartThemeColors,isFullScreen } = useContext(ChartContext);
+ const { chartThemeColors, isFullScreen } = useContext(ChartContext);
const [isHoveredUp, setIsHoveredUp] = useState(false);
const [isHoveredDown, setIsHoveredDown] = useState(false);
@@ -507,9 +507,7 @@ function ChartToolbar() {
<IconCard>
<IconActiveContainer
- onClick={() =>
- handleDeleteAll()
- }
+ onClick={() => handleDeleteAll()}
onMouseEnter={() => {
handleOnMouseEnter('Delete All');
}}
diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx
index 35217ac894..95bc244c6f 100644
--- a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx
+++ b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx
@@ -74,7 +74,7 @@ export default function LiquidityChart(props: liquidityPropsIF) {
const poolPriceDisplay = poolPriceWithoutDenom
? isDenomBase && poolPriceWithoutDenom
? 1 / poolPriceWithoutDenom
- : poolPriceWithoutDenom ?? 0
+ : (poolPriceWithoutDenom ?? 0)
: 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -589,15 +589,9 @@ export default function LiquidityChart(props: liquidityPropsIF) {
}
})
.on('measure', (event: CustomEvent) => {
- liquidityScale.range([
- event.detail.width,
- 0,
- ]);
-
- liquidityDepthScale.range([
- event.detail.width,
- 0,
- ]);
+ liquidityScale.range([event.detail.width, 0]);
+
+ liquidityDepthScale.range([event.detail.width, 0]);
scaleData?.yScale.range([event.detail.height, 0]);
liqBidSeries?.context(ctx);
@@ -994,8 +988,8 @@ export default function LiquidityChart(props: liquidityPropsIF) {
ref={d3CanvasLiqHover}
style={{
position: 'relative',
- width: mobileView ? '20%' :'8%',
- marginLeft: mobileView ? '80%' : '92%',
+ width: mobileView ? '20%' : '8%',
+ marginLeft: mobileView ? '80%' : '92%',
}}
></d3fc-canvas>
<d3fc-canvas
@@ -1003,7 +997,7 @@ export default function LiquidityChart(props: liquidityPropsIF) {
style={{
position: 'relative',
width: mobileView ? '20%' : '8%',
- marginLeft: mobileView ? '80%' : '92%',
+ marginLeft: mobileView ? '80%' : '92%',
}}
></d3fc-canvas>
</>
diff --git a/src/pages/platformAmbient/Chart/Volume/VolumeBarCanvas.tsx b/src/pages/platformAmbient/Chart/Volume/VolumeBarCanvas.tsx
index e4206cdaf1..67d996c8c8 100644
--- a/src/pages/platformAmbient/Chart/Volume/VolumeBarCanvas.tsx
+++ b/src/pages/platformAmbient/Chart/Volume/VolumeBarCanvas.tsx
@@ -144,10 +144,7 @@ export default function VolumeBarCanvas(props: propsIF) {
barSeries(volumeData);
})
.on('measure', (event: CustomEvent) => {
- scaleData?.volumeScale.range([
- event.detail.height,
- 0,
- ]);
+ scaleData?.volumeScale.range([event.detail.height, 0]);
barSeries.context(ctx);
});
}
@@ -158,8 +155,8 @@ export default function VolumeBarCanvas(props: propsIF) {
ref={d3CanvasBar}
className='volume-canvas'
style={{
- gridRowStart:2,
- gridRowEnd:3,
+ gridRowStart: 2,
+ gridRowEnd: 3,
}}
></d3fc-canvas>
);
diff --git a/src/pages/platformAmbient/Explore/Explore.module.css b/src/pages/platformAmbient/Explore/Explore.module.css
index 76b5cd8332..879ead96ef 100644
--- a/src/pages/platformAmbient/Explore/Explore.module.css
+++ b/src/pages/platformAmbient/Explore/Explore.module.css
@@ -74,7 +74,6 @@
border: 1px solid var(--dark3);
width: 300px;
-
}
.input_wrapper {
@@ -140,7 +139,7 @@
font-size: 20px;
}
- .input_container{
+ .input_container {
border: none;
}
}
@@ -227,8 +226,7 @@
}
@media only screen and (min-width: 768px) {
-
- .main_container{
+ .main_container {
padding: 16px;
}
.gridContainer {
diff --git a/src/pages/platformAmbient/Level/RankTable/RankTable.module.css b/src/pages/platformAmbient/Level/RankTable/RankTable.module.css
index 81e66e9ae6..9164cc6af1 100644
--- a/src/pages/platformAmbient/Level/RankTable/RankTable.module.css
+++ b/src/pages/platformAmbient/Level/RankTable/RankTable.module.css
@@ -1,62 +1,56 @@
-.main_table{
-display: flex;
-flex-direction: column;
-background-color: var(--dark2);
-padding: 8px 8px 8px 0;
-gap: 8px;
-height: 100%;
-max-height: 80vh;
-border-radius: 4px;
-margin: 0 auto;
-
-}
-.row_container{
+.main_table {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--dark2);
+ padding: 8px 8px 8px 0;
+ gap: 8px;
+ height: 100%;
+ max-height: 80vh;
+ border-radius: 4px;
+ margin: 0 auto;
+}
+.row_container {
height: 40px;
- border: 1px solid transparent
+ border: 1px solid transparent;
}
-.row_container, .row_container_header{
+.row_container,
+.row_container_header {
display: grid;
padding: 0 8px;
-
+
transition: all var(--animation-speed) ease-in-out;
align-items: center;
-
-
-
}
-
-.row_container:hover, .row_container_header:hover{
+.row_container:hover,
+.row_container_header:hover {
background-color: var(--dark3);
}
-.row_container span:first-child, .row_container_header span:first-child{
+.row_container span:first-child,
+.row_container_header span:first-child {
text-align: center;
}
-.row_container span:nth-child(2), .row_container_header span:nth-child(2), .row_container span:nth-child(3),
-.row_container_header span:nth-child(3){
+.row_container span:nth-child(2),
+.row_container_header span:nth-child(2),
+.row_container span:nth-child(3),
+.row_container_header span:nth-child(3) {
text-align: center;
-
}
.row_container span:nth-child(4),
-.row_container_header span:nth-child(4){
-text-align: center;
+.row_container_header span:nth-child(4) {
+ text-align: center;
}
-
-.main_table_content{
+.main_table_content {
overflow-y: scroll;
overflow-x: hidden;
- height: 100%;
+ height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
-
-
-
-
}
.first_style {
@@ -67,7 +61,6 @@ text-align: center;
rgba(209, 142, 10, 0) 100%
);
transition: background 0.5s ease-out;
-
}
.second_style {
@@ -90,65 +83,63 @@ text-align: center;
transition: background 0.5s ease-out;
}
-
-.menu_button{
+.menu_button {
display: flex;
-width: 25px;
-height: 25px;
-padding: 10px 2px;
-justify-content: center;
-align-items: center;
-border-radius: 8px;
-border: 1px solid var(--dark3);
-background: var(--dark2);
-text-align: center;
+ width: 25px;
+ height: 25px;
+ padding: 10px 2px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1px solid var(--dark3);
+ background: var(--dark2);
+ text-align: center;
-font-size: var(--body-size);
-color:var(--text2);
-cursor: pointer;
+ font-size: var(--body-size);
+ color: var(--text2);
+ cursor: pointer;
}
-.menu_button:hover{
- color: var(--accent1)
+.menu_button:hover {
+ color: var(--accent1);
}
-.row_container span:nth-child(3), .row_container_header span:nth-child(3){
-display: none;
+.row_container span:nth-child(3),
+.row_container_header span:nth-child(3) {
+ display: none;
}
-.row_container, .row_container_header{
+.row_container,
+.row_container_header {
grid-template-columns: 40px 120px 120px 60px 0.5fr;
-
-
}
-.user_row{
+.user_row {
border-left: 1px solid var(--accent1);
}
-
-@media only screen and (min-width: 580px) {
- .row_container, .row_container_header{
+@media only screen and (min-width: 580px) {
+ .row_container,
+ .row_container_header {
grid-template-columns: 40px 100px 100px 90px auto;
}
- .main_table{
+ .main_table {
width: 450px;
}
- .row_container span:nth-child(3), .row_container_header span:nth-child(3){
+ .row_container span:nth-child(3),
+ .row_container_header span:nth-child(3) {
width: 100%;
display: flex;
justify-content: center;
- }
-
+ }
}
@media only screen and (min-width: 590px) {
-.main_table{
- width: 688px;
-
-}
+ .main_table {
+ width: 688px;
+ }
-.row_container, .row_container_header{
- grid-template-columns: 40px 210px 210px 100px auto;
-
-}
+ .row_container,
+ .row_container_header {
+ grid-template-columns: 40px 210px 210px 100px auto;
+ }
}
diff --git a/src/pages/platformAmbient/Level/RankTable/RankTable.tsx b/src/pages/platformAmbient/Level/RankTable/RankTable.tsx
index be292bec2d..89e10d9cdb 100644
--- a/src/pages/platformAmbient/Level/RankTable/RankTable.tsx
+++ b/src/pages/platformAmbient/Level/RankTable/RankTable.tsx
@@ -71,10 +71,10 @@ export default function RankTable(props: Props) {
),
userAddress: connectedUserXp.data.userAddress,
points: (selectedXpLeaderboardType === 'Weekly'
- ? connectedUserXp.data.weeklyPoints ?? 0
+ ? (connectedUserXp.data.weeklyPoints ?? 0)
: selectedXpLeaderboardType === 'Chain'
- ? connectedUserXp.data.chainPoints ?? 0
- : connectedUserXp.data.globalPoints ?? 0
+ ? (connectedUserXp.data.chainPoints ?? 0)
+ : (connectedUserXp.data.globalPoints ?? 0)
).toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
diff --git a/src/pages/platformAmbient/Swap/Swap.module.css b/src/pages/platformAmbient/Swap/Swap.module.css
index e104e4aec3..256f94d9eb 100644
--- a/src/pages/platformAmbient/Swap/Swap.module.css
+++ b/src/pages/platformAmbient/Swap/Swap.module.css
@@ -8,18 +8,14 @@
flex-direction: column;
align-items: center;
height: calc(100vh - 56px);
-
}
.swap_page_container > section {
margin-top: 16px;
height: auto;
}
-
@media only screen and (min-width: 768px) {
.swap_page_container > section {
margin-top: 64px;
-
}
-
}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.css
index c31fdf090b..c6f6d76fd2 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.css
@@ -117,12 +117,13 @@ background-size: cover; */
max-height: 100%;
}
-
.skeleton {
- background: linear-gradient(90deg,
- rgba(7, 7, 7, 0.1) 25%,
- rgba(52, 45, 45, 0.2) 50%,
- rgba(55, 53, 53, 0.1) 75%);
+ background: linear-gradient(
+ 90deg,
+ rgba(7, 7, 7, 0.1) 25%,
+ rgba(52, 45, 45, 0.2) 50%,
+ rgba(55, 53, 53, 0.1) 75%
+ );
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
@@ -138,4 +139,4 @@ background-size: cover; */
100% {
background-position: -100% 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
index 60fb04e508..e196565833 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCandleStickChart.tsx
@@ -664,7 +664,7 @@ function TradeCandleStickChart(props: propsIF) {
}, [candleScale.isFetchFirst200Candle]);
useEffect(() => {
- if (!mobileView) {
+ if (!mobileView) {
setMinPrice(0);
setMaxPrice(0);
}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css
index 7b146d802a..2b698d758c 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeCharts.module.css
@@ -57,7 +57,7 @@
gap: 15px;
padding: 10px;
-
+
display: flex;
justify-content: center;
align-items: center;
@@ -90,8 +90,9 @@
.mobile_settings_header {
display: none;
}
- .active_selected_button:hover, .futa_active_selected_button:hover
- .non_active_selected_button:hover, .futa_non_active_selected_button {
+ .active_selected_button:hover,
+ .futa_active_selected_button:hover .non_active_selected_button:hover,
+ .futa_non_active_selected_button {
/* background: var(--title-gradient); */
color: var(--text1);
}
@@ -105,19 +106,21 @@
}
}
-.active_selected_button, .futa_active_selected_button {
+.active_selected_button,
+.futa_active_selected_button {
width: 100%;
height: 100%;
color: var(--text1);
}
-.non_active_selected_button, .futa_non_active_selected_button {
+.non_active_selected_button,
+.futa_non_active_selected_button {
color: var(--text2);
}
.conxtext_options_container {
width: 100%;
-
+
display: flex;
flex-direction: column;
justify-content: start;
@@ -137,7 +140,7 @@
.conxtext_options_header {
width: 100%;
-
+
display: flex;
justify-content: start;
align-items: center;
@@ -147,7 +150,7 @@
.conxtext_options {
width: 100%;
-
+
display: flex;
flex-direction: column;
justify-content: center;
@@ -158,7 +161,6 @@
background-color: var(--dark2);
}
-
.conxtext_options_section {
width: 100%;
@@ -185,5 +187,3 @@
padding-right: 4px;
}
-
-
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.module.css
index e06208ddf1..d1d316f9ad 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.module.css
@@ -20,7 +20,12 @@
.topBar {
background: var(--dark3);
height: 13px;
- background: linear-gradient(to right, var(--dark1) 8%, var(--dark2) 18%, var(--dark1) 33%);
+ background: linear-gradient(
+ to right,
+ var(--dark1) 8%,
+ var(--dark2) 18%,
+ var(--dark1) 33%
+ );
background-size: 1200px 100%;
animation: shimmer 2.5s infinite ease-in-out; /* Adjust duration */
}
@@ -44,7 +49,12 @@
align-items: center;
gap: 4px;
align-self: stretch;
- background: linear-gradient(to right, var(--dark1) 8%, var(--dark2) 18%, var(--dark1) 33%);
+ background: linear-gradient(
+ to right,
+ var(--dark1) 8%,
+ var(--dark2) 18%,
+ var(--dark1) 33%
+ );
background-size: 1200px 100%;
animation: shimmer 2.5s infinite ease-in-out; /* Adjust duration */
}
@@ -65,7 +75,7 @@
position: relative;
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: center;
padding: 8px;
height: 100%;
animation: shimmer 2.5s infinite ease-in-out; /* Adjust duration */
@@ -73,10 +83,13 @@
padding: 1rem 3rem;
}
-
-
.shimmerBG {
- background: linear-gradient(to right, var(--dark1) 8%, var(--dark2) 18%, var(--dark1) 33%);
+ background: linear-gradient(
+ to right,
+ var(--dark1) 8%,
+ var(--dark2) 18%,
+ var(--dark1) 33%
+ );
background-size: 1200px 100%;
animation: shimmer 2.5s infinite ease-in-out;
}
@@ -98,7 +111,12 @@
justify-content: center;
align-items: center;
padding: 4px;
- background: linear-gradient(to right, var(--dark1) 8%, var(--dark2) 18%, var(--dark1) 33%);
+ background: linear-gradient(
+ to right,
+ var(--dark1) 8%,
+ var(--dark2) 18%,
+ var(--dark1) 33%
+ );
background-size: 1200px 100%;
animation: shimmer 2.5s infinite ease-in-out;
}
@@ -109,13 +127,12 @@
height: 20px;
}
-.loadingText{
+.loadingText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
-
}
/* Responsive Design: Smaller Screens */
@@ -161,7 +178,7 @@
height: auto;
}
- svg{
+ svg {
display: none;
}
}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.tsx
index 0c91d990c1..9669e3615b 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.tsx
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/ChartSkeleton.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import styles from './ChartSkeleton.module.css';
-interface PropsIF{
- periodToReadableTime: string | undefined
+interface PropsIF {
+ periodToReadableTime: string | undefined;
}
const ChartSkeleton = (props: PropsIF) => {
const svg = (
@@ -70,10 +70,9 @@ const ChartSkeleton = (props: PropsIF) => {
return (
<section className={`${styles.container} ${styles.shimmerBG}`}>
<h3 className={styles.loadingText}>
-
- Loading {props.periodToReadableTime}
+ Loading {props.periodToReadableTime}
Candle Chart...
- </h3>
+ </h3>
<span className={styles.topBar}></span>
@@ -90,8 +89,7 @@ const ChartSkeleton = (props: PropsIF) => {
</div>
<div className={`${styles.middleSide} ${styles.shimmerBG}`}>
-
- {svg}
+ {svg}
</div>
<div className={styles.rightSide}>
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.module.css
index 4883826398..36672d4e2e 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.module.css
@@ -5,8 +5,6 @@
gap: 4px;
}
-
-
.active_selected_button,
.non_active_selected_button {
background: transparent;
@@ -42,7 +40,6 @@
color: var(--text2);
}
-.mobile_container{
+.mobile_container {
display: flex;
-
-}
\ No newline at end of file
+}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx
index a33691307a..39f8fdd560 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/CurveDepth.tsx
@@ -1,5 +1,5 @@
import styles from './CurveDepth.module.css';
-import { memo } from 'react';
+import { memo } from 'react';
import useMediaQuery from '../../../../../utils/hooks/useMediaQuery';
import { overlayIF } from '../../../../../App/hooks/useChartSettings';
@@ -10,7 +10,6 @@ interface propsIF {
function CurveDepth(props: propsIF) {
const { overlayMethods } = props;
-
const mobileView = useMediaQuery('(max-width: 768px)');
const curveDepthData = [
@@ -31,37 +30,31 @@ function CurveDepth(props: propsIF) {
},
];
-
- ;
-
function handleCurveDepthClickMobile(action: () => void) {
action();
}
const curveDepthMobile = (
-
-
- <div className={styles.mobile_container}>
- {curveDepthData.map((button, idx) => (
- <div className={styles.curve_depth_container} key={idx}>
- <button
- onClick={() =>
- handleCurveDepthClickMobile(button.action)
- }
- className={
- button.name.toLowerCase() ===
- overlayMethods.overlay.toLowerCase()
- ? styles.active_selected_button
- : styles.non_active_selected_button
- }
- aria-label={button.name}
- >
- {button.name}
- </button>
- </div>
- ))}
- </div>
-
+ <div className={styles.mobile_container}>
+ {curveDepthData.map((button, idx) => (
+ <div className={styles.curve_depth_container} key={idx}>
+ <button
+ onClick={() =>
+ handleCurveDepthClickMobile(button.action)
+ }
+ className={
+ button.name.toLowerCase() ===
+ overlayMethods.overlay.toLowerCase()
+ ? styles.active_selected_button
+ : styles.non_active_selected_button
+ }
+ aria-label={button.name}
+ >
+ {button.name}
+ </button>
+ </div>
+ ))}
+ </div>
);
if (mobileView) return curveDepthMobile;
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx
index 754f71aa52..a3a0c78efe 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/OrderHistoryDisplay.tsx
@@ -1,10 +1,5 @@
import styles from './VolumeTVLFee.module.css';
-import {
- Dispatch,
- SetStateAction,
- memo,
- useContext,
-} from 'react';
+import { Dispatch, SetStateAction, memo, useContext } from 'react';
import useMediaQuery from '../../../../../utils/hooks/useMediaQuery';
import { LS_KEY_ORDER_HISTORY_SETTINGS } from '../../../../../ambient-utils/constants';
import { BrandContext } from '../../../../../contexts/BrandContext';
@@ -40,8 +35,6 @@ function OrderHistoryDisplay(props: OrderHistoryDisplayPropsIF) {
);
};
-
-
const mobileView = useMediaQuery('(max-width: 768px)');
const handleSwapToggle = () => {
@@ -86,12 +79,10 @@ function OrderHistoryDisplay(props: OrderHistoryDisplayPropsIF) {
function handleCurveDepthClickMobile(action: () => void) {
action();
-
}
const OrderHistoryDisplayMobile = (
- <div className={styles.dropdown_menu} >
-
+ <div className={styles.dropdown_menu}>
<div className={styles.mobile_container}>
{orderHistoryDisplay.map((button, idx) => (
<div className={styles.volume_tvl_container} key={idx}>
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.module.css
index 62f247cfcf..b437c05c39 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.module.css
@@ -121,6 +121,6 @@
box-shadow: var(--glow-light-box-shadow);
}
-.mobile_container{
+.mobile_container {
display: flex;
}
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx
index 866f65680b..7dbeef198d 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TimeFrame.tsx
@@ -1,5 +1,5 @@
import styles from './TimeFrame.module.css';
-import { useRef, memo, useContext } from 'react';
+import { useRef, memo, useContext } from 'react';
import useMediaQuery from '../../../../../utils/hooks/useMediaQuery';
import { candleTimeIF } from '../../../../../App/hooks/useChartSettings';
import { BrandContext } from '../../../../../contexts/BrandContext';
@@ -11,29 +11,23 @@ interface propsIF {
function TimeFrame(props: propsIF) {
const { candleTime } = props;
-
const mobileView = useMediaQuery('(max-width: 968px)');
const tabletView = useMediaQuery(
'(min-width: 768px) and (max-width: 1200px)',
);
const dropdownItemRef = useRef<HTMLDivElement>(null);
-
-
const { platformName } = useContext(BrandContext);
const timeFrameMobile = (
<div className={styles.dropdown_menu} ref={dropdownItemRef}>
-
-
<div className={styles.mobile_container}>
{candleTime.defaults.map((option, idx) => (
<div className={styles.main_time_frame_container} key={idx}>
<button
onClick={() => {
candleTime.changeTime(option.seconds);
-
}}
className={
['futa'].includes(platformName)
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.module.css
index d965a95ab4..a94fe4fa0d 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/TradeChartsTokenInfo.module.css
@@ -1,28 +1,24 @@
-
-.container{
+.container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
-
}
-.dropdownContainer{
+.dropdownContainer {
padding-left: 1rem;
width: 100%;
display: flex;
align-items: flex-start;
}
-
-
@media (min-width: 1500px) {
-.container{
- flex-direction: row;
- align-items: center;
- gap: 16px;
-}
-.dropdownContainer{
- padding-left: 0;
+ .container {
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+ }
+ .dropdownContainer {
+ padding-left: 0;
+ }
}
-}
\ No newline at end of file
diff --git a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/VolumeTVLFee.module.css b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/VolumeTVLFee.module.css
index 536c8ec95b..51d35878af 100644
--- a/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/VolumeTVLFee.module.css
+++ b/src/pages/platformAmbient/Trade/TradeCharts/TradeChartsComponents/VolumeTVLFee.module.css
@@ -57,7 +57,6 @@
height: 25px;
padding: 4px 16px 4px 16px;
-
}
.futa_active_selected_button:hover,
diff --git a/src/pages/platformAmbient/Trade/TradeMobile.module.css b/src/pages/platformAmbient/Trade/TradeMobile.module.css
index d9044f3a5a..8057ca8229 100644
--- a/src/pages/platformAmbient/Trade/TradeMobile.module.css
+++ b/src/pages/platformAmbient/Trade/TradeMobile.module.css
@@ -6,7 +6,7 @@
}
.mobile_tabs_container {
- padding: 1rem;
+ padding: 1rem;
display: flex;
grid-template-columns: repeat(4, 1fr);
align-items: center;
@@ -70,4 +70,4 @@
.mobile_tabs_container button {
padding: 5px 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/platformAmbient/Vaults/NoVaults.module.css b/src/pages/platformAmbient/Vaults/NoVaults.module.css
index 176a74690a..177c6e5775 100644
--- a/src/pages/platformAmbient/Vaults/NoVaults.module.css
+++ b/src/pages/platformAmbient/Vaults/NoVaults.module.css
@@ -5,4 +5,4 @@
align-items: center;
height: 100%;
gap: 12px;
-}
\ No newline at end of file
+}
diff --git a/src/pages/platformAmbient/Vaults/Vault.ts b/src/pages/platformAmbient/Vaults/Vault.ts
index fcac7a5f7a..f457da2c99 100644
--- a/src/pages/platformAmbient/Vaults/Vault.ts
+++ b/src/pages/platformAmbient/Vaults/Vault.ts
@@ -1,4 +1,8 @@
-import { AllVaultsServerIF, UserVaultsServerIF, VaultIF } from '../../../ambient-utils/types';
+import {
+ AllVaultsServerIF,
+ UserVaultsServerIF,
+ VaultIF,
+} from '../../../ambient-utils/types';
export class Vault implements VaultIF {
id: string;
@@ -39,12 +43,12 @@ export class Vault implements VaultIF {
aprRebaseUnitToken: string;
tvlUsd: string;
apr: string;
- balance: string|undefined;
- balanceAmount: string|undefined;
- balanceUsd: string|undefined;
+ balance: string | undefined;
+ balanceAmount: string | undefined;
+ balanceUsd: string | undefined;
constructor(
- v: VaultIF|AllVaultsServerIF,
- userVault: UserVaultsServerIF | null | undefined
+ v: VaultIF | AllVaultsServerIF,
+ userVault: UserVaultsServerIF | null | undefined,
) {
this.id = v.id;
this.createdAt = v.createdAt;
@@ -84,20 +88,24 @@ export class Vault implements VaultIF {
this.aprRebaseUnitToken = v.aprRebaseUnitToken;
this.tvlUsd = v.tvlUsd;
this.apr = v.apr;
-
- type entryTuple = [string, string|undefined];
+
+ type entryTuple = [string, string | undefined];
const entries: entryTuple[] = Object.entries(v);
- const findVal = (k: 'balance'|'balanceAmount'|'balanceUsd'): string|undefined => {
- const tuple: entryTuple|undefined = entries.find((e) => e[0] === k);
- let output: string|undefined;
+ const findVal = (
+ k: 'balance' | 'balanceAmount' | 'balanceUsd',
+ ): string | undefined => {
+ const tuple: entryTuple | undefined = entries.find(
+ (e) => e[0] === k,
+ );
+ let output: string | undefined;
if (userVault) {
output = userVault[k];
} else if (tuple) {
output = tuple[1];
}
return output;
- }
+ };
this.balance = findVal('balance');
this.balanceAmount = findVal('balanceAmount');
diff --git a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultDeposit/VaultDeposit.module.css b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultDeposit/VaultDeposit.module.css
index b9a37c26bd..f7037f351d 100644
--- a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultDeposit/VaultDeposit.module.css
+++ b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultDeposit/VaultDeposit.module.css
@@ -6,7 +6,6 @@
gap: 16px;
min-height: 348px;
position: relative;
-
}
.content {
@@ -90,110 +89,103 @@
pointer-events: none;
padding-left: 8px;
padding-right: 1.5rem;
-
}
-.buttonContainer{
+.buttonContainer {
width: 90%;
- position: absolute;
- bottom: 16px;
- right: 0;
- left: 0;
- margin: 0 auto;
+ position: absolute;
+ bottom: 16px;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
}
-.confContainer{
+.confContainer {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
- color: var(--text2, #8B98A5);
-text-align: center;
+ color: var(--text2, #8b98a5);
+ text-align: center;
-font-family: "Lexend Deca";
-font-size: 12px;
-font-style: normal;
-font-weight: 300;
-line-height: normal;
+ font-family: 'Lexend Deca';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
}
-.confDetails{
+.confDetails {
width: 100%;
display: flex;
border-radius: 4px;
-border: 1px solid var(--dark3, #1E1E24);
-padding: 8px;
-flex-direction: column;
-align-items: center;
-gap: 10px;
-align-self: stretch;
+ border: 1px solid var(--dark3, #1e1e24);
+ padding: 8px;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ align-self: stretch;
}
-.confRow{
+.confRow {
width: 100%;
-display: flex;
-flex-direction: row;
-align-items: center;
-justify-content: space-between;
-
-
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
}
-.gas_row{
+.gas_row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
- color: var(--text2, #8B98A5);
-text-align: center;
-font-family: "Lexend Deca";
-font-size: 12px;
-font-style: normal;
-font-weight: 300;
-line-height: normal;
-padding: 0 8px;
+ color: var(--text2, #8b98a5);
+ text-align: center;
+ font-family: 'Lexend Deca';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ padding: 0 8px;
}
@media only screen and (min-width: 768px) {
-.container{
- width: 398px;
-}
-
-
-
+ .container {
+ width: 398px;
+ }
}
.loading {
display: flex;
align-items: center;
justify-content: center;
- }
-
- .dots::after {
- content: "";
+}
+
+.dots::after {
+ content: '';
animation: dots 1.5s steps(5, end) infinite;
- }
-
- @keyframes dots {
+}
+
+@keyframes dots {
0% {
- content: "";
+ content: '';
}
20% {
- content: ".";
+ content: '.';
}
40% {
- content: "..";
+ content: '..';
}
60% {
- content: "...";
+ content: '...';
}
80% {
- content: "....";
+ content: '....';
}
100% {
- content: "";
+ content: '';
}
- }
-
\ No newline at end of file
+}
diff --git a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.module.css b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.module.css
index 321422ea81..74e98e155e 100644
--- a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.module.css
+++ b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.module.css
@@ -177,7 +177,7 @@
line-height: normal;
padding: 0 8px;
}
-.inputWrapper{
+.inputWrapper {
display: flex;
flex-direction: row;
align-items: center;
diff --git a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.tsx b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.tsx
index 0164aea4da..cc8f9181fe 100644
--- a/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.tsx
+++ b/src/pages/platformAmbient/Vaults/VaultActionModal/VaultWithdraw/VaultWithdraw.tsx
@@ -182,7 +182,6 @@ export default function VaultWithdraw(props: propsIF) {
const pooledDisplay = (
<section className={styles.pooledContent}>
-
<div className={styles.pooledContentContainer}>
Deposited {mainAsset.symbol}
<div className={styles.alignCenter}>
@@ -335,7 +334,6 @@ export default function VaultWithdraw(props: propsIF) {
style={{ zIndex: '5' }}
>
<p>Slippage Tolerance</p>
-
</FlexContainer>
<div
className={styles.slipTolValueContainer}
diff --git a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.module.css b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.module.css
index 6413428e0c..70f945e6b9 100644
--- a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.module.css
+++ b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.module.css
@@ -141,11 +141,9 @@
}
@media only screen and (max-width: 1280px) {
-.poolName{
- font-size: 14px;
-}
-
-
+ .poolName {
+ font-size: 14px;
+ }
}
@media only screen and (max-width: 768px) {
.vaultHeader,
diff --git a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx
index 037a12b472..2991cfac38 100644
--- a/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx
+++ b/src/pages/platformAmbient/Vaults/VaultRow/VaultRow.tsx
@@ -46,7 +46,6 @@ export default function VaultRow(props: propsIF) {
const { sessionReceipts } = useContext(ReceiptContext);
const { closeBottomSheet } = useBottomSheet();
-
// const userAddress = '0xe09de95d2a8a73aa4bfa6f118cd1dcb3c64910dc'
const {
@@ -195,8 +194,8 @@ export default function VaultRow(props: propsIF) {
}
function handleModalClose() {
- closeModal()
- closeBottomSheet()
+ closeModal();
+ closeBottomSheet();
}
const modalToOpen =
@@ -271,16 +270,15 @@ export default function VaultRow(props: propsIF) {
Deposit
</button>
- {isUserConnected &&
+ {isUserConnected && (
// !!(vault.balance || crocEnvBal) &&
- (
- <button
- className={styles.actionButton}
- onClick={handleOpenWithdrawModal}
- >
- Withdraw
- </button>
- )}
+ <button
+ className={styles.actionButton}
+ onClick={handleOpenWithdrawModal}
+ >
+ Withdraw
+ </button>
+ )}
</div>
</div>
</div>
diff --git a/src/pages/platformAmbient/Vaults/Vaults.module.css b/src/pages/platformAmbient/Vaults/Vaults.module.css
index 26a3176e0a..8946fdbbe3 100644
--- a/src/pages/platformAmbient/Vaults/Vaults.module.css
+++ b/src/pages/platformAmbient/Vaults/Vaults.module.css
@@ -1,131 +1,125 @@
-.container{
- width: 100%;
- height: 100%;
- background: var(--dark2);
- overflow-y: hidden;
-
+.container {
+ width: 100%;
+ height: 100%;
+ background: var(--dark2);
+ overflow-y: hidden;
}
-.content{
- display: flex;
- flex-direction: column;
- gap: 8px;
- padding: 16px;
- height: 100%;
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 16px;
+ height: 100%;
}
-.scrollableContainer{
- display: flex;
- flex-direction: column;
- gap: 8px;
- overflow-y: scroll;
- height: calc(100% - 74px);
+.scrollableContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ overflow-y: scroll;
+ height: calc(100% - 74px);
}
.vault_page_header > h3 {
- padding: 8px 0;
- color: var(--text1, #EBEBFF);
- /* large */
- font-family: 'Lexend Deca';
- font-size: 24px;
- font-style: normal;
- font-weight: 300;
- line-height: normal;
- letter-spacing: -0.48px;
+ padding: 8px 0;
+ color: var(--text1, #ebebff);
+ /* large */
+ font-family: 'Lexend Deca';
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ letter-spacing: -0.48px;
}
.vault_page_header > p {
- font-size: 12px;
- font-weight: 200;
- letter-spacing: 1px;
+ font-size: 12px;
+ font-weight: 200;
+ letter-spacing: 1px;
}
@media only screen and (max-width: 428px) {
- .scrollableContainer{
- height: calc(100% - 134px);
- }
+ .scrollableContainer {
+ height: calc(100% - 134px);
+ }
}
-
-
/* vaults header */
+.vaultHeader {
+ width: 100%;
+ padding: 0px;
+ padding-top: 4px;
+ display: grid;
+ grid-template-columns: 120px repeat(4, 1fr) 100px;
+ align-items: center;
-.vaultHeader{
- width: 100%;
- padding: 0px;
- padding-top: 4px;
- display: grid;
- grid-template-columns: 120px repeat(4, 1fr) 100px;
- align-items: center;
-
- border-bottom: 3px solid var(--dark3);
+ border-bottom: 3px solid var(--dark3);
}
+.vaultHeader span {
+ text-align: end;
+ color: var(--text2, #8b98a5);
+ text-align: right;
-
-.vaultHeader span{
- text-align: end;
- color: var(--text2, #8B98A5);
- text-align: right;
-
- font-size: 12px;
- font-style: normal;
- font-weight: 300;
- line-height: normal;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
}
.poolName {
-
- text-align: end;
+ text-align: end;
}
-.depositContainer, .apyDisplay{
- padding-right: 12px;
-
+.depositContainer,
+.apyDisplay {
+ padding-right: 12px;
}
-.apyDisplay{
- padding-right: 17px;
+.apyDisplay {
+ padding-right: 17px;
}
-.tvl{
- padding-right: 8px;
+.tvl {
+ padding-right: 8px;
}
@media only screen and (max-width: 768px) {
+ .mainContent,
+ .vaultHeader {
+ grid-template-columns: 100px repeat(2, 1fr) 150px 100px;
+ }
+ .poolName {
+ display: none;
+ }
+
+ .tvlDisplay,
+ .apyDisplay,
+ .depositContainer {
+ font-size: 14px;
+ }
+}
- .mainContent, .vaultHeader{
- grid-template-columns: 100px repeat(2, 1fr) 150px 100px;
- }
- .poolName{
- display: none;
- }
-
- .tvlDisplay, .apyDisplay, .depositContainer{
- font-size: 14px;
-
- }
- }
-
- @media only screen and (max-width: 500px) {
- .mainContent, .vaultHeader{
- grid-template-columns: 100px repeat(2, 1fr) 80px;
- }
-
- .tempestDisplay{
- display: none;
- }
-
- .depositContainer, .apyDisplay{
- word-wrap: break-word;
- padding-right: 10px;
-
- }
- .apyDisplay{
- display: none;
- }
-
- .scrollableContainer{
- margin-bottom: 56px;
- }
-
- }
\ No newline at end of file
+@media only screen and (max-width: 500px) {
+ .mainContent,
+ .vaultHeader {
+ grid-template-columns: 100px repeat(2, 1fr) 80px;
+ }
+
+ .tempestDisplay {
+ display: none;
+ }
+
+ .depositContainer,
+ .apyDisplay {
+ word-wrap: break-word;
+ padding-right: 10px;
+ }
+ .apyDisplay {
+ display: none;
+ }
+
+ .scrollableContainer {
+ margin-bottom: 56px;
+ }
+}
diff --git a/src/pages/platformAmbient/Vaults/Vaults.tsx b/src/pages/platformAmbient/Vaults/Vaults.tsx
index a85df9fdaf..1a657e1e28 100644
--- a/src/pages/platformAmbient/Vaults/Vaults.tsx
+++ b/src/pages/platformAmbient/Vaults/Vaults.tsx
@@ -30,12 +30,12 @@ function Vaults() {
const vaultHeader = (
<div className={styles.vaultHeader}>
- <span/>
- <span className={styles.poolName}/>
+ <span />
+ <span className={styles.poolName} />
<span className={styles.tvl}>TVL</span>
<span className={styles.depositContainer}>My Deposit</span>
<span className={styles.apyDisplay}>APR</span>
- <span className={styles.actionButtonContainer}/>
+ <span className={styles.actionButtonContainer} />
</div>
);
diff --git a/src/pages/platformFuta/Account/Account.module.css b/src/pages/platformFuta/Account/Account.module.css
index 231280c647..e6a4066d38 100644
--- a/src/pages/platformFuta/Account/Account.module.css
+++ b/src/pages/platformFuta/Account/Account.module.css
@@ -169,8 +169,6 @@
}
.container {
-
height: calc(100svh - 280px);
-
}
}
diff --git a/src/pages/platformFuta/Auctions/Auctions.module.css b/src/pages/platformFuta/Auctions/Auctions.module.css
index 2e4c9fa6c9..817375a8b4 100644
--- a/src/pages/platformFuta/Auctions/Auctions.module.css
+++ b/src/pages/platformFuta/Auctions/Auctions.module.css
@@ -12,7 +12,6 @@
}
.consoleChartComponent {
-
display: flex;
flex: 1;
}
diff --git a/src/pages/platformFuta/Create/Create.module.css b/src/pages/platformFuta/Create/Create.module.css
index 6da639712d..8b6c7b1099 100644
--- a/src/pages/platformFuta/Create/Create.module.css
+++ b/src/pages/platformFuta/Create/Create.module.css
@@ -8,7 +8,6 @@
max-width: 400px;
height: calc(100svh - 420px);
z-index: 99 !important;
-
}
.create_token_top {
@@ -119,7 +118,7 @@
background: var(--accent1, #0ccdff);
color: var(--dark1);
border: none;
- transition: all var(--animation-speed) ease-in-out
+ transition: all var(--animation-speed) ease-in-out;
}
.create_button_disabled {
@@ -127,11 +126,10 @@
text-transform: uppercase;
font-size: 24px;
border: 1px solid transparent;
- color: var(--text2)
+ color: var(--text2);
}
-
-.create_button:hover{
+.create_button:hover {
background: var(--accent2);
color: var(--dark1);
}
@@ -142,8 +140,7 @@
gap: 8px;
}
-
-.justifyRow{
+.justifyRow {
width: 100%;
display: flex;
flex-direction: row;
@@ -151,22 +148,18 @@
}
@media only screen and (min-width: 1080px) {
- .mainContainer{
-
+ .mainContainer {
height: calc(100vh - 155px);
transition: all var(--animation-speed) ease-in-out;
overflow: hidden;
-
}
-
- .create_token {
- margin-top: 5rem;
- min-height: 500px;
- max-height: 600px;
- border: 1px solid var(--border);
- background: var(--dark1);
- padding: 16px;
-
-
+
+ .create_token {
+ margin-top: 5rem;
+ min-height: 500px;
+ max-height: 600px;
+ border: 1px solid var(--border);
+ background: var(--dark1);
+ padding: 16px;
}
}
diff --git a/src/pages/platformFuta/Home/Animations/Animations.module.css b/src/pages/platformFuta/Home/Animations/Animations.module.css
index e36e70561b..5807110673 100644
--- a/src/pages/platformFuta/Home/Animations/Animations.module.css
+++ b/src/pages/platformFuta/Home/Animations/Animations.module.css
@@ -1,15 +1,11 @@
-
-
-
-.logoContainer{
-
-max-width: 400px;
-display: flex;
-justify-content: center;
-align-items: center;
+.logoContainer {
+ max-width: 400px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.logoContainer img{
+.logoContainer img {
max-width: 100%;
max-height: 100%;
}
@@ -17,20 +13,18 @@ align-items: center;
.flashingSvgtext {
margin-top: 20px;
font-family: 'Roboto Mono', monospace;
- color: #62EBF1;
- font-size: 18px;
+ color: #62ebf1;
+ font-size: 18px;
text-align: center;
- text-shadow: 0px 0px 27.833px #62EBF1, 0px 0px 7.952px #62EBF1;
+ text-shadow:
+ 0px 0px 27.833px #62ebf1,
+ 0px 0px 7.952px #62ebf1;
opacity: 0;
transition: opacity 0.1s;
z-index: 5;
-
-
}
-
-
.flashingSvgFlash {
animation: flash 1s infinite;
}
@@ -40,10 +34,13 @@ align-items: center;
}
@keyframes flash {
- 0%, 50%, 100% {
+ 0%,
+ 50%,
+ 100% {
opacity: 1;
}
- 25%, 75% {
+ 25%,
+ 75% {
opacity: 0;
}
}
@@ -57,68 +54,58 @@ align-items: center;
}
}
@media (max-width: 1280px) {
-
- .terminalTextContainer{
- padding: 0 8px;
+ .terminalTextContainer {
+ padding: 0 8px;
}
- .terminalContainer, .output {
- padding: 2px !important;
- font-size: 15px !important;
-
+ .terminalContainer,
+ .output {
+ padding: 2px !important;
+ font-size: 15px !important;
+
max-width: 100%;
max-height: 100%;
-
}
.flashingSvgtext {
-max-width: 50%;
+ max-width: 50%;
}
- .logoContainer{
+ .logoContainer {
max-width: 350px;
}
-
}
@media (max-width: 760px) {
-
- .actionButtonContent{
+ .actionButtonContent {
flex-direction: row;
}
- .terminalContainer, .output {
-
- font-size: 12px !important;
-
-
-
+ .terminalContainer,
+ .output {
+ font-size: 12px !important;
}
-.terminalStyle{
-
-
- position: absolute;
- top: 100px;
-}
- .logoContainer{
+ .terminalStyle {
+ position: absolute;
+ top: 100px;
+ }
+ .logoContainer {
width: 200px;
}
- .flashingSvgtext{
+ .flashingSvgtext {
font-size: 12px;
}
-
}
@media (max-width: 500px) {
-.terminalContainer{
- margin-top: 100px;
-}
+ .terminalContainer {
+ margin-top: 100px;
+ }
}
/* ---------EXPLORE AND LEARN BUTTON---------- */
.actionButtonContent {
-
z-index: 2;
display: flex;
@@ -128,10 +115,10 @@ max-width: 50%;
align-items: center;
width: 100%;
padding: 2rem 0;
-
}
-.actionButtonContent a, .actionButtonContent button {
+.actionButtonContent a,
+.actionButtonContent button {
display: flex;
width: 180px !important;
height: 57px !important;
@@ -140,7 +127,7 @@ max-width: 50%;
flex-shrink: 0;
border: 1px solid transparent;
- font-family: "Roboto Mono";
+ font-family: 'Roboto Mono';
font-style: normal;
line-height: normal;
font-weight: 400;
@@ -154,14 +141,9 @@ max-width: 50%;
cursor: pointer;
}
-
-
-
-
-
.exploreButton {
- background: var(--accent1, #0CCDFF);
- color: var(--dark1, #06060C);
+ background: var(--accent1, #0ccdff);
+ color: var(--dark1, #06060c);
}
.exploreButton:hover {
@@ -172,12 +154,10 @@ max-width: 50%;
.learnButton {
background: var(--accent2, #073749);
- color: var(--accent1, #0CCDFF);
+ color: var(--accent1, #0ccdff);
}
.learnButton:hover {
background: transparent;
border: 1px solid var(--accent1);
}
-
-
diff --git a/src/pages/platformFuta/Home/FutaLandings/FutaLanding.module.css b/src/pages/platformFuta/Home/FutaLandings/FutaLanding.module.css
index b2f48612c9..f81ec31886 100644
--- a/src/pages/platformFuta/Home/FutaLandings/FutaLanding.module.css
+++ b/src/pages/platformFuta/Home/FutaLandings/FutaLanding.module.css
@@ -4,113 +4,94 @@
align-items: center;
justify-content: center;
-
padding: 0 3rem;
text-align: start;
- }
-
- .imageContainer {
- width: 250px;
- }
-
- .image {
+}
+
+.imageContainer {
+ width: 250px;
+}
+
+.image {
max-width: 100%;
max-height: 100%;
- }
-
+}
- .info {
-
+.info {
text-align: start;
display: flex;
flex-direction: column;
gap: 32px;
- }
-
- .codeBlock {
-
+}
+
+.codeBlock {
color: var(--accent1);
-text-shadow: 0px 0px 27.833px #62EBF1, 0px 0px 7.952px #62EBF1;
-font-family: "Fira Mono";
-font-weight: 400;
+ text-shadow:
+ 0px 0px 27.833px #62ebf1,
+ 0px 0px 7.952px #62ebf1;
+ font-family: 'Fira Mono';
+ font-weight: 400;
+}
- }
-
- .text {
- color: var(--text2)
- }
+.text {
+ color: var(--text2);
+}
- @media (max-width: 500px) {
- .container{
+@media (max-width: 500px) {
+ .container {
/* subtract the mobile footer and header */
height: calc(100dvh - 130px);
padding-bottom: 2rem;
justify-content: space-between;
}
-.imageContainer{
- width: 180px;
-}
-.keyImgContainer{
- width: 230px;
-
+ .imageContainer {
+ width: 180px;
+ }
+ .keyImgContainer {
+ width: 230px;
+ }
}
- }
-
- @media (min-width: 768px) {
+@media (min-width: 768px) {
.container {
- display: grid;
- grid-template-columns: auto 1fr;
- height: 100vh;
- padding: 0 64px;
- gap: 27.75px;
-
+ display: grid;
+ grid-template-columns: auto 1fr;
+ height: 100vh;
+ padding: 0 64px;
+ gap: 27.75px;
}
- .imageContainer{
+ .imageContainer {
width: 250px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
-
-
-
-
-
-
- }
+}
- @media (min-width: 1080px) {
+@media (min-width: 1080px) {
.container {
-
-
gap: 55.5px;
- }
+ }
- .imageContainer{
+ .imageContainer {
width: 300px;
- }
+ }
- .info {
+ .info {
text-align: left;
font-size: var(--header1-size);
- }
+ }
+}
- }
-
- @media (min-width: 1500px) {
+@media (min-width: 1500px) {
.container {
-
- padding: 0 86px;
+ padding: 0 86px;
- gap: 111px;
- }
- .imageContainer{
+ gap: 111px;
+ }
+ .imageContainer {
width: 453px;
-
}
-
-
- }
\ No newline at end of file
+}
diff --git a/src/pages/platformFuta/Home/Hero/Hero.module.css b/src/pages/platformFuta/Home/Hero/Hero.module.css
index 0b967da3ba..0087b85032 100644
--- a/src/pages/platformFuta/Home/Hero/Hero.module.css
+++ b/src/pages/platformFuta/Home/Hero/Hero.module.css
@@ -1,5 +1,3 @@
-
-
.container {
position: relative;
bottom: 0;
@@ -10,11 +8,8 @@
height: calc(100vh - 64px);
padding: 8px;
overflow: hidden;
-
-
}
-
.content {
position: absolute;
bottom: 3%;
@@ -28,7 +23,8 @@
gap: 8px;
}
-.content a, .content button {
+.content a,
+.content button {
display: flex;
width: 180px;
height: 57px;
@@ -37,7 +33,7 @@
flex-shrink: 0;
border: 1px solid transparent;
- font-family: "Roboto Mono";
+ font-family: 'Roboto Mono';
font-style: normal;
line-height: normal;
font-weight: 400;
@@ -51,14 +47,9 @@
cursor: pointer;
}
-
-
-
-
-
.exploreButton {
- background: var(--accent1, #0CCDFF);
- color: var(--dark1, #06060C);
+ background: var(--accent1, #0ccdff);
+ color: var(--dark1, #06060c);
}
.exploreButton:hover {
@@ -69,7 +60,7 @@
.learnButton {
background: var(--accent2, #073749);
- color: var(--accent1, #0CCDFF);
+ color: var(--accent1, #0ccdff);
}
.learnButton:hover {
@@ -77,73 +68,62 @@
border: 1px solid var(--accent1);
}
-
-@media (max-width: 500px){
+@media (max-width: 500px) {
.content {
-
- bottom: 28%
+ bottom: 28%;
}
}
-@media (max-width: 768px){
+@media (max-width: 768px) {
.content {
flex-direction: row;
-
- bottom: 25%
-
+
+ bottom: 25%;
}
}
-@media (min-width: 768px){
-
- .container{
-
+@media (min-width: 768px) {
+ .container {
height: 100vh;
-
}
-.content{
- position: absolute;
-
-}
-.skipIcon{
- position: absolute;
- right: 6rem;
- top: 3.5rem;
-}
-.skipTextContainer{
- position: absolute;
- bottom: 50px;
- right: 0;
- z-index: 9999999;
- background: var(--dark2);
- padding: 8px;
- margin: 8px;
-
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 1rem;
- max-width: 420px;
- text-align: center;
-
-}
-
+ .content {
+ position: absolute;
+ }
+ .skipIcon {
+ position: absolute;
+ right: 6rem;
+ top: 3.5rem;
+ }
+ .skipTextContainer {
+ position: absolute;
+ bottom: 50px;
+ right: 0;
+ z-index: 9999999;
+ background: var(--dark2);
+ padding: 8px;
+ margin: 8px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 1rem;
+ max-width: 420px;
+ text-align: center;
+ }
-.skipText{
-
- color: var(--accent1);
- cursor: pointer;
- transition: all var(--animation-speed) ease-in-out
-}
+ .skipText {
+ color: var(--accent1);
+ cursor: pointer;
+ transition: all var(--animation-speed) ease-in-out;
+ }
-.skipCloseIcon{
- width: 100%;
- display: flex;
- justify-content: flex-end;
- align-items: flex-end;
-
-}
+ .skipCloseIcon {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ }
-.skipText:hover{
- color: var(--accent2)
+ .skipText:hover {
+ color: var(--accent2);
+ }
}
-}
\ No newline at end of file
diff --git a/src/pages/platformFuta/Home/Home.module.css b/src/pages/platformFuta/Home/Home.module.css
index 81c8cd9595..67959c0bcf 100644
--- a/src/pages/platformFuta/Home/Home.module.css
+++ b/src/pages/platformFuta/Home/Home.module.css
@@ -1,57 +1,46 @@
-
-
.container {
- position: relative;
- overflow-y: auto;
- /* overscroll-behavior-y: contain;
+ position: relative;
+ overflow-y: auto;
+ /* overscroll-behavior-y: contain;
scroll-snap-type: y mandatory; */
- height: 100vh;
- width: 100vw;
+ height: 100vh;
+ width: 100vw;
- background-attachment: fixed;
+ background-attachment: fixed;
}
.container::-webkit-scrollbar {
- display: none;
+ display: none;
}
.container {
- scrollbar-width: none;
+ scrollbar-width: none;
}
.container {
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
}
-
@media (max-height: 715px) {
-.container{
-height: auto;
+ .container {
+ height: auto;
+ }
}
-}
-
-
@media (max-width: 600px) {
-
- .container{
-
-
- overscroll-behavior-y: contain;
- scroll-snap-type: y mandatory;
- }
-
- .dots{
- display: none;
- }
+ .container {
+ overscroll-behavior-y: contain;
+ scroll-snap-type: y mandatory;
+ }
+
+ .dots {
+ display: none;
+ }
}
-
@media (min-width: 1600px) {
- .container {
-
- overscroll-behavior-y: contain;
- scroll-snap-type: y mandatory;
-
- }
-}
\ No newline at end of file
+ .container {
+ overscroll-behavior-y: contain;
+ scroll-snap-type: y mandatory;
+ }
+}
diff --git a/src/pages/platformFuta/LimitFuta/LimitFuta.module.css b/src/pages/platformFuta/LimitFuta/LimitFuta.module.css
index ab8aa771fa..fce898aeff 100644
--- a/src/pages/platformFuta/LimitFuta/LimitFuta.module.css
+++ b/src/pages/platformFuta/LimitFuta/LimitFuta.module.css
@@ -5,10 +5,9 @@
padding: 0 8px;
height: 100%;
height: calc(100dvh - 75px);
-
}
-.chartSection{
+.chartSection {
display: flex;
width: 100%;
height: 100%;
diff --git a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx
index 57febbb74b..23a23fa565 100644
--- a/src/pages/platformFuta/SwapFuta/SwapFuta.tsx
+++ b/src/pages/platformFuta/SwapFuta/SwapFuta.tsx
@@ -18,7 +18,7 @@ function SwapFuta() {
const showActiveMobileComponent = useMediaQuery('(max-width: 768px)');
- const { isCandleDataNull,isFullScreen } = useContext(ChartContext);
+ const { isCandleDataNull, isFullScreen } = useContext(ChartContext);
const isPoolInitialized = useSimulatedIsPoolInitialized();
@@ -101,9 +101,7 @@ function SwapFuta() {
>
{mobileTabs}
- <div style={{ height: '100%'}}>
- {activeTabData}
- </div>
+ <div style={{ height: '100%' }}>{activeTabData}</div>
</section>
);
@@ -111,7 +109,12 @@ function SwapFuta() {
return (
<section className={styles.mainSection}>
- <div className={styles.chartSection} style={isFullScreen ? {gridColumnStart:1, gridColumnEnd:4} : {}}>
+ <div
+ className={styles.chartSection}
+ style={
+ isFullScreen ? { gridColumnStart: 1, gridColumnEnd: 4 } : {}
+ }
+ >
<Divider count={2} />
<Trade futaActiveTab={activeTab} />
</div>
diff --git a/src/pages/platformFuta/Ticker/Ticker.module.css b/src/pages/platformFuta/Ticker/Ticker.module.css
index 79791435f7..0b6519aa7a 100644
--- a/src/pages/platformFuta/Ticker/Ticker.module.css
+++ b/src/pages/platformFuta/Ticker/Ticker.module.css
@@ -9,7 +9,4 @@
.container {
height: calc(100svh - 130px);
padding: 8px 16px;
-
}
-
-
diff --git a/src/styled/Common/Animations.ts b/src/styled/Common/Animations.ts
index 3c35c27d51..e3bbbc144f 100644
--- a/src/styled/Common/Animations.ts
+++ b/src/styled/Common/Animations.ts
@@ -41,10 +41,15 @@ export const FlickerAnimation = css`
53%,
57%,
100% {
- text-shadow: 0 0 7px rgb(144, 132, 216), 0 0 10px rgb(86, 153, 212),
- 0 0 21px rgb(83, 157, 222), 0 0 42px rgb(40, 160, 179),
- 0 0 82px rgb(84, 91, 220), 0 0 92px rgb(67, 99, 175),
- 0 0 102px rgb(75, 67, 213), 0 0 151px rgb(61, 108, 207);
+ text-shadow:
+ 0 0 7px rgb(144, 132, 216),
+ 0 0 10px rgb(86, 153, 212),
+ 0 0 21px rgb(83, 157, 222),
+ 0 0 42px rgb(40, 160, 179),
+ 0 0 82px rgb(84, 91, 220),
+ 0 0 92px rgb(67, 99, 175),
+ 0 0 102px rgb(75, 67, 213),
+ 0 0 151px rgb(61, 108, 207);
}
20%,
24%,
diff --git a/src/styled/Components/Portfolio.ts b/src/styled/Components/Portfolio.ts
index 29c55569ff..250c34ebc6 100644
--- a/src/styled/Components/Portfolio.ts
+++ b/src/styled/Components/Portfolio.ts
@@ -1,6 +1,5 @@
import styled from 'styled-components/macro';
-
// export const PortfolioTabsPortfolioTabsContainer = styled.div`
// width: 100%;
// height: 100%;
@@ -161,7 +160,6 @@ export const MaxButton = styled.button<{ disabled?: boolean; width?: string }>`
// width: 100%;
// height: 100px;
// margin-top: 4px;
-
// -webkit-background-size: cover;
// -moz-background-size: cover;
@@ -183,8 +181,6 @@ export const MaxButton = styled.button<{ disabled?: boolean; width?: string }>`
// margin-top: 0;
// }
-
-
// `;
// export const PortfolioBannerLevelContainer = styled.div<{
@@ -313,4 +309,3 @@ export const MaxButton = styled.button<{ disabled?: boolean; width?: string }>`
// }
// }}
// `;
-
diff --git a/src/styled/Components/Trade.ts b/src/styled/Components/Trade.ts
index 5a730e2226..9ad24842c9 100644
--- a/src/styled/Components/Trade.ts
+++ b/src/styled/Components/Trade.ts
@@ -113,7 +113,8 @@ export const ChartContainer = styled.div<{
}
`}
- ${({ isFuta,fullScreen }) => (isFuta && !fullScreen ? 'padding-bottom: 30px;' : '')}
+ ${({ isFuta, fullScreen }) =>
+ isFuta && !fullScreen ? 'padding-bottom: 30px;' : ''}
&::-webkit-scrollbar {
display: none;
diff --git a/src/utils/hooks/useIsPWA.ts b/src/utils/hooks/useIsPWA.ts
index f040114156..335d8e2e59 100644
--- a/src/utils/hooks/useIsPWA.ts
+++ b/src/utils/hooks/useIsPWA.ts
@@ -1,37 +1,42 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
// Custom Hook for detecting if app is running as a PWA on a mobile device
const useIsPWA = (): boolean => {
- const [isPWA, setIsPWA] = useState<boolean>(false);
-
- useEffect(() => {
- const checkIsPWA = () => {
- // Regular expression to detect mobile devices
- const isMobile: boolean = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-
- // Detect if app is running in standalone mode (PWA) on modern browsers or iOS Safari
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const isStandalone: boolean = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone;
-
- // Set the PWA state based on mobile device check and standalone mode
- if (isMobile && isStandalone) {
- setIsPWA(true);
- } else {
- setIsPWA(false);
- }
- };
-
- // Call check function on component mount
- checkIsPWA();
-
- // Optional: Add a listener for the resize event in case the display mode changes
- window.addEventListener('resize', checkIsPWA);
-
- // Cleanup listener on component unmount
- return () => window.removeEventListener('resize', checkIsPWA);
- }, []);
-
- return isPWA;
+ const [isPWA, setIsPWA] = useState<boolean>(false);
+
+ useEffect(() => {
+ const checkIsPWA = () => {
+ // Regular expression to detect mobile devices
+ const isMobile: boolean = /iPhone|iPad|iPod|Android/i.test(
+ navigator.userAgent,
+ );
+
+ // Detect if app is running in standalone mode (PWA) on modern browsers or iOS Safari
+ const isStandalone: boolean =
+ window.matchMedia('(display-mode: standalone)').matches ||
+ // Use a type assertion to explicitly handle the non-standard iOS Safari property
+ (window.navigator as { standalone?: boolean }).standalone ===
+ true;
+
+ // Set the PWA state based on mobile device check and standalone mode
+ if (isMobile && isStandalone) {
+ setIsPWA(true);
+ } else {
+ setIsPWA(false);
+ }
+ };
+
+ // Call check function on component mount
+ checkIsPWA();
+
+ // Optional: Add a listener for the resize event in case the display mode changes
+ window.addEventListener('resize', checkIsPWA);
+
+ // Cleanup listener on component unmount
+ return () => window.removeEventListener('resize', checkIsPWA);
+ }, []);
+
+ return isPWA;
};
export default useIsPWA;