Skip to content

Commit

Permalink
updating drop down wip (#223)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thorian1te
Thorian1te authored May 9, 2024
1 parent f5c2f43 commit 1517d8e
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 93 deletions.
74 changes: 26 additions & 48 deletions src/renderer/components/uielements/button/ActionButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,45 @@
import React from 'react'

import { Popover } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import * as A from 'fp-ts/lib/Array'
import * as FP from 'fp-ts/lib/function'
import { useIntl } from 'react-intl'

import type { Props as ButtonProps } from './FlatButton'
import { TextButton, FlatButton } from './index'
import { FlatButton } from './index'

export type Action = {
label: string
callback: FP.Lazy<void>
disabled?: boolean
}

export type Action = { label: string; callback: FP.Lazy<void>; disabled?: boolean }
export type Props = Omit<ButtonProps, 'onClick'> & {
actions: Action[]
btnClassName?: string
isTextView?: boolean
}

export const ActionButton: React.FC<Props> = (props): JSX.Element => {
const { size, actions, isTextView = true, disabled = false, className = '', btnClassName = '' } = props

const intl = useIntl()
const { size, actions, isTextView = true, className = '', btnClassName = '' } = props

return (
<Popover className={`relative ${className}`}>
<Popover.Button as="div" className="group">
{({ open }) => (
<FlatButton className={`${btnClassName}`} size={size} disabled={disabled}>
<span className={`${isTextView ? 'mr-10px' : 'hidden'}`}>
{intl.formatMessage({ id: 'common.action' })}
</span>
<ChevronDownIcon
className={`ease h-[20px] w-[20px] text-inherit group-hover:rotate-180 ${
open ? 'rotate-180' : 'rotate-0'
}`}
/>
<div className={`flex w-full justify-end space-x-2 ${className}`}>
{FP.pipe(
actions,
A.mapWithIndex((index, { label, callback, disabled = false }) => (
<FlatButton
className={`group ${btnClassName}`} // Use FlatButton or TextButton as needed
size={size}
disabled={disabled}
key={index}
onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
event.preventDefault()
event.stopPropagation()
callback()
}}>
{isTextView && <span>{label}</span>}
</FlatButton>
)}
</Popover.Button>
<Popover.Panel className="absolute left-[50%] z-[2000] min-w-[100%] translate-x-[-50%] bg-bg0 shadow-full dark:bg-bg0d dark:shadow-fulld ">
{({ close }) => (
<div>
{FP.pipe(
actions,
A.mapWithIndex((index, { label, callback, disabled = false }) => (
<TextButton
className={`w-full hover:bg-bg2 dark:hover:bg-bg2d`}
disabled={disabled}
size={size}
color="neutral"
key={index}
onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
event.preventDefault()
event.stopPropagation()
callback()
close()
}}>
{label}
</TextButton>
))
)}
</div>
)}
</Popover.Panel>
</Popover>
))
)}
</div>
)
}
94 changes: 49 additions & 45 deletions src/renderer/components/wallet/assets/AssetsTableCollapsable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { walletTypeToI18n } from '../../../services/wallet/util'
import { PricePool } from '../../../views/pools/Pools.types'
import { ErrorView } from '../../shared/error/'
import { AssetIcon } from '../../uielements/assets/assetIcon'
import { FlatButton } from '../../uielements/button'
import { Action as ActionButtonAction, ActionButton } from '../../uielements/button/ActionButton'
import { ReloadButton } from '../../uielements/button/ReloadButton'
import { QRCodeModal } from '../../uielements/qrCodeModal/QRCodeModal'
Expand Down Expand Up @@ -362,7 +363,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
]
: []
),
// 'add' LP RUNE
// 'add' LP RUNE || Cacao
A.concatW<ActionButtonAction>(
(isRuneNativeAsset(asset) || isCacaoAsset(asset)) && deepestPoolAsset !== null
? [
Expand Down Expand Up @@ -464,12 +465,6 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
callback: () => {
assetHandler(walletAsset, 'send')
}
},
{
label: intl.formatMessage({ id: 'wallet.action.receive' }),
callback: () => {
setShowQRModal(O.some({ asset: getChainAsset(chain), address: walletAddress }))
}
}
]),
// 'deposit' for RuneNativeAsset only
Expand All @@ -484,20 +479,6 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
}
]
: []
),
// Reload Balance
A.concatW<ActionButtonAction>(
!disableRefresh
? [
{
label: intl.formatMessage({ id: 'common.refresh' }),
callback: () => {
const lazyReload = reloadBalancesByChain(chain)
lazyReload() // Invoke the lazy function
}
}
]
: []
)
)
}
Expand All @@ -508,7 +489,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
</div>
)
},
[dex, poolsData, poolsDataMaya, poolDetails, intl, disableRefresh, navigate, assetHandler]
[dex, poolsData, poolsDataMaya, poolDetails, intl, navigate, assetHandler]
)

