Open fiat ramp in popup window (#211)

* Open fiat ramp in popup window * Add copy for 'sell' crypto if balance is available
unstoppabledomains · Oct 15, 2024 · b0e0afc · b0e0afc
1 parent c003fc2
commit b0e0afc
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 8 deletions.
diff --git 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
@@ -27,22 +27,78 @@ const useStyles = makeStyles()((theme: Theme) => ({
 }));
 
 type Props = {
+  isSellEnabled?: boolean;
   onCancelClick: () => void;
   wallets: SerializedWalletBalance[];
 };
 
-const Buy: React.FC<Props> = ({onCancelClick, wallets}) => {
+const Buy: React.FC<Props> = ({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<Props> = ({onCancelClick, wallets}) => {
         onSelectAsset={handleBuyRedirect}
         wallets={wallets}
         onCancelClick={onCancelClick}
-        label={t('wallet.selectAssetToBuy')}
+        label={t(
+          isSellEnabled
+            ? 'wallet.selectAssetToBuySell'
+            : 'wallet.selectAssetToBuy',
+        )}
         supportedTokenList={config.WALLETS.CHAINS.BUY}
       />
     </Box>

diff --git 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<ClientProps> = ({
   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<ClientProps> = ({
           </Box>
         ) : isBuy ? (
           <Box className={classes.panelContainer}>
-            <Buy onCancelClick={handleCancel} wallets={wallets} />
+            <Buy
+              onCancelClick={handleCancel}
+              isSellEnabled={isSellEnabled}
+              wallets={wallets}
+            />
           </Box>
         ) : (
           <TabContext value={tabValue as ClientTabType}>
@@ -475,7 +480,7 @@ export const Client: React.FC<ClientProps> = ({
                     variant={isMobile ? 'caption' : 'body1'}
                     className={classes.actionText}
                   >
-                    {t('common.buy')}
+                    {t(isSellEnabled ? 'common.buySell' : 'common.buy')}
                   </Typography>
                 </Box>
               </Box>

diff --git 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
@@ -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