Merge branch 'frontend-btcdirect-disclaimers' into staging-btcdirect

backend/exchanges/btcdirect.go

@@ -80,14 +80,22 @@ func BtcDirectDeals() *ExchangeDealsList {
 		ExchangeName: BTCDirectName,
 		Deals: []*ExchangeDeal{
 			{
-				Fee:     3,
+				Fee:     3, // 3%
 				Payment: CardPayment,
 				IsFast:  true,
 			},
 			{
-				Fee:     2,
+				Fee:     2, // 2%
 				Payment: BankTransferPayment,
 			},
+			{
+				Fee:     4.9, // 4.9%
+				Payment: SOFORTPayment,
+			},
+			{
+				Fee:     3.6, // 3.6%
+				Payment: BancontactPayment,
+			},
 		},
 	}
 }

backend/exchanges/exchanges.go

@@ -101,10 +101,14 @@ const (
 	CardPayment PaymentMethod = "card"
 	// BankTransferPayment is a payment with bank transfer.
 	BankTransferPayment PaymentMethod = "bank-transfer"
+	// SOFORTPayment is a payment method in the SEPA region.
+	SOFORTPayment PaymentMethod = "sofort"
+	// BancontactPayment is a payment method in the SEPA region.
+	BancontactPayment PaymentMethod = "bancontact"
 )
 
 // ExchangeDeal represents a specific purchase option of an exchange.