const actionColumn: ColumnType<WalletBalance> = useMemo(
Expand Down Expand Up @@ -645,40 +626,63 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
)

const header = (
<Styled.HeaderRow>
<Col xs={14} md={6} lg={4}>
<Styled.HeaderRow className="flex w-full justify-between">
<Col>
<Styled.HeaderChainContainer>
<Styled.HeaderLabel>{chainToString(chain)}</Styled.HeaderLabel>
{
// show tag for NON keystore wallets only (e.g. Ledger)
!isKeystoreWallet(walletType) && (
<Styled.WalletTypeLabel>{walletTypeToI18n(walletType, intl)}</Styled.WalletTypeLabel>
)
}
{!isKeystoreWallet(walletType) && (
<Styled.WalletTypeLabel>{walletTypeToI18n(walletType, intl)}</Styled.WalletTypeLabel>
)}
</Styled.HeaderChainContainer>
</Col>
<Col xs={0} md={12} lg={10}>
<Styled.HeaderAddress>
{hidePrivateData ? hiddenString : walletAddress}
<Styled.CopyLabelContainer
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
}}>
<Styled.CopyLabel copyable={{ text: walletAddress }} />
</Styled.CopyLabelContainer>
</Styled.HeaderAddress>
<Col>
<div className="flex">
<Styled.HeaderAddress>
{hidePrivateData ? hiddenString : walletAddress}
<Styled.CopyLabelContainer
onClick={(event) => {
event.preventDefault()
event.stopPropagation()
}}>
<Styled.CopyLabel copyable={{ text: walletAddress }} />
</Styled.CopyLabelContainer>
</Styled.HeaderAddress>
</div>
</Col>
<Col xs={10} md={6} lg={10}>
<div className="row flex">
<Col>
<div className="flex ">
<Styled.HeaderLabel color={RD.isFailure(balancesRD) ? 'error' : 'gray'}>
{`${assetsTxt}`}
</Styled.HeaderLabel>
<ReloadButton size="small" onClick={() => handleRefreshClick(chain)}></ReloadButton>
</div>
</Col>
<Col>
<div className="flex pr-4 ">
<ReloadButton
className="pr-2"
size="small"
color="neutral"
disabled={disableRefresh}
onClick={(event) => {
event.stopPropagation()
handleRefreshClick(chain)
}}
/>
<FlatButton
className="ml-2 pl-2"
size="small"
color="neutral"
onClick={(event) => {
event.stopPropagation()
setShowQRModal(O.some({ asset: getChainAsset(chain), address: walletAddress }))
}}>
<span className="hidden sm:inline-block">{intl.formatMessage({ id: 'wallet.action.receive' })}</span>
</FlatButton>
</div>
</Col>
</Styled.HeaderRow>
)

return (
<Panel header={header} key={key}>
{renderBalances({
Expand All @@ -689,7 +693,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
</Panel>
)
},
[hidePrivateData, intl, renderBalances]
[disableRefresh, hidePrivateData, intl, renderBalances]
)

// open all panels by default
Expand Down

0 comments on commit 1517d8e

Please sign in to comment.