diff --git a/web/e.cash/data/wallets.js b/web/e.cash/data/wallets.js --- a/web/e.cash/data/wallets.js +++ b/web/e.cash/data/wallets.js @@ -7,62 +7,73 @@ text: 'Cashtab is an open source, highly secure, non-custodial web wallet for eCash (XEC) & eTokens. Cashtab is a fast, secure & easy-to-use XEC wallet! Cashtab is also available as a browser extension for Google Chrome and Brave.', image: '/images/cashtab.png', link: 'https://cashtab.com/', + availableOn: ['Web App', 'Web Extension'], + features: ['eTokens', 'Message Signing'], }, { name: 'Electrum ABC', text: 'Electrum ABC is a fast and highly secure eCash (XEC) wallet for Windows, MacOS, and Linux. It supports mnemonic seed phrases, hardware wallets, multi-sig wallets, and importing private keys. Electrum ABC is a non-custodial XEC wallet for power users!', image: '/images/electrum-abc.png', link: 'https://www.bitcoinabc.org/electrum/', + availableOn: ['Desktop'], + features: ['eTokens', 'Message Signing', 'Multi-sig wallets'], }, { name: 'RaiPay', text: "RaiPay is a non-custodial mobile wallet for storing & managing eCash (XEC) & eTokens. With RaiPay you can experience the power and speed of eCash (XEC) and eTokens online, in person, and everywhere else. It's available for both Android & iOS devices.", image: '/images/raipay.png', link: 'https://www.raipay.co', + availableOn: ['iOS', 'Android'], + features: ['eTokens', 'Message Signing'], }, { name: 'ViaWallet', text: 'Backed by CoinEx, ViaWallet is a multi-chain non-custodial mobile wallet that supports eCash (XEC). With ViaWallet you can send, receive and manage your XEC coins securely. ViaWallet is available for both Android & iOS devices.', image: '/images/via-wallet.png', link: 'https://viawallet.com/', + availableOn: ['iOS', 'Android'], }, { name: 'AbcPay', text: "AbcPay is an advanced multi-currency crypto wallet for mobile devices, supporting eCash (XEC) and eTokens. AbcPay provides cutting edge features such as multi-signature wallet, 2FA and biometric authentication. It's available for both Android & iOS devices.", image: '/images/abc-pay.png', link: 'https://abcpay.cash/', + availableOn: ['iOS', 'Android'], + features: ['eTokens', 'Message Signing', 'Multi-sig wallets'], }, { name: 'Unstoppable Wallet', text: 'A privacy-oriented non-custodial wallet for eCash (XEC). Unstoppable is a highly secure, decentralized, and open-source wallet, available for Android and iOS smartphones.', image: '/images/unstoppable-wallet.png', link: 'https://unstoppable.money/', + availableOn: ['iOS', 'Android'], }, { name: 'Stack Wallet', text: 'An open-source, non-custodial multichain wallet for eCash (XEC). Stack is a highly secure, privacy-first mobile wallet for XEC, available for Android and iOS smartphones.', image: '/images/stack-wallet.png', link: 'https://stackwallet.com/', + availableOn: ['iOS', 'Android'], }, -]; - -export const hardwareWallets = [ { name: 'Satochip', text: 'Satochip is an open source and super-secure multi-crypto hardware wallet that natively supports storing eCash (XEC). Satochip cold wallet offers state-of-the-art security for storing & managing your XEC coins.', image: '/images/satochip.svg', link: 'https://satochip.io/', + availableOn: ['Hardware Wallet'], }, { name: "D'CENT", text: "D'CENT is another major hardware wallet that natively supports eCash (XEC). With the D’CENT biometric hardware wallet, you can securely send, receive, and manage your XEC coins.", image: '/images/dcent.svg', link: 'https://dcentwallet.com/', + availableOn: ['Hardware Wallet'], }, { name: 'Ballet', text: 'Ballet is a secure non-electronic physical wallet that offers native support for eCash (XEC). Safely store and easily manage your XEC coins with the Ballet cold wallet.', image: '/images/ballet.png', link: 'https://www.ballet.com/', + availableOn: ['Hardware Wallet'], }, ]; diff --git a/web/e.cash/pages/wallets.js b/web/e.cash/pages/wallets.js --- a/web/e.cash/pages/wallets.js +++ b/web/e.cash/pages/wallets.js @@ -6,15 +6,15 @@ import SubPageHero from '/components/sub-page-hero'; import { Container, GradientSpacer } from '/components/atoms'; import walletAnimation from '/public/animations/wallet.json'; -import { wallets, hardwareWallets } from '/data/wallets.js'; +import { wallets } from '/data/wallets.js'; import ExternalLink from '/components/external-link'; import { + WalletListCtn, WalletCardCtn, - FlexCtn, - ImageCtn, TextCtn, - OuterImageCtn, - TitleBox, + ImageCtn, + DetailsTitle, + DetailsCtn, } from '/styles/pages/wallets.js'; /** @@ -23,27 +23,39 @@ */ function WalletCard({ props }) { return ( - - - - - - {props.name} - - - -

{props.name}

-

{props.text}

-
Check it Out
- - - - + + + + {props.name} + + {props.text} + {props.features && ( + <> + Supports + + {props.features.map((item, index) => ( +
{item}
+ ))} + + + )} + {props.availableOn && ( + <> + Available on + + {props.availableOn.map((item, index) => ( +
{item}
+ ))} + + + )} + + ); } @@ -67,15 +79,12 @@ - - Wallets - {wallets.map((wallet, index) => ( - - ))} - Hardware Wallets - {hardwareWallets.map((wallet, index) => ( - - ))} + + + {wallets.map((wallet, index) => ( + + ))} + ); diff --git a/web/e.cash/public/images/abc-pay.png b/web/e.cash/public/images/abc-pay.png index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + getAnimationSettings(), +)` display: flex; - align-items: center; + align-items: flex-start; width: 100%; - ${props => props.theme.breakpoint.medium} { + flex-wrap: wrap; + align-items: stretch; +`; + +export const WalletCardCtn = styled.div` + width: 33.333%; + margin-bottom: 40px; + display: inline-block; + padding: 15px; + + > a { + width: 100%; + display: flex; flex-direction: column; + padding: 40px; + border: 2px solid ${props => props.theme.colors.primary}; + background-color: rgba(0, 0, 0, 0.51); + height: 100%; + :hover { + border-color: ${props => props.theme.colors.contrast}; + background-color: rgba(0, 0, 0, 0.75); + } + + @media (max-width: 1330px) { + padding: 30px; + } } -`; -export const OuterImageCtn = styled.div` - width: 420px; - height: 140px; - padding: 0 20px; - position: relative; - border: 1px solid ${props => props.theme.colors.gridlines}; - display: flex; - align-items: center; - ${props => props.theme.breakpoint.medium} { + @media (max-width: 1330px) { + width: 50%; + padding: 10px; + } + + @media (max-width: 800px) { width: 100%; - height: 120px; - margin-bottom: 20px; + margin-bottom: 10px; } `; export const ImageCtn = styled.div` width: 100%; - height: 80px; - padding: 20px; + height: 50px; position: relative; + margin-bottom: 30px; + display: flex; + justify-content: flex-start; + @media (max-width: 800px) { + height: 40px; + } img { object-fit: contain; + width: unset !important; + max-width: 100%; + left: 0; } `; export const TextCtn = styled.div` width: 100%; - padding: 0 0 0 30px; color: ${props => props.theme.colors.contrast}; position: relative; - - h4 { - font-size: 28px; - margin: 0 0 10px 0; - line-height: 1em; - transition: all ease-in-out 200ms; - } - - p { - margin: 0; - font-size: 16px; - opacity: 0.6; - } - - h5 { - text-transform: uppercase; - color: ${props => props.theme.colors.primaryLight}; - margin: 0; - margin-top: 10px; - font-size: 14px; - } - - ${props => props.theme.breakpoint.medium} { - padding: 0 0 0 0; - } + font-size: 16px; + margin-bottom: 30px; + line-height: 1.8em; + border-top: 1px solid rgba(255, 255, 255, 0.6); + padding-top: 20px; `; -export const WalletCardCtn = styled(motion.div).attrs(() => - getAnimationSettings(), -)` - width: 100%; - margin-bottom: 50px; - display: inline-block; - padding: 30px 0; - transition: background-color ease-in-out 200ms; - border-radius: 5px; +export const DetailsTitle = styled.div` + font-size: 12px; + color: ${props => + props.accent + ? props.theme.colors.accent + : props.theme.colors.primaryLight}; + opacity: 0.6; +`; - ${props => props.theme.breakpoint.medium} { - margin-bottom: 90px; - } +export const DetailsCtn = styled.div` + color: ${props => + props.accent + ? props.theme.colors.accent + : props.theme.colors.primaryLight}; + font-size: 16px; + display: flex; + align-items: center; + flex-wrap: wrap; + margin-bottom: ${props => (props.accent ? '15px' : '')}; - :hover { - background-color: ${props => props.theme.colors.walletHover}; + > div { + margin-right: 5px; + font-size: 14px; + font-weight: 600; } - - :hover ${TextCtn} { - h4 { - color: ${props => props.theme.colors.primaryLight}; - } + > div:not(:first-child) { + border-left: 1px solid + ${props => + props.accent + ? props.theme.colors.accent + : props.theme.colors.primary}; + padding-left: 5px; } `; - -export const TitleBox = styled(motion.div).attrs(() => getAnimationSettings())` - width: 100%; - border-left: 3px solid ${props => props.theme.colors.primary}; - background-image: linear-gradient( - 90deg, - ${props => props.theme.colors.black}, - transparent 93% - ); - margin-top: 40px; - margin-bottom: 40px; - padding: 10px 20px; - font-size: 16px; - text-transform: uppercase; - margin-bottom: 50px; -`;