lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: tooltip doesn't stay open

Browse source
This commit is contained in:
Nikola Ubavic 2022-10-24 18:10:24 +02:00 • committed by Rafael
parent 09df11e7a9
commit 52a3d4cf81
22 changed files with 269 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

31
new-lamassu-admin/src/components/Tooltip.js
View file

@ -13,6 +13,16 @@ const useStyles = makeStyles({
cursor: 'pointer',
marginTop: 4
},
relativelyPositioned: {
position: 'relative'
},
safeSpace: {
position: 'absolute',
backgroundColor: '#0000',
height: 40,
left: '-50%',
width: '200%'
},
popoverContent: ({ width }) => ({
width,
padding: [[10, 15]]
@ -27,6 +37,10 @@ const usePopperHandler = width => {
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
}
const openHelpPopper = event => {
setHelpPopperAnchorEl(event.currentTarget)
}
const handleCloseHelpPopper = () => {
setHelpPopperAnchorEl(null)
}
@ -38,25 +52,32 @@ const usePopperHandler = width => {
helpPopperAnchorEl,
helpPopperOpen,
handleOpenHelpPopper,
openHelpPopper,
handleCloseHelpPopper
}
}
const Tooltip = memo(({ children, width, Icon = HelpIcon }) => {
const HelpTooltip = memo(({ children, width }) => {
const handler = usePopperHandler(width)
return (
<ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
<div>
<div
className={handler.classes.relativelyPositioned}
onMouseLeave={handler.handleCloseHelpPopper}>
{handler.helpPopperOpen && (
<div className={handler.classes.safeSpace}></div>
)}
<button
type="button"
className={handler.classes.transparentButton}
onClick={handler.handleOpenHelpPopper}>
<Icon />
onMouseEnter={handler.openHelpPopper}>
<HelpIcon />
</button>
<Popper
open={handler.helpPopperOpen}
anchorEl={handler.helpPopperAnchorEl}
arrowEnabled={true}
placement="bottom">
<div className={handler.classes.popoverContent}>{children}</div>
</Popper>
@ -96,4 +117,4 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
)
})
export { Tooltip, HoverableTooltip }
export { HoverableTooltip, HelpTooltip }

6
new-lamassu-admin/src/pages/Accounting/Accounting.js
View file

@ -6,7 +6,7 @@ import * as R from 'ramda'
import React, { useContext } from 'react'
import AppContext from 'src/AppContext'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import TitleSection from 'src/components/layout/TitleSection'
import DataTable from 'src/components/tables/DataTable'
import { H4, Info2, P } from 'src/components/typography'
@ -128,9 +128,9 @@ const Accounting = () => {
<span className={classes.operation}>
{it.description}
{!!it.extraInfo && (
<HoverableTooltip width={175}>
<HelpTooltip width={175}>
<P>{it.extraInfo}</P>
</HoverableTooltip>
</HelpTooltip>
)}
</span>
)

25
new-lamassu-admin/src/pages/Blacklist/Blacklist.js
View file

@ -7,8 +7,13 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HoverableTooltip } from 'src/components/Tooltip'
import { Link, Button, IconButton } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip'
import {
Link,
Button,
IconButton,
SupportLinkButton
} from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import Sidebar from 'src/components/layout/Sidebar'
import TitleSection from 'src/components/layout/TitleSection'
@ -251,13 +256,13 @@ const Blacklist = () => {
value={enablePaperWalletOnly}
/>
<Label2>{enablePaperWalletOnly ? 'On' : 'Off'}</Label2>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
The "Enable paper wallet (only)" option means that only paper
wallets will be printed for users, and they won't be permitted
to scan an address from their own wallet.
</P>
</HoverableTooltip>
</HelpTooltip>
</Box>
<Box
display="flex"
@ -273,13 +278,21 @@ const Blacklist = () => {
value={rejectAddressReuse}
/>
<Label2>{rejectAddressReuse ? 'On' : 'Off'}</Label2>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
The "Reject reused addresses" option means that all addresses
that are used once will be automatically rejected if there's
an attempt to use them again on a new transaction.
</P>
</HoverableTooltip>
<P>
For details please read the relevant knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360033622211-Reject-Address-Reuse"
label="Reject Address Reuse"
bottomSpace="1"
/>
</HelpTooltip>
</Box>
</Box>
<BlacklistTable

29
new-lamassu-admin/src/pages/Cashout/Cashout.js
View file

@ -4,7 +4,8 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { SupportLinkButton } from 'src/components/buttons'
import { NamespacedTable as EditableTable } from 'src/components/editableTable'
import { Switch } from 'src/components/inputs'
import TitleSection from 'src/components/layout/TitleSection'
@ -92,7 +93,21 @@ const CashOut = ({ name: SCREEN_KEY }) => {
return (
!loading && (
<>
<TitleSection title="Cash-out">
<TitleSection
title="Cash-out"
appendix={
<HelpTooltip width={320}>
<P>
For details on configuring cash-out, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115003720192-Enabling-cash-out-on-the-admin"
label="Enabling cash-out on the admin"
bottomSpace="1"
/>
</HelpTooltip>
}>
<div className={classes.fudgeFactor}>
<P>Transaction fudge factor</P>
<Switch
@ -105,7 +120,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
<Label2 className={classes.switchLabel}>
{fudgeFactorActive ? 'On' : 'Off'}
</Label2>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
Automatically accept customer deposits as complete if their
received amount is 100 crypto atoms or less.
@ -114,7 +129,13 @@ const CashOut = ({ name: SCREEN_KEY }) => {
(Crypto atoms are the smallest unit in each cryptocurrency.
E.g., satoshis in Bitcoin, or wei in Ethereum.)
</P>
</HoverableTooltip>
<P>For details please read the relevant knowledgebase article:</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360050838011-Automatically-accepting-undersent-deposits-with-Fudge-Factor-"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
</TitleSection>
<EditableTable

22
new-lamassu-admin/src/pages/Commissions/Commissions.js
View file

@ -4,12 +4,16 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
import { SupportLinkButton } from 'src/components/buttons'
import TitleSection from 'src/components/layout/TitleSection'
import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
import { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { P } from '../../components/typography'
import CommissionsDetails from './components/CommissionsDetails'
import CommissionsList from './components/CommissionsList'
@ -118,6 +122,24 @@ const Commissions = ({ name: SCREEN_KEY }) => {
}
]}
iconClassName={classes.listViewButton}
appendix={
<HelpTooltip width={320}>
<P>
For details about commissions, please read the relevant
knowledgebase articles:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001211752-Fixed-fees-Minimum-transaction"
label="Fixed fees & Minimum transaction"
bottomSpace="1"
/>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360061558352-Commissions-and-Profit-Calculations"
label="SCommissions and Profit Calculations"
bottomSpace="1"
/>
</HelpTooltip>
}
/>
{!showMachines && !loading && (

3
new-lamassu-admin/src/pages/Customers/components/EditableCard.js
View file

@ -8,6 +8,7 @@ import { useState, React, useRef } from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { MainStatus } from 'src/components/Status'
// import { HelpTooltip } from 'src/components/Tooltip'
import { ActionButton } from 'src/components/buttons'
import { Label1, P, H3 } from 'src/components/typography'
import {
@ -182,7 +183,7 @@ const EditableCard = ({
<H3 className={classes.cardTitle}>{title}</H3>
{
// TODO: Enable for next release
/* <HoverableTooltip width={304}></HoverableTooltip> */
/* <HelpTooltip width={304}></HelpTooltip> */
}
</div>
{state && authorize && (

20
new-lamassu-admin/src/pages/Locales/Locales.js
View file

@ -5,7 +5,8 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { Link } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip'
import { Link, SupportLinkButton } from 'src/components/buttons'
import { Table as EditableTable } from 'src/components/editableTable'
import Section from 'src/components/layout/Section'
import TitleSection from 'src/components/layout/TitleSection'
@ -176,7 +177,22 @@ const Locales = ({ name: SCREEN_KEY }) => {
close={() => setDataToSave(null)}
save={() => dataToSave && save(dataToSave)}
/>
<TitleSection title="Locales" />
<TitleSection
title="Locales"
appendix={
<HelpTooltip width={320}>
<P>
For details on configuring languages, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360016257471-Setting-multiple-machine-languages"
label="Setting multiple machine languages"
bottomSpace="1"
/>
</HelpTooltip>
}
/>
<Section>
<EditableTable
title="Default settings"

6
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.js
View file

@ -6,7 +6,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { Button } from 'src/components/buttons'
import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
import { H3, TL1, P } from 'src/components/typography'
@ -99,7 +99,7 @@ const IndividualDiscountModal = ({
<div>
<div className={classes.discountRateWrapper}>
<H3>Define discount rate</H3>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
This is a percentage discount off of your existing
commission rates for a customer entering this code at
@ -110,7 +110,7 @@ const IndividualDiscountModal = ({
code is set for 50%, then you'll instead be charging 4%
on transactions using the code.
</P>
</HoverableTooltip>
</HelpTooltip>
</div>
<div className={classes.discountInput}>
<Field

6
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.js
View file

@ -6,7 +6,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { Button } from 'src/components/buttons'
import { TextInput, NumberInput } from 'src/components/inputs/formik'
import { H3, TL1, P } from 'src/components/typography'
@ -69,7 +69,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
/>
<div className={classes.modalLabel2Wrapper}>
<H3 className={classes.modalLabel2}>Define discount rate</H3>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
This is a percentage discount off of your existing
commission rates for a customer entering this code at the
@ -80,7 +80,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
set for 50%, then you'll instead be charging 4% on
transactions using the code.
</P>
</HoverableTooltip>
</HelpTooltip>
</div>
<div className={classes.discountInput}>
<Field

18
new-lamassu-admin/src/pages/Maintenance/CashUnits.js
View file

@ -6,7 +6,8 @@ import React, { useState } from 'react'
import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
import Modal from 'src/components/Modal'
import { IconButton, Button } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip.js'
import { IconButton, Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import TitleSection from 'src/components/layout/TitleSection'
import { EmptyTable } from 'src/components/table'
@ -229,7 +230,20 @@ const CashCassettes = () => {
}
]}
iconClassName={classes.listViewButton}
className={classes.tableWidth}>
className={classes.tableWidth}
appendix={
<HelpTooltip width={220}>
<P>
For details on configuring cash boxes and cassettes, please read
the relevant knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/4420839641229-Cash-Boxes-Cassettess"
label="Cash Boxes & Cassettes"
bottomSpace="1"
/>
</HelpTooltip>
}>
{!showHistory && (
<Box alignItems="center" justifyContent="flex-end">
<Label1 className={classes.cashboxReset}>Cash box resets</Label1>

6
new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js
View file

@ -6,7 +6,7 @@ import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import Stepper from 'src/components/Stepper'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { Button } from 'src/components/buttons'
import { Cashbox } from 'src/components/inputs/cashbox/Cashbox'
import { NumberInput, RadioGroup } from 'src/components/inputs/formik'
@ -245,12 +245,12 @@ const WizardStep = ({
classes.centerAlignment
)}>
<P>Since previous update</P>
<HoverableTooltip width={215}>
<HelpTooltip width={215}>
<P>
Number of bills inside the cash box, since the last
cash box changes.
</P>
</HoverableTooltip>
</HelpTooltip>
</div>
<div
className={classnames(

21
new-lamassu-admin/src/pages/Notifications/Notifications.js
View file

@ -4,6 +4,8 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip'
import { SupportLinkButton } from 'src/components/buttons'
import TitleSection from 'src/components/layout/TitleSection'
import { P } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -159,7 +161,24 @@ const Notifications = ({
!loading && (
<>
<NotificationsCtx.Provider value={contextValue}>
{displayTitle && <TitleSection title="Notifications" />}
{displayTitle && (
<TitleSection
title="Notifications"
appendix={
<HelpTooltip width={250}>
<P>
For details on configuring notifications, please read the
relevant knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001210592-Enabling-notifications"
label="Enabling notifications"
bottomSpace="1"
/>
</HelpTooltip>
}
/>
)}
{displayThirdPartyProvider && (
<Section
title="Third party providers"

13
new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js
View file

@ -3,12 +3,14 @@ import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag'
import React, { memo } from 'react'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { H4, P, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { SupportLinkButton } from '../../components/buttons'
import { global } from './OperatorInfo.styles'
const useStyles = makeStyles(global)
@ -66,7 +68,7 @@ const CoinATMRadar = memo(({ wizard }) => {
<div>
<div className={classes.header}>
<H4>Coin ATM Radar share settings</H4>
<HoverableTooltip width={304}>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article{' '}
@ -78,7 +80,12 @@ const CoinATMRadar = memo(({ wizard }) => {
</a>
.
</P>
</HoverableTooltip>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
<Row
title={'Share information?'}

14
new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
View file

@ -9,7 +9,8 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link, IconButton } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip'
import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
import Switch from 'src/components/inputs/base/Switch'
import { TextInput } from 'src/components/inputs/formik'
import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
@ -189,6 +190,17 @@ const ContactInfo = ({ wizard }) => {
<>
<div className={classes.header}>
<H4>Contact information</H4>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360033051732-Enabling-Operator-Info"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
<div className={classes.switchRow}>
<P>Info card enabled?</P>

14
new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js
View file

@ -4,11 +4,14 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { memo } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { H4, P, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { SupportLinkButton } from '../../components/buttons'
import { global } from './OperatorInfo.styles'
const useStyles = makeStyles(global)
@ -47,6 +50,17 @@ const ReceiptPrinting = memo(({ wizard }) => {
<>
<div className={classes.header}>
<H4>Receipt options</H4>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360058513951-Receipt-options-printers"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
<div className={classes.switchRow}>
<P>Enable receipt printing</P>

19
new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js
View file

@ -4,8 +4,8 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { HoverableTooltip } from 'src/components/Tooltip'
import { IconButton } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip'
import { IconButton, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import DataTable from 'src/components/tables/DataTable'
import { H4, P, Label3 } from 'src/components/typography'
@ -162,9 +162,9 @@ const SMSNotices = () => {
!R.isEmpty(TOOLTIPS[it.event]) ? (
<div className={classes.messageWithTooltip}>
{R.prop('messageName', it)}
<HoverableTooltip width={250}>
<HelpTooltip width={250}>
<P>{TOOLTIPS[it.event]}</P>
</HoverableTooltip>
</HelpTooltip>
</div>
) : (
R.prop('messageName', it)
@ -237,6 +237,17 @@ const SMSNotices = () => {
<>
<div className={classes.header}>
<H4>SMS notices</H4>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001205591-SMS-Phone-Verification"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
{showModal && (
<CustomSMSModal

14
new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
View file

@ -9,7 +9,8 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link, IconButton } from 'src/components/buttons'
import { HelpTooltip } from 'src/components/Tooltip'
import { Link, IconButton, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { TextInput } from 'src/components/inputs/formik'
import { H4, Info2, Info3, Label2, Label3, P } from 'src/components/typography'
@ -171,6 +172,17 @@ const TermsConditions = () => {
<>
<div className={classes.header}>
<H4>Terms &amp; Conditions</H4>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360015982211-Terms-and-Conditions"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
<div className={classes.switchRow}>
<P>Show on screen</P>

6
new-lamassu-admin/src/pages/Transactions/DetailsCard.js
View file

@ -11,7 +11,7 @@ import * as R from 'ramda'
import React, { memo, useState } from 'react'
import { ConfirmDialog } from 'src/components/ConfirmDialog'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip, HoverableTooltip } from 'src/components/Tooltip'
import { IDButton, ActionButton } from 'src/components/buttons'
import { P, Label1 } from 'src/components/typography'
import { ReactComponent as CardIdInverseIcon } from 'src/styling/icons/ID/card/white.svg'
@ -358,9 +358,9 @@ const DetailsRow = ({ it: tx, timezone }) => {
<div className={classes.addressHeader}>
<Label>Address</Label>
{!R.isNil(tx.walletScore) && (
<HoverableTooltip parentElements={walletScoreEl}>
<HelpTooltip parentElements={walletScoreEl}>
{`Chain analysis score: ${tx.walletScore}/10`}
</HoverableTooltip>
</HelpTooltip>
)}
</div>
<div>

19
new-lamassu-admin/src/pages/Transactions/Transactions.js
View file

@ -11,6 +11,8 @@ import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
import SearchBox from 'src/components/SearchBox'
import SearchFilter from 'src/components/SearchFilter'
import Title from 'src/components/Title'
import { HelpTooltip } from 'src/components/Tooltip'
import { SupportLinkButton } from 'src/components/buttons'
import DataTable from 'src/components/tables/DataTable'
import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
@ -233,7 +235,22 @@ const Transactions = () => {
},
{
header: 'Status',
view: it => getStatus(it),
view: it => {
if (getStatus(it) === 'Pending')
return (
<div className={classes.pendingBox}>
{'Pending'}
<HelpTooltip width={285}>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001210452-Cancelling-cash-out-transactions"
label="Cancelling cash-out transactions"
bottomSpace="0"
/>
</HelpTooltip>
</div>
)
else return getStatus(it)
},
textAlign: 'left',
size: 'sm',
width: 80

6
new-lamassu-admin/src/pages/Triggers/Triggers.js
View file

@ -6,7 +6,7 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { Link, SupportLinkButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import TitleSection from 'src/components/layout/TitleSection'
@ -187,13 +187,13 @@ const Triggers = () => {
<Label2 className={classes.switchLabel}>
{rejectAddressReuse ? 'On' : 'Off'}
</Label2>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
This option requires a user to scan a different cryptocurrency
address if they attempt to scan one that had been previously
used for a transaction in your network
</P>
</HoverableTooltip>
</HelpTooltip>
</Box>
</Box>
)}

17
new-lamassu-admin/src/pages/Wallet/Wallet.js
View file

@ -5,6 +5,8 @@ import * as R from 'ramda'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip'
import { SupportLinkButton } from 'src/components/buttons'
import { NamespacedTable as EditableTable } from 'src/components/editableTable'
import TitleSection from 'src/components/layout/TitleSection'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -13,6 +15,8 @@ import { ReactComponent as ReverseSettingsIcon } from 'src/styling/icons/circle
import { ReactComponent as SettingsIcon } from 'src/styling/icons/circle buttons/settings/zodiac.svg'
import { fromNamespace, toNamespace } from 'src/utils/config'
import { P } from '../../components/typography'
import AdvancedWallet from './AdvancedWallet'
import styles from './Wallet.styles.js'
import Wizard from './Wizard'
@ -124,6 +128,19 @@ const Wallet = ({ name: SCREEN_KEY }) => {
toggle: setAdvancedSettings
}
]}
appendix={
<HelpTooltip width={340}>
<P>
For details on configuring wallets, please read the relevant
knowledgebase article:
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360000725832-Wallets-Exchange-Linkage-and-Volatility"
label="Wallets, Exchange Linkage, and Volatility"
bottomSpace="1"
/>
</HelpTooltip>
}
/>
</div>
{!advancedSettings && (

6
new-lamassu-admin/src/pages/Wizard/components/Twilio.js
View file

@ -5,7 +5,7 @@ import gql from 'graphql-tag'
import React, { useState } from 'react'
import InfoMessage from 'src/components/InfoMessage'
import { HoverableTooltip } from 'src/components/Tooltip'
import { HelpTooltip } from 'src/components/Tooltip'
import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H1, H4, P } from 'src/components/typography'
@ -102,7 +102,7 @@ function Twilio({ doContinue }) {
<H4 noMargin className={classnames(titleClasses)}>
Will you setup a two way machine or compliance?
</H4>
<HoverableTooltip width={304}>
<HelpTooltip width={304}>
<P>
Two-way machines allow your customers not only to buy (cash-in)
but also sell cryptocurrencies (cash-out).
@ -111,7 +111,7 @@ function Twilio({ doContinue }) {
You’ll need an SMS service for cash-out transactions and for any
compliance triggers
</P>
</HoverableTooltip>
</HelpTooltip>
</Box>
<RadioGroup