feat: transak integration

assets/_locales/en/messages.json

@@ -1480,13 +1480,17 @@
     "description": "Buy AR with Onramper button text"
   },
   "buy_screen_pay": {
-    "message": "You pay",
+    "message": "You Pay",
     "description": "Payment input label title"
   },
   "buy_screen_receive": {
-    "message": "You receive",
+    "message": "You Receive",
     "description": "Receive input label title"
   },
+  "buy_screen_switch": {
+    "message": "Switch",
+    "description": "Switch button"
+  },
   "buy_screen_payment_method": {
     "message": "Payment Method",
     "description": "Select payment method title"
@@ -1548,7 +1552,7 @@
     "description": "Info message text on purchase in progress page"
   },
   "order_id_purchase_pending": {
-    "message":  "Order ID:",
+    "message":  "Quote ID:",
     "description": "Order ID text on purchase in progress page"
   },
   "choose_payment_method": {

package.json

@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.3.7",
+    "@arconnect/components": "^0.3.8",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",

shim.d.ts

@@ -49,9 +49,12 @@ declare module "styled-components" {
     secondaryTextv2: string;
     background: string;
     backgroundSecondary: string;
+    inputField: string;
+    primary: string;
     cardBorder: string;
     fail: string;
     cardBackground: string;
+    primaryTextv2: string;
   }
 }
 

src/components/popup/HeadV2.tsx

