-
Notifications
You must be signed in to change notification settings - Fork 189
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #930 from CodeSnooker/task/new-connect-wallet
Task/new connect wallet
- Loading branch information
Showing
11 changed files
with
269 additions
and
52 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
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,42 @@ | ||
| import React from 'react'; | ||
| import { Box } from '@material-ui/core'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { WalletOptionProps } from './WalletOptionProps'; | ||
|
|
||
| const BarOptionContent: React.FC<WalletOptionProps> = ({ | ||
| onClick, | ||
| header, | ||
| subheader = null, | ||
| icon, | ||
| active = false, | ||
| id, | ||
| installLink = null, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <Box className='optionCardClickable' id={id} onClick={onClick}> | ||
| <Box className='flex items-center' my={0.5}> | ||
| <img src={icon} alt={'Icon'} width={24} /> | ||
| <p style={{ marginLeft: 8 }}>{header}</p> | ||
| </Box> | ||
| {active && ( | ||
| <Box className='flex items-center'> | ||
| <Box className='optionConnectedDot' /> | ||
| <small>{t('connected')}</small> | ||
| </Box> | ||
| )} | ||
| {!active && installLink && ( | ||
| <Box className='flex items-center'> | ||
| <small className='installBtn'>{t('install')}</small> | ||
| </Box> | ||
| )} | ||
| {subheader && ( | ||
| <Box my={0.5} width={1}> | ||
| <span>{subheader}</span> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default BarOptionContent; |
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,39 @@ | ||
| import React from 'react'; | ||
| import { Box } from '@material-ui/core'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { WalletOptionProps } from './WalletOptionProps'; | ||
|
|
||
| const IconifyOption: React.FC<WalletOptionProps> = ({ | ||
| header, | ||
| icon, | ||
| active, | ||
| id, | ||
| onClick, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <Box | ||
| id={id} | ||
| onClick={onClick} | ||
| className='flex items-center flex-col optionCardIconfiy' | ||
| my={1.5} | ||
| mx={1.5} | ||
| > | ||
| <Box className='optionIconContainer'> | ||
| <img className='m-auto' src={icon} alt={'Icon'} width={48} /> | ||
| </Box> | ||
| <Box className='optionHeader' mt={0.5}> | ||
| {header} | ||
| </Box> | ||
| {active && ( | ||
| <Box className='flex items-center'> | ||
| <Box className='optionConnectedDot' /> | ||
| <small>{t('connected')}</small> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default IconifyOption; |
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,49 @@ | ||
| import React from 'react'; | ||
| import { WalletOptionProps } from './WalletOptionProps'; | ||
|
|
||
| import IconifyOption from './IconifyOption'; | ||
| import BarOptionContent from './BarOptionContent'; | ||
|
|
||
| const WalletOption: React.FC<WalletOptionProps> = ( | ||
| props: WalletOptionProps, | ||
| ) => { | ||
| const { iconify, link, installLink } = props; | ||
|
|
||
| if (link) { | ||
| return ( | ||
| <a | ||
| href={link} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='optionLink' | ||
| > | ||
| {iconify ? ( | ||
| <IconifyOption {...props} /> | ||
| ) : ( | ||
| <BarOptionContent {...props} /> | ||
| )} | ||
| </a> | ||
| ); | ||
| } | ||
|
|
||
| if (installLink !== null) { | ||
| return ( | ||
| <a | ||
| href={installLink} | ||
| target='_blank' | ||
| rel='noopener noreferrer' | ||
| className='installLink' | ||
| > | ||
| {iconify ? ( | ||
| <IconifyOption {...props} /> | ||
| ) : ( | ||
| <BarOptionContent {...props} /> | ||
| )} | ||
| </a> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default WalletOption; |
Oops, something went wrong.