This repository has been archived by the owner on Jun 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Claim] check other chains for claimable amts + click to change netwo…
…rks (#2313) * create updater * add actions/reducers * hooks * add updater * export type * make component * update chains * useChangeNetwork hook * add claims banner to claim modal * styles * banner styles and change network hook * fix showing claim on same chain * [Fixes] Fixes for #2313 (#2318) * saving * fix modals and broken network change * remove debug code * [CLAIM] Fixes consumed claims check for other chains (#2320) * check consumed claims using modded hooks * number > SupportedChainId * Claim check other chains fixes (#2330) * use NotificationBanner instead of PhishAlert * styles * fix toggleWalletModal broken (#2332)
- Loading branch information
Showing
11 changed files
with
326 additions
and
117 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
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,94 @@ | ||
| import { useCallback, useEffect, useMemo, useRef, useState } from 'react' | ||
| import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core' | ||
| import { useOnClickOutside } from 'hooks/useOnClickOutside' | ||
| import { useActiveWeb3React } from 'hooks/web3' | ||
| import { useAppSelector } from 'state/hooks' | ||
| import { CHAIN_INFO, SupportedChainId } from 'constants/chains' | ||
| import { switchToNetwork } from 'utils/switchToNetwork' | ||
| import { supportedChainId } from 'utils/supportedChainId' | ||
| import { useWalletModalToggle } from '../state/application/hooks' | ||
|
|
||
| type ChangeNetworksParams = Pick<ReturnType<typeof useActiveWeb3React>, 'account' | 'chainId' | 'library'> | ||
|
|
||
| export default function useChangeNetworks({ account, chainId: preChainId, library }: ChangeNetworksParams) { | ||
| const { error } = useWeb3React() // MOD: check unsupported network | ||
| const nodeRef = useRef<HTMLDivElement>() | ||
|
|
||
| const [localOpen, setLocalOpen] = useState(false) | ||
| const isModalOpen = localOpen | ||
|
|
||
| const toggleWalletModal = useWalletModalToggle() | ||
| const closeModal = useCallback(() => setLocalOpen(false), []) | ||
| const openModal = useCallback(() => setLocalOpen(true), []) | ||
| const toggleModal = useCallback(() => { | ||
| if (isModalOpen) { | ||
| closeModal() | ||
| } else { | ||
| openModal() | ||
| } | ||
| }, [closeModal, isModalOpen, openModal]) | ||
|
|
||
| useOnClickOutside(nodeRef, isModalOpen ? closeModal : undefined) | ||
|
|
||
| const implements3085 = useAppSelector((state) => state.application.implements3085) | ||
|
|
||
| // MOD: get supported chain and check unsupported | ||
| const [chainId, isUnsupportedChain] = useMemo(() => { | ||
| const chainId = supportedChainId(preChainId) | ||
|
|
||
| return [chainId, error instanceof UnsupportedChainIdError] // Mod - return if chainId is unsupported | ||
| }, [preChainId, error]) | ||
|
|
||
| const info = chainId ? CHAIN_INFO[chainId] : undefined | ||
|
|
||
| const showSelector = Boolean(!account || implements3085) | ||
| const mainnetInfo = CHAIN_INFO[SupportedChainId.MAINNET] | ||
|
|
||
| const conditionalToggle = useCallback(() => { | ||
| if (showSelector) { | ||
| toggleModal() | ||
| } | ||
| }, [showSelector, toggleModal]) | ||
|
|
||
| // MOD: checks if a requested network switch was sent | ||
| // used for when user disconnected and selects a network internally | ||
| // if 3085 supported, will connect wallet and change network | ||
| const [queuedNetworkSwitch, setQueuedNetworkSwitch] = useState<null | number>(null) | ||
|
|
||
| const networkCallback = useCallback( | ||
| (supportedChainId) => { | ||
| if (!account) { | ||
| toggleWalletModal() | ||
| return setQueuedNetworkSwitch(supportedChainId) | ||
| } else if (implements3085 && library && supportedChainId) { | ||
| switchToNetwork({ library, chainId: supportedChainId }) | ||
|
|
||
| return isModalOpen && closeModal() | ||
| } | ||
|
|
||
| return | ||
| }, | ||
| [account, implements3085, library, toggleWalletModal, isModalOpen, closeModal] | ||
| ) | ||
|
|
||
| // if wallet supports 3085 | ||
| useEffect(() => { | ||
| if (queuedNetworkSwitch && account && chainId && implements3085) { | ||
| networkCallback(queuedNetworkSwitch) | ||
| setQueuedNetworkSwitch(null) | ||
| } | ||
| }, [networkCallback, queuedNetworkSwitch, chainId, account, implements3085]) | ||
|
|
||
| return { | ||
| callback: networkCallback, | ||
| conditionalToggle, | ||
| openModal, | ||
| closeModal, | ||
| isModalOpen, | ||
| isUnsupportedChain, | ||
| chainInfo: info, | ||
| mainnetInfo, | ||
| showSelector, | ||
| nodeRef, | ||
| } | ||
| } |
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 { useMemo } from 'react' | ||
| import styled from 'styled-components/macro' | ||
| import { NETWORK_LABELS, SupportedChainId } from 'constants/chains' | ||
| import { useClaimState } from 'state/claim/hooks' | ||
| import useChangeNetworks from 'hooks/useChangeNetworks' | ||
| import { useActiveWeb3React } from 'hooks/web3' | ||
| import NotificationBanner from '@src/custom/components/NotificationBanner' | ||
| import { AlertTriangle } from 'react-feather' | ||
|
|
||
| const ChainSpan = styled.span`` | ||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: auto; | ||
| flex-flow: row wrap; | ||
| > svg { | ||
| margin-right: 5px; | ||
| } | ||
| > div { | ||
| flex: 1 1 auto; | ||
| &:last-child { | ||
| > span { | ||
| margin-left: 4px; | ||
| font-weight: 600; | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| text-decoration: underline; | ||
| &:last-child { | ||
| &:after { | ||
| content: '!'; | ||
| } | ||
| } | ||
| &:not(:last-child) { | ||
| &:after { | ||
| content: ','; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| function ClaimsOnOtherChainsBanner({ className }: { className?: string }) { | ||
| const { account, library, chainId } = useActiveWeb3React() | ||
| const { callback } = useChangeNetworks({ account, library, chainId }) | ||
|
|
||
| const { hasClaimsOnOtherChains } = useClaimState() | ||
| const chainsWithClaims: SupportedChainId[] = useMemo( | ||
| () => | ||
| Object.keys(hasClaimsOnOtherChains).reduce((acc, chain) => { | ||
| const checkedChain = chain as unknown as SupportedChainId | ||
| const chainHasClaim = hasClaimsOnOtherChains[checkedChain] | ||
| if (!chainHasClaim || checkedChain == chainId) return acc | ||
|
|
||
| acc.push(checkedChain) | ||
| return acc | ||
| }, [] as SupportedChainId[]), | ||
| [chainId, hasClaimsOnOtherChains] | ||
| ) | ||
|
|
||
| if (chainsWithClaims.length === 0) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <NotificationBanner className={className} isVisible id={account ?? undefined} level="info"> | ||
| <Wrapper> | ||
| <AlertTriangle /> | ||
| <div>You have other available claims on</div> | ||
| <div> | ||
| {chainsWithClaims.map((chainId, index, array) => { | ||
| const changeNetworksCallback = () => callback(chainId) | ||
| const isLastInMultiple = index === array.length - 1 && array.length > 1 | ||
| return ( | ||
| <> | ||
| {isLastInMultiple && ' and'} | ||
| <ChainSpan key={chainId} onClick={changeNetworksCallback}> | ||
| {NETWORK_LABELS[chainId]} | ||
| </ChainSpan> | ||
| </> | ||
| ) | ||
| })} | ||
| </div> | ||
| </Wrapper> | ||
| </NotificationBanner> | ||
| ) | ||
| } | ||
|
|
||
| export default styled(ClaimsOnOtherChainsBanner)`` |
Oops, something went wrong.