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 coins details (MystenLabs#5568)
* coin details wip * prevent the entire coins details from scrolling * prevent coin balance standalone component navigative to details view * rm hover spacing * hide stake for non sui token * change names to reflect multple tokens * update * rm hover color * update * update * update * active coin update * lint fix * rm comment * rm css class * update
- Loading branch information
Showing
12 changed files
with
320 additions
and
162 deletions.
There are no files selected for viewing
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
46 changes: 46 additions & 0 deletions
46
apps/wallet/src/ui/app/components/transactions-card/RecentTransactions.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,46 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { useEffect } from 'react'; | ||
|
|
||
| import Loading from '_components/loading'; | ||
| import TransactionCard from '_components/transactions-card'; | ||
| import { useAppSelector, useAppDispatch } from '_hooks'; | ||
| import { getTransactionsByAddress } from '_redux/slices/txresults'; | ||
|
|
||
| import type { TxResultState } from '_redux/slices/txresults'; | ||
|
|
||
| import st from './TransactionsCard.module.scss'; | ||
|
|
||
| type Props = { | ||
| coinType?: string; | ||
| }; | ||
|
|
||
| function RecentTransactions({ coinType }: Props) { | ||
| const dispatch = useAppDispatch(); | ||
| const txByAddress: TxResultState[] = useAppSelector(({ txresults }) => | ||
| coinType | ||
| ? txresults.latestTx.filter((tx) => tx.coinType === coinType) | ||
| : txresults.latestTx | ||
| ); | ||
|
|
||
| const loading: boolean = useAppSelector( | ||
| ({ txresults }) => txresults.loading | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| dispatch(getTransactionsByAddress()).unwrap(); | ||
| }, [dispatch]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Loading loading={loading} className={st.centerLoading}> | ||
| {txByAddress.map((txn) => ( | ||
| <TransactionCard txn={txn} key={txn.txId} /> | ||
| ))} | ||
| </Loading> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default RecentTransactions; |
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
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
17 changes: 17 additions & 0 deletions
17
apps/wallet/src/ui/app/pages/home/tokens/TokenDetailsPage.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,17 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import { Navigate, useSearchParams } from 'react-router-dom'; | ||
|
|
||
| import TokenDetails from './TokensDetails'; | ||
|
|
||
| function TokenDetailsPage() { | ||
| const [searchParams] = useSearchParams(); | ||
| const coinType = searchParams.get('type'); | ||
|
|
||
| if (!coinType) { | ||
| return <Navigate to="/tokens" replace={true} />; | ||
| } | ||
| return <TokenDetails coinType={coinType} />; | ||
| } | ||
|
|
||
| export default TokenDetailsPage; |
183 changes: 183 additions & 0 deletions
183
apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.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,183 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import cl from 'classnames'; | ||
| import { useMemo } from 'react'; | ||
|
|
||
| import CoinBalance from './coin-balance'; | ||
| import IconLink from './icon-link'; | ||
| import FaucetMessageInfo from '_app/shared/faucet/message-info'; | ||
| import FaucetRequestButton from '_app/shared/faucet/request-button'; | ||
| import PageTitle from '_app/shared/page-title'; | ||
| import AccountAddress from '_components/account-address'; | ||
| import Alert from '_components/alert'; | ||
| import Loading from '_components/loading'; | ||
| import RecentTransactions from '_components/transactions-card/RecentTransactions'; | ||
| import { SuiIcons } from '_font-icons/output/sui-icons'; | ||
| import { useAppSelector, useObjectsState } from '_hooks'; | ||
| import { accountAggregateBalancesSelector } from '_redux/slices/account'; | ||
| import { GAS_TYPE_ARG, Coin } from '_redux/slices/sui-objects/Coin'; | ||
|
|
||
| import st from './TokensPage.module.scss'; | ||
|
|
||
| type TokenDetailsProps = { | ||
| coinType?: string; | ||
| }; | ||
|
|
||
| const emptyWalletDescription = ( | ||
| <div className={st.emptyWalletDescription}> | ||
| To conduct transactions on the Sui network, you need SUI in your wallet. | ||
| </div> | ||
| ); | ||
|
|
||
| type TokensProps = { | ||
| allCoinTypes: string[]; | ||
| coinBalance: bigint; | ||
| balances: Record<string, bigint>; | ||
| loading: boolean; | ||
| }; | ||
|
|
||
| function MyTokens({ | ||
| allCoinTypes, | ||
| coinBalance, | ||
| balances, | ||
| loading, | ||
| }: TokensProps) { | ||
| return ( | ||
| <Loading loading={loading} className={st.othersLoader}> | ||
| {allCoinTypes.length ? ( | ||
| <> | ||
| <div className={st.title}>MY COINS</div> | ||
| <div className={st.otherCoins}> | ||
| {allCoinTypes.map((aCoinType) => ( | ||
| <CoinBalance | ||
| type={aCoinType} | ||
| balance={balances[aCoinType] || BigInt(0)} | ||
| key={aCoinType} | ||
| /> | ||
| ))} | ||
| {coinBalance <= 0 ? ( | ||
| <div className={st.emptyWallet}> | ||
| <FaucetRequestButton /> | ||
| {emptyWalletDescription} | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <div className={st.emptyWallet}> | ||
| <div className={st.emptyWalletIcon} /> | ||
| <div className={st.emptyWalletTitle}> | ||
| Your wallet contains no SUI. | ||
| </div> | ||
| {emptyWalletDescription} | ||
| <FaucetRequestButton /> | ||
| </div> | ||
| )} | ||
| <FaucetMessageInfo className={st.gasRequestInfo} /> | ||
| </Loading> | ||
| ); | ||
| } | ||
|
|
||
| function TokenDetails({ coinType }: TokenDetailsProps) { | ||
| const { loading, error, showError } = useObjectsState(); | ||
| const activeCoinType = coinType || GAS_TYPE_ARG; | ||
| const balances = useAppSelector(accountAggregateBalancesSelector); | ||
| const tokenBalance = balances[activeCoinType] || BigInt(0); | ||
| const allCoinTypes = useMemo(() => Object.keys(balances), [balances]); | ||
| const coinTypeWithBalance = | ||
| coinType || tokenBalance > 0 ? activeCoinType : allCoinTypes[0]; | ||
|
|
||
| const coinSymbol = useMemo( | ||
| () => Coin.getCoinSymbol(activeCoinType), | ||
| [activeCoinType] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {coinType && ( | ||
| <PageTitle | ||
| title={coinSymbol} | ||
| backLink="/tokens" | ||
| hideBackLabel={true} | ||
| /> | ||
| )} | ||
|
|
||
| <div className={st.container}> | ||
| {showError && error ? ( | ||
| <Alert className={st.alert}> | ||
| <strong>Sync error (data might be outdated).</strong>{' '} | ||
| <small>{error.message}</small> | ||
| </Alert> | ||
| ) : null} | ||
| {!coinType && <AccountAddress showLink={false} mode="faded" />} | ||
| <div className={st.balanceContainer}> | ||
| <Loading loading={loading}> | ||
| <CoinBalance | ||
| balance={tokenBalance} | ||
| type={activeCoinType} | ||
| mode="standalone" | ||
| /> | ||
| </Loading> | ||
| </div> | ||
| <div className={st.actions}> | ||
| <IconLink | ||
| icon={SuiIcons.Buy} | ||
| to="/" | ||
| disabled={true} | ||
| text="Buy" | ||
| /> | ||
| <IconLink | ||
| icon={SuiIcons.ArrowLeft} | ||
| to={`/send${ | ||
| coinTypeWithBalance | ||
| ? `?${new URLSearchParams({ | ||
| type: coinTypeWithBalance, | ||
| }).toString()}` | ||
| : '' | ||
| }`} | ||
| disabled={!coinTypeWithBalance} | ||
| text="Send" | ||
| /> | ||
| <IconLink | ||
| icon={SuiIcons.Swap} | ||
| to="/" | ||
| disabled={true} | ||
| text="Swap" | ||
| /> | ||
| </div> | ||
|
|
||
| {activeCoinType === GAS_TYPE_ARG ? ( | ||
| <div className={st.staking}> | ||
| <IconLink | ||
| icon={SuiIcons.Union} | ||
| to="/stake" | ||
| disabled={true} | ||
| text="Stake & Earn SUI" | ||
| /> | ||
| </div> | ||
| ) : null} | ||
|
|
||
| {!coinType ? ( | ||
| <MyTokens | ||
| allCoinTypes={allCoinTypes} | ||
| coinBalance={tokenBalance} | ||
| balances={balances} | ||
| loading={loading} | ||
| /> | ||
| ) : ( | ||
| <> | ||
| <div className={cl([st.title, st.tokenActivities])}> | ||
| {coinSymbol} activity | ||
| </div> | ||
| <div className={st.txContent}> | ||
| <RecentTransactions coinType={activeCoinType} /> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default TokenDetails; |
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
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 |
|---|---|---|
|
|
@@ -16,6 +16,10 @@ | |
| } | ||
| } | ||
|
|
||
| .coin-balance-btn { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .coin-icon { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
Oops, something went wrong.