-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initialize Account Dashboard Page (#1811)
Co-authored-by: vutuanlinh2k2 <[email protected]>
- Loading branch information
1 parent
4b6435c
commit 04cb272
Showing
92 changed files
with
2,103 additions
and
962 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
95 changes: 95 additions & 0 deletions
95
apps/bridge-dapp/src/components/Header/ActiveChainDropdown.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,95 @@ | ||
| import { DropdownMenuTrigger as DropdownButton } from '@radix-ui/react-dropdown-menu'; | ||
| import { useWebContext } from '@webb-tools/api-provider-environment/webb-context/webb-context'; | ||
| import type { ChainConfig } from '@webb-tools/dapp-config/chains/chain-config.interface'; | ||
| import getChainFromConfig from '@webb-tools/dapp-config/utils/getChainFromConfig'; | ||
| import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types/WebbError'; | ||
| import { ChainIcon } from '@webb-tools/icons/ChainIcon'; | ||
| import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id'; | ||
| import { | ||
| Dropdown, | ||
| DropdownBody, | ||
| } from '@webb-tools/webb-ui-components/components/Dropdown'; | ||
| import { MenuItem } from '@webb-tools/webb-ui-components/components/MenuItem'; | ||
| import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea'; | ||
| import ChainButtonCmp from '@webb-tools/webb-ui-components/components/buttons/ChainButton'; | ||
| import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI'; | ||
| import { useCallback, useMemo } from 'react'; | ||
| import useChainsFromRoute from '../../hooks/useChainsFromRoute'; | ||
| import { useConnectWallet } from '../../hooks/useConnectWallet'; | ||
|
|
||
| const ActiveChainDropdown = () => { | ||
| const { activeChain, activeWallet, apiConfig, switchChain, loading } = | ||
| useWebContext(); | ||
| const { toggleModal } = useConnectWallet(); | ||
| const { srcTypedChainId } = useChainsFromRoute(); | ||
| const { notificationApi } = useWebbUI(); | ||
|
|
||
| const chain = useMemo(() => { | ||
| if (activeChain) { | ||
| return activeChain; | ||
| } | ||
|
|
||
| // Default to the chain from route if no active chain | ||
| if (typeof srcTypedChainId === 'number' && activeChain !== null) { | ||
| return apiConfig.chains[srcTypedChainId]; | ||
| } | ||
| }, [activeChain, apiConfig.chains, srcTypedChainId]); | ||
|
|
||
| const selectableChains = useMemo( | ||
| () => apiConfig.getSupportedChains({ withEnv: true }), | ||
| [apiConfig] | ||
| ); | ||
|
|
||
| const handleSelectChain = useCallback( | ||
| async (chainCfg: ChainConfig) => { | ||
| const chain = getChainFromConfig(chainCfg); | ||
|
|
||
| if (!activeWallet || !chain.wallets.includes(activeWallet.id)) { | ||
| toggleModal(true, calculateTypedChainId(chain.chainType, chain.id)); | ||
| } else { | ||
| const api = await switchChain(chain, activeWallet); | ||
| if (!api) { | ||
| notificationApi.addToQueue({ | ||
| variant: 'error', | ||
| message: WebbError.getErrorMessage(WebbErrorCodes.SwitchChainFailed) | ||
| .message, | ||
| }); | ||
| } | ||
| } | ||
| }, | ||
| [activeWallet, notificationApi, switchChain, toggleModal] | ||
| ); | ||
|
|
||
| return ( | ||
| <Dropdown> | ||
| <DropdownButton asChild disabled={loading}> | ||
| <ChainButtonCmp | ||
| chain={chain} | ||
| status="success" | ||
| placeholder={activeChain === null ? 'Unsupported Chain' : undefined} | ||
| textClassname="hidden lg:!block" | ||
| /> | ||
| </DropdownButton> | ||
| <DropdownBody className="mt-2"> | ||
| <ScrollArea className="h-[var(--dropdown-height)]"> | ||
| <ul> | ||
| {selectableChains.map((chain) => { | ||
| return ( | ||
| <li key={`${chain.chainType}-${chain.id}`}> | ||
| <MenuItem | ||
| startIcon={<ChainIcon size="lg" name={chain.name} />} | ||
| onSelect={() => handleSelectChain(chain)} | ||
| > | ||
| {chain.name} | ||
| </MenuItem> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </ScrollArea> | ||
| </DropdownBody> | ||
| </Dropdown> | ||
| ); | ||
| }; | ||
|
|
||
| export default ActiveChainDropdown; |
This file was deleted.
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
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
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,23 @@ | ||
| import useHiddenValue from '../hooks/useHiddenValue'; | ||
|
|
||
| function HiddenValue(props: { | ||
| /** The children must be a string */ | ||
| children: string; | ||
|
|
||
| /** Number of star to display. @default to children.length */ | ||
| numberOfStars?: number; | ||
| }) { | ||
| const { numberOfStars } = props; | ||
|
|
||
| const [isHidden] = useHiddenValue(); | ||
|
|
||
| if (isHidden) { | ||
| return Array.from({ length: numberOfStars ?? props.children.length }) | ||
| .map(() => '*') | ||
| .join(''); | ||
| } | ||
|
|
||
| return props.children; | ||
| } | ||
|
|
||
| export default HiddenValue; |
Oops, something went wrong.