Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,35 @@ successText = "Thanks!"

<!-- tabs:end -->

## transaction-text

> **The ‘transaction-text’ parameter specifies the text displayed when a new transaction occurs but the amount or OP_RETURN code are incorrect.**

?> This parameter is optional. Default value is empty. Possible values are any string.

**Example:**
<!-- tabs:start -->

#### ** HTML **

```html
transaction-text="New transaction!"
```

#### ** JavaScript **

```javascript
transactionText: 'New transaction!'
```

#### ** React **

```react
transactionText = "New transaction!"
```

<!-- tabs:end -->

## on-success

> **The ‘on-success’ parameter specifies the callback function that runs upon successful payment.**
Expand Down Expand Up @@ -928,6 +957,8 @@ apiBaseUrl: 'https://paybutton.org'
apiBaseUrl = "https://paybutton.org"
```

<!-- tabs:end -->

## disable-altpayment

> **The ‘disableAltpayment’ parameter disables altpayment logic.**
Expand Down
1 change: 1 addition & 0 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- [theme](/?id=theme)
- [animation](/?id=animation)
- [success-text](/?id=success-text)
- [transaction-text](/?id=transaction-text)
- [on-success](/?id=on-success)
- [on-transaction](/?id=on-transaction)
- [on-open](/?id=on-open)
Expand Down
31 changes: 31 additions & 0 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,37 @@ successText = "Thanks!"

<!-- tabs:end -->

## transaction-text

> **“transaction-text” 参数指定当发生新交易但金额或 OP_RETURN 代码不正确时显示的文本。**

?> 此参数为选填,默认值为空。可用值为任何字符串。

**Example:**
<!-- tabs:start -->

#### ** HTML **

```html
transaction-text="New transaction!"
```

#### ** JavaScript **

```javascript
transactionText: 'New transaction!'
```

#### ** React **

```react
transactionText = "New transaction!"
```

<!-- tabs:end -->



## on-success

> **参数'on-success'用来定义指定地址收款后运行的回调函数。**
Expand Down
1 change: 1 addition & 0 deletions docs/zh-cn/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- [theme](/zh-cn/?id=theme)
- [animation](/zh-cn/?id=animation)
- [success-text](/zh-cn/?id=success-text)
- [transaction-text](/zh-cn/?id=transaction-text)
- [on-success](/zh-cn/?id=on-success)
- [on-transaction](/zh-cn/?id=on-transaction)
- [on-open](/zh-cn/?id=on-open)
Expand Down
30 changes: 30 additions & 0 deletions docs/zh-tw/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,36 @@ successText = "Thanks!"

<!-- tabs:end -->

## transaction-text

> **"transaction-text" 參數指定當發生新交易但金額或 OP_RETURN 代碼不正確時顯示的文字。**

?> 此參數為選填,預設值為空。可用值為任何字串。

**Example:**
<!-- tabs:start -->

#### ** HTML **

```html
transaction-text="New transaction!"
```

#### ** JavaScript **

```javascript
transactionText: 'New transaction!'
```

#### ** React **

```react
transactionText = "New transaction!"
```

<!-- tabs:end -->


## on-success

> **參數"on-success"用來定義指定地址收款後運行的回呼函式。**
Expand Down
1 change: 1 addition & 0 deletions docs/zh-tw/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- [theme](/zh-tw/?id=theme)
- [animation](/zh-tw/?id=animation)
- [success-text](/zh-tw/?id=success-text)
- [ transaction-text](/zh-tw/?id=transaction-text)
- [on-success](/zh-tw/?id=on-success)
- [on-transaction](/zh-tw/?id=on-transaction)
- [on-open](/zh-tw/?id=on-open)
Expand Down
14 changes: 11 additions & 3 deletions paybutton/dev/demo/paybutton-generator.html
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,15 @@
<input id="successText" v-model="paybuttonProps.successText" type="text">
</div>
</div>
<div class="form-input">
<label for="hoverText">Hover Text:</label>
<input id="hoverText" v-model="paybuttonProps.hoverText" type="text">
<div style="display: flex; justify-content: space-between; gap:10px">
<div class="form-input">
<label for="hoverText">Hover Text:</label>
<input id="hoverText" v-model="paybuttonProps.hoverText" type="text">
</div>
<div class="form-input">
<label for="transactionText">Transaction Text:</label>
<input id="transactionText" v-model="paybuttonProps.transactionText" type="text">
</div>
</div>
<div class="form-input">
<label for="theme">Theme:</label>
Expand Down Expand Up @@ -206,6 +212,7 @@
:on-success="mySuccessFuction"
:on-transaction="myTransactionFuction"
:disable-altpayment="paybuttonProps.disableAltpayment"
:transaction-text="paybuttonProps.transactionText"
:op-return="paybuttonProps.opReturn">
</div>
</div>
Expand Down Expand Up @@ -238,6 +245,7 @@
disableAltpayment: false,
contributionOffset: undefined,
opReturn:undefined,
transactiontext: '',
onSuccess: mySuccessFuction,
onTransaction: myTransactionFuction
});
Expand Down
1 change: 1 addition & 0 deletions paybutton/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ const allowedProps = [
'contributionOffset',
'autoClose',
'disableSound',
'transactionText',
];

const requiredProps = [
Expand Down
9 changes: 6 additions & 3 deletions react/lib/components/PayButton/PayButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,11 @@ export interface PayButtonProps extends ButtonProps {
onClose?: (success?: boolean, paymentId?:string) => void;
wsBaseUrl?: string;
apiBaseUrl?: string;
disableAltpayment?: boolean
contributionOffset?: number
autoClose?: boolean
disableSound?: boolean
autoClose?: boolean;
disableAltpayment?:boolean;
contributionOffset?:number;
transactionText?: string;
}

export const PayButton = (props: PayButtonProps): React.ReactElement => {
Expand Down Expand Up @@ -85,6 +86,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
contributionOffset,
autoClose,
disableSound,
transactionText,
} = Object.assign({}, PayButton.defaultProps, props);

const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
Expand Down Expand Up @@ -242,6 +244,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
contributionOffset={contributionOffset}
autoClose={autoClose}
disableSound={disableSound}
transactionText={transactionText}
/>
{errorMsg && (
<p
Expand Down
7 changes: 5 additions & 2 deletions react/lib/components/PaymentDialog/PaymentDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@ export interface PaymentDialogProps extends ButtonProps {
wsBaseUrl?: string;
apiBaseUrl?: string;
disableAltpayment?: boolean;
contributionOffset?: number;
autoClose?: boolean;
disableSound?: boolean;
autoClose?: boolean;
contributionOffset?:number;
transactionText?: string
}

export const PaymentDialog = (
Expand Down Expand Up @@ -77,6 +78,7 @@ export const PaymentDialog = (
contributionOffset,
autoClose,
disableSound,
transactionText,
} = Object.assign({}, PaymentDialog.defaultProps, props);

const handleWidgetClose = (): void => {
Expand Down Expand Up @@ -157,6 +159,7 @@ export const PaymentDialog = (
disableAltpayment={disableAltpayment}
contributionOffset={contributionOffset}
disableSound={disableSound}
transactionText={transactionText}
foot={success && (
<ButtonComponent
onClick={handleWidgetClose}
Expand Down
4 changes: 3 additions & 1 deletion react/lib/components/Widget/Widget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ export interface WidgetProps {
shiftCompleted: boolean
setShiftCompleted: Function;
disableAltpayment?: boolean;
contributionOffset?: number
contributionOffset?: number;
newTxText?: string;
transactionText?: string;
}

interface StyleProps {
Expand Down
26 changes: 23 additions & 3 deletions react/lib/components/Widget/WidgetContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,10 @@ export interface WidgetContainerProps
disableAltpayment?: boolean
contributionOffset?: number
disableSound?: boolean
transactionText?: string
}

const snackbarOptions: OptionsObject = {
const snackbarOptionsSuccess: OptionsObject = {
variant: 'success',
autoHideDuration: 8000,
anchorOrigin: {
Expand All @@ -59,6 +60,14 @@ const snackbarOptions: OptionsObject = {
},
};

const snackbarOptionsInfo: OptionsObject = {
autoHideDuration: 8000,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center',
},
};

export interface Output {
index: number;
value: number;
Expand Down Expand Up @@ -109,6 +118,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
disableAltpayment,
contributionOffset,
disableSound,
transactionText,
...widgetProps
} = props;

Expand Down Expand Up @@ -158,6 +168,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
} else {
const expectedAmount = amount ? resolveNumber(amount) : undefined;
const receivedAmount = resolveNumber(transaction.amount);
const currencyTicker = getCurrencyTypeFromAddress(to);

if (await shouldTriggerOnSuccess(
transaction,
Expand All @@ -177,13 +188,12 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
txSound.play().catch(() => {});
}

const currencyTicker = getCurrencyTypeFromAddress(to);
if (!hideToasts)
enqueueSnackbar(
`${
successText ? successText + ' | ' : ''
}Received ${receivedAmount} ${currencyTicker}`,
snackbarOptions,
snackbarOptionsSuccess,
);
setSuccess(true);
onSuccess?.(transaction);
Expand All @@ -192,6 +202,15 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
}, 3000);
} else {
onTransaction?.(transaction);
if (transactionText){
enqueueSnackbar(
`${
transactionText ? transactionText : 'New transaction'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this should be set by default.

Let's keep the old behaviour (of no toast) if it's not set.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is already set to only trigger the toast if there is a transaction text set

} | Received ${receivedAmount} ${currencyTicker}`,
snackbarOptionsInfo,
);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't really expecting this... I think it's better to stick with the standard toast and perhaps we can make a new task to better differentiate them so people don't mistakenly think they paid the full correct amount when they did not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On second thought - @chedieck thoughts on this? Maybe John also has some ideas how best to visually communicate the custom message while also making it clear that less than the full amount was paid.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe call it "Unexpected payment" or something like that by default? Probably some other more precise adjective would be better.

As for the PR, this 10000 should be a constant instead of a hardcoded number.


}
}
setNewTxs([]);
Expand Down Expand Up @@ -286,6 +305,7 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
setShiftCompleted={setShiftCompleted}
disableAltpayment={disableAltpayment}
contributionOffset={contributionOffset}
transactionText={transactionText}
/>
</React.Fragment>
);
Expand Down