-// - Fee indicates form the percentage that goes to the exchange in a float representation (e.g. 0.01 -> 1%).
+// - Fee that goes to the exchange in percentage.
 // - Payment is the payment method offered in the deal (usually different payment methods bring different fees).
 // - IsFast is usually associated with card payments. It is used by the frontend to display the `fast` tag in deals list.
 type ExchangeDeal struct {

backend/exchanges/moonpay.go

@@ -123,12 +123,12 @@ func MoonpayDeals(action ExchangeAction) *ExchangeDealsList {
 			ExchangeName: MoonpayName,
 			Deals: []*ExchangeDeal{
 				{
-					Fee:     0.049, // 4.9%
+					Fee:     4.9, // 4.9%
 					Payment: CardPayment,
 					IsFast:  true,
 				},
 				{
-					Fee:     0.019, // 1.9%
+					Fee:     1.9, // 1.9%
 					Payment: BankTransferPayment,
 					IsFast:  false,
 				},

backend/exchanges/pocket.go

@@ -84,7 +84,7 @@ func PocketDeals() *ExchangeDealsList {
 		ExchangeName: PocketName,
 		Deals: []*ExchangeDeal{
 			{
-				Fee:     0.015, // 1.5%
+				Fee:     1.5, // 1.5%
 				Payment: BankTransferPayment,
 				IsFast:  false,
 			},

frontends/web/src/api/exchanges.ts

@@ -35,12 +35,12 @@ export const getExchangesByRegion = (code: string) => {
 
 export type ExchangeDeal = {
   fee: number;
-  payment: 'card' | 'bank-transfer';
+  payment: 'card' | 'bank-transfer' | 'sofort' | 'bancontact';
   isFast: boolean;
   isBest: boolean;
 }
 
-export type TExchangeName = 'moonpay' | 'pocket' | 'btcdirect';
+export type TExchangeName = 'moonpay' | 'pocket' | 'btcdirect' | 'btcdirect-otc';
 
 export type ExchangeDeals = {
   exchangeName: TExchangeName;

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,9 +1,12 @@
 .container {
+  --size-default: 14px;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
   display: flex;
+  font-size: var(--size-default);
   justify-content: space-between;
+  line-height: 1.571428;
   padding: 16px;
   text-align: left;
   width: 100%;

frontends/web/src/locales/en/app.json

@@ -452,6 +452,26 @@
           "link": "Access BTC Direct - Private Trading Desk",
           "title": "Buying or selling over €50,000?"
         },
+        "btcdirectWidget": {
+          "infobox": {
+            "feesBuying": {
+              "bancontact": "Bancontact: {{fee}}%",
+              "bankTransfer": "Bank transfer, SEPA, iDEAL: {{fee}}%",
+              "creditDebitCard": "Credit cards, ApplePay, GooglePay, Cartes Bancaires: {{fee}}%",
+              "sofort": "Sofort: {{fee}}%",
+              "title": "Fees for Buying"
+            },
+            "intro": "European buying of cryptocurrencies with EUR.",
+            "learnmore": "Learn more about BTC Direct",
+            "payment": {
+              "bancontact": "Bancontact",
+              "bankTransfer": "Bank transfer, SEPA Instant, iDEAL",
+              "creditDebitCard": "Credit cards (Mastercard, Visa), ApplePay, Google Pay, Cartes Bancaires",
+              "sofort": "Sofort",
+              "title": "Payment methods"
+            }
+          }
+        },
         "moonpay": {
           "fees": {
             "bankTransfer": "Bank Transfer: {{fee}}%",

frontends/web/src/routes/exchange/btcdirect-otc.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { BTCDirectOTCTerms } from '@/components/terms/btcdirect-otc-terms';
-import { getBTCDirectLink } from './components/buysell';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { BTCDirectOTCTerms } from '@/components/terms/btcdirect-otc-terms';
+import { getBTCDirectLink } from './components/infocontent';
 import { Header } from '@/components/layout';
-import { useTranslation } from 'react-i18next';
 import { open } from '@/api/system';
 import style from './iframe.module.css';
 

frontends/web/src/routes/exchange/components/buysell.tsx

@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
+import { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useLoad } from '@/hooks/api';
 import * as exchangesAPI from '@/api/exchanges';
-import { useContext, useEffect, useState } from 'react';
 import { Button } from '@/components/forms/button';
-import { useTranslation } from 'react-i18next';
 import { AppContext } from '@/contexts/AppContext';
-import { TInfoContentProps } from './infocontent';
+import { getBTCDirectLink, TInfoContentProps } from './infocontent';
 import { Skeleton } from '@/components/skeleton/skeleton';
 import { hasPaymentRequest } from '@/api/account';
 import { Message } from '@/components/message/message';
 import { ExternalLinkWhite, ExternalLinkBlack, Businessman } from '@/components/icon';
 import { useDarkmode } from '@/hooks/darkmode';
-import { i18n } from '@/i18n/i18n';
 import { A } from '@/components/anchor/anchor';
 import { InfoButton } from '@/components/infobutton/infobutton';
 import { getConfig } from '@/utils/config';
@@ -42,24 +41,9 @@ type TProps = {
   goToExchange: (exchange: string) => void;
   showBackButton: boolean;
   action: exchangesAPI.TExchangeAction;
-  setInfo: (into: TInfoContentProps) => void;
+  setInfo: (info: TInfoContentProps) => void;
 }
 
-export const getBTCDirectLink = () => {
-  switch (i18n.resolvedLanguage) {
-  case 'de':
-    return 'https://btcdirect.eu/de-at/private-trading-contact?BitBox';
-  case 'nl':
-    return 'https://btcdirect.eu/nl-nl/private-trading-contact?BitBox';
-  case 'es':
-    return 'https://btcdirect.eu/es-es/private-trading-contactanos?BitBox';
-  case 'fr':
-    return 'https://btcdirect.eu/fr-fr/private-trading-contact?BitBox';
-  default:
-    return 'https://btcdirect.eu/en-eu/private-trading-contact?BitBox';
-  }
-};
-
 export const BuySell = ({
   accountCode,
   deviceIDs,
@@ -109,9 +93,17 @@ export const BuySell = ({
   };
 
   const buildInfo = (exchange: exchangesAPI.ExchangeDeals): TInfoContentProps => {
-    const cardFee = exchange.deals && exchange.deals.find(feeDetail => feeDetail.payment === 'card')?.fee;
-    const bankTransferFee = exchange.deals && exchange.deals.find(feeDetail => feeDetail.payment === 'bank-transfer')?.fee;
-    return { info: exchange.exchangeName, cardFee, bankTransferFee };
+    const cardFee = exchange.deals.find(feeDetail => feeDetail.payment === 'card')?.fee;
+    const bankTransferFee = exchange.deals.find(feeDetail => feeDetail.payment === 'bank-transfer')?.fee;
+    const bancontactFee = exchange.deals.find(feeDetail => feeDetail.payment === 'bancontact')?.fee;
+    const sofortFee = exchange.deals.find(feeDetail => feeDetail.payment === 'sofort')?.fee;
+    return {
+      info: exchange.exchangeName,
+      cardFee,
+      bancontactFee,
+      bankTransferFee,
+      sofortFee,
+    };
   };
 
   return (
@@ -174,7 +166,7 @@ export const BuySell = ({
                 {isDarkMode ? <ExternalLinkWhite className={style.textIcon}/> : <ExternalLinkBlack className={style.textIcon}/>}
               </p>
             </Message>
-            <InfoButton onClick={() => setInfo({ info: 'btcdirect' })} />
+            <InfoButton onClick={() => setInfo({ info: 'btcdirect-otc' })} />
           </div>
         )}
       </div>

frontends/web/src/routes/exchange/components/exchange-provider.module.css

@@ -3,7 +3,7 @@
 }
 
 .exchangeName {
-    width: 40px;
+    width: 110px;
 }
 
 .exchangeContainer {
@@ -37,7 +37,7 @@
 .paymentMethodsContainer {
     display: flex;
     flex-direction: column;
-    margin-left: 40px;
+    margin-left: 20px;
     width: 100%;
     padding-right: var(--space-quarter);
 }
@@ -46,6 +46,7 @@
     color: var(--color-default);
     display: inline-block;
     font-weight: 400;
+    line-height: 1.6;
     margin: 0;
 }
 .paymentMethodName img {
@@ -176,7 +177,7 @@ span[role="radio"]:focus{
 
 @media (max-width: 400px) {
     .exchangeName {
-        width: 50px;
+        width: 150px;
     }
 
     .badgeContainer {

frontends/web/src/routes/exchange/components/exchange-providers.tsx

@@ -47,6 +47,10 @@ const PaymentMethod = ({ methodName }: TPaymentMethodProps) => {
         {t('buy.exchange.creditCard')}
       </span>
     );
+  case 'sofort':
+  case 'bancontact':
+    // hide these payment methods in the overview
+    return '';
   default:
     return <>{methodName}</>;
   }