Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added CZK and EUR to display asset options #929

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Added CZK and EUR to display asset options #929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ba0daf9
added CZK and EUR to display asset options
Jan 10, 2024
69e4238
styling issues fixed
Jan 10, 2024
657fe17
Merge remote-tracking branch 'origin/master' into display-asset-fiat
Jan 15, 2024
9d12aa3
Fix rounding issue for high price assets like BTC
Jan 15, 2024
9650250
Merge remote-tracking branch 'origin/master' into display-asset-fiat
Jan 24, 2024
61341e4
resolved conflicts
jvonasek Mar 6, 2024
763433b
resolved conflicts
jvonasek Mar 6, 2024
bf4da8e
Display asssets filtering, category sections
jvonasek Mar 6, 2024
942306e
removed dead code
jvonasek Mar 6, 2024
5bfe6f7
fix lint
jvonasek Mar 6, 2024
35ebba7
merge master
jvonasek Mar 20, 2024
2158de0
merge
jvonasek Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/api/provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export const useProviderData = (rpcUrl: string) => {
update({
id: stableCoinId,
symbol: "$",
isRealUSD: false,
isFiat: false,
isStableCoin: true,
stableCoinId,
})
Expand Down
18 changes: 12 additions & 6 deletions src/components/DisplayValue/DisplayValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@ type Props = {
isUSD?: boolean
withGap?: boolean
compact?: boolean
type?: "dollar" | "token"
}

export const DisplayValue = ({
value,
isUSD,
type = "dollar",
compact = false,
withGap,
}: Props) => {
const { t } = useTranslation()
const store = useDisplayAssetStore()

const isDollar = isUSD || store.isRealUSD || store.isStableCoin
const isFiat = isUSD || store.isStableCoin || store.isFiat
const isNumber = BigNumber.isBigNumber(value) || typeof value === "number"

return (
<>
{isDollar && <span sx={{ mr: withGap ? [2, 4] : undefined }}>$</span>}
{isFiat && (
<span sx={{ mr: withGap ? [2, 4] : undefined }}>
{isUSD ? "$" : store.symbol}
</span>
)}

{isNumber
? t(compact ? "value.compact" : "value", { value, type })
? t(compact ? "value.compact" : "value", {
value,
type: isFiat ? "dollar" : "token",
})
: value}
{!isDollar && <>&nbsp;{store.symbol}</>}
{!isFiat && <>&nbsp;{store.symbol}</>}
</>
)
}
37 changes: 32 additions & 5 deletions src/components/Layout/Header/settings/displayAsset/HeaderSettingsDisplayAsset.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import { ButtonTransparent } from "components/Button/Button"
import { theme } from "theme"

export const SItems = styled.div`
max-height: 360px;
overflow: auto;

@media ${theme.viewport.gte.sm} {
max-height: 360px;
}
`

export const SItem = styled(ButtonTransparent)<{ isActive?: boolean }>`
Expand All @@ -17,23 +20,30 @@ export const SItem = styled(ButtonTransparent)<{ isActive?: boolean }>`
padding: 10px 20px;

color: ${theme.colors.whiteish500};

background-color: rgba(${theme.rgbColors.white}, 0.03);
${({ isActive }) =>
isActive && `background-color: rgba(${theme.rgbColors.primaryA15}, 0.12);`}

transition: all 0.15s ease-in-out;

&:hover {
color: ${theme.colors.white};
${({ isActive }) =>
!isActive &&
`:hover {
background-color: rgba(${theme.rgbColors.white}, 0.05)
}`}
}

&:not(:last-of-type) {
border-bottom: 1px solid ${theme.colors.darkBlue401};
}
border-top: 1px solid ${theme.colors.darkBlue401};
`

export const SItemUSD = styled(SItem)`
export const SItemFiat = styled(SItem)`
grid-template-columns: 1fr auto;
padding: 13px 20px;

${({ isActive }) => !isActive && `background-color: transparent;`}
`

export const SCircle = styled.div<{ isActive: boolean }>`
Expand All @@ -55,3 +65,20 @@ export const SCircle = styled.div<{ isActive: boolean }>`
border-radius: 50%;
}
`

export const SItemsHeader = styled.div`
display: flex;
justify-content: space-between;

padding: 6px 20px;

border-left: none;
border-right: none;
border-top: 1px solid ${theme.colors.darkBlue401};

background-color: rgba(${theme.rgbColors.white}, 0.03);
`

export const SItemsFiatHeader = styled(SItemsHeader)`
background: transparent;
`
Loading
Loading