Qortal/q-shop
3
0
Fork 0
mirror of https://github.com/Qortal/q-shop.git synced 2025-01-30 14:52:20 +00:00
Code Issues Projects Releases Wiki Activity

Fixed ARRR toggle bug

Browse Source
This commit is contained in:
Justin Ferrari 2023-12-11 02:57:00 -05:00
parent 912b0adddc
commit 3afb8f8506
2 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Product/ProductPage-styles.tsx
View File

@ -128,8 +128,8 @@ export const BackToStoreButton = styled(Button)(({ theme }) => ({
})); }));
export const ArrrSwitch = styled(Switch)(({ theme }) => ({ export const ArrrSwitch = styled(Switch)(({ theme }) => ({
position: "absolute", position: "fixed",
bottom: "-200px", bottom: "0",
right: "30px", right: "30px",
width: 88, width: 88,
height: 57, height: 57,

126
src/pages/Product/ProductPage.tsx
View File

@ -55,40 +55,38 @@ export const ProductPage = () => {
const productID: string = params.product || ""; const productID: string = params.product || "";
const catalogueID: string = params.catalogue || ""; const catalogueID: string = params.catalogue || "";
const storeId: string = params.store || ""; const storeId: string = params.store || "";
const currentStore = useSelector(
(state: RootState) => state.global.currentStore
);
const currentViewedStore = useSelector( const currentViewedStore = useSelector(
(state: RootState) => state.store.currentViewedStore (state: RootState) => state.store.currentViewedStore
); );
const [product, setProduct] = useState<Product | null>(null); const [product, setProduct] = useState<Product | null>(null);
const [cartAddAmount, setCartAddAmount] = useState<number>(0); const [cartAddAmount, setCartAddAmount] = useState<number>(0);
const preferredCoin = useSelector((state: RootState) => state.store.preferredCoin); const preferredCoin = useSelector(
const [exchangeRate, setExchangeRate] = useState<number | null>( (state: RootState) => state.store.preferredCoin
null
); );
const [exchangeRate, setExchangeRate] = useState<number | null>(null);
const catalogueHashMap = useSelector( const catalogueHashMap = useSelector(
(state: RootState) => state.global.catalogueHashMap (state: RootState) => state.global.catalogueHashMap
); );
const carts = useSelector((state: RootState) => state.cart.carts); const carts = useSelector((state: RootState) => state.cart.carts);
const user = useSelector((state: RootState) => state.auth.user); const user = useSelector((state: RootState) => state.auth.user);
const calculateARRRExchangeRate = async()=> { const calculateARRRExchangeRate = async () => {
try { try {
const url = '/crosschain/price/PIRATECHAIN?maxtrades=10&inverse=true' const url = "/crosschain/price/PIRATECHAIN?maxtrades=10&inverse=true";
const info = await fetch(url, { const info = await fetch(url, {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); });
const responseDataStore = await info.text(); const responseDataStore = await info.text();
const ratio = +responseDataStore /100000000 const ratio = +responseDataStore / 100000000;
if(isNaN(ratio)) throw new Error('Cannot get exchange rate') if (isNaN(ratio)) throw new Error("Cannot get exchange rate");
setExchangeRate(ratio) setExchangeRate(ratio);
} catch (error) { } catch (error) {
dispatch(setPreferredCoin(CoinFilter.qort)) dispatch(setPreferredCoin(CoinFilter.qort));
dispatch( dispatch(
setNotification({ setNotification({
alertType: "error", alertType: "error",
@ -96,37 +94,44 @@ export const ProductPage = () => {
}) })
); );
} }
};
} const storeToUse = useMemo(() => {
const storeToUse = useMemo(()=> { return currentViewedStore;
return storeOwner === user?.name }, [storeOwner, user?.name, currentViewedStore]);
? currentStore
: currentViewedStore
}, [storeOwner, user?.name, currentStore, currentViewedStore])
const switchCoin = async ()=> { const switchCoin = async () => {
dispatch(setIsLoadingGlobal(true)); dispatch(setIsLoadingGlobal(true));
await calculateARRRExchangeRate() await calculateARRRExchangeRate();
dispatch(setIsLoadingGlobal(false)); dispatch(setIsLoadingGlobal(false));
};
useEffect(() => {
} if (
preferredCoin === CoinFilter.arrr &&
useEffect(()=> { storeToUse?.supportedCoins?.includes(CoinFilter.arrr)
if(preferredCoin === CoinFilter.arrr && storeToUse?.supportedCoins?.includes(CoinFilter.arrr)){ ) {
switchCoin() switchCoin();
}
}, [preferredCoin, storeToUse])
const coinToUse = useMemo(()=> {
if(preferredCoin === CoinFilter.arrr && storeToUse?.supportedCoins?.includes(CoinFilter.arrr)){
return CoinFilter.arrr
} else {
return CoinFilter.qort
} }
}, [preferredCoin, storeToUse]) }, [preferredCoin, storeToUse]);
useEffect(() => {
if (!storeToUse && storeOwner !== user?.name) {
navigate(`/${storeOwner}/${storeId}`);
}
}, [storeToUse, storeOwner, user?.name]);
const coinToUse = useMemo(() => {
if (
preferredCoin === CoinFilter.arrr &&
storeToUse?.supportedCoins?.includes(CoinFilter.arrr)
) {
return CoinFilter.arrr;
} else {
return CoinFilter.qort;
}
}, [preferredCoin, storeToUse]);
const { checkAndUpdateResourceCatalogue, getCatalogue } = useFetchOrders(); const { checkAndUpdateResourceCatalogue, getCatalogue } = useFetchOrders();
@ -170,14 +175,15 @@ export const ProductPage = () => {
awaitProductData(); awaitProductData();
}, [catalogueHashMap]); }, [catalogueHashMap]);
let price = product?.price?.find(item => item?.currency === "qort")?.value; let price = product?.price?.find(item => item?.currency === "qort")?.value;
const priceArrr = product?.price?.find(item => item?.currency === CoinFilter.arrr)?.value; const priceArrr = product?.price?.find(
item => item?.currency === CoinFilter.arrr
)?.value;
if(coinToUse === CoinFilter.arrr && priceArrr) { if (coinToUse === CoinFilter.arrr && priceArrr) {
price = +priceArrr price = +priceArrr;
} else if(price && exchangeRate && coinToUse !== CoinFilter.qort){ } else if (price && exchangeRate && coinToUse !== CoinFilter.qort) {
price = +price * exchangeRate price = +price * exchangeRate;
} }
const addToCart = () => { const addToCart = () => {
@ -270,16 +276,16 @@ export const ProductPage = () => {
{product.description} {product.description}
</ProductDescription> </ProductDescription>
<ProductPriceRow> <ProductPriceRow>
{coinToUse === CoinFilter.qort && ( {coinToUse === CoinFilter.qort && (
<ProductPrice> <ProductPrice>
<QortalSVG <QortalSVG
height={"26"} height={"26"}
width={"26"} width={"26"}
color={theme.palette.text.primary} color={theme.palette.text.primary}
/>{" "} />{" "}
{price} {price}
</ProductPrice> </ProductPrice>
)} )}
{coinToUse === CoinFilter.arrr && ( {coinToUse === CoinFilter.arrr && (
<ProductPrice> <ProductPrice>
<ARRRSVG <ARRRSVG
@ -298,9 +304,9 @@ export const ProductPage = () => {
checked={coinToUse === CoinFilter.arrr} checked={coinToUse === CoinFilter.arrr}
onChange={() => { onChange={() => {
if (coinToUse !== CoinFilter.arrr) { if (coinToUse !== CoinFilter.arrr) {
dispatch(setPreferredCoin(CoinFilter.arrr)) dispatch(setPreferredCoin(CoinFilter.arrr));
} else { } else {
dispatch(setPreferredCoin(CoinFilter.qort)) dispatch(setPreferredCoin(CoinFilter.qort));
} }
}} }}
/> />