Skip to content

Commit

Permalink
Change the Claim button to be View on HUB and redirect to HUB
Browse files Browse the repository at this point in the history
  • Loading branch information
martincik committed Sep 12, 2024
1 parent 2649761 commit 8c9b793
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 304 deletions.
109 changes: 54 additions & 55 deletions src/layout/Main.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,30 @@
import { h } from 'preact';
import { h } from "preact";
import {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'preact/hooks';
import { Router, RouteComponent } from '../layout/Router';
import { Actions } from '../routes/Actions';
import { Stake } from '../routes/Stake';
import { Unstake } from '../routes/Unstake';
import { Claim } from '../routes/Claim';
import { Button } from '../components/wallet-adapter/ui/Button';
import { WalletConnectButton } from '../components/wallet-adapter/ui/WalletConnectButton';
import { WalletModalButton } from '../components/wallet-adapter/ui/WalletModalButton';
import { useWallet } from '../components/wallet-adapter/useWallet';
import { ConfigContext } from '../AppContext';
import env from '../libs/env';
import { clsxp } from '../libs/utils';
import { offchainBasicSubscriptionsSchema } from '../validations/subscriptions';
} from "preact/hooks";
import { Router, RouteComponent } from "../layout/Router";
import { Actions } from "../routes/Actions";
import { Stake } from "../routes/Stake";
import { Unstake } from "../routes/Unstake";
import { Button } from "../components/wallet-adapter/ui/Button";
import { WalletConnectButton } from "../components/wallet-adapter/ui/WalletConnectButton";
import { WalletModalButton } from "../components/wallet-adapter/ui/WalletModalButton";
import { useWallet } from "../components/wallet-adapter/useWallet";
import { ConfigContext } from "../AppContext";
import env from "../libs/env";
import { clsxp } from "../libs/utils";
import { offchainBasicSubscriptionsSchema } from "../validations/subscriptions";

