@coin-voyage/paykit 2.4.3 → 2.4.4-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Pages/Confirmation/index.js +16 -6
  2. package/dist/hooks/usePayToAddressChainOptions.js +6 -13
  3. package/dist/hooks/usePayToAddressTokens.js +4 -15
  4. package/dist/hooks/useTokenList.d.ts +182 -0
  5. package/dist/hooks/useTokenList.js +24 -0
  6. package/package.json +3 -3
package/dist/components/Pages/Confirmation/index.js CHANGED
@@ -29,39 +29,49 @@ function getConfirmationState(payOrder, isDeposit, locales, optimisticConfirmati
29
29
  };
30
30
  }
31
31
  const payment = payOrder.payment;
32
+ const status = payOrder.status;
32
33
  const confirmOptimistically = optimisticConfirmation && !isDeposit;
33
34
  const sourceTxURL = payment?.src.chain_id && payment?.source_tx_hash
34
35
  ? getChainExplorerTxUrl(payment.src.chain_id, payment.source_tx_hash)
35
36
  : undefined;
36
- if (payOrder.status === PayOrderStatus.FAILED) {
37
+ if (status === PayOrderStatus.FAILED) {
37
38
  return {
38
39
  title: locales.confirmationScreen_failed ?? "Transaction failed",
39
40
  uiState: "error",
40
41
  };
41
42
  }
42
- if (payOrder.status === PayOrderStatus.PARTIAL_PAYMENT) {
43
+ if (status === PayOrderStatus.PARTIAL_PAYMENT) {
43
44
  return {
44
45
  title: "Partial payment received",
45
46
  uiState: "warning",
46
47
  txURL: sourceTxURL,
47
48
  };
48
49
  }
49
- if (payOrder.status === PayOrderStatus.AWAITING_CONFIRMATION ||
50
- payOrder.status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
50
+ if (status === PayOrderStatus.REFUNDED) {
51
+ const refundTxURL = payment?.dst.chain_id && payment?.refund_tx_hash
52
+ ? getChainExplorerTxUrl(payment.dst.chain_id, payment.refund_tx_hash)
53
+ : undefined;
54
+ return {
55
+ title: "Payment Refunded",
56
+ uiState: "warning",
57
+ txURL: refundTxURL ?? sourceTxURL,
58
+ };
59
+ }
60
+ if (status === PayOrderStatus.AWAITING_CONFIRMATION || status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
51
61
  return {
52
62
  title: confirmOptimistically ? locales.confirmationScreen_completed : _jsxs(_Fragment, { children: [locales.awaitingConfirmation, "..."] }),
53
63
  uiState: confirmOptimistically ? "success" : "loading",
54
64
  txURL: sourceTxURL,
55
65
  };
56
66
  }
57
- if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
67
+ if (status === PayOrderStatus.EXECUTING_ORDER) {
58
68
  return {
59
69
  title: confirmOptimistically ? (locales.confirmationScreen_completed) : (_jsxs(_Fragment, { children: [locales.confirmationScreen_executing, "..."] })),
60
70
  uiState: confirmOptimistically ? "success" : "loading",
61
71
  txURL: sourceTxURL,
62
72
  };
63
73
  }
64
- if (payOrder.status === PayOrderStatus.COMPLETED) {
74
+ if (status === PayOrderStatus.COMPLETED) {
65
75
  const receivingTxHash = payment?.destination_tx_hash;
66
76
  const destChainId = payment?.dst.chain_id;
67
77
  const txURL = isDeposit && destChainId && receivingTxHash ? getChainExplorerTxUrl(destChainId, receivingTxHash) : sourceTxURL;
package/dist/hooks/usePayToAddressChainOptions.js CHANGED
@@ -1,23 +1,16 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { fetchTokenList, getChains } from "@coin-voyage/shared/currency";
3
- import { useQuery } from "@tanstack/react-query";
4
2
  import { useMemo } from "react";
5
3
  import usePayContext from "../components/contexts/pay";
6
4
  import { SquircleIcon } from "../components/ui/Icon";
5
+ import { BTC_MIN_USD_AMOUNT } from "../lib/constants";
7
6
  import { ChainId } from "../server";
8
7
  import { ROUTE } from "../types/routes";
9
- import { BTC_MIN_USD_AMOUNT } from "../lib/constants";
10
- const TOKEN_LIST_QUERY_KEY = ["token-list"];
8
+ import { useTokenList } from "./useTokenList";
11
9
  export function usePayToAddressChainOptions() {
12
10
  const { setRoute, paymentState } = usePayContext();
13
- const { setPayToAddressChainId: setPayToAddressChain, payOrder } = paymentState;
11
+ const { setPayToAddressChainId, payOrder } = paymentState;
14
12
  const fiatAmount = payOrder?.fulfillment.amount.value_usd;
15
- const { data: tokenList, isLoading } = useQuery({
16
- queryKey: TOKEN_LIST_QUERY_KEY,
17
- queryFn: fetchTokenList,
18
- staleTime: 1000 * 60 * 15,
19
- });
20
- const chains = useMemo(() => getChains(tokenList?.chains ?? []), [tokenList]);
13
+ const { chains, isLoading } = useTokenList();
21
14
  const options = useMemo(() => chains.map((chain) => {
22
15
  const disabled = chain.chainId === ChainId.BTC && typeof fiatAmount === "number" && fiatAmount < BTC_MIN_USD_AMOUNT;
23
16
  return {
@@ -25,12 +18,12 @@ export function usePayToAddressChainOptions() {
25
18
  title: chain.name,
26
19
  icons: [_jsx(SquircleIcon, { icon: chain.logoURI, alt: chain.name }, chain.chainId)],
27
20
  onClick: () => {
28
- setPayToAddressChain(chain.chainId);
21
+ setPayToAddressChainId(chain.chainId);
29
22
  setRoute(ROUTE.ADDRESS_TOKEN_SELECT);
30
23
  },
31
24
  disabled,
32
25
  subtitle: disabled ? `Minimum $${BTC_MIN_USD_AMOUNT}` : undefined,
33
26
  };
34
- }), [chains, setPayToAddressChain, setRoute, fiatAmount]);
27
+ }), [chains, setPayToAddressChainId, setRoute, fiatAmount]);
35
28
  return { options, isLoading };
36
29
  }
package/dist/hooks/usePayToAddressTokens.js CHANGED
@@ -1,25 +1,14 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { fetchTokenList, tokensByChainId, tokenToCurrency } from "@coin-voyage/shared/currency";
3
- import { useQuery } from "@tanstack/react-query";
2
+ import { tokenToCurrency } from "@coin-voyage/shared/currency";
4
3
  import { useMemo } from "react";
5
4
  import usePayContext from "../components/contexts/pay";
6
5
  import { SquircleIcon } from "../components/ui/Icon";
7
6
  import { ROUTE } from "../types/routes";
8
- const TOKEN_LIST_QUERY_KEY = ["token-list"];
7
+ import { useTokenList } from "./useTokenList";
9
8
  export function usePayToAddressTokens() {
10
9
  const { paymentState, setRoute } = usePayContext();
11
- const { payToAddressChainId: payToAddressChain, setPayToAddressCurrency } = paymentState;
12
- const chainId = payToAddressChain;
13
- const { data: tokenList, isLoading } = useQuery({
14
- queryKey: TOKEN_LIST_QUERY_KEY,
15
- queryFn: fetchTokenList,
16
- staleTime: 1000 * 60 * 5,
17
- });
18
- const tokens = useMemo(() => {
19
- if (!tokenList || !chainId)
20
- return [];
21
- return tokensByChainId(tokenList.chains, chainId);
22
- }, [tokenList, chainId]);
10
+ const { payToAddressChainId, setPayToAddressCurrency } = paymentState;
11
+ const { tokens, isLoading } = useTokenList(payToAddressChainId);
23
12
  const options = useMemo(() => tokens.map((token) => ({
24
13
  id: token.address ?? token.ticker,
25
14
  title: token.name,
package/dist/hooks/useTokenList.d.ts ADDED
@@ -0,0 +1,182 @@
1
+ import type { ChainId } from "@coin-voyage/shared/types";
2
+ export declare function useTokenList(chainId?: ChainId): {
3
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
4
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
5
+ tokens: import("@coin-voyage/shared/currency").Token[];
6
+ data: import("@coin-voyage/shared/currency").TokenListResponse;
7
+ error: Error;
8
+ isError: true;
9
+ isPending: false;
10
+ isLoading: false;
11
+ isLoadingError: false;
12
+ isRefetchError: true;
13
+ isSuccess: false;
14
+ isPlaceholderData: false;
15
+ status: "error";
16
+ dataUpdatedAt: number;
17
+ errorUpdatedAt: number;
18
+ failureCount: number;
19
+ failureReason: Error | null;
20
+ errorUpdateCount: number;
21
+ isFetched: boolean;
22
+ isFetchedAfterMount: boolean;
23
+ isFetching: boolean;
24
+ isInitialLoading: boolean;
25
+ isPaused: boolean;
26
+ isRefetching: boolean;
27
+ isStale: boolean;
28
+ isEnabled: boolean;
29
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
30
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
31
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
32
+ } | {
33
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
34
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
35
+ tokens: import("@coin-voyage/shared/currency").Token[];
36
+ data: import("@coin-voyage/shared/currency").TokenListResponse;
37
+ error: null;
38
+ isError: false;
39
+ isPending: false;
40
+ isLoading: false;
41
+ isLoadingError: false;
42
+ isRefetchError: false;
43
+ isSuccess: true;
44
+ isPlaceholderData: false;
45
+ status: "success";
46
+ dataUpdatedAt: number;
47
+ errorUpdatedAt: number;
48
+ failureCount: number;
49
+ failureReason: Error | null;
50
+ errorUpdateCount: number;
51
+ isFetched: boolean;
52
+ isFetchedAfterMount: boolean;
53
+ isFetching: boolean;
54
+ isInitialLoading: boolean;
55
+ isPaused: boolean;
56
+ isRefetching: boolean;
57
+ isStale: boolean;
58
+ isEnabled: boolean;
59
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
60
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
61
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
62
+ } | {
63
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
64
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
65
+ tokens: import("@coin-voyage/shared/currency").Token[];
66
+ data: undefined;
67
+ error: Error;
68
+ isError: true;
69
+ isPending: false;
70
+ isLoading: false;
71
+ isLoadingError: true;
72
+ isRefetchError: false;
73
+ isSuccess: false;
74
+ isPlaceholderData: false;
75
+ status: "error";
76
+ dataUpdatedAt: number;
77
+ errorUpdatedAt: number;
78
+ failureCount: number;
79
+ failureReason: Error | null;
80
+ errorUpdateCount: number;
81
+ isFetched: boolean;
82
+ isFetchedAfterMount: boolean;
83
+ isFetching: boolean;
84
+ isInitialLoading: boolean;
85
+ isPaused: boolean;
86
+ isRefetching: boolean;
87
+ isStale: boolean;
88
+ isEnabled: boolean;
89
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
90
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
91
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
92
+ } | {
93
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
94
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
95
+ tokens: import("@coin-voyage/shared/currency").Token[];
96
+ data: undefined;
97
+ error: null;
98
+ isError: false;
99
+ isPending: true;
100
+ isLoading: true;
101
+ isLoadingError: false;
102
+ isRefetchError: false;
103
+ isSuccess: false;
104
+ isPlaceholderData: false;
105
+ status: "pending";
106
+ dataUpdatedAt: number;
107
+ errorUpdatedAt: number;
108
+ failureCount: number;
109
+ failureReason: Error | null;
110
+ errorUpdateCount: number;
111
+ isFetched: boolean;
112
+ isFetchedAfterMount: boolean;
113
+ isFetching: boolean;
114
+ isInitialLoading: boolean;
115
+ isPaused: boolean;
116
+ isRefetching: boolean;
117
+ isStale: boolean;
118
+ isEnabled: boolean;
119
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
120
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
121
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
122
+ } | {
123
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
124
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
125
+ tokens: import("@coin-voyage/shared/currency").Token[];
126
+ data: undefined;
127
+ error: null;
128
+ isError: false;
129
+ isPending: true;
130
+ isLoadingError: false;
131
+ isRefetchError: false;
132
+ isSuccess: false;
133
+ isPlaceholderData: false;
134
+ status: "pending";
135
+ dataUpdatedAt: number;
136
+ errorUpdatedAt: number;
137
+ failureCount: number;
138
+ failureReason: Error | null;
139
+ errorUpdateCount: number;
140
+ isFetched: boolean;
141
+ isFetchedAfterMount: boolean;
142
+ isFetching: boolean;
143
+ isLoading: boolean;
144
+ isInitialLoading: boolean;
145
+ isPaused: boolean;
146
+ isRefetching: boolean;
147
+ isStale: boolean;
148
+ isEnabled: boolean;
149
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
150
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
151
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
152
+ } | {
153
+ tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
154
+ chains: import("@coin-voyage/shared/currency").ChainMetadata[];
155
+ tokens: import("@coin-voyage/shared/currency").Token[];
156
+ data: import("@coin-voyage/shared/currency").TokenListResponse;
157
+ isError: false;
158
+ error: null;
159
+ isPending: false;
160
+ isLoading: false;
161
+ isLoadingError: false;
162
+ isRefetchError: false;
163
+ isSuccess: true;
164
+ isPlaceholderData: true;
165
+ status: "success";
166
+ dataUpdatedAt: number;
167
+ errorUpdatedAt: number;
168
+ failureCount: number;
169
+ failureReason: Error | null;
170
+ errorUpdateCount: number;
171
+ isFetched: boolean;
172
+ isFetchedAfterMount: boolean;
173
+ isFetching: boolean;
174
+ isInitialLoading: boolean;
175
+ isPaused: boolean;
176
+ isRefetching: boolean;
177
+ isStale: boolean;
178
+ isEnabled: boolean;
179
+ refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
180
+ fetchStatus: import("@tanstack/react-query").FetchStatus;
181
+ promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
182
+ };
package/dist/hooks/useTokenList.js ADDED
@@ -0,0 +1,24 @@
1
+ import { fetchTokenList, getChains, tokensByChainId } from "@coin-voyage/shared/currency";
2
+ import { useQuery } from "@tanstack/react-query";
3
+ import { useMemo } from "react";
4
+ const TOKEN_LIST_QUERY_KEY = ["token-list"];
5
+ const TOKEN_LIST_STALE_TIME = 1000 * 60 * 15;
6
+ export function useTokenList(chainId) {
7
+ const query = useQuery({
8
+ queryKey: TOKEN_LIST_QUERY_KEY,
9
+ queryFn: () => fetchTokenList(),
10
+ staleTime: TOKEN_LIST_STALE_TIME,
11
+ });
12
+ const chains = useMemo(() => getChains(query.data?.chains ?? []), [query.data]);
13
+ const tokens = useMemo(() => {
14
+ if (!query.data || !chainId)
15
+ return [];
16
+ return tokensByChainId(query.data.chains, chainId);
17
+ }, [query.data, chainId]);
18
+ return {
19
+ ...query,
20
+ tokenList: query.data,
21
+ chains,
22
+ tokens,
23
+ };
24
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coin-voyage/paykit",
3
3
  "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
4
- "version": "2.4.3",
4
+ "version": "2.4.4-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Lars <lars@coinvoyage.io>",
@@ -60,8 +60,8 @@
60
60
  "@stripe/crypto": "0.0.4",
61
61
  "styled-components": "^5.3.11",
62
62
  "uuid": "13.0.0",
63
- "@coin-voyage/crypto": "2.4.3",
64
- "@coin-voyage/shared": "2.4.3"
63
+ "@coin-voyage/shared": "2.4.4-beta.1",
64
+ "@coin-voyage/crypto": "2.4.3"
65
65
  },
66
66
  "devDependencies": {
67
67
  "@types/qrcode": "1.5.5",