forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wallet send sui redesign (MystenLabs#4018)
* steps and coin select * wip * wip * send coin * fix receipt cta * lint * steps and coin select * wip * wip * send coin * fix receipt cta * lint * rebase and feedback update * rebase and feedback update * icons update * remove unused css * fixed typo * update * upate * feedback update * rename component * update * remove touched
- Loading branch information
Showing
39 changed files
with
1,428 additions
and
293 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 150 additions & 0 deletions
150
wallet/src/ui/app/components/active-coins-card/ActiveCoinsCard.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| @use '_utils'; | ||
| @use '_variables' as v; | ||
| @use '_values/colors'; | ||
|
|
||
| .content { | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| flex: 1; | ||
| align-self: stretch; | ||
| margin: 10px 0; | ||
|
|
||
| .coin-label { | ||
| font-weight: 600; | ||
| width: 86%; | ||
| } | ||
|
|
||
| .chevron { | ||
| i { | ||
| font-size: 10px; | ||
| color: colors.$gray-65; | ||
| font-weight: 200; | ||
| } | ||
| } | ||
|
|
||
| .coin-list { | ||
| .selector-content { | ||
| margin-top: 25px; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .coin-detail { | ||
| margin-top: 20px; | ||
| height: 63px; | ||
| border-radius: 6px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| width: 100%; | ||
| border-bottom: 1px solid colors.$gray-45; | ||
| cursor: pointer; | ||
| gap: 10px; | ||
| transition: all 0.2s ease-in-out; | ||
|
|
||
| &:hover { | ||
| &::after { | ||
| background-color: #6fbcf01a; | ||
| position: absolute; | ||
| content: ''; | ||
| left: 10px; | ||
| width: calc(100% - 20px); | ||
| height: 63px; | ||
| } | ||
| } | ||
|
|
||
| .coin-label { | ||
| @include utils.typography('table/text-lg'); | ||
|
|
||
| width: 55%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| color: colors.$gray-100; | ||
| gap: 4px; | ||
| font-weight: 600; | ||
|
|
||
| span { | ||
| color: colors.$gray-65; | ||
| } | ||
| } | ||
|
|
||
| .coin-amount { | ||
| @include utils.typography('table/text-lg'); | ||
|
|
||
| line-height: 17px; | ||
| } | ||
|
|
||
| .coin-icon { | ||
| color: colors.$sui-blue; | ||
| background-color: colors.$gray-40; | ||
| width: 30px; | ||
| height: 30px; | ||
| border-radius: 30px; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| i { | ||
| font-size: 18px; | ||
| color: colors.$sui-blue; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .select-coin { | ||
| height: 80px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| background-color: colors.$white; | ||
| box-shadow: 0 1px 2px colors.$shadow-color; | ||
| border: 1px solid colors.$gray-50; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .coin { | ||
| @include utils.typography('table/text-lg'); | ||
|
|
||
| text-decoration: none; | ||
| padding: 0 14px; | ||
| line-height: 17px; | ||
| width: 100%; | ||
| height: 100%; | ||
| color: colors.$gray-100; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; | ||
| cursor: pointer; | ||
|
|
||
| .sui-icon { | ||
| color: colors.$sui-blue; | ||
| background-color: colors.$gray-40; | ||
| width: 24px; | ||
| height: 24px; | ||
| border-radius: 30px; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| } | ||
|
|
||
| .coin-symbol { | ||
| @include utils.typography('table/text-xs'); | ||
|
|
||
| color: colors.$gray-70; | ||
| } | ||
|
|
||
| .coin-balance { | ||
| @include utils.typography('table/text-lg'); | ||
|
|
||
| color: colors.$gray-100; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| gap: 10px; | ||
| padding: 0 14px; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: colors.$gray-40; | ||
| } |
125 changes: 125 additions & 0 deletions
125
wallet/src/ui/app/components/active-coins-card/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { useMemo, useCallback } from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
| import { useNavigate, Link } from 'react-router-dom'; | ||
|
|
||
| import Icon, { SuiIcons } from '_components/icon'; | ||
| import { useAppSelector } from '_hooks'; | ||
| import { accountAggregateBalancesSelector } from '_redux/slices/account'; | ||
| import { | ||
| GAS_TYPE_ARG, | ||
| SUPPORTED_COINS_LIST, | ||
| } from '_redux/slices/sui-objects/Coin'; | ||
| import { balanceFormatOptions } from '_shared/formatting'; | ||
|
|
||
| import st from './ActiveCoinsCard.module.scss'; | ||
|
|
||
| // Get all the coins that are available in the account. | ||
| // default coin type is GAS_TYPE_ARG unless specified in props | ||
| // create a list of coins that are available in the account | ||
| function ActiveCoinsCard({ | ||
| activeCoinType = GAS_TYPE_ARG, | ||
| showActiveCoin = true, | ||
| }: { | ||
| activeCoinType: string; | ||
| showActiveCoin?: boolean; | ||
| }) { | ||
| const intl = useIntl(); | ||
| const aggregateBalances = useAppSelector(accountAggregateBalancesSelector); | ||
|
|
||
| const coins = useMemo(() => { | ||
| return SUPPORTED_COINS_LIST.map((coin) => { | ||
| const balance = intl.formatNumber( | ||
| BigInt(aggregateBalances[coin.coinType] || 0), | ||
| balanceFormatOptions | ||
| ); | ||
| return { | ||
| ...coin, | ||
| balance, | ||
| }; | ||
| }); | ||
| }, [aggregateBalances, intl]); | ||
|
|
||
| const activeCoin = useMemo(() => { | ||
| return coins.filter((coin) => coin.coinType === activeCoinType)[0]; | ||
| }, [activeCoinType, coins]); | ||
|
|
||
| const IconName = activeCoin.coinIconName; | ||
|
|
||
| const SelectedCoinCard = ( | ||
| <div className={st.selectCoin}> | ||
| <Link | ||
| to={`/send/select?${new URLSearchParams({ | ||
| type: activeCoinType, | ||
| }).toString()}`} | ||
| className={st.coin} | ||
| > | ||
| <div className={st.suiIcon}> | ||
| <Icon icon={IconName} /> | ||
| </div> | ||
| <div className={st.coinLabel}> | ||
| {activeCoin.coinName}{' '} | ||
| <span className={st.coinSymbol}> | ||
| {activeCoin.coinSymbol} | ||
| </span> | ||
| </div> | ||
| <div className={st.chevron}> | ||
| <Icon icon={SuiIcons.SuiChevronRight} /> | ||
| </div> | ||
| </Link> | ||
| <div className={st.coinBalance}> | ||
| <div className={st.coinBalanceLabel}>Total Available</div> | ||
| <div className={st.coinBalanceValue}> | ||
| {activeCoin.balance} {activeCoin.coinSymbol} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| const navigate = useNavigate(); | ||
|
|
||
| const changeConType = useCallback( | ||
| (event: React.MouseEvent<HTMLDivElement>) => { | ||
| const cointype = event.currentTarget.dataset.cointype as string; | ||
| navigate( | ||
| `/send?${new URLSearchParams({ | ||
| type: cointype, | ||
| }).toString()}` | ||
| ); | ||
| }, | ||
| [navigate] | ||
| ); | ||
|
|
||
| const CoinListCard = ( | ||
| <div className={st.coinList}> | ||
| {coins.map((coin, index) => ( | ||
| <div | ||
| className={st.coinDetail} | ||
| key={index} | ||
| onClick={changeConType} | ||
| data-cointype={coin.coinType} | ||
| > | ||
| <div className={st.coinIcon}> | ||
| <Icon icon={coin.coinIconName} /> | ||
| </div> | ||
| <div className={st.coinLabel}> | ||
| {coin.coinName} <span>{coin.coinSymbol}</span> | ||
| </div> | ||
| <div className={st.coinAmount}> | ||
| {coin.balance} <span>{coin.coinSymbol}</span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={st.content}> | ||
| {showActiveCoin ? SelectedCoinCard : CoinListCard} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ActiveCoinsCard; |
Oops, something went wrong.