@@ -26,6 +26,7 @@ export default function HeadV2({
   title,
   showOptions = true,
   back,
+  padding,
   showBack = true,
   allowOpen = true
 }: Props) {
@@ -97,6 +98,7 @@ export default function HeadV2({
       displayTheme={theme}
       collapse={scrollDirection === "down"}
       scrolled={scrolled}
+      padding={padding}
     >
       <BackWrapper
         onClick={async () => {
@@ -142,6 +144,7 @@ const HeadWrapper = styled(Section)<{
   collapse: boolean;
   scrolled: boolean;
   displayTheme: DisplayTheme;
+  padding: string;
 }>`
   position: sticky;
   top: 0;
@@ -151,7 +154,7 @@ const HeadWrapper = styled(Section)<{
   display: flex;
   flex-direction: row;
   width: full;
-  padding: 15px;
+  padding: ${(props) => (props.padding ? props.padding : "15px")};
   justify-content: space-between;
   align-items: center;
   background-color: rgba(${(props) => props.theme.background}, 0.75);
@@ -241,6 +244,7 @@ interface Props {
   showOptions?: boolean;
   // allow opening the wallet switcher
   showBack?: boolean;
+  padding?: string;
   allowOpen?: boolean;
   back?: (...args) => any;
 }

src/components/popup/home/BuyButton.tsx

@@ -1,82 +1,33 @@
 import { useHistory } from "~utils/hash_router";
-import { Button } from "@arconnect/components";
+import { Button, ButtonV2 } from "@arconnect/components";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import arLogoDark from "url:/assets/ar/logo_dark.png";
-import { EventType, trackEvent } from "~utils/analytics";
-import { useLocation } from "wouter";
-
-interface ButtonWrapperProps {
-  id?: string;
-  padding?: boolean;
-  route?: string;
-  logo?: boolean;
-  onClick?: () => void;
-  useCustomClickHandler?: boolean;
-  closeBuyAR?: boolean;
-}
-
-interface RouteEventMap {
-  [route: string]: EventType;
-}
-
-export default function BuyButton({
-  padding,
-  route,
-  logo,
-  onClick,
-  useCustomClickHandler,
-  closeBuyAR
-}: ButtonWrapperProps) {
-  const [push] = useHistory();
-  const [location] = useLocation();
-
-  const eventMap: RouteEventMap = {
-    "/": EventType.BUY_AR_DASHBOARD,
-    "/purchase": EventType.BUY_AR_PURCHASE,
-    "/confirm-purchase": EventType.BUY_AR_CONFIRM_PURCHASE
-  };
-
-  const targetRoute = route === "/purchase" ? "/purchase" : "/confirm-purchase";
-
-  const handleClick = async () => {
-    await trackEvent(eventMap[location], {});
-
-    if (useCustomClickHandler) {
-      onClick();
-    } else if (closeBuyAR) {
-      push("/");
-    } else {
-      push(targetRoute);
-    }
-  };
 
+export default function BuyButton() {
   return (
-    <ButtonWrapper padding={padding} route={route} logo={logo}>
-      <CustomButton
-        className="normal-font-weight"
-        small
-        fullWidth
-        onClick={handleClick}
-      >
-        {closeBuyAR && browser.i18n.getMessage("close_purchase_pending")}
-        {!closeBuyAR && browser.i18n.getMessage("buy_ar_button")}
-        {logo && <ARLogo src={arLogoDark} alt={"AR"} draggable={false} />}
-      </CustomButton>
+    <ButtonWrapper>
+      <PureBuyButton />
     </ButtonWrapper>
   );
 }
 
-const ButtonWrapper = styled.div<ButtonWrapperProps>`
-  height: 55px;
-  padding: ${(props) => (props.padding ? "0px 12px" : "0")};
-`;
+export const PureBuyButton = () => {
+  const [push] = useHistory();
 
-const CustomButton = styled(Button)`
-  &.normal-font-weight {
-    font-weight: normal;
-  }
-  margin-top: 10px;
+  return (
+    <ButtonV2
+      fullWidth
+      onClick={() => push("/purchase")}
+      style={{ display: "flex", gap: "5px" }}
+    >
+      {browser.i18n.getMessage("buy_ar_button")}
+      <ARLogo src={arLogoDark} alt={"AR"} draggable={false} />
+    </ButtonV2>
+  );
+};
+const ButtonWrapper = styled.div`
+  padding: 16px 15px 0 15px;
 `;
 
 const ARLogo = styled.img`

src/components/popup/home/NoBalance.tsx

@@ -4,7 +4,7 @@ import { useHistory } from "~utils/hash_router";
 import noBalanceArt from "url:/assets/ar/no_funds.png";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
-// import BuyButton from "./BuyButton";
+import { PureBuyButton } from "./BuyButton";
 
 export default function NoBalance() {
   const [push] = useHistory();
@@ -16,7 +16,7 @@ export default function NoBalance() {
         {browser.i18n.getMessage("home_no_balance", "$AR")}
       </NoBalanceText>
       <ButtonWrapper>
-        {/* <BuyButton route={"/purchase"} logo={true} /> */}
+        <PureBuyButton />
         <ButtonV2
           onClick={() => push("/receive")}
           secondary
@@ -54,8 +54,10 @@ const Art = styled.img.attrs({
 `;
 
 const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   width: 100%;
-  margin-top: -2px;
 `;
 
 const ArrowRight = styled(ArrowRightIcon)`

src/lib/onramper.ts

@@ -1,5 +1,53 @@
 import browser from "webextension-polyfill";
 
+export type PaymentType = {
+  name: string;
+  id: string;
+  isNftAllowed: boolean;
+  isNonCustodial: boolean;
+  processingTime: string;
+  displayText: boolean;
+  icon: string;
+  limitCurrency: string;
+  isActive: boolean;
+  provider: string;
+  maxAmount: number;
+  minAmount: number;
+  defaultAmount: number;
+  isConverted: boolean;
+  visaPayoutCountries: string[];
+  mastercardPayoutCountries: string[];
+  isPayOutAllowed: boolean;
+  minAmountForPayOut: number;
+  maxAmountForPayOut: number;
+  defaultAmountForPayOut: number;
+};
+
+export type Quote = {
+  quoteId: string;
+  conversionPrice: number;
+  marketConversionPrice: number;
+  slippage: number;
+  fiatCurrency: string;
+  cryptoCurrency: string;
+  paymentMethod: string;
+  fiatAmount: number;
+  cryptoAmount: number;
+  isBuyOrSell: "BUY" | "SELL";
+  network: string;
+  feeDecimal: number;
+  totalFee: number;
+  feeBreakdown: Array<{
+    name: string;
+    value: number;
+    id: string;
+    ids: Array<string>;
+  }>;
+  nonce: number;
+  cryptoLiquidityProvider: string;
+  notes: Array<string>;
+};
+
 /**
  * GET currency $AR price quote
  *
@@ -135,6 +183,7 @@ export async function getPaymentTypes(currency: string) {
         }
       }
     );
+    console.log("response", response, currency);
 
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);

src/popup.tsx

@@ -58,7 +58,11 @@ export default function Popup() {
               <HistoryProvider>
                 <Route path="/" component={Home} />
                 <Route path="/purchase" component={Purchase} />
-                <Route path="/confirm-purchase" component={ConfirmPurchase} />
+                <Route path="/confirm-purchase/:quoteId?">
+                  {(params: { quoteId: string }) => (
+                    <ConfirmPurchase id={params?.quoteId} />
+                  )}
+                </Route>
                 <Route path="/purchase-pending" component={PendingPurchase} />
                 <Route path="/receive" component={Receive} />
                 <Route path="/send/transfer/:id?">