bridge_ui: Show featured markets when redeemed tokens, link to Jupiter swap

bridge_ui/src/components/Transfer/FeaturedMarkets.tsx

@@ -0,0 +1,108 @@
+import { Button, makeStyles, Typography } from "@material-ui/core";
+import { Launch } from "@material-ui/icons";
+import { TokenInfo } from "@solana/spl-token-registry";
+import { useSelector } from "react-redux";
+import useMarketsMap from "../../hooks/useMarketsMap";
+import { DataWrapper } from "../../store/helpers";
+import {
+  selectSolanaTokenMap,
+  selectTransferSourceAsset,
+  selectTransferSourceChain,
+  selectTransferTargetAsset,
+  selectTransferTargetChain,
+} from "../../store/selectors";
+import { JUPITER_SWAP_BASE_URL } from "../../utils/consts";
+
+const useStyles = makeStyles((theme) => ({
+  description: {
+    marginTop: theme.spacing(1),
+  },
+  button: {
+    margin: theme.spacing(0.5, 0.5),
+  },
+}));
+
+function getJupiterSwapUrl(
+  link: string,
+  targetAsset: string,
+  tokenMap: DataWrapper<TokenInfo[]>
+) {
+  if (!tokenMap.error && !tokenMap.isFetching && tokenMap.data) {
+    const tokenInfo = tokenMap.data.find((value) => {
+      return value.address === targetAsset;
+    });
+    if (tokenInfo) {
+      const sourceSymbol = tokenInfo.symbol;
+      if (sourceSymbol) {
+        const targetSymbol = sourceSymbol === "UST" ? "SOL" : "UST";
+        return `${JUPITER_SWAP_BASE_URL}/${sourceSymbol}-${targetSymbol}`;
+      }
+    }
+  }
+  return link;
+}
+
+export default function FeaturedMarkets() {
+  const sourceChain = useSelector(selectTransferSourceChain);
+  const sourceAsset = useSelector(selectTransferSourceAsset);
+  const targetChain = useSelector(selectTransferTargetChain);
+  const targetAsset = useSelector(selectTransferTargetAsset);
+  const solanaTokenMap = useSelector(selectSolanaTokenMap);
+  const { data: marketsData } = useMarketsMap(true);
+  const classes = useStyles();
+
+  if (
+    !sourceAsset ||
+    !targetAsset ||
+    !marketsData ||
+    !marketsData.markets ||
+    !marketsData.tokenMarkets
+  ) {
+    return null;
+  }
+
+  const tokenMarkets =
+    marketsData.tokenMarkets[sourceChain]?.[targetChain]?.[sourceAsset];
+  if (!tokenMarkets) {
+    return null;
+  }
+
+  const tokenMarketButtons = [];
+  for (const market of tokenMarkets.markets) {
+    const marketInfo = marketsData.markets[market];
+    if (marketInfo) {
+      const url =
+        market === "jupiter"
+          ? getJupiterSwapUrl(marketInfo.link, sourceAsset, solanaTokenMap)
+          : marketInfo.link;
+      tokenMarketButtons.push(
+        <Button
+          key={market}
+          size="small"
+          variant="outlined"
+          color="secondary"
+          endIcon={<Launch />}
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.button}
+        >
+          {marketInfo.name}
+        </Button>
+      );
+    }
+  }
+
+  return tokenMarketButtons.length ? (
+    <div style={{ textAlign: "center" }}>
+      <Typography
+        variant="subtitle2"
+        gutterBottom
+        className={classes.description}
+      >
+        Featured markets
+      </Typography>
+      {tokenMarketButtons}
+    </div>
+  ) : null;
+}

bridge_ui/src/components/Transfer/RedeemPreview.tsx

@@ -9,6 +9,7 @@ import { reset } from "../../store/transferSlice";
 import ButtonWithLoader from "../ButtonWithLoader";
 import ShowTx from "../ShowTx";
 import AddToMetamask from "./AddToMetamask";
+import FeaturedMarkets from "./FeaturedMarkets";
 
 const useStyles = makeStyles((theme) => ({
   description: {
@@ -39,6 +40,7 @@ export default function RedeemPreview() {
       </Typography>
       {redeemTx ? <ShowTx chainId={targetChain} tx={redeemTx} /> : null}
       <AddToMetamask />
+      <FeaturedMarkets />
       <ButtonWithLoader onClick={handleResetClick}>
         Transfer More Tokens!
       </ButtonWithLoader>

bridge_ui/src/utils/consts.ts

@@ -898,3 +898,5 @@ export const POLYGON_TERRA_WRAPPED_TOKENS = [
   "0x692597b009d13c4049a947cab2239b7d6517875f", // Wrapped UST Token
   "0x24834bbec7e39ef42f4a75eaf8e5b6486d3f0e57", // Wrapped LUNA Token
 ];
+
+export const JUPITER_SWAP_BASE_URL = "https://jup.ag/swap";