Skip to content

Commit

Permalink
Merge pull request #3 from gear-dapps/ny-update-meta
Browse files Browse the repository at this point in the history
Update meta
  • Loading branch information
nikitayutanov authored May 9, 2023
2 parents acafd91 + a08ed9d commit 93c0adc
Show file tree
Hide file tree
Showing 9 changed files with 190 additions and 135 deletions.
Binary file not shown.
1 change: 1 addition & 0 deletions contracts/varatube/frontend/src/assets/state/ft_meta.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
0100000000000104000000010b0000000000000000010c00000021124000082866745f6d61696e5f696f28496e697446546f6b656e000008014473746f726167655f636f64655f686173680401104832353600014866745f6c6f6769635f636f64655f6861736804011048323536000004083c7072696d69746976655f74797065731048323536000004000801205b75383b2033325d000008000003200000000c000c000005030010082866745f6d61696e5f696f3046546f6b656e416374696f6e0001181c4d6573736167650801387472616e73616374696f6e5f696414010c75363400011c7061796c6f616418012c4c6f676963416374696f6e0000004c5570646174654c6f676963436f6e747261637408014866745f6c6f6769635f636f64655f686173680401104832353600014473746f726167655f636f64655f68617368040110483235360001002847657442616c616e636504001c011c4163746f7249640002002c4765745065726d6974496404001c011c4163746f72496400030014436c6561720400040110483235360004005c4d69677261746553746f726167654164647265737365730005000014000005060018082866745f6d61696e5f696f2c4c6f676963416374696f6e000114104d696e74080124726563697069656e741c011c4163746f724964000118616d6f756e7420011075313238000000104275726e08011873656e6465721c011c4163746f724964000118616d6f756e7420011075313238000100205472616e736665720c011873656e6465721c011c4163746f724964000124726563697069656e741c011c4163746f724964000118616d6f756e74200110753132380002001c417070726f7665080140617070726f7665645f6163636f756e741c011c4163746f724964000118616d6f756e7420011075313238000300185065726d69741401346f776e65725f6163636f756e741c011c4163746f724964000140617070726f7665645f6163636f756e741c011c4163746f724964000118616d6f756e74200110753132380001247065726d69745f6964200110753132380001107369676e24011048353132000400001c10106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004000801205b75383b2033325d000020000005070024083c7072696d69746976655f74797065731048353132000004002801205b75383b2036345d000028000003400000000c002c082866745f6d61696e5f696f2c46546f6b656e4576656e74000110084f6b0000000c4572720001001c42616c616e6365040020011075313238000200205065726d697449640400200110753132380003000030082866745f6d61696e5f696f2c46546f6b656e537461746500000c011461646d696e1c011c4163746f72496400012c66745f6c6f6769635f69641c011c4163746f7249640001307472616e73616374696f6e733401785665633c28483235362c205472616e73616374696f6e537461747573293e00003400000238003800000408043c003c082866745f6d61696e5f696f445472616e73616374696f6e53746174757300010c28496e50726f67726573730000001c537563636573730001001c4661696c75726500020000
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
010000000000010500000000000000000001080000009d0c4c00000004080410000410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004000801205b75383b2033325d000008000003200000000c000c000005030010000005070014082c76617261747562655f696f1c416374696f6e73000110505265676973746572537562736372697074696f6e0c012c63757272656e63795f696404011c4163746f724964000118706572696f64180118506572696f64000130776974685f72656e6577616c1c0110626f6f6c00000048557064617465537562736372697074696f6e0401287375627363726962657204011c4163746f7249640001004843616e63656c537562736372697074696f6e000200644d616e61676550656e64696e67537562736372697074696f6e040118656e61626c651c0110626f6f6c0003000018082c76617261747562655f696f18506572696f640001141059656172000000284e696e654d6f6e746873000100245369784d6f6e7468730002002c54687265654d6f6e746873000300144d6f6e7468000400001c000005000020082c76617261747562655f696f44537562736372697074696f6e5374617465000008012c737562736372696265727324018442547265654d61703c4163746f7249642c2053756273637269626572446174613e00012863757272656e6369657344016042547265654d61703c4163746f7249642c2050726963653e000024042042547265654d617008044b0104045601280004003c00000028082c76617261747562655f696f385375627363726962657244617461000010012c63757272656e63795f696404011c4163746f724964000118706572696f64180118506572696f64000148737562736372697074696f6e5f73746172742c01484f7074696f6e3c287536342c20753332293e00013072656e6577616c5f646174652c01484f7074696f6e3c287536342c20753332293e00002c04184f7074696f6e04045401300108104e6f6e6500000010536f6d65040030000001000030000004083438003400000506003800000505003c0000024000400000040804280044042042547265654d617008044b01040456011000040048000000480000020000
Binary file not shown.
8 changes: 1 addition & 7 deletions contracts/varatube/frontend/src/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,4 @@ const LOCAL_STORAGE = {
WALLET: 'wallet',
};

