-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: #65: implement pair selector * feat: #65: fill pair selector with account balances * feat: fill the `PairSelector` with the registry values * feat: #65: use react-query to fetch assets and balances * refactor: #65: use setters in the stores * fix: #65: use react-query instead of mobx to keep the state of the fetchers * fix: #65: apply latest changes * fix: #65: apply PR comments and add better docs * fix: #65: rename balances queryKey
- Loading branch information
Showing
14 changed files
with
329 additions
and
99 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
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
Large diffs are not rendered by default.
Oops, something went wrong.
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,16 @@ | ||
'use client'; | ||
|
||
import { ReactNode } from 'react'; | ||
import { QueryClientProvider } from '@tanstack/react-query'; | ||
import { queryClient } from '@/shared/queryClient'; | ||
import { StyledComponentsRegistry } from './StyleRegistry'; | ||
|
||
export const Providers = ({ children }: { children: ReactNode }) => { | ||
return ( | ||
<StyledComponentsRegistry> | ||
<QueryClientProvider client={queryClient}> | ||
{children} | ||
</QueryClientProvider> | ||
</StyledComponentsRegistry> | ||
); | ||
}; |
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,68 @@ | ||
import { observer } from 'mobx-react-lite'; | ||
import { ArrowLeftRight } from 'lucide-react'; | ||
import { AssetSelector, AssetSelectorValue } from '@penumbra-zone/ui/AssetSelector'; | ||
import { Button } from '@penumbra-zone/ui/Button'; | ||
import { useAssets } from '@/shared/state/assets'; | ||
import { useBalances } from '@/shared/state/balances'; | ||
|
||
export interface PairSelectorProps { | ||
/** 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; | ||
|
||
dialogTitle?: string; | ||
disabled?: boolean; | ||
} | ||
|
||
export const PairSelector = observer(({ | ||
from, | ||
onFromChange, | ||
to, | ||
onToChange, | ||
disabled, | ||
dialogTitle, | ||
}: PairSelectorProps) => { | ||
const { data: assets } = useAssets(); | ||
const { data: balances } = useBalances(); | ||
|
||
const onSwap = () => { | ||
onFromChange?.(to); | ||
onToChange?.(from); | ||
}; | ||
|
||
return ( | ||
<div className="flex gap-2"> | ||
<AssetSelector | ||
value={from} | ||
assets={assets} | ||
balances={balances} | ||
disabled={disabled} | ||
dialogTitle={dialogTitle} | ||
onChange={onFromChange} | ||
/> | ||
|
||
<Button | ||
priority='primary' | ||
iconOnly | ||
icon={ArrowLeftRight} | ||
disabled={disabled} | ||
onClick={onSwap} | ||
> | ||
Swap | ||
</Button> | ||
|
||
<AssetSelector | ||
value={to} | ||
assets={assets} | ||
balances={balances} | ||
disabled={disabled} | ||
dialogTitle={dialogTitle} | ||
onChange={onToChange} | ||
/> | ||
</div> | ||
); | ||
}); |
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 |
---|---|---|
|
@@ -74,4 +74,4 @@ export const decimalsFromDenomUnits = (denomUnits: DenomUnit[]): number => { | |
} | ||
}); | ||
return decimals; | ||
}; | ||
}; |
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 |
---|---|---|
|
@@ -706,4 +706,4 @@ export default function Block() { | |
)} | ||
</Layout> | ||
); | ||
} | ||
} |
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,3 @@ | ||
import { QueryClient } from '@tanstack/react-query' | ||
|
||
export const queryClient = new QueryClient(); |
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,41 @@ | ||
import { ViewService } from '@penumbra-zone/protobuf'; | ||
import { getDenomMetadata } from '@penumbra-zone/getters/assets-response'; | ||
import { penumbra } from '@/shared/penumbra'; | ||
import { connectionStore } from '@/shared/state/connection'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
import { useRegistry } from '@/fetchers/registry'; | ||
|
||
/** | ||
* Returns the `Metadata[]` based on the provider connection state. | ||
* If connected, it fetches the assets from the `ViewService`'s `assets` method. | ||
* Otherwise, it fetches the assets from the remote registry. | ||
* | ||
* Must be used within `observer` mobX HOC | ||
**/ | ||
export const useAssets = () => { | ||
const { data: registry, error: registryErr } = useRegistry(); | ||
|
||
const registryAssets = useQuery({ | ||
queryKey: ['registry-assets'], | ||
enabled: Boolean(registry), | ||
queryFn: () => { | ||
if (!registry) { | ||
throw new Error('Registry not available'); | ||
} | ||
return registry.getAllAssets(); | ||
}, | ||
}); | ||
|
||
const accountAssets = useQuery({ | ||
queryKey: ['view-service-assets'], | ||
enabled: connectionStore.connected, | ||
queryFn: async () => { | ||
const responses = await Array.fromAsync(penumbra.service(ViewService).assets({})); | ||
return responses.map(getDenomMetadata); | ||
}, | ||
}); | ||
|
||
return connectionStore.connected | ||
? accountAssets | ||
: { ...registryAssets, error: registryAssets.error ?? registryErr }; | ||
}; |
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,21 @@ | ||
import { ViewService } from '@penumbra-zone/protobuf'; | ||
import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; | ||
import { penumbra } from '@/shared/penumbra'; | ||
import { connectionStore } from '@/shared/state/connection'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
|
||
const fetchQuery = async (): Promise<BalancesResponse[]> => { | ||
return Array.fromAsync(penumbra.service(ViewService).balances({})); | ||
}; | ||
|
||
/** | ||
* Fetches the `BalancesResponse[]` based on the provider connection state. | ||
* Must be used within the `observer` mobX HOC | ||
*/ | ||
export const useBalances = () => { | ||
return useQuery({ | ||
queryKey: ['view-service-balances'], | ||
queryFn: fetchQuery, | ||
enabled: connectionStore.connected, | ||
}); | ||
}; |
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,21 @@ | ||
import { makeAutoObservable } from 'mobx'; | ||
import { AssetSelectorValue } from '@penumbra-zone/ui/AssetSelector'; | ||
|
||
class PairState { | ||
from?: AssetSelectorValue; | ||
to?: AssetSelectorValue; | ||
|
||
constructor () { | ||
makeAutoObservable(this); | ||
} | ||
|
||
setFrom = (value?: AssetSelectorValue) => { | ||
this.from = value; | ||
} | ||
|
||
setTo = (value?: AssetSelectorValue) => { | ||
this.to = value; | ||
} | ||
} | ||
|
||
export const pairStore = new PairState(); |
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