Fix: Minor design and sdk bugs (#2626)

* Fixed various design bugs and sdk formatting issue * Removed the unecessary code
Kwenta · Jul 24, 2023 · b21fc4d · b21fc4d
1 parent 5d3d2f3
commit b21fc4d
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 20 deletions.
diff --git a/packages/app/src/assets/svg/app/docs.svg b/packages/app/src/assets/svg/app/docs.svg
diff --git a/packages/app/src/assets/svg/app/support.svg b/packages/app/src/assets/svg/app/support.svg
diff --git a/packages/app/src/sections/exchange/TradeCard/CurrencyCard/CurrencyCard.tsx b/packages/app/src/sections/exchange/TradeCard/CurrencyCard/CurrencyCard.tsx
@@ -57,10 +57,8 @@ const CurrencyCard: FC<CurrencyCardProps> = memo(
 		const hasCurrencySelectCallback = !!onCurrencySelect
 
 		const tokenName = useMemo(() => {
-			return currencyKey && currencyKey[0] === 's'
-				? t('common.currency.synthetic-currency-name', { currencyName })
-				: currencyName || t('exchange.currency-card.synth-name')
-		}, [currencyKey, currencyName, t])
+			return currencyName || t('exchange.currency-card.synth-name')
+		}, [currencyName, t])
 
 		return (
 			<CardContainer>

diff --git a/packages/app/src/sections/futures/MarketDetails/HoursToggle.tsx b/packages/app/src/sections/futures/MarketDetails/HoursToggle.tsx
@@ -44,13 +44,14 @@ const HoursToggle: React.FC = () => {
 		</ToggleContainer>
 	)
 }
-
+//  solid ${(props) => props.theme.colors.selectedTheme.newTheme.pill['gray'].border};
 const ToggleTableRow = styled.div`
 	margin: auto;
 	padding: 1.5px 6px;
 	height: ${HOURS_TOGGLE_HEIGHT};
 	background: ${(props) => props.theme.colors.selectedTheme.newTheme.pill['gray'].background};
-	border: 1px solid ${(props) => props.theme.colors.selectedTheme.newTheme.pill['gray'].border};
+	border-width: 0px;
+
 	:last-child {
 		border-radius: 0px 0px 9px 9px;
 	}

diff --git a/packages/app/src/sections/futures/MarketDetails/MarketDetails.tsx b/packages/app/src/sections/futures/MarketDetails/MarketDetails.tsx
@@ -118,7 +118,9 @@ const DailyChangeDetail: React.FC<MarketDetailsProps> = memo(({ mobile }) => {
 			dataKey={MarketDataKey.dailyChange}
 			value={
 				indexPriceWei.gt(0) && pastPrice?.rate
-					? formatPercent(indexPriceWei.sub(pastPrice.rate).div(indexPriceWei) ?? ZERO_WEI)
+					? formatPercent(indexPriceWei.sub(pastPrice.rate).div(indexPriceWei) ?? ZERO_WEI, {
+							maxDecimals: 2,
+					  })
 					: NO_VALUE
 			}
 			color={
@@ -147,7 +149,11 @@ const HourlyFundingDetail: React.FC<MarketDetailsProps> = memo(({ mobile }) => {
 	return (
 		<MarketDetail
 			dataKey={t('futures.market.info.hourly-funding')}
-			value={fundingValue ? formatPercent(fundingValue ?? ZERO_WEI, { minDecimals: 6 }) : NO_VALUE}
+			value={
+				fundingValue
+					? formatPercent(fundingValue ?? ZERO_WEI, { suggestDecimals: true, maxDecimals: 6 })
+					: NO_VALUE
+			}
 			color={fundingValue?.gt(ZERO_WEI) ? 'green' : fundingValue?.lt(ZERO_WEI) ? 'red' : undefined}
 			mobile={mobile}
 			extra={<HoursToggle />}

diff --git a/packages/app/src/sections/futures/MobileTrade/UserTabs/PositionsTab.tsx b/packages/app/src/sections/futures/MobileTrade/UserTabs/PositionsTab.tsx
@@ -5,7 +5,6 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import UploadIcon from 'assets/svg/futures/upload-icon.svg'
 import Currency from 'components/Currency'
 import { FlexDiv, FlexDivRow, FlexDivRowCentered } from 'components/layout/flex'
 import Pill from 'components/Pill'
@@ -137,10 +136,7 @@ const PositionsTab = () => {
 									Close
 								</Pill>
 								<Pill size="medium" onClick={() => handleOpenShareModal(row.share)}>
-									<FlexDivRowCentered>
-										<UploadIcon width={6} style={{ marginRight: '2px', marginBottom: '1px' }} />
-										Share
-									</FlexDivRowCentered>
+									<FlexDivRowCentered>Share</FlexDivRowCentered>
 								</Pill>
 							</FlexDivRowCentered>
 						</PositionMeta>

diff --git a/packages/app/src/sections/futures/Trade/TradeBalance.tsx b/packages/app/src/sections/futures/Trade/TradeBalance.tsx
@@ -86,7 +86,7 @@ const TradeBalance: React.FC<TradeBalanceProps> = memo(({ isMobile = false }) =>
 					<>
 						{isMobile ? (
 							<FlexDivCol rowGap="5px">
-								<FlexDivRow style={{ width: '200px' }}>
+								<FlexDivRow style={{ width: '170px' }}>
 									<Body size={'medium'} color="secondary">
 										{t('futures.market.trade.trade-balance.available-margin')}:
 									</Body>
@@ -97,7 +97,7 @@ const TradeBalance: React.FC<TradeBalanceProps> = memo(({ isMobile = false }) =>
 									</NumericValue>
 								</FlexDivRow>
 								{accountType === 'cross_margin' && lockedMargin.gt(0) && (
-									<FlexDivRow style={{ width: '200px' }}>
+									<FlexDivRow style={{ width: '170px' }}>
 										<Body size={'medium'} color="secondary">
 											{t('futures.market.trade.trade-balance.locked-margin')}:
 										</Body>

diff --git a/packages/app/src/sections/futures/UserInfo/PositionsTable.tsx b/packages/app/src/sections/futures/UserInfo/PositionsTable.tsx
@@ -312,9 +312,7 @@ const PositionRowDesktop = styled.div`
 	&:nth-child(odd) {
 		background-color: ${(props) => props.theme.colors.selectedTheme.table.fill};
 	}
