Add fiat onramp: Transak

.env.example

@@ -0,0 +1 @@
+REACT_APP_TRANSAK_API_KEY='' # Transak API Key for allowing users to buy and sell crypto. https://docs.transak.com/docs/setup-your-partner-account#get-api-key

.gitignore

@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-build.zip
+build.zip
+.env

README.md

@@ -34,3 +34,9 @@ yarn start
 1. Zip `build/` folder: `zip -r build.zip build`
 1. Upload package in Chrome web store developer dashboard
 1. Follow instructions on page to submit for review
+
+## Environment Variables
+
+If you want to use additional features like buying crypto. Check the `.env.example file`
+
+`cp .env.example .env`

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@transak/transak-sdk": "^1.2.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.7",
     "@types/react": "^18.0.26",
@@ -21,7 +22,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "build:extension": "craco build",
+    "build:extension": "react-scripts build && rm build/_redirects",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/@types/transak-sdk.d.ts

@@ -0,0 +1,44 @@
+declare module '@transak/transak-sdk' {
+    export enum Foo {
+        STAGING = "STAGING",
+        PRODUCTION = "PRODUCTION"
+    } 
+    export interface Settings {
+      apiKey: string;
+      environment: string; // tried to set this to be ->  environment: 'STAGING' | 'PRODUCTION', but it gave error: 'string is not assignable to type 'STAGING' | 'PRODUCTION''
+      defaultCryptoCurrency: string;
+      themeColor: string;
+      hostURL: string;
+      widgetHeight: string;
+      widgetWidth: string;
+    }
+
+    export interface EventData {
+      [key: string]: any;
+    }
+
+    export interface OrderData {
+      [key: string]: any;
+    }
+
+    export default class Transak {
+      public readonly ALL_EVENTS = 'ALL_EVENTS';
+      public readonly ERROR = 'TRANSAK_ERROR';
+      public readonly EVENTS: {
+        TRANSAK_ORDER_CANCELLED: "TRANSAK_ORDER_CANCELLED"
+        TRANSAK_ORDER_CREATED: "TRANSAK_ORDER_CREATED"
+        TRANSAK_ORDER_FAILED: "TRANSAK_ORDER_FAILED"
+        TRANSAK_ORDER_SUCCESSFUL: "TRANSAK_ORDER_SUCCESSFUL"
+        TRANSAK_WIDGET_CLOSE: "TRANSAK_WIDGET_CLOSE"
+        TRANSAK_WIDGET_CLOSE_REQUEST: "TRANSAK_WIDGET_CLOSE_REQUEST"
+        TRANSAK_WIDGET_INITIALISED: "TRANSAK_WIDGET_INITIALISED"
+        TRANSAK_WIDGET_OPEN: "TRANSAK_WIDGET_OPEN"
+      };
+
+      constructor(settings: Settings);
+
+      public init(): void;
+      public on(event: string, callback: (data: EventData) => void): void;
+      public close(): void;
+    }
+}

src/App.css

@@ -1,9 +1,13 @@
 .App {
   text-align: center;
   width: 575px;
+  height: 584px;
   max-width: 100%;
 }
 
+#transakFiatOnOffRamp {
+  zoom: 0.8;
+}
 
 input.form-control {
   margin-top: 5px;

src/components/BuySellCrypto.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import transakSDK from "@transak/transak-sdk";
+import { Environment } from '../utils/Environment';
+
+function BuySellCrypto() {
+
+    const settings = {
+        apiKey: Environment.TRANSAK_API_KEY,  // Your API Key
+        environment: "STAGING", // STAGING/PRODUCTION
+        defaultCryptoCurrency: 'ETH',
+        themeColor: '000000', // App theme color
+        hostURL: window.location.origin,
+        widgetHeight: "700px",
+        widgetWidth: "500px",
+    }
+
+    function openTransak() {
+        const transak = new transakSDK(settings);
+
+        transak.init();
+
+        console.log({transakSDK, transak, settings, Environment})
+
+        // To get all the events
+        transak.on(transak.ALL_EVENTS, (data: any) => {
+            console.log(data)
+        });
+
+        // This will trigger when the user closed the widget
+        transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (eventData: any) => {
+            console.log(eventData);
+            transak.close();
+        });
+
+        // This will trigger when the user marks payment is made.
+        transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData: any) => {
+            console.log(orderData);
+            window.alert("Payment Success")
+            transak.close();
+        });
+    }
+    return (
+        <div className="BuySellCrypto">
+            <button onClick={openTransak} className='btn btn-primary'>
+                Buy/Sell Crypto
+            </button>
+        </div>
+    );
+}
+
+export default BuySellCrypto;