const META_HEX = {
SUBSCRIPTION:
'0x01000000000001050000000000000000000108000000590d4c00000004080410000410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004000801205b75383b2033325d000008000003200000000c000c0000050300100000050700140850676561725f737562736372697074696f6e5f696f1c416374696f6e73000110505265676973746572537562736372697074696f6e0c01387061796d656e745f6d6574686f6404011c4163746f724964000118706572696f64180118506572696f64000130776974685f72656e6577616c1c0110626f6f6c00000048557064617465537562736372697074696f6e0401287375627363726962657204011c4163746f7249640001004843616e63656c537562736372697074696f6e000200644d616e61676550656e64696e67537562736372697074696f6e040118656e61626c651c0110626f6f6c00030000180850676561725f737562736372697074696f6e5f696f18506572696f640001141059656172000000284e696e654d6f6e746873000100245369784d6f6e7468730002002c54687265654d6f6e746873000300144d6f6e7468000400001c0000050000200850676561725f737562736372697074696f6e5f696f44537562736372697074696f6e5374617465000008012c737562736372696265727324018442547265654d61703c4163746f7249642c2053756273637269626572446174613e00013c7061796d656e745f6d6574686f647344016042547265654d61703c4163746f7249642c2050726963653e000024042042547265654d617008044b0104045601280004003c000000280850676561725f737562736372697074696f6e5f696f38537562736372696265724461746100001001387061796d656e745f6d6574686f6404011c4163746f724964000118706572696f64180118506572696f64000148737562736372697074696f6e5f73746172742c01484f7074696f6e3c287536342c20753332293e00013072656e6577616c5f646174652c01484f7074696f6e3c287536342c20753332293e00002c04184f7074696f6e04045401300108104e6f6e6500000010536f6d65040030000001000030000004083438003400000506003800000505003c0000024000400000040804280044042042547265654d617008044b01040456011000040048000000480000020000' as HexString,
FT: '0x0100000000000103000000010700000000000000000108000000a90b3400081466745f696f28496e6974436f6e66696700000c01106e616d65040118537472696e6700011873796d626f6c040118537472696e67000120646563696d616c73080108753800000400000502000800000503000c081466745f696f204654416374696f6e000118104d696e74040010011075313238000000104275726e040010011075313238000100205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380002001c417070726f7665080108746f14011c4163746f724964000118616d6f756e74100110753132380003002c546f74616c537570706c790004002442616c616e63654f66040014011c4163746f724964000500001000000507001410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001801205b75383b2033325d0000180000032000000008001c081466745f696f1c46544576656e74000110205472616e736665720c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380000001c417070726f76650c011066726f6d14011c4163746f724964000108746f14011c4163746f724964000118616d6f756e74100110753132380001002c546f74616c537570706c790400100110753132380002001c42616c616e63650400100110753132380003000020081466745f696f3c496f46756e6769626c65546f6b656e00001801106e616d65040118537472696e6700011873796d626f6c040118537472696e67000130746f74616c5f737570706c791001107531323800012062616c616e6365732401505665633c284163746f7249642c2075313238293e000128616c6c6f77616e6365732c01905665633c284163746f7249642c205665633c284163746f7249642c2075313238293e293e000120646563696d616c730801087538000024000002280028000004081410002c00000230003000000408142400' as HexString,
};

export { ADDRESS, LOCAL_STORAGE, META_HEX };
export { ADDRESS, LOCAL_STORAGE };
5 changes: 5 additions & 0 deletions contracts/varatube/frontend/src/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,8 @@ declare module '*.wasm' {
const value: string;
export default value;
}

declare module '*.txt' {
const value: string;
export default value;
}
25 changes: 9 additions & 16 deletions contracts/varatube/frontend/src/hooks/api.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { getProgramMetadata } from '@gear-js/api';
import { useAccount, useReadFullState, useReadWasmState, useSendMessage } from '@gear-js/react-hooks';
import { HexString } from '@polkadot/util/types';
import { useState, useEffect } from 'react';
import stateWasm from 'assets/gear_subscription_state.meta.wasm';
import { ADDRESS, META_HEX } from 'consts';

