-
Notifications
You must be signed in to change notification settings - Fork 7
feat(mobile): implement token details, ref LEA-3015 #1465
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.
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { ReactNode } from 'react'; | ||
|
||
import { Box, HasChildren, Text } from '@leather.io/ui/native'; | ||
|
||
export function SummaryTableRoot({ children }: HasChildren) { | ||
return <Box>{children}</Box>; | ||
} | ||
|
||
function SummaryTableLabel({ children }: HasChildren) { | ||
return ( | ||
<Box flex={1}> | ||
<Text variant="label02" color="ink.text-subdued"> | ||
{children} | ||
</Text> | ||
</Box> | ||
); | ||
} | ||
|
||
function SummaryTableValue({ children }: HasChildren) { | ||
return ( | ||
<Box flex={1} alignItems="flex-end"> | ||
<Text variant="label02">{children}</Text> | ||
</Box> | ||
); | ||
} | ||
|
||
interface SummaryTableItem { | ||
label: string; | ||
value: ReactNode; | ||
} | ||
|
||
export function SummaryTableItem({ label, value }: SummaryTableItem) { | ||
return ( | ||
<Box flexDirection="row" py="2"> | ||
<SummaryTableLabel>{label}</SummaryTableLabel> | ||
<SummaryTableValue>{value}</SummaryTableValue> | ||
</Box> | ||
); | ||
} | ||
|
||
export const SummaryTable = { | ||
Root: SummaryTableRoot, | ||
Item: SummaryTableItem, | ||
Value: SummaryTableValue, | ||
Label: SummaryTableLabel, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,101 @@ | ||
import { useRef, useState } from 'react'; | ||
|
||
import { | ||
BitcoinBalance, | ||
BitcoinBalanceByAccount, | ||
} from '@/features/balances/bitcoin/bitcoin-balance'; | ||
import { RunesBalance, RunesBalanceByAccount } from '@/features/balances/bitcoin/runes-balance'; | ||
import { Sip10Balance, Sip10BalanceByAccount } from '@/features/balances/stacks/sip10-balance'; | ||
import { StacksBalance, StacksBalanceByAccount } from '@/features/balances/stacks/stacks-balance'; | ||
import { useRunesFlag } from '@/features/feature-flags'; | ||
import { useRunesFlag, useTokenDetailsFlag } from '@/features/feature-flags'; | ||
import { TokenSheet, TokenSheetData } from '@/features/token/token-sheet'; | ||
import { ViewMode } from '@/shared/types'; | ||
|
||
import { AccountId } from '@leather.io/models'; | ||
import { Box } from '@leather.io/ui/native'; | ||
import { AccountId, FungibleCryptoAsset, Money } from '@leather.io/models'; | ||
import { Box, SheetRef } from '@leather.io/ui/native'; | ||
|
||
export interface BalanceViewProps { | ||
mode: ViewMode; | ||
onPress?: ({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) => void; | ||
} | ||
|
||
export interface OnOpenTokenProps { | ||
asset: FungibleCryptoAsset; | ||
availableBalance: Money; | ||
quoteBalance: Money; | ||
} | ||
|
||
export function AllAccountBalances({ mode }: BalanceViewProps) { | ||
const [sheetData, setSheetData] = useState<TokenSheetData | null>(null); | ||
const runesFlag = useRunesFlag(); | ||
const tokenDetailsFlag = useTokenDetailsFlag(); | ||
|
||
const tokenSheetRef = useRef<SheetRef>(null); | ||
|
||
function onOpenToken({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) { | ||
setSheetData({ asset, availableBalance, quoteBalance }); | ||
// analytics.track('token_sheet_opened', { source: 'action_bar' }); | ||
tokenSheetRef.current?.present(); | ||
} | ||
|
||
const onPressToken = tokenDetailsFlag ? onOpenToken : undefined; | ||
|
||
return ( | ||
<Box flex={1} height="100%"> | ||
<BitcoinBalance /> | ||
<StacksBalance /> | ||
<Sip10Balance mode={mode} /> | ||
{runesFlag && <RunesBalance mode={mode} />} | ||
</Box> | ||
<> | ||
<Box flex={1} height="100%"> | ||
<BitcoinBalance onPress={onPressToken} /> | ||
<StacksBalance onPress={onPressToken} /> | ||
<Sip10Balance mode={mode} onPress={onPressToken} /> | ||
{runesFlag && <RunesBalance mode={mode} />} | ||
</Box> | ||
<TokenSheet data={sheetData} sheetRef={tokenSheetRef} /> | ||
</> | ||
); | ||
} | ||
|
||
export function AccountBalances({ mode, fingerprint, accountIndex }: AccountId & BalanceViewProps) { | ||
const [sheetData, setSheetData] = useState<TokenSheetData | null>(null); | ||
const runesFlag = useRunesFlag(); | ||
|
||
const tokenSheetRef = useRef<SheetRef>(null); | ||
const tokenDetailsFlag = useTokenDetailsFlag(); | ||
|
||
function onOpenToken(data: TokenSheetData) { | ||
setSheetData(data); | ||
// analytics.track('token_sheet_opened', { source: 'action_bar' }); | ||
tokenSheetRef.current?.present(); | ||
} | ||
|
||
const onPressToken = tokenDetailsFlag ? onOpenToken : undefined; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have enabled There is no way to trigger the |
||
|
||
return ( | ||
<Box> | ||
<BitcoinBalanceByAccount fingerprint={fingerprint} accountIndex={accountIndex} /> | ||
<StacksBalanceByAccount fingerprint={fingerprint} accountIndex={accountIndex} /> | ||
<Sip10BalanceByAccount mode={mode} fingerprint={fingerprint} accountIndex={accountIndex} /> | ||
{runesFlag && ( | ||
<RunesBalanceByAccount mode={mode} fingerprint={fingerprint} accountIndex={accountIndex} /> | ||
)} | ||
</Box> | ||
<> | ||
<Box> | ||
<BitcoinBalanceByAccount | ||
onPress={onPressToken} | ||
fingerprint={fingerprint} | ||
accountIndex={accountIndex} | ||
/> | ||
<StacksBalanceByAccount | ||
onPress={onPressToken} | ||
fingerprint={fingerprint} | ||
accountIndex={accountIndex} | ||
/> | ||
<Sip10BalanceByAccount | ||
mode={mode} | ||
fingerprint={fingerprint} | ||
accountIndex={accountIndex} | ||
onPress={onPressToken} | ||
/> | ||
{runesFlag && ( | ||
<RunesBalanceByAccount | ||
mode={mode} | ||
fingerprint={fingerprint} | ||
accountIndex={accountIndex} | ||
/> | ||
)} | ||
</Box> | ||
<TokenSheet data={sheetData} sheetRef={tokenSheetRef} /> | ||
</> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,12 @@ | ||
import { TokenBalance } from '@/features/token/components/token-balance'; | ||
import { useBtcAccountBalance, useBtcTotalBalance } from '@/queries/balance/btc-balance.query'; | ||
import { t } from '@lingui/macro'; | ||
|
||
import { btcAsset } from '@leather.io/constants'; | ||
import { Money } from '@leather.io/models'; | ||
import { BtcAvatarIcon, PressableProps } from '@leather.io/ui/native'; | ||
|
||
import { TokenBalance } from '../token-balance'; | ||
import { OnOpenTokenProps } from '../balances'; | ||
|
||
interface BitcoinTokenBalanceProps extends PressableProps { | ||
availableBalance?: Money; | ||
|
@@ -37,29 +39,30 @@ export function BitcoinTokenBalance({ | |
} | ||
|
||
interface BitcoinBalanceProps { | ||
onPress?(): void; | ||
onPress?: ({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) => void; | ||
} | ||
|
||
export function BitcoinBalance({ onPress }: BitcoinBalanceProps) { | ||
const { state, value } = useBtcTotalBalance(); | ||
|
||
const availableBalance = value?.btc.availableBalance; | ||
const quoteBalance = value?.quote.availableBalance; | ||
|
||
if (!availableBalance || !quoteBalance) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I need to clean this up |
||
return null; | ||
} | ||
return ( | ||
<BitcoinTokenBalance | ||
availableBalance={availableBalance} | ||
quoteBalance={quoteBalance} | ||
isLoading={state === 'loading'} | ||
onPress={onPress} | ||
onPress={() => onPress?.({ asset: btcAsset, availableBalance, quoteBalance })} | ||
/> | ||
); | ||
} | ||
|
||
interface BitcoinBalanceByAccountProps { | ||
accountIndex: number; | ||
fingerprint: string; | ||
onPress?(): void; | ||
onPress?: ({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) => void; | ||
} | ||
export function BitcoinBalanceByAccount({ | ||
accountIndex, | ||
|
@@ -70,12 +73,14 @@ export function BitcoinBalanceByAccount({ | |
|
||
const availableBalance = value?.btc.availableBalance; | ||
const quoteBalance = value?.quote.availableBalance; | ||
|
||
if (!availableBalance || !quoteBalance) { | ||
return null; | ||
} | ||
return ( | ||
<BitcoinTokenBalance | ||
availableBalance={availableBalance} | ||
quoteBalance={quoteBalance} | ||
onPress={onPress} | ||
onPress={() => onPress?.({ asset: btcAsset, availableBalance, quoteBalance })} | ||
isLoading={state === 'loading'} | ||
/> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keeping these as a placeholder. I'll add the analytics keys soon