src/components/SendCrypto.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Account } from '../models/Account';
+import { goerli } from '../models/Chain';
+import { sendToken } from '../utils/TransactionUtils';
+
+interface SendCryptoProps {
+  account: Account
+}
+
+function SendCrypto({account}: SendCryptoProps) {
+  const [destinationAddress, setDestinationAddress] = useState('');
+  const [amount, setAmount] = useState(0);
+
+  const [networkResponse, setNetworkResponse] = useState<{ status: null | 'pending' | 'complete' | 'error', message: string | React.ReactElement }>({
+    status: null,
+    message: '',
+  });
+
+  function handleDestinationAddressChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setDestinationAddress(event.target.value);
+  }
+
+  function handleAmountChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setAmount(Number.parseFloat(event.target.value));
+  }
+
+  async function transfer() {
+    // Set the network response status to "pending"
+    setNetworkResponse({
+      status: 'pending',
+      message: '',
+    });
+
+    try {
+      const { receipt } = await sendToken(amount, account.address, destinationAddress, account.privateKey);
+
+      if (receipt.status === 1) {
+        // Set the network response status to "complete" and the message to the transaction hash
+        setNetworkResponse({
+          status: 'complete',
+          message: <p>Transfer complete! <a href={`${goerli.blockExplorerUrl}/tx/${receipt.transactionHash}`} target="_blank" rel="noreferrer">
+            View transaction
+            </a></p>,
+        });
+        return receipt;
+      } else {
+        // Transaction failed
+        console.log(`Failed to send ${receipt}`);
+        // Set the network response status to "error" and the message to the receipt
+        setNetworkResponse({
+          status: 'error',
+          message: JSON.stringify(receipt),
+        });
+        return { receipt };
+      }
+    } catch (error: any) {
+      // An error occurred while sending the transaction
+      console.error({ error });
+      // Set the network response status to "error" and the message to the error
+      setNetworkResponse({
+        status: 'error',
+        message: error.reason || JSON.stringify(error),
+      });
+    }
+  }
+
+  return (
+    <div>
+        <div className="form-group">
+            <label>Destination Address:</label>
+            <input
+            className="form-control"
+            type="text"
+            value={destinationAddress}
+            onChange={handleDestinationAddressChange}
+            />
+        </div>
+
+        <div className="form-group">
+            <label>Amount:</label>
+            <input
+            className="form-control"
+            type="number"
+            value={amount}
+            onChange={handleAmountChange}
+            />
+        </div>
+
+        <button
+            className="btn btn-primary"
+            type="button"
+            onClick={transfer}
+            disabled={!amount || networkResponse.status === 'pending'}
+        >
+            Send {amount} ETH
+        </button>
+
+        {networkResponse.status &&
+            <>
+            {networkResponse.status === 'pending' && <p>Transfer is pending...</p>}
+            {networkResponse.status === 'complete' && <p>{networkResponse.message}</p>}
+            {networkResponse.status === 'error' && <p>Error occurred while transferring tokens: {networkResponse.message}</p>}
+            </>
+        }
+    </div>
+  )
+}
+
+export default SendCrypto;

src/scenes/Account/AccountCreate.tsx

@@ -62,6 +62,10 @@ function AccountCreate() {
 
     // Update the account state with the newly created account
     setAccount(result.account);
+
+    if (localStorage.getItem(recoveryPhraseKeyName) !== result.seedPhrase) {
+      localStorage.setItem(recoveryPhraseKeyName, result.seedPhrase);
+    }
   }
 
   return (