const metadata = getProgramMetadata(META_HEX.SUBSCRIPTION);
import stateWasm from 'assets/state/varatube_state.meta.wasm';
import varatubeMeta from 'assets/state/varatube_meta.txt';
import ftMeta from 'assets/state/ft_meta.txt';
import { ADDRESS } from 'consts';
import { useBuffer, useProgramMetadata } from './metadata';

type FullSubState = {
[key: HexString]: {
Expand All @@ -23,21 +22,15 @@ type FullSubState = {
};

function useSubscriptions() {
const [buffer, setBuffer] = useState<Buffer>();

useEffect(() => {
fetch(stateWasm)
.then((result) => result.arrayBuffer())
.then((arrBuffer) => Buffer.from(arrBuffer))
.then((res) => setBuffer(res));
}, []);

const buffer = useBuffer(stateWasm);
const { state, isStateRead } = useReadWasmState<FullSubState>(ADDRESS.CONTRACT, buffer, 'all_subscriptions', null);

return { subscriptionsState: state, isSubscriptionsStateRead: isStateRead };
}

function useSubscriptionsMessage() {
const metadata = useProgramMetadata(varatubeMeta);

return useSendMessage(ADDRESS.CONTRACT, metadata, true);
}

Expand All @@ -47,7 +40,7 @@ function useFTBalance() {
const { account } = useAccount();
const { decodedAddress } = account || {};

const meta = getProgramMetadata(META_HEX.FT);
const meta = useProgramMetadata(ftMeta);
const { state, isStateRead } = useReadFullState<FTState>(ADDRESS.FT_CONTRACT, meta);

const balances = state?.balances;
Expand Down
61 changes: 61 additions & 0 deletions contracts/varatube/frontend/src/hooks/metadata.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { useEffect, useState } from 'react';
import { useAlert } from '@gear-js/react-hooks';
import { getProgramMetadata, getStateMetadata, ProgramMetadata, StateMetadata } from '@gear-js/api';
import { HexString } from '@polkadot/util/types';

function useBuffer(source: string) {
const alert = useAlert();

const [buffer, setBuffer] = useState<Buffer>();

useEffect(() => {
fetch(source)
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => Buffer.from(arrayBuffer))
.then((result) => setBuffer(result))
.catch(({ message }: Error) => alert.error(message));

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return buffer;
}

function useProgramMetadata(source: string) {
const alert = useAlert();

const [metadata, setMetadata] = useState<ProgramMetadata>();

useEffect(() => {
fetch(source)
.then((response) => response.text())
.then((raw) => `0x${raw}` as HexString)
.then((metaHex) => getProgramMetadata(metaHex))
.then((result) => setMetadata(result))
.catch(({ message }: Error) => alert.error(message));

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return metadata;
}

function useStateMetadata(wasm: Buffer | undefined) {
const alert = useAlert();

const [stateMetadata, setStateMetadata] = useState<StateMetadata>();

useEffect(() => {
if (!wasm) return;

getStateMetadata(wasm)
.then((result) => setStateMetadata(result))
.catch(({ message }: Error) => alert.error(message));

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [wasm]);

return stateMetadata;
}

export { useBuffer, useProgramMetadata, useStateMetadata };
224 changes: 112 additions & 112 deletions contracts/varatube/frontend/src/pages/subscription/Subscription.tsx
Original file line number Diff line number Diff line change
@@ -1,112 +1,112 @@
import { useAccount } from '@gear-js/react-hooks';
import { Button, Checkbox, checkboxStyles } from '@gear-js/ui';
import { useState } from 'react';
import { Heading, Loader, PurchaseSubscriptionModal } from 'components';
import { useSubscriptions, useSubscriptionsMessage } from 'hooks';
import pic from 'assets/images/pic.png';
import clsx from 'clsx';
import { ADDRESS } from 'consts';
import styles from './Subscription.module.scss';

function Subscription() {
const { account } = useAccount();
const { decodedAddress } = account || {};

const { subscriptionsState, isSubscriptionsStateRead } = useSubscriptions();
const subscription = subscriptionsState && decodedAddress ? subscriptionsState[decodedAddress] : undefined;

const { startDate: startDateTimestamp, period, endDate: endDateTimestamp, price, willRenew } = subscription || {};

const startDate = startDateTimestamp ? new Date(startDateTimestamp).toLocaleString() : '';
const endDate = endDateTimestamp ? new Date(endDateTimestamp).toLocaleString() : '';

const sendMessage = useSubscriptionsMessage();

const [isModalOpen, setIsModalOpen] = useState(false);

const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);

const cancelSubscription = () => sendMessage({ CancelSubscription: null });

const purchaseSubscription = (values: { isRenewal: boolean; period: string }) =>
sendMessage(
{
RegisterSubscription: {
payment_method: ADDRESS.FT_CONTRACT,
period: { [values.period]: null },
with_renewal: values.isRenewal,
},
},
{ onSuccess: closeModal },
);

return (
<>
{isSubscriptionsStateRead ? (
<>
<Heading text="My Subscription" />

<div className={styles.main}>
{subscription ? (
<>
<div className={styles.subWrapper}>
<ul className={styles.list}>
<li>
Start Date: <span className={styles.value}>{startDate}</span>
</li>

<li>
End Date: <span className={styles.value}>{endDate}</span>
</li>

<li>
Period: <span className={styles.value}>{period}</span>
</li>

{price && (
<li>
Price: <span className={styles.value}>{price}</span>
</li>
)}

<li>
Auto-renewal:
<input
type="checkbox"
className={clsx(checkboxStyles.input, checkboxStyles.checkbox)}
checked={willRenew}
readOnly
/>
</li>
</ul>

<img src={pic} alt="" />
</div>

<Button text="Cancel subscription" color="light" onClick={cancelSubscription} />
</>
) : (
<>
<img src={pic} alt="" className={styles.noSubPic} />

<div style={{ textAlign: 'center' }}>
<p style={{ marginBottom: '4px' }}>You don&apos;t have an active subscription.</p>
<p>Please subscribe to get access to app content.</p>
</div>

<Button text="Subscribe" onClick={openModal} />
</>
)}
</div>
</>
) : (
<Loader />
)}

{isModalOpen && <PurchaseSubscriptionModal close={closeModal} onSubmit={purchaseSubscription} />}
</>
);
}

export { Subscription };
import { useAccount } from '@gear-js/react-hooks';
import { Button, Checkbox, checkboxStyles } from '@gear-js/ui';
import { useState } from 'react';
import { Heading, Loader, PurchaseSubscriptionModal } from 'components';
import { useSubscriptions, useSubscriptionsMessage } from 'hooks';
import pic from 'assets/images/pic.png';
import clsx from 'clsx';
import { ADDRESS } from 'consts';
import styles from './Subscription.module.scss';

function Subscription() {
const { account } = useAccount();
const { decodedAddress } = account || {};

const { subscriptionsState, isSubscriptionsStateRead } = useSubscriptions();
const subscription = subscriptionsState && decodedAddress ? subscriptionsState[decodedAddress] : undefined;

const { startDate: startDateTimestamp, period, endDate: endDateTimestamp, price, willRenew } = subscription || {};

const startDate = startDateTimestamp ? new Date(startDateTimestamp).toLocaleString() : '';
const endDate = endDateTimestamp ? new Date(endDateTimestamp).toLocaleString() : '';

const sendMessage = useSubscriptionsMessage();

const [isModalOpen, setIsModalOpen] = useState(false);

const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);

const cancelSubscription = () => sendMessage({ CancelSubscription: null });

const purchaseSubscription = (values: { isRenewal: boolean; period: string }) =>
sendMessage(
{
RegisterSubscription: {
currency_id: ADDRESS.FT_CONTRACT,
period: { [values.period]: null },
with_renewal: values.isRenewal,
},
},
{ onSuccess: closeModal },
);

return (
<>
{isSubscriptionsStateRead ? (
<>
<Heading text="My Subscription" />

<div className={styles.main}>
{subscription ? (
<>
<div className={styles.subWrapper}>
<ul className={styles.list}>
<li>
Start Date: <span className={styles.value}>{startDate}</span>
</li>

<li>
End Date: <span className={styles.value}>{endDate}</span>
</li>

<li>
Period: <span className={styles.value}>{period}</span>
</li>

{price && (
<li>
Price: <span className={styles.value}>{price}</span>
</li>
)}

<li>
Auto-renewal:
<input
type="checkbox"
className={clsx(checkboxStyles.input, checkboxStyles.checkbox)}
checked={willRenew}
readOnly
/>
</li>
</ul>

<img src={pic} alt="" />
</div>

<Button text="Cancel subscription" color="light" onClick={cancelSubscription} />
</>
) : (
<>
<img src={pic} alt="" className={styles.noSubPic} />

<div style={{ textAlign: 'center' }}>
<p style={{ marginBottom: '4px' }}>You don&apos;t have an active subscription.</p>
<p>Please subscribe to get access to app content.</p>
</div>

<Button text="Subscribe" onClick={openModal} />
</>
)}
</div>
</>
) : (
<Loader />
)}

{isModalOpen && <PurchaseSubscriptionModal close={closeModal} onSubmit={purchaseSubscription} />}
</>
);
}

export { Subscription };

0 comments on commit 93c0adc

Please sign in to comment.