Add Kado OTC provider

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- added: New Kado OTC provider integration.
+
 ## 4.17.2
 
 - fixed: (Zcash/Pirate) Fixed android build issues

package.json

@@ -108,6 +108,7 @@
     "ethers": "^5.7.2",
     "expo": "^48.0.0",
     "jsrsasign": "^11.1.0",
+    "p-debounce": "^4.0.0",
     "paraswap": "^5.2.0",
     "posthog-js": "^1.88.1",
     "posthog-react-native": "^2.8.1",

src/components/Main.tsx

@@ -14,6 +14,8 @@ import { useAsyncEffect } from '../hooks/useAsyncEffect'
 import { useMount } from '../hooks/useMount'
 import { lstrings } from '../locales/strings'
 import { AddressFormScene } from '../plugins/gui/scenes/AddressFormScene'
+import { ConfirmationScene } from '../plugins/gui/scenes/ConfirmationScene'
+import { EmailFormScene } from '../plugins/gui/scenes/EmailFormScene'
 import { FiatPluginEnterAmountScene as FiatPluginEnterAmountSceneComponent } from '../plugins/gui/scenes/FiatPluginEnterAmountScene'
 import { FiatPluginWebViewComponent } from '../plugins/gui/scenes/FiatPluginWebView'
 import { InfoDisplayScene } from '../plugins/gui/scenes/InfoDisplayScene'
@@ -296,6 +298,21 @@ const EdgeBuyTabScreen = () => {
           headerRight: () => null
         }}
       />
+      <BuyStack.Screen
+        name="guiPluginConfirmation"
+        component={ConfirmationScene}
+        options={{
+          headerLeft: () => null,
+          headerRight: () => null
+        }}
+      />
+      <BuyStack.Screen
+        name="guiPluginEmailForm"
+        component={EmailFormScene}
+        options={{
+          headerRight: () => null
+        }}
+      />
       <BuyStack.Screen
         name="guiPluginEnterAmount"
         component={FiatPluginEnterAmountScene}

src/components/layout/SceneContainer.tsx

@@ -0,0 +1,7 @@
+import { View } from 'react-native'
+
+import { styled } from '../hoc/styled'
+
+export const SceneContainer = styled(View)(theme => ({
+  padding: theme.rem(0.5)
+}))

src/envConfig.ts

@@ -72,6 +72,12 @@ export const asEnvConfig = asObject({
           apiKey: asString
         })
       ),
