[WEB] Add useBuyTezUrl hook

trilitech · Jan 9, 2025 · 6c0371d · 6c0371d
1 parent bb3624f
commit 6c0371d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/apps/web/src/components/AccountCard/AccountBalance.tsx b/apps/web/src/components/AccountCard/AccountBalance.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Link, Text } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { useCurrentAccount, useGetAccountBalance, useGetDollarBalance } from "@umami/state";
+import { useBuyTezUrl, useCurrentAccount, useGetAccountBalance, useGetDollarBalance } from "@umami/state";
 import { TEZ, prettyTezAmount } from "@umami/tezos";
 
 import { SendTezButton } from "./SendTezButton";
@@ -19,7 +19,7 @@ export const AccountBalance = () => {
   const usdBalance = useGetDollarBalance()(address);
   const isVerified = useIsAccountVerified();
 
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${address}&network=tezos&commodity_id=xtz.simple.tezos`;
+  const buyTezUrl = useBuyTezUrl(address);
 
   const getUsdBalance = () => {
     if (balance === undefined) {

diff --git a/apps/web/src/views/Activity/Activity.tsx b/apps/web/src/views/Activity/Activity.tsx
@@ -1,7 +1,7 @@
 import { Box, Center, Divider, Flex, Image, Spinner } from "@chakra-ui/react";
 import { type Account } from "@umami/core";
 import { useGetOperations } from "@umami/data-polling";
-import { useCurrentAccount } from "@umami/state";
+import { useBuyTezUrl, useCurrentAccount } from "@umami/state";
 
 import loadingDots from "../../assets/loading-dots.gif";
 import { EmptyMessage } from "../../components/EmptyMessage";
@@ -21,7 +21,7 @@ export const Activity = () => {
     isVerified
   );
 
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${currentAccount?.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  const buyTezUrl = useBuyTezUrl(currentAccount?.address.pkh);
 
   const isEmpty = operations.length === 0 && !isLoading;
 

diff --git a/apps/web/src/views/Tokens/Tokens.tsx b/apps/web/src/views/Tokens/Tokens.tsx
@@ -1,6 +1,6 @@
 import { Flex, VStack } from "@chakra-ui/react";
 import { fullId } from "@umami/core";
-import { useCurrentAccount, useGetAccountAllTokens } from "@umami/state";
+import { useBuyTezUrl, useCurrentAccount, useGetAccountAllTokens } from "@umami/state";
 
 import { Token } from "./Token";
 import { EmptyMessage } from "../../components/EmptyMessage";
@@ -12,8 +12,8 @@ export const Tokens = () => {
   const isVerified = useIsAccountVerified();
   const currentAccount = useCurrentAccount()!;
   const availableTokens = useGetAccountAllTokens()(currentAccount.address.pkh);
-
-  const buyTezUrl = `https://widget.wert.io/default/widget/?commodity=XTZ&address=${currentAccount.address.pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  
+  const buyTezUrl = useBuyTezUrl(currentAccount.address.pkh);
 
   return (
     <>

diff --git a/packages/state/src/hooks/network.ts b/packages/state/src/hooks/network.ts
@@ -1,10 +1,22 @@
+import { MAINNET } from "@umami/tezos";
 import { useDispatch } from "react-redux";
 
 import { useAppSelector } from "./useAppSelector";
 import { assetsActions, networksActions } from "../slices";
 
 export const useSelectedNetwork = () => useAppSelector(s => s.networks.current);
 
+export const useBuyTezUrl = (pkh?: string) => {
+  const network = useSelectedNetwork();
+  let buyTezUrl = network.buyTezUrl;
+
+  if (buyTezUrl && network === MAINNET) {
+    buyTezUrl += `/default/widget/?commodity=XTZ&address=${pkh}&network=tezos&commodity_id=xtz.simple.tezos`;
+  }
+
+  return buyTezUrl;
+};
+
 export const useAvailableNetworks = () => useAppSelector(s => s.networks.available);
 
 export const useFindNetwork = () => {