const Main = () => {
const { publicKey, wallet, connected } = useWallet();
const [active, setActive] = useState(false);
const ref = useRef<HTMLUListElement>(null);
const {
element,
poolId,
classPrefix,
} = useContext(ConfigContext);
const { element, poolId, classPrefix } = useContext(ConfigContext);
const base58 = useMemo(() => publicKey?.toBase58(), [publicKey]);
const content = useMemo(() => {
if (!wallet || !base58) {
Expand All @@ -49,44 +44,49 @@ const Main = () => {
useEffect(() => {
if (connected && element && publicKey && poolId) {
(async () => {
const response = await fetch(`${env.GO_API_URL}/subscriptions/${publicKey.toBase58()}`);
const response = await fetch(
`${env.GO_API_URL}/subscriptions/${publicKey.toBase58()}`
);
if (!response.ok) {
console.log('ERROR: ', response.statusText);
console.log("ERROR: ", response.statusText);
return;
}

const json = await response.json();
const data = offchainBasicSubscriptionsSchema.parse(json);

const { staked, bonds, forever } = data.reduce((acc, item) => {
if (item.pool === poolId) {
return {
staked: acc.staked + (item?.locked ?? 0),
bonds: acc.bonds + (item?.bonds ?? 0),
forever: acc.forever + (item?.forever ?? 0),
};
} else {
return acc;
const { staked, bonds, forever } = data.reduce(
(acc, item) => {
if (item.pool === poolId) {
return {
staked: acc.staked + (item?.locked ?? 0),
bonds: acc.bonds + (item?.bonds ?? 0),
forever: acc.forever + (item?.forever ?? 0),
};
} else {
return acc;
}
},
{
staked: 0,
bonds: 0,
forever: 0,
}
}, {
staked: 0,
bonds: 0,
forever: 0
});
);

const connectedEvent = new CustomEvent('connected', {
const connectedEvent = new CustomEvent("connected", {
detail: {
address: base58,
locked: staked + bonds + forever,
staked,
bonds,
forever
forever,
},
bubbles: true,
cancelable: true,
composed: false, // if you want to listen on parent turn this on
});
console.log('Connected event: ', connectedEvent);
console.log("Connected event: ", connectedEvent);
element.dispatchEvent(connectedEvent);
})();
}
Expand All @@ -104,57 +104,56 @@ const Main = () => {
closeDropdown();
};

document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);

return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}, [ref, closeDropdown]);

if (!wallet) {
return (
<div className={clsxp(classPrefix, 'wallet_adapter_dropdown_wrapper')}>
<div className={clsxp(classPrefix, "wallet_adapter_dropdown_wrapper")}>
<WalletModalButton />
</div>
);
}
if (!base58) {
return (
<div className={clsxp(classPrefix, 'wallet_adapter_dropdown_wrapper')}>
<div className={clsxp(classPrefix, "wallet_adapter_dropdown_wrapper")}>
<WalletConnectButton />
</div>
);
}

return (
<div className={clsxp(classPrefix, 'wallet_adapter_dropdown_wrapper')}>
<div className={clsxp(classPrefix, "wallet_adapter_dropdown_wrapper")}>
<Button
aria-expanded={active}
className={clsxp(
classPrefix,
'wallet_adapter_button_trigger',
active && 'wallet_adapter_button_trigger_active'
"wallet_adapter_button_trigger",
active && "wallet_adapter_button_trigger_active"
)}
style={{ pointerEvents: active ? 'none' : 'auto' }}
style={{ pointerEvents: active ? "none" : "auto" }}
onClick={toggleDropdown}
>
{content}
</Button>
<div
className={clsxp(
classPrefix,
'wallet_adapter_dropdown',
active && 'wallet_adapter_dropdown_active'
"wallet_adapter_dropdown",
active && "wallet_adapter_dropdown_active"
)}
>
<Router
routes={{
'/': <RouteComponent component={Actions} />,
'/stake': <RouteComponent component={Stake} />,
'/unstake': <RouteComponent component={Unstake} />,
'/claim': <RouteComponent component={Claim} />,
"/": <RouteComponent component={Actions} />,
"/stake": <RouteComponent component={Stake} />,
"/unstake": <RouteComponent component={Unstake} />,
}}
/>
</div>
Expand Down
84 changes: 44 additions & 40 deletions src/routes/Actions.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import { h } from 'preact';
import { h } from "preact";
import {
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'preact/hooks';
} from "preact/hooks";

import { ConfigContext } from '../AppContext';
import { clsxp, formatPenyACSCurrency } from '../libs/utils';
import { RouteLink } from '../layout/Router';
import { Header } from '../components/Header';
import { useWallet } from '../components/wallet-adapter/useWallet';
import { useConnection } from '../components/wallet-adapter/useConnection';
import env from '../libs/env';
import { offchainBasicSubscriptionsSchema } from '../validations/subscriptions';
import { getUserACSBalance } from '../libs/program';
import { ConfigContext } from "../AppContext";
import { clsxp, formatPenyACSCurrency } from "../libs/utils";
import { RouteLink } from "../layout/Router";
import { Header } from "../components/Header";
import { useWallet } from "../components/wallet-adapter/useWallet";
import { useConnection } from "../components/wallet-adapter/useConnection";
import env from "../libs/env";
import { offchainBasicSubscriptionsSchema } from "../validations/subscriptions";
import { getUserACSBalance } from "../libs/program";

export const Actions = () => {
const { poolId, classPrefix } = useContext(ConfigContext);
Expand Down Expand Up @@ -45,7 +45,7 @@ export const Actions = () => {
`${env.GO_API_URL}/subscriptions/${publicKey.toBase58()}`
);
if (!response.ok) {
console.log('ERROR: ', response.statusText);
console.log("ERROR: ", response.statusText);
return;
}

Expand Down Expand Up @@ -74,7 +74,7 @@ export const Actions = () => {
setBondsAmount(bonds ?? 0);
setForeverAmount(forever ?? 0);
} catch (error) {
console.error('Failed to fetch data:', error);
console.error("Failed to fetch data:", error);
}
})();
}, [publicKey, connected, poolId, connection]);
Expand All @@ -83,94 +83,98 @@ export const Actions = () => {
try {
await disconnect();
} catch (error) {
console.error('Failed to disconnect:', error);
console.error("Failed to disconnect:", error);
}
}, [disconnect]);

const hasUnlockableAmount = useMemo(() => {
return (stakedAmount ?? 0) + (bondsAmount ?? 0) > 0;
}, [stakedAmount, bondsAmount]);

const openClaimPage = useCallback(() => {
window.open("https://hub.accessprotocol.co", "_blank");
}, []);

return (
<div className={clsxp(classPrefix, 'actions_root')}>
<div className={clsxp(classPrefix, "actions_root")}>
{connected && disconnecting && (
<Header>
<div className={clsxp(classPrefix, 'actions_actions_disconnect')}>
<div className={clsxp(classPrefix, "actions_actions_disconnect")}>
Disconnecting...
</div>
</Header>
)}
{connected && !disconnecting && (
<Header>
<div
className={clsxp(classPrefix, 'actions_actions_disconnect')}
className={clsxp(classPrefix, "actions_actions_disconnect")}
onClick={disconnectHandler}
>
Disconnect
</div>
</Header>
)}

<div className={clsxp(classPrefix, 'actions_logo')}>
<div className={clsxp(classPrefix, "actions_logo")}>
<svg
width='48'
height='48'
viewBox='0 0 48 48'
fill='white'
xmlns='http://www.w3.org/2000/svg'
width="48"
height="48"
viewBox="0 0 48 48"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
d='M22.8221 47.17C30.5621 47.17 37.1321 43.48 40.1021 36.28V46H47.9321V24.13C47.9321 9.91 38.2121 0.369997 24.2621 0.369997C10.1321 0.369997 0.23207 10.18 0.23207 24.13C0.23207 38.8 11.2121 47.17 22.8221 47.17ZM24.1721 39.25C14.9921 39.25 8.87207 32.77 8.87207 23.77C8.87207 14.77 14.9921 8.29 24.1721 8.29C33.3521 8.29 39.4721 14.77 39.4721 23.77C39.4721 32.77 33.3521 39.25 24.1721 39.25Z'
fill='#E7E5E4'
d="M22.8221 47.17C30.5621 47.17 37.1321 43.48 40.1021 36.28V46H47.9321V24.13C47.9321 9.91 38.2121 0.369997 24.2621 0.369997C10.1321 0.369997 0.23207 10.18 0.23207 24.13C0.23207 38.8 11.2121 47.17 22.8221 47.17ZM24.1721 39.25C14.9921 39.25 8.87207 32.77 8.87207 23.77C8.87207 14.77 14.9921 8.29 24.1721 8.29C33.3521 8.29 39.4721 14.77 39.4721 23.77C39.4721 32.77 33.3521 39.25 24.1721 39.25Z"
fill="#E7E5E4"
/>
</svg>
</div>

<div>
<div className={clsxp(classPrefix, 'actions_staked_amount')}>
<div className={clsxp(classPrefix, "actions_staked_amount")}>
<div>
{formatPenyACSCurrency(
(stakedAmount ?? 0) + (bondsAmount ?? 0) + (foreverAmount ?? 0)
)}{' '}
)}{" "}
ACS locked
</div>
</div>
<div className={clsxp(classPrefix, 'actions_balance')}>
<div className={clsxp(classPrefix, "actions_balance")}>
{formatPenyACSCurrency(balance ?? 0)} ACS available
</div>
</div>

<div className={clsxp(classPrefix, 'actions_links_wrapper')}>
<div className={clsxp(classPrefix, "actions_links_wrapper")}>
<RouteLink
className={clsxp(classPrefix, 'actions_button')}
href='/stake'
className={clsxp(classPrefix, "actions_button")}
href="/stake"
>
Lock
</RouteLink>
{hasUnlockableAmount ? (
<RouteLink
className={clsxp(classPrefix, 'actions_button')}
href='/unstake'
className={clsxp(classPrefix, "actions_button")}
href="/unstake"
>
Unlock ACS
</RouteLink>
) : (
<span
className={clsxp(
classPrefix,
'actions_button',
'actions_button_disabled'
"actions_button",
"actions_button_disabled"
)}
>
Unlock ACS
</span>
)}
<RouteLink
className={clsxp(classPrefix, 'actions_button')}
href='/claim'
<button
className={clsxp(classPrefix, "actions_button")}
onClick={openClaimPage}
>
Claim
</RouteLink>
View on HUB
</button>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 8c9b793

Please sign in to comment.