Page MenuHomePhabricator
Differential D12680 Diff 36765 web/cashtab/src/components/Receive/Receive.js

Changeset View

Standalone View

View Options

web/cashtab/src/components/Receive/Receive.js

Show All 15 Linesexport const ReceiveCtn = styled.div`
width: 100%; width: 100%;
h2 { h2 {
color: ${props => props.theme.contrast}; color: ${props => props.theme.contrast};
margin: 0 0 20px; margin: 0 0 20px;
margin-top: 10px; margin-top: 10px;
} }
`; `;
export const SwitchBtnCtn = styled.div`
display: flex;
align-items: center;
justify-content: center;
align-content: space-between;
margin-bottom: 15px;
.nonactiveBtn {
color: ${props => props.theme.walletBackground};
background: ${props => props.theme.contrast} !important;
opacity: 0.7;
box-shadow: none !important;
}
.slpActive {
background: ${props => props.theme.eCashPurple} !important;
}
`;
export const SwitchBtn = styled.div`
font-weight: bold;
display: inline-block;
cursor: pointer;
color: ${props => props.theme.switchButtonActiveText};
font-size: 14px;
padding: 6px 0;
width: 100px;
margin: 0 1px;
text-decoration: none;
background: ${props => props.theme.eCashBlue};
user-select: none;
:first-child {
border-radius: 100px 0 0 100px;
}
:nth-child(2) {
border-radius: 0 100px 100px 0;
}
`;
const ReceiveWithWalletPresent = ({ const ReceiveWithWalletPresent = ({
wallet, wallet,
cashtabSettings, cashtabSettings,
balances, balances,
fiatPrice, fiatPrice,
changeCashtabSettings, changeCashtabSettings,
}) => { }) => {
const [isCashAddress, setIsCashAddress] = React.useState(true);
const handleChangeAddress = () => {
setIsCashAddress(!isCashAddress);
};
return ( return (
<ReceiveCtn> <ReceiveCtn>
<WalletInfoCtn> <WalletInfoCtn>
<WalletLabel <WalletLabel
name={wallet.name} name={wallet.name}
cashtabSettings={cashtabSettings} cashtabSettings={cashtabSettings}
changeCashtabSettings={changeCashtabSettings} changeCashtabSettings={changeCashtabSettings}
></WalletLabel> ></WalletLabel>
Show All 14 Lines return (
<BalanceHeaderFiat <BalanceHeaderFiat
balance={balances.totalBalance} balance={balances.totalBalance}
settings={cashtabSettings} settings={cashtabSettings}
fiatPrice={fiatPrice} fiatPrice={fiatPrice}
/> />
</> </>
)} )}
</WalletInfoCtn> </WalletInfoCtn>
<h2>Receive {isCashAddress ? 'XEC' : 'eToken'}</h2>
{wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && ( {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
<> <>
{wallet.Path1899 ? ( {wallet.Path1899 ? (
<> <>
<QRCode <QRCode
id="borderedQRCode" id="borderedQRCode"
address={ address={wallet.Path1899.cashAddress}
isCashAddress
? wallet.Path1899.cashAddress
: wallet.Path1899.slpAddress
}
isCashAddress={isCashAddress}
/> />
</> </>
) : ( ) : (
<> <>
<QRCode <QRCode
id="borderedQRCode" id="borderedQRCode"
address={ address={wallet.Path245.cashAddress}
isCashAddress
? wallet.Path245.cashAddress
: wallet.Path245.slpAddress
}
isCashAddress={isCashAddress}
/> />
</> </>
)} )}
</> </>
)} )}
<SwitchBtnCtn>
<SwitchBtn
onClick={() => handleChangeAddress()}
className={isCashAddress ? null : 'nonactiveBtn'}
>
{currency.ticker}
</SwitchBtn>
<SwitchBtn
onClick={() => handleChangeAddress()}
className={isCashAddress ? 'nonactiveBtn' : 'slpActive'}
>
{currency.tokenTicker}
</SwitchBtn>
</SwitchBtnCtn>
</ReceiveCtn> </ReceiveCtn>
); );
}; };
const Receive = () => { const Receive = () => {
const ContextValue = React.useContext(WalletContext); const ContextValue = React.useContext(WalletContext);
const { const {
wallet, wallet,
▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines