SOV-5053: Add PowPeg option to the Fund Wallet dialog (#2627)

* Add PowPeg to Fund Wallet dialog

* Do not mark PowPeg as recommended

Author: tiltom

src/app/components/UserAssets/components/UserAssetsTableRow.tsx

@@ -12,7 +12,6 @@ import { contractReader } from 'utils/sovryn/contract-reader';
 import { useAccount, useBlockSync } from 'app/hooks/useAccount';
 import { AssetRenderer } from '../../AssetRenderer/';
 import { Sovryn } from 'utils/sovryn';
-import { useMaintenance } from 'app/hooks/useMaintenance';
 import { Button, ButtonSize, ButtonStyle } from '../../Button';
 import { BridgeLink } from './BridgeLink';
 import { useDollarValue } from 'app/hooks/useDollarValue';
@@ -24,6 +23,7 @@ import usdtIcon from 'app/pages/BridgeDepositPage/dictionaries/assets/icons/usdt
 import usdcIcon from 'app/pages/BridgeDepositPage/dictionaries/assets/icons/usdc.svg';
 import daiIcon from 'app/pages/BridgeDepositPage/dictionaries/assets/icons/dai.svg';
 import { BABELFISH_APP_LINK } from 'utils/classifiers';
+import { useMaintenance } from 'app/hooks/useMaintenance';
 
 interface IUserAssetsTableRow {
   item: AssetDetails;
@@ -199,6 +199,29 @@ export const UserAssetsTableRow: React.FC<IUserAssetsTableRow> = ({
               </Tooltip>
             </>
           )}
+          {/* {asset === Asset.RBTC && (
+            <>
+              <Tooltip
+                position="top"
+                hoverOpenDelay={0}
+                hoverCloseDelay={0}
+                interactionKind="hover"
+                content={t(translations.userAssets.sendOrReceiveMessage, {
+                  asset,
+                })}
+                className="tw-flex tw-items-center"
+              >
+                <Button
+                  text={t(translations.common.sendOrReceive)}
+                  href={POWPEG_LINK}
+                  hrefExternal
+                  style={ButtonStyle.link}
+                  size={ButtonSize.sm}
+                  dataActionId={`portfolio-action-open-powpeg-${asset}`}
+                />
+              </Tooltip>
+            </>
+          )} */}
           {[Asset.USDT, Asset.RDOC].includes(asset) && (
             <Button
               text={t(translations.userAssets.actions.convert)}

src/app/pages/ReceiveRBTCPage/index.tsx

@@ -13,7 +13,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { Tooltip } from '@blueprintjs/core';
 import { useMaintenance } from 'app/hooks/useMaintenance';
-import { discordInvite } from 'utils/classifiers';
+import { discordInvite, POWPEG_LINK } from 'utils/classifiers';
 
 export const ReceiveRBTCPage: React.FC = () => {
   const { t } = useTranslation();
@@ -30,7 +30,7 @@ export const ReceiveRBTCPage: React.FC = () => {
     [fastBtcReceiveLocked],
   );
 
-  const btcButton = useMemo(
+  const fastBtcButton = useMemo(
     () => (
       <Link onClick={onBtcClicked} to="/fast-btc/deposit">
         <SelectBox disabled={fastBtcReceiveLocked}>
@@ -41,6 +41,17 @@ export const ReceiveRBTCPage: React.FC = () => {
     [fastBtcReceiveLocked, onBtcClicked],
   );
 
+  const powPegButton = useMemo(
+    () => (
+      <a href={POWPEG_LINK} target="_blank" rel="noreferrer noopener">
+        <SelectBox>
+          <img src={btcIcon} alt="PowPeg" />
+        </SelectBox>
+      </a>
+    ),
+    [],
+  );
+
   const onBankClicked = useCallback(
     e => {
       if (fastBtcReceiveLocked || transakLocked) {
@@ -96,8 +107,22 @@ export const ReceiveRBTCPage: React.FC = () => {
           <div className="tw-mb-20 tw-text-base tw-text-center tw-font-semibold">
             {t(translations.receiveRBTCPage.selectSource)}
           </div>
-          <div className="tw-flex tw-items-center tw-justify-center">
-            <div className="tw-text-center">
+          <div className="tw-flex tw-items-stretch tw-justify-center">
+            <div className="tw-text-center tw-h-full">
+              {powPegButton}
+              <p className="tw-mt-3 tw-font-medium">
+                {t(translations.receiveRBTCPage.powPeg)}
+              </p>
+              {/* <p className="tw-mt-3 tw-mb-1 tw-font-medium">
+                {t(translations.receiveRBTCPage.powPeg)} <br />
+              </p>
+
+              <p className="tw-my-0 tw-text-xs tw-font-medium tw-text-success-50">
+                {t(translations.common.recommended)}
+              </p> */}
+            </div>
+
+            <div className="tw-text-center tw-h-full">
               {fastBtcReceiveLocked ? (
                 <Tooltip
                   position="top"
@@ -122,17 +147,17 @@ export const ReceiveRBTCPage: React.FC = () => {
                     </>
                   }
                 >
-                  {btcButton}
+                  {fastBtcButton}
                 </Tooltip>
               ) : (
-                btcButton
+                fastBtcButton
               )}
               <p className="tw-mt-3 tw-font-medium">
-                {t(translations.receiveRBTCPage.bitcoinNetwork)}
+                {t(translations.receiveRBTCPage.fastBtc)}
               </p>
             </div>
 
-            <div className="tw-text-center">
+            <div className="tw-text-center tw-h-full">
               {fastBtcReceiveLocked || transakLocked ? (
                 <Tooltip
                   position="top"

src/locales/en/translation.json

@@ -37,7 +37,9 @@
     "walletCompatibility": "Wallet Compatibility",
     "send": "Send",
     "receive": "Receive",
-    "save": "Save"
+    "sendOrReceive": "Send / Receive",
+    "save": "Save",
+    "recommended": "Recommended"
   },
   "tradeEvents": {
     "CloseWithSwap": "Withdraw",
@@ -233,7 +235,8 @@
     "title": "Receive RBTC",
     "description": "Receive RBTC via bitcoin or bank/card transfer",
     "selectSource": "Select Source",
-    "bitcoinNetwork": "Bitcoin Network",
+    "fastBtc": "Fast BTC",
+    "powPeg": "PowPeg",
     "bankCard": "Bank/Card"
   },
   "fastBtcPage": {
@@ -1287,6 +1290,7 @@
     },
     "sendMessage": "Send {{asset}} from your connected address in the RSK network",
     "receiveMessage": "Receive {{asset}} to your connected address in the RSK network",
+    "sendOrReceiveMessage": "Send or receive {{asset}} from/to your connected address in the RSK network",
     "convertDialog": {
       "title": "Convert",
       "from": "From",

src/utils/classifiers.ts

@@ -159,6 +159,8 @@ export const CREATE_TICKET_LINK = 'https://help.sovryn.app/';
 
 export const BABELFISH_APP_LINK = 'https://app.babelfish.money';
 
+export const POWPEG_LINK = 'https://powpeg.rootstock.io/';
+
 export const WIKI_LIMIT_ORDER_LIMITS_LINK =
   'https://wiki.sovryn.app/en/sovryn-dapp/limit-order-limitations';
 export const WIKI_LIMIT_ORDER_WALLETS_LINK =