买币集合页 WEB/RN 公用逻辑
示例
下面示例为 f2c 集合买/卖币需求 示例 需要传入三个参数:
- 必填。
useLazyFetch
,因为RN
和WEB
不同,需要传入做适配,负责GET
请求 - 必填。
usePost
,因为RN
和WEB
不同,需要传入做适配,负责POST
请求 - 可选。公共数据,比如法币数据、交易所价格数据等。因为在项目的很多场景下,都会需要这类数据,为避免重复调用,所以需要外部传入
import { F2cHelperImp, useF2cHelper, ListenerName, OrderCheckReturn, TradeChannel, TradeSide, SaleWay } from "@atomintl/shared-logic-f2c"
import { hooks } from "@atomintl/aui"
/**
* 下面mock里的数据为外部需要调用公共接口获取的数据,传给 `F2cHelperImp` 的第三个参数
*
* exchangesPrice - 交易所数据接口: /common/v2/market/exchangePrice
* avgPrice - 法币兑换均价接口:/common/v2/market/price
* fiatCurrencies - 法币数据接口: /common/v2/fiatCurrency
*/
import { exchangesPrice, fiatCurrencies } from "./mock"
const { useLazyFetch, usePost } = hooks
const Demo: React.FC = () => {
// 下面两种调用方式都可以
// const F2cHelper = new F2cHelperImp(useLazyFetch, usePost)
const F2cHelper = useF2cHelper(useLazyFetch, usePost)
// 监听方法,不同的ListenerName对应不同的业务,方便统一逻辑
/** 通过下单前的检查 */
F2cHelper.on(ListenerName.CHECK_ORDER_SUCCESS, res => {
console.log("check order success", res)
})
/** 因多种原因导致下单前的检查失败 */
F2cHelper.on(ListenerName.CHECK_ORDER_FAILED, res => {
console.log("check order failed", res.error)
})
/** 因资金不足导致下单失败,包括p2p和兑换账户的检查 */
F2cHelper.on(ListenerName.CHECK_ORDER_REJECT, (res) => {
console.log("check order failed", res.tradeType)
})
/** p2p交易下单成功 */
F2cHelper.on(ListenerName.TRADE_SUCCESS, res => {
console.log("place order success", res)
})
/** 兑换交易下单成功 */
F2cHelper.on(ListenerName.EXCHANGE_SUCCESS, res => {
console.log("exchange success", res)
})
/** 第三方交易下单成功 - epay */
F2cHelper.on(ListenerName.MAKE_F2C_EPAY_SUCCESS, res => {
console.log(res)
})
/** 第三方交易下单成功 - advcash */
F2cHelper.on(ListenerName.MAKE_F2C_ADVCASH_SUCCESS, res => {
console.log(res)
})
/** 买/卖币倒计时 */
F2cHelper.on(ListenerName.FIRE_TRADE_COUNTDOWN, time => {
console.log("买/卖币倒计时", time)
})
useEffect(() => {
// 请求之后,可以通过 F2cHelper.state.product 拿到数据
F2cHelper.fetchProductList({
currencyCode: "BTC",
fiatCode: "HKD",
amount: 100
}, SaleWay.Quantity)
}, [])
return (
<div>
{/** 下单前的检查方法 */}
<div
onClick={() =>
F2cHelper.checkOrder({
tradeType: TradeChannel.Convert,
side: TradeSide.Buy,
id: "2101190003",
showPrice: "7.7",
base: "USDT",
quote: "HKD",
quantity: 0.01
})
}
>
{F2cHelper.state.checkingOrder["2101190003"] ? "loading..." : "检查订单"}
<p>{JSON.stringify(F2cHelper.state.checkingOrder)}</p>
<p>打开兑换弹窗(TradeChannel.Convert)后的倒计时,并且自动轮询获取最新单价!{F2cHelper.state.F2cHelper.state.exchangeTimer}</p>
<p>兑换弹窗打开后的最新单价数据:{F2cHelper.state.rfqPrice}</p>
<p onClick={() => F2cHelper.closeCountdownForRfqPrice()}>关闭兑换弹窗时,必须要关闭获取最新单价的轮询</p>
</div>
{/** 获取商户列表方法,全数量购买 */}
<div onClick={() => F2cHelper.fetchProductList({
currencyCode: "BTC",
fiatCode: "HKD",
amount: 100
}, SaleWay.Quantity)}>
{F2cHelper.state.product.loading ? "loading..." : "商户列表"}
<p>{JSON.stringify(F2cHelper.state.product.data)}</p>
</div>
{/** 获取历史订单方法 */}
<div onClick={() => F2cHelper.fetchOrderList()}>
{F2cHelper.state.order.loading ? "loading..." : "订单列表"}
<p>{JSON.stringify(F2cHelper.state.order.data)}</p>
</div>
{/** 调用下单方法 */}
<div onClick={() => F2cHelper.trade({
amount: "100",
baseOn: "amount",
quantity: "12.870012",
ssNo: "605807491612006815843165626554",
})}>
{F2cHelper.state.trade.loading ? "loading..." : "下单"}
<p>{JSON.stringify(F2cHelper.state.trade.data)}</p>
</div>
{/** 调用兑换方法 */}
<div
onClick={() =>
F2cHelper.exchange({
base: "BTC",
baseOn: "fiat",
quantity: "160",
quote: "HKD",
side: "buy",
ssNo: "611615208199884230427474602955"
})
}
>
{F2cHelper.state.exchange.loading ? "loading..." : "兑换"}
<p>{JSON.stringify(F2cHelper.state.exchange.data)}</p>
</div>
{/** 关闭下单买/卖币倒计时 */}
<div onClick={() => F2cHelper.closeCountdownForTrade()}>
关闭下单买/卖币倒计时
{`还剩:${F2cHelper.state.tradeTimer} 秒`}
</div>
{/** 第三方交易下单 - epay */}
<div onClick={() => F2cHelper.makeF2cEpay({
amount: "100.00",
currencyCode: "BTC",
fiatUnit: "USD",
side: TradeSide.Buy
})}>
第三方交易下单 - epay
{`还剩:${F2cHelper.state.tradeTimer} 秒`}
</div>
{/** 第三方交易下单 - advcash */}
<div onClick={() => F2cHelper.makeF2cAdvcash({
amount: "100.00",
currencyCode: "BTC",
fiatUnit: "USD",
side: TradeSide.Buy
})}>
第三方交易下单 - advcash
{`还剩:${F2cHelper.state.tradeTimer} 秒`}
</div>
<div>
)
}
提供的枚举类型
/** 监听事件集合 */
export enum ListenerName {
/** 点击商家列表项下单前检查通过 */
CHECK_ORDER_SUCCESS = "CHECK_ORDER_SUCCESS",
/** 点击商家列表项下单前检查失败 */
CHECK_ORDER_FAILED = "CHECK_ORDER_FAILED",
/** 因资金不足导致下单失败 */
CHECK_ORDER_REJECT = "CHECK_ORDER_REJECT",
/** 下单成功 */
TRADE_SUCCESS = "TRADE_SUCCESS"
}
export enum TradeShowType {
All = "ALL",
Available = "Available"
}
export enum TradeSortType {
TurnoverRatePriority = "TurnoverRatePriority",
DurationByMinutePriority = "DurationByMinutePriority",
RatePriority = "RatePriority"
}
export enum TradePaymentType {
WeChat = "WeChat",
BankCard = "BankCard",
AliPay = "AliPay",
Visa = "Visa",
FiatWallet = "FiatWallet",
PayPal = "PayPal",
Unknown = "Unknown"
}
/** 交易类型 */
export enum TradeChannel {
F2C = "F2C",
P2P = "P2P",
Convert = "Convert"
}
/** 买/卖币 */
export enum TradeSide {
Buy = "Buy",
Sell = "Sell"
}
/** 交易状态 */
export enum TradeStatus {
Processing = "Processing",
Finish = "Finish",
Other = "Other",
Cancel = "Cancel"
}
/** 排序 */
export enum OrderBy {
/** 升序 */
ASC = "ASC",
/** 降序 */
DESC = "DESC"
}
export enum TradeMerchantType {
CertifiedMerchant = "CertifiedMerchant",
OfficialChannel = "OfficialChannel",
ThirdParty = "ThirdParty"
}
/** 按数量/金额的买卖方式 */
export enum SaleWay {
Quantity = "Quantity",
Amount = "Amount"
}
/** 第三方交易类型 */
export enum ThirdPayTypes {
Itez = "itez",
Coinify = "coinify",
Mercuryo = "mercuryo",
Xanpool = "xanpool",
Advcash = "advcash",
Epay = "epay"
}