-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* fix: storybook asset metadata * fix: make tailwind work in storybook, add icon to assetSelector * feat(ui): #1714: update AssetSelectorTrigger to the latest designs * feat(ui): #1714: implement `ListItem` nested component * feat(ui): #1714: finish the implementation of the AssetSelector * fix(ui): #1714: fix selected state of the AssetSelector * feat(ui): #1714: separate `AssetSelector` from `AssetSelector.Custom` * chore: changeset * refactor(ui): #1714: rename `AssetSelectorValue`, export types * feat(ui): #1773: add `ValueInput` UI component * feat(ui): #1773: add `SwapInput` UI component * docs(ui): #1773: add docs for new components * chore: changeset * feat(ui): #1714: implement sticky header and the correct height in the dialog * fix(ui): #1776: update TextInput and Button styles to match the design * fix(ui): tests * fix(ui): #1773: hide the arrows in the number input * fix(ui): #1714: update default filtering of the balances and fix ListItem styles --------- Co-authored-by: Atris <[email protected]>
- Loading branch information
Showing
10 changed files
with
437 additions
and
26 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@penumbra-zone/ui': minor | ||
| --- | ||
|
|
||
| Add `SwapInput` and `ValueInput` UI components |
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
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 |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { SwapInput } from '.'; | ||
| import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; | ||
| import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; | ||
| import { useState } from 'react'; | ||
| import { | ||
| OSMO_BALANCE, | ||
| OSMO_METADATA, | ||
| PENUMBRA2_BALANCE, | ||
| PENUMBRA_BALANCE, | ||
| PENUMBRA_METADATA, | ||
| PIZZA_METADATA, | ||
| } from '../utils/bufs'; | ||
| import { AssetSelectorValue } from '../AssetSelector'; | ||
|
|
||
| const balanceOptions: BalancesResponse[] = [PENUMBRA_BALANCE, PENUMBRA2_BALANCE, OSMO_BALANCE]; | ||
| const assetOptions: Metadata[] = [PIZZA_METADATA, PENUMBRA_METADATA, OSMO_METADATA]; | ||
|
|
||
| const meta: Meta<typeof SwapInput> = { | ||
| component: SwapInput, | ||
| tags: ['autodocs', '!dev'], | ||
| argTypes: { | ||
| value: { control: false }, | ||
| }, | ||
| }; | ||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof SwapInput>; | ||
|
|
||
| export const SwapInputBasic: Story = { | ||
| args: { | ||
| label: 'Swap Input', | ||
| dialogTitle: 'Transfer Assets', | ||
| assets: assetOptions, | ||
| balances: balanceOptions, | ||
| placeholder: 'Input value...', | ||
| }, | ||
|
|
||
| render: function Render(props) { | ||
| const [value, setValue] = useState<string>(''); | ||
| const [from, setFrom] = useState<AssetSelectorValue>(); | ||
| const [to, setTo] = useState<AssetSelectorValue>(); | ||
|
|
||
| return ( | ||
| <SwapInput | ||
| {...props} | ||
| value={value} | ||
| onValueChange={setValue} | ||
| from={from} | ||
| onFromChange={setFrom} | ||
| to={to} | ||
| onToChange={setTo} | ||
| /> | ||
| ); | ||
| }, | ||
| }; |
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,159 @@ | ||
| import styled from 'styled-components'; | ||
| import { ArrowLeftRight } from 'lucide-react'; | ||
| import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; | ||
| import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; | ||
| import { getBalanceView } from '@penumbra-zone/getters/balances-response'; | ||
| import { fromValueView } from '@penumbra-zone/types/amount'; | ||
| import { TextInput } from '../TextInput'; | ||
| import { FormField } from '../FormField'; | ||
| import { WalletBalance } from '../WalletBalance'; | ||
| import { Button } from '../Button'; | ||
| import { AssetSelector, AssetSelectorValue } from '../AssetSelector'; | ||
| import { isBalancesResponse } from '../AssetSelector/shared/helpers.ts'; | ||
| import { ActionType } from '../utils/ActionType.ts'; | ||
|
|
||
| const AssetsRow = styled.div` | ||
| display: flex; | ||
| gap: ${props => props.theme.spacing(1)}; | ||
| align-items: flex-start; | ||
| `; | ||
|
|
||
| const AssetColumn = styled.div` | ||
| flex-grow: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: ${props => props.theme.spacing(1)}; | ||
| `; | ||
|
|
||
| // Extends the height of the text input to match the height of the asset selectors | ||
| const HeightExtender = styled.div` | ||
| width: 0; | ||
| height: ${props => props.theme.spacing(12)}; | ||
| `; | ||
|
|
||
| export interface SwapInputProps { | ||
| label: string; | ||
| placeholder?: string; | ||
|
|
||
| /** Numerical value of the corresponding balance */ | ||
| value?: string; | ||
| onValueChange?: (value: string) => void; | ||
|
|
||
| /** The `Metadata` or `BalancesResponse`, from which the swap should be initiated */ | ||
| from?: AssetSelectorValue; | ||
| onFromChange?: (value?: AssetSelectorValue) => void; | ||
|
|
||
| /** The `Metadata` or `BalancesResponse`, to which the swap should be made */ | ||
| to?: AssetSelectorValue; | ||
| onToChange?: (value?: AssetSelectorValue) => void; | ||
|
|
||
| /** | ||
| * An array of `Metadata` – protobuf message types describing the asset: | ||
| * its name, symbol, id, icons, and more | ||
| */ | ||
| assets?: Metadata[]; | ||
| /** | ||
| * An array of `BalancesResponse` – protobuf message types describing the balance of an asset: | ||
| * the account containing the asset, the value of this asset and its description (has `Metadata` inside it) | ||
| */ | ||
| balances?: BalancesResponse[]; | ||
| dialogTitle?: string; | ||
|
|
||
| actionType?: ActionType; | ||
| disabled?: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * An input field for swapping assets. It allows the user to select the "from" and "to" assets, | ||
| * input the amount to swap, and see the balances of the selected assets. | ||
| */ | ||
| export const SwapInput = ({ | ||
| assets, | ||
| balances, | ||
| label, | ||
| placeholder, | ||
| from, | ||
| onFromChange, | ||
| to, | ||
| onToChange, | ||
| value, | ||
| onValueChange, | ||
| actionType = 'default', | ||
| disabled, | ||
| dialogTitle, | ||
| }: SwapInputProps) => { | ||
| const onFromMax = () => { | ||
| if (!isBalancesResponse(from)) { | ||
| return; | ||
| } | ||
|
|
||
| const maxValue = fromValueView(getBalanceView(from)); | ||
| onValueChange?.(maxValue.toString()); | ||
| }; | ||
|
|
||
| const onSwap = () => { | ||
| onFromChange?.(to); | ||
| onToChange?.(from); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormField label={label}> | ||
| <TextInput | ||
| min={0} | ||
| type='number' | ||
| value={value} | ||
| disabled={disabled} | ||
| actionType={actionType} | ||
| placeholder={placeholder} | ||
| onChange={onValueChange} | ||
| endAdornment={<HeightExtender />} | ||
| /> | ||
|
|
||
| <AssetsRow> | ||
| <AssetColumn> | ||
| <AssetSelector | ||
| value={from} | ||
| assets={assets} | ||
| balances={balances} | ||
| actionType={actionType} | ||
| disabled={disabled} | ||
| dialogTitle={dialogTitle} | ||
| onChange={onFromChange} | ||
| /> | ||
| {isBalancesResponse(from) && ( | ||
| <WalletBalance | ||
| balance={from} | ||
| actionType={actionType} | ||
| disabled={disabled} | ||
| onClick={onFromMax} | ||
| /> | ||
| )} | ||
| </AssetColumn> | ||
|
|
||
| <Button | ||
| priority='primary' | ||
| iconOnly | ||
| icon={ArrowLeftRight} | ||
| disabled={disabled} | ||
| actionType={actionType} | ||
| onClick={onSwap} | ||
| > | ||
| Swap | ||
| </Button> | ||
|
|
||
| <AssetColumn> | ||
| <AssetSelector | ||
| value={to} | ||
| assets={assets} | ||
| balances={balances} | ||
| actionType={actionType} | ||
| disabled={disabled} | ||
| dialogTitle={dialogTitle} | ||
| onChange={onToChange} | ||
| /> | ||
| {isBalancesResponse(to) && <WalletBalance balance={to} actionType={actionType} />} | ||
| </AssetColumn> | ||
| </AssetsRow> | ||
| </FormField> | ||
| ); | ||
| }; |
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
Oops, something went wrong.