From 2f0cfb6a9f511ae3d3f08350a33e50f2be70d7af Mon Sep 17 00:00:00 2001 From: ieow Date: Fri, 29 Jul 2022 16:58:58 +0800 Subject: [PATCH 1/4] feat: transak --- src/assets/transak-logo-white.svg | 22 ++++ src/assets/transak-logo.svg | 39 ++++++ src/components/topup/gateways/Transak.vue | 9 ++ src/plugins/Topup/index.ts | 6 +- src/plugins/Topup/interface.ts | 2 +- src/plugins/Topup/transak.ts | 146 ++++++++++++++++++++++ src/router.ts | 6 + 7 files changed, 226 insertions(+), 4 deletions(-) create mode 100644 src/assets/transak-logo-white.svg create mode 100644 src/assets/transak-logo.svg create mode 100644 src/components/topup/gateways/Transak.vue create mode 100644 src/plugins/Topup/transak.ts diff --git a/src/assets/transak-logo-white.svg b/src/assets/transak-logo-white.svg new file mode 100644 index 00000000..d3062fc7 --- /dev/null +++ b/src/assets/transak-logo-white.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/transak-logo.svg b/src/assets/transak-logo.svg new file mode 100644 index 00000000..cf15b84c --- /dev/null +++ b/src/assets/transak-logo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/topup/gateways/Transak.vue b/src/components/topup/gateways/Transak.vue new file mode 100644 index 00000000..f5447564 --- /dev/null +++ b/src/components/topup/gateways/Transak.vue @@ -0,0 +1,9 @@ + + diff --git a/src/plugins/Topup/index.ts b/src/plugins/Topup/index.ts index bd302daf..4551bfb3 100644 --- a/src/plugins/Topup/index.ts +++ b/src/plugins/Topup/index.ts @@ -1,13 +1,13 @@ import { TOPUP, TopUpProvider } from "./interface"; import moonpay from "./moonpay"; import ramp from "./ramp"; -// import transk from "./transk"; +import transak from "./transak"; -export const activeProvider = [TOPUP.MOONPAY]; +export const activeProvider = [TOPUP.MOONPAY, TOPUP.TRANSAK]; // export const activeProvider = [TOPUP.MOONPAY, TOPUP.RAMPNETWORK, TOPUP.TRANSK]; export const topupPlugin = { [TOPUP.RAMPNETWORK]: ramp, [TOPUP.MOONPAY]: moonpay, - // [TOPUP.TRANSK]: transk, + [TOPUP.TRANSAK]: transak, } as { [k: string]: TopUpProvider }; diff --git a/src/plugins/Topup/interface.ts b/src/plugins/Topup/interface.ts index 15edf375..50bab687 100644 --- a/src/plugins/Topup/interface.ts +++ b/src/plugins/Topup/interface.ts @@ -6,7 +6,7 @@ import { QuoteResponse, RequestObject } from "@/components/topup/gateways/types" export const enum TOPUP { RAMPNETWORK = "rampNetwork", MOONPAY = "moonpay", - TRANSK = "transk", + TRANSAK = "transak", } export interface TopUpProvider { diff --git a/src/plugins/Topup/transak.ts b/src/plugins/Topup/transak.ts new file mode 100644 index 00000000..d6f12692 --- /dev/null +++ b/src/plugins/Topup/transak.ts @@ -0,0 +1,146 @@ +import { PaymentParams } from "@toruslabs/base-controllers"; +import { get } from "@toruslabs/http-helpers"; +import { helpers, maxValue, minValue, required } from "@vuelidate/validators"; +import log from "loglevel"; + +import TransakLogo from "@/assets/transak-logo.svg"; +import TransakLogoLight from "@/assets/transak-logo-white.svg"; +import { QuoteResponse, RequestObject } from "@/components/topup/gateways/types"; +import config from "@/config"; + +import { TOPUP, TopUpProvider } from "./interface"; + +const transakHost = "https://global.transak.com"; +const transakApiQuoteHost = "https://api.transak.com/api/v2"; +const transakLiveAPIKEY = "0ae336e4-1968-4ec3-b817-625f6810a7d2"; +// const transakTestHost = "https://staging-global.transak.com"; +// const transakTestApiQuoteHost = "https://staging-api.transak.com/api/v2"; +// const transakTestAPIKEY = "e5adb5e3-b30c-4fa8-85ea-adcbadc98198"; + +export const getSignature = async (requestObject: { url: string }) => { + try { + const options = { + // mode: "cors", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + // Authorization: `Bearer ${requestObject.token}`, + }, + }; + const { signature } = await get(`${config.moonpayApiHost}/sign?url=${requestObject.url}`, options); + return signature as string; + } catch (error) { + log.error(error); + } + return ""; +}; + +async function getQuote(requestObject: RequestObject): Promise { + let response: any; + try { + const options = { + // mode: "cors", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + }; + + const res = await get( + `${transakApiQuoteHost}/currencies/price?cryptoCurrency=${requestObject.digital_currency.toUpperCase()}` + + `&partnerApiKey=${transakLiveAPIKEY}` + + `&fiatAmount=${requestObject.requested_amount}&fiatCurrency=${requestObject.fiat_currency.toUpperCase()}` + + "&network=solana" + + "&isBuyOrSell=BUY", + options + ); + response = (res as any).response; + } catch (error) { + log.error(error); + } + + return { + fee: response.totalFee, + rate: response.conversionPrice, + cryptoAmount: response.cryptoAmount, + decimals: 0, + }; +} + +const configDetails: TopUpProvider = { + name: TOPUP.TRANSAK, + description: "walletTopUp.description", + paymentMethod: "Apple & Google Pay / Credit/Debit Card / Bangkok Bank Mobile & iPay / Bank Transfer (sepa/gbp) / SCB Mobile & Easy", + fee: "0.99% - 5.5% or 5 USD", + limit: "$5,000/day, $28,000/mo", + logo: (darkMode: boolean) => { + return darkMode ? TransakLogoLight : TransakLogo; + }, + validCryptocurrencies: [ + { + value: "SOL", + label: "SOL", + symbol: "sol", + }, + ], + validCurrencies: ["USD", "EUR", "GBP"].map((k) => { + return { value: k, label: k }; + }), + + orderUrl: async ( + state: { selectedAddress: string; email: string }, + params: PaymentParams, + instanceId: string, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + redirectFlow?: boolean, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + redirectURL?: string + ) => { + const instanceState = encodeURIComponent( + window.btoa( + JSON.stringify({ + instanceId, + provider: TOPUP.MOONPAY, + }) + ) + ); + + const parameters = { + // environment: 'STAGING', + apiKey: transakLiveAPIKEY, + hostURL: config.baseUrl, + defaultCryptoCurrency: params.selectedCryptoCurrency || undefined, + walletAddress: state.selectedAddress, // JSON.stringify({ sol: state.selectedAddress, usdc_sol: state.selectedAddress }),, + defaultFiatAmount: params.fiatValue || undefined, + fiatCurrency: params.selectedCurrency || undefined, + email: state.email || undefined, + partnerCustomerId: state.selectedAddress, + redirectURL: `${config.redirect_uri}?state=${instanceState}`, + // themeColor: colorCode, + network: "solana", + }; + const parameterString = new URLSearchParams(JSON.parse(JSON.stringify(parameters))); + const url = `${transakHost}?${parameterString.toString()}`; + + return new URL(`${url}`); + }, + + getLogoUrl: (darkMode?: boolean) => { + if (darkMode) return TransakLogoLight; + return TransakLogo; + }, + + getQuoteOnAmount: getQuote, + getQuoteOnCrypto: getQuote, + getQuoteOnFiat: getQuote, + + rules: { + amount: { + required: helpers.withMessage("Required", required), + minValue: helpers.withMessage("Minimum transaction amount is 10.", minValue(30)), + maxValue: helpers.withMessage("Maximum transaction amount is 200.", maxValue(500)), + }, + }, +}; + +export default configDetails; diff --git a/src/router.ts b/src/router.ts index 50a585a2..dfa2fb74 100644 --- a/src/router.ts +++ b/src/router.ts @@ -66,6 +66,12 @@ const router = createRouter({ component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TOPUP-RAMP" */ "@/components/topup/gateways/Moonpay.vue"), meta: { title: "Topup - Moonpay" }, }, + { + name: "transak", + path: "transak", + component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TOPUP-RAMP" */ "@/components/topup/gateways/Transak.vue"), + meta: { title: "Topup - Ramp Network" }, + }, { path: "/wallet/topup/:catchAll(.*)", redirect: { name: "moonpay" } }, ], redirect: { name: "moonpay" }, From 044dea71a9fa2e879435d5b8fc7b61ccfd060a94 Mon Sep 17 00:00:00 2001 From: ieow Date: Fri, 29 Jul 2022 17:08:31 +0800 Subject: [PATCH 2/4] fix: route title --- src/router.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router.ts b/src/router.ts index dfa2fb74..ccd412bd 100644 --- a/src/router.ts +++ b/src/router.ts @@ -70,7 +70,7 @@ const router = createRouter({ name: "transak", path: "transak", component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TOPUP-RAMP" */ "@/components/topup/gateways/Transak.vue"), - meta: { title: "Topup - Ramp Network" }, + meta: { title: "Topup - Transak" }, }, { path: "/wallet/topup/:catchAll(.*)", redirect: { name: "moonpay" } }, ], From c3afa7e9f56d7c3ab59acde5358f1e2e7da516f0 Mon Sep 17 00:00:00 2001 From: ieow Date: Fri, 29 Jul 2022 17:10:11 +0800 Subject: [PATCH 3/4] fix: typo --- src/plugins/Topup/transak.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/Topup/transak.ts b/src/plugins/Topup/transak.ts index d6f12692..1cd526ea 100644 --- a/src/plugins/Topup/transak.ts +++ b/src/plugins/Topup/transak.ts @@ -137,8 +137,8 @@ const configDetails: TopUpProvider = { rules: { amount: { required: helpers.withMessage("Required", required), - minValue: helpers.withMessage("Minimum transaction amount is 10.", minValue(30)), - maxValue: helpers.withMessage("Maximum transaction amount is 200.", maxValue(500)), + minValue: helpers.withMessage("Minimum transaction amount is 30.", minValue(30)), + maxValue: helpers.withMessage("Maximum transaction amount is 500.", maxValue(500)), }, }, }; From b2bca2291d31adfb46611abc1b1aa13fef06690b Mon Sep 17 00:00:00 2001 From: ieow Date: Fri, 5 Aug 2022 16:36:38 +0800 Subject: [PATCH 4/4] fix: update supported currency update min fee --- src/plugins/Topup/transak.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/Topup/transak.ts b/src/plugins/Topup/transak.ts index 1cd526ea..f7df6e0f 100644 --- a/src/plugins/Topup/transak.ts +++ b/src/plugins/Topup/transak.ts @@ -71,7 +71,7 @@ const configDetails: TopUpProvider = { name: TOPUP.TRANSAK, description: "walletTopUp.description", paymentMethod: "Apple & Google Pay / Credit/Debit Card / Bangkok Bank Mobile & iPay / Bank Transfer (sepa/gbp) / SCB Mobile & Easy", - fee: "0.99% - 5.5% or 5 USD", + fee: "0.99% - 5.5% or min 1 EUR", limit: "$5,000/day, $28,000/mo", logo: (darkMode: boolean) => { return darkMode ? TransakLogoLight : TransakLogo; @@ -83,7 +83,7 @@ const configDetails: TopUpProvider = { symbol: "sol", }, ], - validCurrencies: ["USD", "EUR", "GBP"].map((k) => { + validCurrencies: ["EUR", "GBP"].map((k) => { return { value: k, label: k }; }),