-	:not(:last-child) {
-		border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
-	}
+	border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
 `
 
 const HeadersRow = styled(PositionRowDesktop)`
@@ -325,6 +323,9 @@ const HeadersRow = styled(PositionRowDesktop)`
 	:not(:last-child) {
 		border-bottom: 0;
 	}
+	&:first-child {
+		background-color: transparent;
+	}
 `
 
 const PositionCell = styled.div`

diff --git a/packages/app/src/sections/shared/Layout/AppLayout/Footer.tsx b/packages/app/src/sections/shared/Layout/AppLayout/Footer.tsx
@@ -1,6 +1,9 @@
 import router from 'next/router'
 import styled from 'styled-components'
 
+import DocsIcon from 'assets/svg/app/docs.svg'
+import SupportIcon from 'assets/svg/app/support.svg'
+import { FlexDivRow } from 'components/layout/flex'
 import { Body } from 'components/Text'
 import { EXTERNAL_LINKS } from 'constants/links'
 import ROUTES from 'constants/routes'
@@ -19,9 +22,11 @@ const Footer = () => {
 					<Body color="secondary">Stats</Body>
 				</FooterLinkInternal>
 				<FooterLink href={EXTERNAL_LINKS.Docs.DocsRoot}>
+					<DocsIcon />
 					<Body color="secondary">Docs</Body>
 				</FooterLink>
 				<FooterLink href={EXTERNAL_LINKS.Social.Discord}>
+					<SupportIcon />
 					<Body color="secondary">Support</Body>
 				</FooterLink>
 			</RightContainer>
@@ -50,11 +55,17 @@ const FooterLink = styled.a.attrs({ target: '_blank', rel: '_noreferrer' })`
 	&:not(:last-of-type) {
 		margin-right: 18px;
 	}
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	column-gap: 5px;
 `
 
-const FooterLinkInternal = styled.div`
+const FooterLinkInternal = styled(FlexDivRow)`
 	margin-right: 18px;
 	cursor: pointer;
+	align-items: center;
+	column-gap: 5px;
 `
 
 export default Footer
diff --git a/packages/sdk/src/utils/number.ts b/packages/sdk/src/utils/number.ts
@@ -181,7 +181,7 @@ export const formatPercent = (
 	value: WeiSource,
 	options?: { minDecimals?: number; suggestDecimals?: boolean; maxDecimals?: number }
 ) => {
-	let decimals = suggestedDecimals ? suggestedDecimals(value) : options?.minDecimals ?? 2
+	let decimals = options?.suggestDecimals ? suggestedDecimals(value) : options?.minDecimals ?? 2
 	if (options?.maxDecimals) {
 		decimals = Math.min(decimals, options.maxDecimals)
 	}