1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00

Add support for fiat on-ramp via Transak (#11376)

This commit is contained in:
Daniel 2021-06-25 15:10:24 +02:00 committed by GitHub
parent a69ed05141
commit ba3f51d6ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 182 additions and 1 deletions

View File

@ -268,6 +268,12 @@
"buy": {
"message": "Buy"
},
"buyWithTransak": {
"message": "Buy ETH with Transak"
},
"buyWithTransakDescription": {
"message": "Transak supports debit card and bank transfers (depending on location) in 59+ countries. ETH deposits into your MetaMask account."
},
"buyWithWyre": {
"message": "Buy ETH with Wyre"
},
@ -420,6 +426,9 @@
"continue": {
"message": "Continue"
},
"continueToTransak": {
"message": "Continue to Transak"
},
"continueToWyre": {
"message": "Continue to Wyre"
},

112
app/images/transak.svg Normal file
View File

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2066.8 800" style="enable-background:new 0 0 2066.8 800;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#2970E2;}
.st2{fill:#D1D9E6;}
.st3{fill:#FFFFFF;}
.st4{fill:url(#SVGID_2_);}
</style>
<g id="transparent_1_">
<g id="logo_4_">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="119.932" y1="155.9459" x2="624.022" y2="547.843" gradientTransform="matrix(1 0 0 1 0 50)">
<stop offset="0.1304" style="stop-color:#3495F7"/>
<stop offset="0.3063" style="stop-color:#2B87F2"/>
<stop offset="0.6392" style="stop-color:#1461E5"/>
<stop offset="0.7232" style="stop-color:#0E57E1"/>
</linearGradient>
<path class="st0" d="M566.4,640.4H175.3c-22,0-39.8-17.8-39.8-39.8V201.5c0-22,17.8-39.8,39.8-39.8h391.2
c22,0,39.8,17.8,39.8,39.8v399.1C606.3,622.5,588.5,640.4,566.4,640.4z"/>
<path class="st1" d="M606.3,451.6v148.9c0,22-17.8,39.8-39.8,39.8H417.6L606.3,451.6z"/>
<g>
<g>
<g>
<path class="st2" d="M293.4,449.7l138.9-144.4c10.6-10.6,27.2-9.8,38.3,1.2l80.3,77.4c8.5,8.2,8.3,24.4,0.4,33.1
c-10.3,10.3-21.9,11-37.5,0.4l-58.2-63L309.3,493.5c-9.8,7.6-19.8,14-35.2,4.1c-5.3-7.1,5.2-21,1.1-25.1L293.4,449.7z"/>
</g>
<g>
<path class="st2" d="M287.1,498.2c-11.9-0.4-21.2-8.1-21.2-17.3l0.7-165.1c0-9.1,8.5-20.2,20.4-20.6
c15.8,0,22.7,12.8,22.7,22.3v163.8C309.8,490.8,299.5,498.5,287.1,498.2z"/>
</g>
<g>
<path class="st2" d="M449.1,502.7c-14.7,0-20.9-10.9-20.9-19.5V331.8c0-8.5,9.1-18.9,20.9-19.3c12.3-0.4,22.5,10,22.5,18.9
v149.7C471.6,491.7,464.3,502.7,449.1,502.7z"/>
</g>
</g>
<g>
<g>
<path class="st3" d="M282.1,500c-9.1-0.4-16.2-8.1-16.2-17.3V317.6c0-9.1,7.1-20.2,16.2-20.6c9.5-0.4,17.5,10.6,17.5,20.2v166
C299.6,492.7,291.7,500.4,282.1,500z"/>
</g>
<g>
<path class="st3" d="M444.5,501.7c-9.3,0-16.9-10.8-16.9-20.2V318.9c0-9.3,7.6-16.9,16.9-16.9c9.3,0,16.9,7.6,16.9,16.9v162.7
C461.3,490.8,453.8,501.7,444.5,501.7z"/>
</g>
<g>
<path class="st3" d="M282.8,498.4c-5.5,0-11-2.1-15.1-6.3l-76.5-76.7c-8.3-8.4-8.3-21.9,0.1-30.3c8.4-8.3,21.9-8.3,30.3,0.1
l61.6,62l147.4-140.3c8.3-7.9,21.3-7.9,29.6,0.1l80.2,77.4c8.5,8.2,8.7,21.7,0.6,30.3c-8.1,8.5-21.7,8.7-30.3,0.6l-65.5-63.1
L297.5,492.5C293.4,496.4,288.1,498.4,282.8,498.4z"/>
</g>
</g>
<path class="st3" d="M429.7,378.8l-9.3,8.8c0,0,2.6-14.7-4.9-7.6c-7.6,7.2,11.6-18.2,11.6-18.2l3.9,4.9L429.7,378.8z"/>
<path class="st3" d="M461.3,376.6c0,0,0.5-9,10.3,6.4v-12.1l-10.6-5.5L461.3,376.6z"/>
<path class="st3" d="M299.7,419.2c0,0,1.4,10,10.2-2.9v12.1l-10.6,5.5L299.7,419.2z"/>
</g>
</g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="712.4824" y1="419.8029" x2="1947.4551" y2="419.8029">
<stop offset="0" style="stop-color:#3495F7"/>
<stop offset="0.4939" style="stop-color:#1461E5"/>
<stop offset="1" style="stop-color:#0E57E1"/>
</linearGradient>
<path class="st4" d="M809.3,337.3l2.1,0.7c0.3,5.7,0.5,16.4,0.5,32.1c0,1-1.5,1.4-4.5,1.4h-20.7c-1.9,0-2.9,1.5-2.9,4.5v122.8
c0,0.2-0.4,0.5-1.2,1.1c-0.8,0.6-1.3,0.8-1.7,0.8h-37.4l-1.7-1.4c-0.5-0.5-0.7-37.8-0.7-111.9v-14.8c-19.2,0-28.8-1.2-28.8-3.6
v-30.5c0-0.2,0.6-0.6,1.9-1.4h42.8c2.2,0.3,3.6,0.6,4,0.7c0.5,0,0.7-0.2,0.7-0.7H809.3z M868.1,336.9h65.9
c15.1,0,28.4,5.5,39.9,16.5c11.5,11,17.3,24.2,17.3,39.4c0,11.9-3.4,22.2-10.1,30.9c-6.7,8.7-15.8,15.5-27.3,20.2
c-0.5,0-0.7,0.4-0.7,1.2v0.2c0.2,0.2,0.2,0.3,0.2,0.5l40.7,49.7c0.5,0.8,1,1.7,1.4,2.6s0.8,1.6,1.1,2c0.2,0.4,0.4,0.7,0.4,0.8
c0,0.5-2.6,0.9-7.9,1.3c-5.2,0.4-8.7,0.6-10.5,0.6c-1.3,0-2.1-0.2-2.6-0.7h-25.5c-1.6-0.2-2.9-1-4-2.6l-33.1-39
c-0.2-0.2-0.5-0.6-1-1.2c-0.5-0.6-1-1.1-1.4-1.4c-0.5-0.3-1-0.5-1.4-0.5c-0.3,0-0.7,1-1.2,3.1v38.6c0,1.3-0.5,1.9-1.4,1.9h-32.4
c-2.9,0-4.8-0.6-5.7-1.9c-1-1.3-1.6-3.4-1.9-6.4c0-14.1,0.1-32,0.4-53.7c0.2-21.7,0.4-38,0.4-48.9c0-1.7-0.1-8.1-0.2-19l-0.5-16.4
C867.4,343.1,867.8,337.2,868.1,336.9z M948.3,392.3c0-4.4-1-8.3-3.1-11.7c-4-6.2-12.2-9.3-24.8-9.3c-2.2,0-5.6,0.2-10,0.5
l-2.1,2.4c0,2.1-0.1,5.3-0.2,9.6c-0.2,4.4-0.3,8.1-0.4,11.1c-0.1,3-0.1,5.2-0.1,6.4c0,10.6,1,16.6,2.9,17.9h2.6
c13.2-0.3,22.3-2.1,27.5-5.5C945.8,410.4,948.3,403.3,948.3,392.3z M1102.8,335h28.3c0.8,0,3.1,4.4,6.8,13.1
c3.7,8.7,5.6,13.6,5.6,14.5c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2
c-8.1-0.2-14.2-0.2-18.3-0.2c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2
c-1.1,0-3.3-0.2-6.7-0.6c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2
c-2.9,0-5.3,3.7-7.4,11.2c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9
c0-0.3,0-0.7,0.1-1.2c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2
c3.2-8.2,8.6-22,16.3-41.2c7.7-19.2,13.5-34,17.5-44.5C1096.8,335.6,1098.8,335,1102.8,335z M1105.2,446.1h6.2
c11.4-0.3,17.1-1,17.1-1.9c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4
c-4.5,10.9-6.8,17.4-6.8,19.3C1099.9,445.1,1101.7,446.1,1105.2,446.1z M1388.2,426.3c0,0.3-0.1,1-0.2,2.1
c-0.2,1.1-0.3,2.2-0.5,3.3l-0.2,1.4c0,6.8,0.2,17.1,0.5,30.7c0.3,13.6,0.5,23.8,0.5,30.5c0,4.6-1,6.9-2.9,6.9h-30.9
c-2.5,0-4.4-0.9-5.5-2.6l-29.3-43.8c-0.2-0.6-0.9-1.7-2.1-3.1c-1.3-1.4-1.9-2.2-1.9-2.4l-24-34.7l-2.9-3.1l-0.5,1
c0,58.9-0.7,88.3-2.1,88.3h-37.6l-1.4-0.7c0-12.2,0.2-33.2,0.5-63c0.3-29.8,0.5-51.8,0.5-66.3c0-10.9-0.2-19.2-0.5-24.8l1-6.9
l4.8-1l30,1c0.8,0,1.7,0.8,2.9,2.4c1.1,1.6,1.8,2.9,2.1,3.8l22.4,32.4c0.3,0.6,0.9,1.5,1.8,2.7c0.9,1.2,1.5,2.1,1.8,2.7l30.7,42.1
c0.5,1.1,1.1,1.7,1.9,1.7c0.5,0,0.7-0.2,0.7-0.7v-85.9l1.4-1.2c0.2-0.2,3.6-0.2,10.2-0.2c18.7,0,28.1,0.3,28.1,1l1,1.4V426.3z
M1513.3,448.5c-2.4-2.4-5.4-4.8-9.2-7.3c-3.7-2.5-8-5.1-12.9-7.9c-4.8-2.8-7.8-4.6-8.9-5.4c-20.5-13-30.7-28.7-30.7-47.1
c0-15.4,5.4-26.9,16.2-34.5c10.8-7.6,24.8-11.4,41.9-11.4c9.4,0,18.8,1.9,28.3,5.7c1.7,0.6,4.6,1.9,8.4,3.8c3.9,1.9,5.8,3.3,5.8,4
l-0.2,1.2c0,0.2-0.2,0.4-0.5,0.8c-0.3,0.4-0.5,0.8-0.5,1.1c-4.9,10.2-9.7,18.4-14.3,24.8c-0.2,0.5-0.6,0.7-1.2,0.7
c-0.6,0-4.3-1.3-10.9-3.9c-6.7-2.6-11.8-3.9-15.5-3.9c-3.5,0-6.7,1-9.8,2.9c-3,1.9-4.5,4.5-4.5,7.9c0,4.3,2.4,8.3,7.1,12.1
c3.2,2.4,9.5,6.6,19,12.6c2.1,1.4,4.8,3.3,8.1,5.6c3.3,2.3,5.9,4.1,7.9,5.5c1.9,1.3,4,3,6.4,5c2.4,2,4.4,3.9,5.9,5.8
c3.8,4.9,6.4,9.4,7.7,13.3c1.3,4,2,8.8,2,14.5c0,14.9-5.6,27.2-16.9,36.8c-11.3,9.6-24.7,14.4-40.2,14.4c-17,0-32.9-4.1-47.8-12.4
c-6.7-4.1-10-6.6-10-7.4v-1c7-12.7,12.8-22.5,17.4-29.5c2.2,0,4.8,1.1,7.7,3.3c2.9,2.2,4.6,3.4,5.1,3.6c8.4,4.3,18,6.4,28.8,6.4
c9.4,0,14-3.5,14-10.5C1517.4,455.2,1516,452,1513.3,448.5z M1671.1,335h28.3c0.8,0,3.1,4.4,6.8,13.1c3.7,8.7,5.6,13.6,5.6,14.5
c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2c-8.1-0.2-14.2-0.2-18.3-0.2
c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2c-1.1,0-3.3-0.2-6.7-0.6
c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2c-2.9,0-5.3,3.7-7.4,11.2
c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9c0-0.3,0-0.7,0.1-1.2
c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2c3.2-8.2,8.6-22,16.3-41.2
c7.7-19.2,13.5-34,17.5-44.5C1665.1,335.6,1667.2,335,1671.1,335z M1673.5,446.1h6.2c11.4-0.3,17.1-1,17.1-1.9
c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4s-6.8,17.4-6.8,19.3
C1668.3,445.1,1670,446.1,1673.5,446.1z M1851.1,334c4.9,0,7.4,0.9,7.4,2.6v48.6c0,1.6,0.2,2.4,0.5,2.4c1.1,0,2.5-1,4.2-3.1
c1.7-2.1,3.4-4.4,5.1-7c1.7-2.6,3.1-4.3,4-5.1l26.7-36.2c0.8-1,1.9-1.4,3.3-1.4h35.2l5.7,1c0.3,0,0.5,0.3,0.5,1
c0,1.1-0.2,1.8-0.5,2.1l-10.2,16.2l-1.4,1l-30.5,40.7c-0.5,0.5-0.7,1.1-0.7,1.9c0,1.1,0.2,2.1,0.7,2.9l46.2,95.4c0,0.2,0,0.4,0,0.7
l0.2,0.7c0,2.7-4.8,4-14.3,4c-5.6,0-12-0.2-19.4-0.7c-7.4-0.5-11.5-0.7-12.3-0.7l-1.7-1.2c-1-1-9.8-19.3-26.7-55
c-0.2-1.3-1.3-3.8-3.3-7.6c-0.5,0-2.3,2.2-5.6,6.7c-3.3,4.4-5,7.1-5.4,7.9c0,2.9,0,7.5,0.1,13.8c0.1,6.3,0.1,12.3,0.1,17.8
c0,11.3-1.3,17.1-3.8,17.6c-3.2,0-7.1,0.1-11.9,0.4c-4.8,0.2-8,0.4-9.8,0.4c-2.7,0-6.3-0.3-10.9-1c-4.6-0.6-6.9-1.2-6.9-1.7v-81.9
c1-7.6,1.4-12,1.4-13.1c0-7.1-0.3-17.8-1-32.1c-0.6-14.3-1-24.9-1-31.9c0-2.9,0.6-4.6,1.9-5.2C1825.4,334.2,1836.6,334,1851.1,334z
"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -0,0 +1 @@
export const TRANSAK_API_KEY = '25ac1309-a49b-4411-b20e-5e56c61a5b1c'; // It's a public key, which will be included in a URL for Transak.

View File

@ -5,6 +5,23 @@ import {
RINKEBY_CHAIN_ID,
ROPSTEN_CHAIN_ID,
} from '../../../shared/constants/network';
import { TRANSAK_API_KEY } from '../constants/on-ramp';
/**
* Create a Transak Checkout URL.
* API docs here: https://www.notion.so/Query-Parameters-9ec523df3b874ec58cef4fa3a906f238
* @param {String} address Ethereum destination address
* @returns String
*/
const createTransakUrl = (address) => {
const queryParams = new URLSearchParams({
apiKey: TRANSAK_API_KEY,
hostURL: 'https://metamask.io',
defaultCryptoCurrency: 'ETH',
walletAddress: address,
});
return `https://global.transak.com/?${queryParams}`;
};
/**
* Gives the caller a url at which the user can acquire eth, depending on the network they are in
@ -26,6 +43,8 @@ export default function getBuyEthUrl({ chainId, address, service }) {
switch (service) {
case 'wyre':
return `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
case 'transak':
return createTransakUrl(address);
case 'metamask-faucet':
return 'https://faucet.metamask.io/';
case 'rinkeby-faucet':

View File

@ -5,6 +5,7 @@ import {
RINKEBY_CHAIN_ID,
ROPSTEN_CHAIN_ID,
} from '../../../shared/constants/network';
import { TRANSAK_API_KEY } from '../constants/on-ramp';
import getBuyEthUrl from './buy-eth-url';
describe('buy-eth-url', function () {
@ -23,7 +24,7 @@ describe('buy-eth-url', function () {
chainId: KOVAN_CHAIN_ID,
};
it('returns wyre url with address for network 1', function () {
it('returns Wyre url with an ETH address for Ethereum mainnet', function () {
const wyreUrl = getBuyEthUrl(mainnet);
assert.equal(
@ -32,6 +33,15 @@ describe('buy-eth-url', function () {
);
});
it('returns Transak url with an ETH address for Ethereum mainnet', function () {
const transakUrl = getBuyEthUrl({ ...mainnet, service: 'transak' });
assert.equal(
transakUrl,
`https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc`,
);
});
it('returns metamask ropsten faucet for network 3', function () {
const ropstenUrl = getBuyEthUrl(ropsten);
assert.equal(ropstenUrl, 'https://faucet.metamask.io/');

View File

@ -14,6 +14,7 @@ export default class DepositEtherModal extends Component {
isTestnet: PropTypes.bool.isRequired,
isMainnet: PropTypes.bool.isRequired,
toWyre: PropTypes.func.isRequired,
toTransak: PropTypes.func.isRequired,
address: PropTypes.string.isRequired,
toFaucet: PropTypes.func.isRequired,
hideWarning: PropTypes.func.isRequired,
@ -87,6 +88,7 @@ export default class DepositEtherModal extends Component {
const {
chainId,
toWyre,
toTransak,
address,
toFaucet,
isTestnet,
@ -138,6 +140,31 @@ export default class DepositEtherModal extends Component {
},
hide: !isMainnet,
})}
{this.renderRow({
logo: (
<div
className="deposit-ether-modal__logo"
style={{
backgroundImage: "url('./images/transak.svg')",
height: '60px',
}}
/>
),
title: this.context.t('buyWithTransak'),
text: this.context.t('buyWithTransakDescription'),
buttonLabel: this.context.t('continueToTransak'),
onButtonClick: () => {
this.context.metricsEvent({
eventOpts: {
category: 'Accounts',
action: 'Deposit Ether',
name: 'Click buy Ether via Transak',
},
});
toTransak(address);
},
hide: !isMainnet,
})}
{this.renderRow({
logo: (
<img

View File

@ -27,6 +27,9 @@ function mapDispatchToProps(dispatch) {
toWyre: (address) => {
dispatch(buyEth({ service: 'wyre', address }));
},
toTransak: (address) => {
dispatch(buyEth({ service: 'transak', address }));
},
hideModal: () => {
dispatch(hideModal());
},