Skip to content

Commit 8ddf478

Browse files
jvaclavikjvaclavik
authored
fix(suite): Fix AssetCard height (#17612)
1 parent ba749d8 commit 8ddf478

File tree

2 files changed

+87
-83
lines changed
  • packages

2 files changed

+87
-83
lines changed

‎packages/components/src/components/Card/Card.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const CardContainer = styled.div<CardContainerProps>`
7070
border-radius: ${borders.radii.md};
7171
cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
7272
overflow: hidden;
73+
height: 100%;
7374
transition:
7475
background 0.5s,
7576
border 0.5s,
@@ -149,6 +150,7 @@ export const Card = ({
149150
paddingType,
150151
hasHeading: !!heading,
151152
})}
153+
height="100%"
152154
>
153155
{children}
154156
</Box>

‎packages/suite/src/views/dashboard/AssetsView/AssetCard/AssetCard.tsx

+85-83
Original file line numberDiff line numberDiff line change
@@ -142,94 +142,96 @@ export const AssetCard = ({
142142
onClick={handleCardClick}
143143
data-testid={`@dashboard/asset-item/${symbol}`}
144144
>
145-
<Column gap={spacings.xxxl} flex="1" margin={spacings.xs}>
146-
<Row justifyContent="space-between">
147-
<AssetCardInfo
148-
network={network}
149-
assetsFiatBalances={assetsFiatBalances}
150-
index={index}
151-
/>
152-
<Icon size={16} name="arrowRightLong" variant="disabled" />
153-
</Row>
154-
{!failed ? (
155-
<Column>
156-
<FiatAmount data-testid={`@dashboard/asset/${symbol}/fiat-amount`}>
157-
<FiatHeader
158-
symbol={symbol}
159-
amount={cryptoValue}
160-
size="medium"
161-
localCurrency={localCurrency}
162-
/>
163-
</FiatAmount>
164-
<CoinAmount>
165-
<AmountUnitSwitchWrapper symbol={symbol}>
166-
<CoinBalance value={cryptoValue} symbol={symbol} />
167-
</AmountUnitSwitchWrapper>
168-
</CoinAmount>
169-
</Column>
170-
) : (
171-
<FailedContainer>
172-
<WarningIcon
173-
name="warningTriangle"
174-
color={theme.legacy.TYPE_RED}
175-
size={14}
145+
<Column justifyContent="space-between" height="100%">
146+
<Column gap={spacings.xxxl} flex="1" margin={spacings.xs}>
147+
<Row justifyContent="space-between">
148+
<AssetCardInfo
149+
network={network}
150+
assetsFiatBalances={assetsFiatBalances}
151+
index={index}
176152
/>
177-
<Translation id="TR_DASHBOARD_ASSET_FAILED" />
178-
</FailedContainer>
153+
<Icon size={16} name="arrowRightLong" variant="disabled" />
154+
</Row>
155+
{!failed ? (
156+
<Column>
157+
<FiatAmount data-testid={`@dashboard/asset/${symbol}/fiat-amount`}>
158+
<FiatHeader
159+
symbol={symbol}
160+
amount={cryptoValue}
161+
size="medium"
162+
localCurrency={localCurrency}
163+
/>
164+
</FiatAmount>
165+
<CoinAmount>
166+
<AmountUnitSwitchWrapper symbol={symbol}>
167+
<CoinBalance value={cryptoValue} symbol={symbol} />
168+
</AmountUnitSwitchWrapper>
169+
</CoinAmount>
170+
</Column>
171+
) : (
172+
<FailedContainer>
173+
<WarningIcon
174+
name="warningTriangle"
175+
color={theme.legacy.TYPE_RED}
176+
size={14}
177+
/>
178+
<Translation id="TR_DASHBOARD_ASSET_FAILED" />
179+
</FailedContainer>
180+
)}
181+
</Column>
182+
{(shouldRenderStakingRow || shouldRenderTokenRow) && (
183+
<AssetCardTokensAndStakingInfo
184+
symbol={symbol}
185+
tokensFiatBalance={tokensFiatBalance.toString()}
186+
assetStakingBalance={assetStakingBalance.toString()}
187+
shouldRenderStaking={shouldRenderStakingRow}
188+
shouldRenderTokens={shouldRenderTokenRow}
189+
accounts={accounts}
190+
/>
179191
)}
180-
</Column>
181-
{(shouldRenderStakingRow || shouldRenderTokenRow) && (
182-
<AssetCardTokensAndStakingInfo
183-
symbol={symbol}
184-
tokensFiatBalance={tokensFiatBalance.toString()}
185-
assetStakingBalance={assetStakingBalance.toString()}
186-
shouldRenderStaking={shouldRenderStakingRow}
187-
shouldRenderTokens={shouldRenderTokenRow}
188-
accounts={accounts}
189-
/>
190-
)}
191-
{!isTestnet(symbol) && (
192-
<Card data-testid="@dashboard/asset/bottom-info">
193-
<Row justifyContent="space-between" flexWrap="wrap" gap={spacings.md}>
194-
<InfoItem
195-
data-testid="@dashboard/asset/exchange-rate"
196-
label={<Translation id="TR_EXCHANGE_RATE" />}
197-
flex="0"
198-
>
199-
<PriceTicker symbol={symbol} />
200-
</InfoItem>
201-
<InfoItem
202-
data-testid="@dashboard/asset/week-change"
203-
label={<Translation id="TR_7D_CHANGE" />}
204-
flex="0"
205-
>
206-
<TrendTicker symbol={symbol} />
207-
</InfoItem>
192+
{!isTestnet(symbol) && (
193+
<Card data-testid="@dashboard/asset/bottom-info">
194+
<Row justifyContent="space-between" flexWrap="wrap" gap={spacings.md}>
195+
<InfoItem
196+
data-testid="@dashboard/asset/exchange-rate"
197+
label={<Translation id="TR_EXCHANGE_RATE" />}
198+
flex="0"
199+
>
200+
<PriceTicker symbol={symbol} />
201+
</InfoItem>
202+
<InfoItem
203+
data-testid="@dashboard/asset/week-change"
204+
label={<Translation id="TR_7D_CHANGE" />}
205+
flex="0"
206+
>
207+
<TrendTicker symbol={symbol} />
208+
</InfoItem>
208209

209-
<Row gap={spacings.xs}>
210-
{isStakeNetwork && (
211-
<TradingButton symbol={symbol} routeName="wallet-staking">
212-
<Translation id="TR_STAKE_STAKE" />
213-
</TradingButton>
214-
)}
210+
<Row gap={spacings.xs}>
211+
{isStakeNetwork && (
212+
<TradingButton symbol={symbol} routeName="wallet-staking">
213+
<Translation id="TR_STAKE_STAKE" />
214+
</TradingButton>
215+
)}
215216

216-
<TradingButton
217-
symbol={symbol}
218-
routeName="wallet-trading-buy"
219-
data-testid={`@dashboard/asset/${symbol}/buy-button`}
220-
onClick={() => {
221-
analytics.report({
222-
type: EventType.AccountsDashboardBuy,
223-
payload: { symbol },
224-
});
225-
}}
226-
>
227-
<Translation id="TR_BUY_BUY" />
228-
</TradingButton>
217+
<TradingButton
218+
symbol={symbol}
219+
routeName="wallet-trading-buy"
220+
data-testid={`@dashboard/asset/${symbol}/buy-button`}
221+
onClick={() => {
222+
analytics.report({
223+
type: EventType.AccountsDashboardBuy,
224+
payload: { symbol },
225+
});
226+
}}
227+
>
228+
<Translation id="TR_BUY_BUY" />
229+
</TradingButton>
230+
</Row>
229231
</Row>
230-
</Row>
231-
</Card>
232-
)}
232+
</Card>
233+
)}
234+
</Column>
233235
</Card>
234236
);
235237
};

0 commit comments

Comments
 (0)