From b0e0afcc1904028297d17894b91ed73ddc86e183 Mon Sep 17 00:00:00 2001 From: Aaron Quirk Date: Tue, 15 Oct 2024 12:05:12 -0400 Subject: [PATCH] Open fiat ramp in popup window (#211) * Open fiat ramp in popup window * Add copy for 'sell' crypto if balance is available --- packages/ui-components/package.json | 3 +- .../src/components/Wallet/Buy.tsx | 70 +++++++++++++++++-- .../src/components/Wallet/Client.tsx | 9 ++- packages/ui-components/src/locales/en.json | 2 + yarn.lock | 34 +++++++++ 5 files changed, 110 insertions(+), 8 deletions(-) diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index b7def283..79721311 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@unstoppabledomains/ui-components", - "version": "0.0.50-browser-extension.16", + "version": "0.0.50-browser-extension.17", "private": true, "description": "An open and reusable suite of Unstoppable Domains management components", "keywords": [ @@ -121,6 +121,7 @@ "devDependencies": { "@testing-library/react": "^12.1.2", "@testing-library/react-hooks": "^7.0.2", + "@types/chrome": "^0.0.268", "@types/jest": "^29.5.5", "eslint-plugin-i18n-json": "^3.1.0", "jest": "^29.1.0", diff --git a/packages/ui-components/src/components/Wallet/Buy.tsx b/packages/ui-components/src/components/Wallet/Buy.tsx index 688b070b..54d5c7a4 100644 --- a/packages/ui-components/src/components/Wallet/Buy.tsx +++ b/packages/ui-components/src/components/Wallet/Buy.tsx @@ -27,22 +27,78 @@ const useStyles = makeStyles()((theme: Theme) => ({ })); type Props = { + isSellEnabled?: boolean; onCancelClick: () => void; wallets: SerializedWalletBalance[]; }; -const Buy: React.FC = ({onCancelClick, wallets}) => { +const Buy: React.FC = ({isSellEnabled, onCancelClick, wallets}) => { const [t] = useTranslationContext(); const {classes} = useStyles(); - const handleBuyRedirect = (asset: TokenEntry) => { + const handleBuyRedirect = async (asset: TokenEntry) => { + // popup window dimensions + const popupWidth = 400; + const popupHeight = 700; + + // build the URL for standalone fiat ramp on e-commerce const queryParams = stringify({ blockchain: asset.name.toLowerCase(), address: asset.walletAddress, utm_source: 'ud_me', }); - const url = `${config.UNSTOPPABLE_WEBSITE_URL}/fiat-ramps?${queryParams}`; - window.open(url, '_blank'); + const url = `${config.UNSTOPPABLE_WEBSITE_URL}/fiat-ramps/popup?${queryParams}`; + + // open in extension popup if available + if (chrome?.windows) { + // lookup the parent window dimensions + const parentWindow = await chrome.windows.getCurrent(); + + // determine location of popup based on parent window + const popupTop = parentWindow?.top; + const popupLeft = + parentWindow?.left && parentWindow?.top + ? parentWindow.left + (parentWindow.width || 0) - popupWidth + : undefined; + + // open the popup + await chrome.windows.create({ + url, + type: 'popup', + focused: true, + left: popupLeft, + top: popupTop, + width: popupWidth, + height: popupHeight, + }); + + // close the extension window + window.close(); + return; + } + + // determine location of popup based on parent window + const popupTop = window.top; + const popupLeft = + window.screenLeft && window.top + ? window.screenLeft + window.innerWidth - popupWidth + : undefined; + + // fallback to standard popup + window.open( + url, + '_blank', + `toolbar=no, + location=no, + status=no, + menubar=no, + scrollbars=yes, + resizable=no, + width=${popupWidth}, + height=${popupHeight} + left=${popupLeft} + top=${popupTop}`, + ); }; return ( @@ -52,7 +108,11 @@ const Buy: React.FC = ({onCancelClick, wallets}) => { onSelectAsset={handleBuyRedirect} wallets={wallets} onCancelClick={onCancelClick} - label={t('wallet.selectAssetToBuy')} + label={t( + isSellEnabled + ? 'wallet.selectAssetToBuySell' + : 'wallet.selectAssetToBuy', + )} supportedTokenList={config.WALLETS.CHAINS.BUY} /> diff --git a/packages/ui-components/src/components/Wallet/Client.tsx b/packages/ui-components/src/components/Wallet/Client.tsx index ff3d372e..47cd292c 100644 --- a/packages/ui-components/src/components/Wallet/Client.tsx +++ b/packages/ui-components/src/components/Wallet/Client.tsx @@ -200,6 +200,7 @@ export const Client: React.FC = ({ const cryptoValue = wallets .map(w => w.totalValueUsdAmt || 0) .reduce((p, c) => p + c, 0); + const isSellEnabled = cryptoValue >= 15; // component state variables const [isSend, setIsSend] = useState(false); @@ -419,7 +420,11 @@ export const Client: React.FC = ({ ) : isBuy ? ( - + ) : ( @@ -475,7 +480,7 @@ export const Client: React.FC = ({ variant={isMobile ? 'caption' : 'body1'} className={classes.actionText} > - {t('common.buy')} + {t(isSellEnabled ? 'common.buySell' : 'common.buy')} diff --git a/packages/ui-components/src/locales/en.json b/packages/ui-components/src/locales/en.json index 41a300d6..4a3b0c1e 100644 --- a/packages/ui-components/src/locales/en.json +++ b/packages/ui-components/src/locales/en.json @@ -145,6 +145,7 @@ "blockchain": "Blockchain", "bulkSave": "Bulk Save", "buy": "Buy", + "buySell": "Buy / Sell", "cancel": "Cancel", "cart": "Cart", "claim": "Claim", @@ -947,6 +948,7 @@ "resolvedDomain": "Wallet found for {{resolvedDomain}}", "retrievingGasPrice": "Checking {{blockchain}} network health...", "selectAssetToBuy": "Select crypto to buy", + "selectAssetToBuySell": "Select crypto to buy or sell", "selectAssetToReceive": "Select crypto to receive", "selectAssetToSend": "Select crypto to send", "sendByEmail": "Send to email address", diff --git a/yarn.lock b/yarn.lock index f9144b06..5c3d3442 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4289,6 +4289,16 @@ __metadata: languageName: node linkType: hard +"@types/chrome@npm:^0.0.268": + version: 0.0.268 + resolution: "@types/chrome@npm:0.0.268" + dependencies: + "@types/filesystem": "*" + "@types/har-format": "*" + checksum: c7ae2479b225beea673681df0a6022f251e98bdf1c162c84363d52efb32edf5d26cf8007d6ed92d497837212a1c2cfa6ad9c3c1c0d0169e0a5189fa084555ee4 + languageName: node + linkType: hard + "@types/classnames@npm:^2.2.11": version: 2.3.1 resolution: "@types/classnames@npm:2.3.1" @@ -4395,6 +4405,22 @@ __metadata: languageName: node linkType: hard +"@types/filesystem@npm:*": + version: 0.0.36 + resolution: "@types/filesystem@npm:0.0.36" + dependencies: + "@types/filewriter": "*" + checksum: fad9f6b291598e65a0c5e73e685977b2c86c9bdb1ede5ce29eb35f196bbdf8d668a32bd4361624391ae1eb699362daa13442b75177dd73c6b300967fdd1ed765 + languageName: node + linkType: hard + +"@types/filewriter@npm:*": + version: 0.0.33 + resolution: "@types/filewriter@npm:0.0.33" + checksum: 56ba7f0d3c2dafbb899e7f5a9574df41d2f07494040aa09f9fd51c7004c0b255c36c554333c380b23625afb50e50cf1d13f5925d956a627d4ee6e3fbe8f3176b + languageName: node + linkType: hard + "@types/glob@npm:^7.1.1": version: 7.2.0 resolution: "@types/glob@npm:7.2.0" @@ -4414,6 +4440,13 @@ __metadata: languageName: node linkType: hard +"@types/har-format@npm:*": + version: 1.2.16 + resolution: "@types/har-format@npm:1.2.16" + checksum: 8012e244818e50492d6785dc2e11287532eff0cd72337f4bcee75f5c15a49da06f237b2afdc81c1b1cfec0757609edf0101fa1f9f50e9cdf7f562c07b6e760ac + languageName: node + linkType: hard + "@types/hast@npm:^2.0.0": version: 2.3.6 resolution: "@types/hast@npm:2.3.6" @@ -5333,6 +5366,7 @@ __metadata: "@testing-library/react": ^12.1.2 "@testing-library/react-hooks": ^7.0.2 "@types/bluebird": 3.5.34 + "@types/chrome": ^0.0.268 "@types/crypto-js": ^4.2.1 "@types/humanize-plus": ^1.8.2 "@types/jest": ^29.5.5