+      kadoOtc: asOptional(
+        asObject({
+          apiKey: asString,
+          apiUserEmail: asString
+        })
+      ),
       moonpay: asOptional(asString),
       mtpelerin: asOptional(asString),
       paybis: asOptional(
@@ -102,6 +108,7 @@ export const asEnvConfig = asObject({
       banxa: undefined,
       Bitrefill: undefined,
       kado: undefined,
+      kadoOtc: undefined,
       moonpay: undefined,
       mtpelerin: undefined,
       paybis: undefined,

src/locales/en_US.ts

@@ -1533,6 +1533,7 @@ const strings = {
   form_field_title_address_line_2: 'Address Line 2 (optional)',
   form_field_title_address_state_province_region: 'Province',
   form_field_title_address_zip_postal_code: 'Postal Code/Zip',
+  form_field_title_email_address: 'Email Address',
   form_field_title_iban: 'IBAN',
   form_field_title_swift_bic: 'SWIFT/BIC',
 
@@ -1548,6 +1549,11 @@ const strings = {
   sepa_transfer_prompt_s:
     'Your order %1$s has been submitted!\n\nPlease save the order details below for your records and instruct your bank to make the payment with the information in the Payment Details section.',
 
+  otc_enter_email_to_buy: 'Please enter your email to be contacted by one of our exchange partners to coordinate an OTC (Over the Counter) purchase.',
+  otc_enter_email_to_sell: 'Please enter your email to be contacted by one of our exchange partners to coordinate an OTC (Over the Counter) sale.',
+  otc_confirmation_title: 'Request Sent',
+  otc_confirmation_message: 'Thank you! You will be contacted in the next 24 hours to complete your request.',
+
   // #endregion GuiPlugins
 
   // #region Light Account

src/locales/strings/enUS.json

@@ -1352,6 +1352,7 @@
   "form_field_title_address_line_2": "Address Line 2 (optional)",
   "form_field_title_address_state_province_region": "Province",
   "form_field_title_address_zip_postal_code": "Postal Code/Zip",
+  "form_field_title_email_address": "Email Address",
   "form_field_title_iban": "IBAN",
   "form_field_title_swift_bic": "SWIFT/BIC",
   "bank_info_title": "Bank Info",
@@ -1364,6 +1365,10 @@
   "bank_transfer_reference": "Reference",
   "sepa_form_title": "Enter Bank Info",
   "sepa_transfer_prompt_s": "Your order %1$s has been submitted!\n\nPlease save the order details below for your records and instruct your bank to make the payment with the information in the Payment Details section.",
+  "otc_enter_email_to_buy": "Please enter your email to be contacted by one of our exchange partners to coordinate an OTC (Over the Counter) purchase.",
+  "otc_enter_email_to_sell": "Please enter your email to be contacted by one of our exchange partners to coordinate an OTC (Over the Counter) sale.",
+  "otc_confirmation_title": "Request Sent",
+  "otc_confirmation_message": "Thank you! You will be contacted in the next 24 hours to complete your request.",
   "backup_account": "Back Up Account",
   "backup_delete_confirm_message": "Are you sure you want to delete this account without backing up first? You will NOT be able to recover wallets and transactions for this account!",
   "backup_info_message": "Create a username and password to create a full account and secure your funds. No personal information is required",

src/plugins/gui/amountQuotePlugin.ts

@@ -19,6 +19,7 @@ import { StateManager } from './hooks/useStateManager'
 import { BestError, getBestError, getRateFromQuote } from './pluginUtils'
 import { banxaProvider } from './providers/banxaProvider'
 import { bityProvider } from './providers/bityProvider'
+import { kadoOtcProvider } from './providers/kadoOtcProvider'
 import { kadoProvider } from './providers/kadoProvider'
 import { moonpayProvider } from './providers/moonpayProvider'
 import { mtpelerinProvider } from './providers/mtpelerinProvider'
@@ -49,7 +50,7 @@ type InternalFiatPluginEnterAmountParams = FiatPluginEnterAmountParams & {
   convertValueInternal: (sourceFieldNum: number, value: string, stateManager: StateManager<EnterAmountState>) => Promise<ConvertValueInternalResult>
 }
 
-const providerFactories = [banxaProvider, bityProvider, kadoProvider, moonpayProvider, mtpelerinProvider, paybisProvider, simplexProvider]
+const providerFactories = [banxaProvider, bityProvider, kadoProvider, kadoOtcProvider, moonpayProvider, mtpelerinProvider, paybisProvider, simplexProvider]
 
 const DEFAULT_FIAT_AMOUNT = '500'
 const DEFAULT_FIAT_AMOUNT_LIGHT_ACCOUNT = '50'
@@ -547,7 +548,7 @@ export const amountQuoteFiatPlugin: FiatPluginFactory = async (params: FiatPlugi
 // showing the quotes.
 // TODO: conflict: also defines whether or not to accept a quote from the
 // provider
-export const createPriorityArray = (providerPriority: ProviderPriorityMap): PriorityArray => {
+export const createPriorityArray = (providerPriority: ProviderPriorityMap | undefined): PriorityArray => {
   const priorityArray: PriorityArray = []
   if (providerPriority != null) {
     const temp: Array<{ pluginId: string; priority: number }> = []

src/plugins/gui/fiatPlugin.tsx

@@ -121,6 +121,18 @@ export const executePlugin = async (params: {
     buttonModal: async params => {
       return await Airship.show(bridge => <ButtonsModal bridge={bridge} {...params} />)
     },
+    confirmation: async params => {
+      return await new Promise(resolve => {
+        maybeNavigateToCorrectTabScene()
+        navigation.navigate('guiPluginConfirmation', {
+          title: params.title,
+          message: params.message,
+          onClose: async () => {
+            resolve()
+          }
+        })
+      })
+    },
     showToastSpinner,
     openWebView: async (params): Promise<void> => {
       maybeNavigateToCorrectTabScene()
@@ -170,6 +182,20 @@ export const executePlugin = async (params: {
       maybeNavigateToCorrectTabScene()
       navigation.navigate('guiPluginEnterAmount', params)
     },
+    async emailForm(params) {
+      return await new Promise((resolve, reject) => {
+        maybeNavigateToCorrectTabScene()
+        navigation.navigate('guiPluginEmailForm', {
+          message: params.message,
+          onSubmit: async (email: string) => {
+            resolve(email)
+          },
+          onClose: async () => {
+            resolve(undefined)
+          }
+        })
+      })
+    },
     addressForm: async params => {
       const { countryCode, headerTitle, headerIconUri, onSubmit } = params
       return await new Promise((resolve, reject) => {

src/plugins/gui/fiatPluginTypes.ts

@@ -127,13 +127,15 @@ export type FiatPluginPermissions = Permission[]
 export interface FiatPluginUi {
   addressWarnings: (parsedUri: any, currencyCode: string) => Promise<boolean>
   buttonModal: <Buttons extends { [key: string]: ButtonInfo }>(params: Omit<ButtonModalProps<Buttons>, 'bridge'>) => Promise<keyof Buttons | undefined>
+  confirmation: (params: { title: string; message: string }) => Promise<void>
   showToastSpinner: <T>(message: string, promise: Promise<T>) => Promise<T>
   openWebView: (params: FiatPluginOpenWebViewParams) => Promise<void>
   openExternalWebView: (params: FiatPluginOpenExternalWebViewParams) => Promise<void>
   walletPicker: (params: { headerTitle: string; allowedAssets?: EdgeAsset[]; showCreateWallet?: boolean }) => Promise<FiatPluginWalletPickerResult | undefined>
   showError: (error: unknown) => Promise<void>
   listModal: (params: FiatPluginListModalParams) => Promise<string | undefined>
   enterAmount: (params: AppParamList['guiPluginEnterAmount']) => void
+  emailForm: (params: { message?: string }) => Promise<string | undefined>
   addressForm: (params: FiatPluginAddressFormParams) => Promise<HomeAddress | undefined>
   requestPermission: (permissions: FiatPluginPermissions, displayName: string, mandatory: boolean) => Promise<boolean>
   rewardsCardDashboard: (params: RewardsCardDashboardParams) => Promise<void>

src/plugins/gui/hooks/useFormFieldState.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { useHandler } from '../../../hooks/useHandler'
+
+interface FieldState {
+  onChangeText: (text: string) => void
+  value: string
+}
+export const useFormFieldState = (defaultValue: string = ''): FieldState => {
+  const [value, setValue] = useState<string>(defaultValue)
+
+  const handleChange = useHandler(text => {
+    setValue(text)
+  })
+
+  return {
+    onChangeText: handleChange,
+    value
+  }
+}