Skip to content

Commit d3ff7c9

Browse files
0xLucca0xLucca
authored
Update useink version (#2)
1 parent 3ffb218 commit d3ff7c9

File tree

12 files changed

+964
-2127
lines changed

12 files changed

+964
-2127
lines changed

‎package-lock.json

+688-1,788
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,10 @@
2323
"shortid": "^2.2.16",
2424
"tailwindcss": "3.3.2",
2525
"typescript": "5.0.4",
26-
"useink": "^1.3.0"
26+
"useink": "^1.5.1"
2727
},
2828
"devDependencies": {
2929
"prettier": "2.8.8"
30+
3031
}
3132
}

‎src/assets/logo/OPPurple.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export const OPPurple = ({ width, height }) => (
77
xmlns="http://www.w3.org/2000/svg"
88
>
99
<path
10-
fill-rule="evenodd"
11-
clip-rule="evenodd"
10+
fillRule="evenodd"
11+
clipRule="evenodd"
1212
d="M95.277 7.7905C95.277 3.78187 98.5271 0.532227 102.536 0.532227C103.899 0.532227 105.512 0.864986 106.591 1.10304C107.932 1.39866 109.547 1.80992 111.31 2.29887C114.845 3.27912 119.198 4.63244 123.544 6.1595C127.867 7.67798 132.336 9.42134 136.042 11.1962C137.888 12.0803 139.684 13.0382 141.228 14.0503C142.598 14.9481 144.485 16.3393 145.78 18.2809C148.004 21.6163 147.103 26.1227 143.767 28.3463C141.768 29.6785 135.053 35.464 129.371 42.2204C126.558 45.5662 124.31 48.7892 123.022 51.4998C121.843 53.9816 121.979 54.9329 121.962 54.9514C123.455 58.6083 121.745 62.8005 118.1 64.3626C114.415 65.9417 110.147 64.2349 108.568 60.5503C106.198 55.0212 108.014 49.2582 109.908 45.2718C111.955 40.9624 115.083 36.6549 118.259 32.8785C118.755 32.2879 119.261 31.7014 119.772 31.1209C94.4116 35.199 75.3521 46.8209 62.7033 60.3083C63.2516 60.4961 63.8002 60.6974 64.3491 60.9121C71.8576 63.8498 77.3378 70.4504 80.7961 77.4148C84.3125 84.4963 86.2419 92.9146 85.9729 100.917C85.706 108.855 83.213 117.274 76.8297 123.152C70.2239 129.234 60.824 131.353 49.4872 129.244C49.1592 129.183 48.8357 129.1 48.5192 128.994C35.6871 124.717 29.8854 113.25 29.6014 100.781C29.4644 94.7656 30.5572 88.3132 32.7646 81.7712C30.096 84.5259 27.5685 87.8782 25.2507 91.7753C18.501 103.124 14.5186 117.587 14.5185 130.274C14.5185 134.283 11.2684 137.532 7.25924 137.532C3.25005 137.532 -1.73074e-05 134.283 0 130.274C6.6201e-05 114.921 4.71526 97.902 12.7719 84.3556C20.1031 72.029 31.0732 61.2413 45.0475 58.8065C58.7613 40.4203 81.4246 23.9798 112.3 17.7259C110.555 17.1824 108.906 16.6966 107.43 16.2875C105.819 15.8408 104.471 15.5008 103.465 15.2789C102.627 15.0943 102.292 15.0532 102.293 15.0465C102.293 15.0465 102.301 15.0453 102.316 15.0455C98.4088 14.9292 95.277 11.7255 95.277 7.7905ZM52.9784 72.917C46.7317 82.9712 43.9422 92.8101 44.1162 100.45C44.2986 108.457 47.517 113.155 52.6665 115.066C60.5009 116.413 64.6905 114.595 66.9946 112.473C69.5719 110.1 71.2757 105.988 71.4625 100.43C71.6472 94.9366 70.2873 88.8952 67.7921 83.8703C65.2387 78.7282 61.9852 75.5756 59.0585 74.4305C56.9283 73.5971 54.9035 73.1141 52.9784 72.917Z"
1313
fill="#25064C"
1414
/>

‎src/components/contracts/contractRow.tsx

+108-119
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ interface ContractRowProps {
2424
const ContractRow = ({ contract, i }: ContractRowProps) => {
2525
//---------------------------------Connect to contract---------------------------------
2626
const blockHeader = useBlockHeader();
27-
const _contract = useContract(contract.address, metadata, 'rococo-contracts-testnet');
27+
28+
const _contract = useContract(contract.address, metadata);
29+
2830
//---------------------------------UseStates---------------------------------
2931
const [loading, setLoading] = useState<'loading' | 'done' | 'error'>('loading');
3032
const [amountBeneficiaries, setAmountBeneficiaries] = useState<null | string[]>(null);
@@ -36,60 +38,35 @@ const ContractRow = ({ contract, i }: ContractRowProps) => {
3638

3739
//---------------------------------Api---------------------------------
3840
const api = useApi('rococo-contracts-testnet');
39-
const chainInfo = api?.api.registry.getChainProperties().toHuman();
40-
41-
//---------------------------------Get from contract---------------------------------
42-
const getAmountBeneficiaries = useCall<any | undefined>(_contract?.contract, 'getListBeneficiaries');
43-
44-
const getNextBlockPeriod = useCall<any | undefined>(_contract?.contract, 'getNextBlockPeriod');
45-
46-
const getContractBalance = useCall<any | undefined>(_contract?.contract, 'getContractBalance');
47-
48-
const getTotalDebts = useCall<any | undefined>(_contract?.contract, 'getTotalDebts');
49-
50-
const getPeriodicity = useCall<any | undefined>(_contract?.contract, 'getPeriodicity');
5141

52-
const getState = useCall<boolean | undefined>(_contract?.contract, 'isPaused');
42+
const chainInfo = api?.api.registry.getChainProperties()!.toHuman();
5343

54-
//---------------------------------Set in states---------------------------------
55-
const seeBeneficiaries = async () => {
56-
const b = pickDecoded(await getAmountBeneficiaries.send());
57-
setAmountBeneficiaries(b);
58-
};
44+
//---------------------------------Get from contract---------------------------------
45+
const getAmountBeneficiaries = useCall<string[]>(_contract, 'getListBeneficiaries');
5946

60-
const seeContractBalance = async () => {
61-
const contractBalance = pickDecoded(await getContractBalance.send());
62-
contractBalance !== undefined && setContractBalance(parseInt(contractBalance.replace(/,/g, '')));
63-
};
47+
const getNextBlockPeriod = useCall(_contract, 'getNextBlockPeriod');
6448

65-
const seeNextBlockPeriod = async () => {
66-
const nextPeriodString = pickDecoded(await getNextBlockPeriod.send());
67-
nextPeriodString !== undefined && setNextBlockPeriod(parseInt(await nextPeriodString.replace(/,/g, '')));
68-
};
49+
const getContractBalance = useCall(_contract, 'getContractBalance');
6950

70-
const seeTotalDebts = async () => setFundsNeeded(pickDecoded(await getTotalDebts.send()));
51+
const getTotalDebts = useCall(_contract, 'getTotalDebts');
7152

72-
const seePeriodicity = async () => setPeriodicity(pickDecoded(await getPeriodicity.send()));
53+
// 🤟🤟🤟 Get periodicity from contract
54+
const getPeriodicity = useCall(_contract, 'getPeriodicity');
7355

74-
const seeState = async () => setState(pickDecoded(await getState.send()));
7556

7657
//---------------------------------Initialize functions---------------------------------
7758
useEffect(() => {
78-
if (blockHeader?.blockNumber && _contract?.contract !== undefined) {
79-
seeBeneficiaries();
80-
seeNextBlockPeriod();
81-
seeContractBalance();
82-
seeTotalDebts();
83-
seePeriodicity();
84-
seeState();
59+
if (_contract) {
60+
getAmountBeneficiaries.send();
61+
getContractBalance.send();
62+
getNextBlockPeriod.send();
63+
getTotalDebts.send();
64+
getPeriodicity.send();
8565
setLoading('done');
8666
}
87-
}, [blockHeader?.blockNumber, _contract]);
67+
}, [_contract]);
8868

89-
//---------------------------------See in console---------------------------------
90-
useEffect(() => {}, []);
91-
92-
//---------------------------------Truncate numbers---------------------------------
69+
//---------------------------------Truncate numbers-------------------------------------
9370
function trunc(x: number, p = 0) {
9471
var s = x.toString();
9572
var l = s.length;
@@ -99,83 +76,95 @@ const ContractRow = ({ contract, i }: ContractRowProps) => {
9976
}
10077

10178
return loading === 'done' ? (
102-
<Link href={`/contracts/${contract.address}`}>
103-
<tr
104-
className={
105-
i % 2 === 0
106-
? `flex gap-[50px] items-center text-[14px] font-normal text-black tracking-[0.25px] ${archivo.className} hover:bg-opwhite transition duration-150 px-1`
107-
: `flex gap-[50px] items-center text-[14px] bg-[#ECECEC] font-normal text-black tracking-[0.25px] ${archivo.className} hover:bg-opwhite transition duration-150 px-1`
108-
}
109-
>
110-
<td className="w-[150px]">
111-
<p>{contract.name}</p>
112-
</td>
113-
<td className="w-[100px]">
114-
{amountBeneficiaries ? (
115-
<p>{amountBeneficiaries.length}</p>
116-
) : (
117-
<div className="flex items-center w-full">
118-
<AiOutlineLoading className="animate-spin" />
119-
</div>
120-
)}
121-
</td>
122-
<td className="w-[80px]">
123-
{periodicity ? (
124-
<p>{periodicity}</p>
125-
) : (
126-
<div className="flex items-center w-full">
127-
<AiOutlineLoading className="animate-spin" />
128-
</div>
129-
)}
130-
</td>
131-
<td className="w-[80px]">
132-
{contractBalance !== null ? (
133-
<p className="text-ellipsis">
134-
{trunc(Math.pow(contractBalance * 10, parseInt(chainInfo.tokenDecimals[0])), 2)} {chainInfo?.tokenSymbol}
135-
</p>
136-
) : (
137-
<div className="flex items-center w-full">
138-
<AiOutlineLoading className="animate-spin" />
139-
</div>
140-
)}
141-
</td>
142-
<td className="w-[80px]">
143-
{fundsNeeded !== null && chainInfo !== undefined ? (
144-
<p className="text-ellipsis">
145-
{trunc(Math.pow(parseInt(fundsNeeded) * 10, parseInt(chainInfo.tokenDecimals[0])), 2)}{' '}
146-
{chainInfo?.tokenSymbol}
147-
</p>
148-
) : (
149-
<div className="flex items-center w-full h-full">
150-
<AiOutlineLoading className="animate-spin" />
151-
</div>
152-
)}
153-
</td>
154-
<td className="w-[80px]">
155-
{/* 🤟🤟🤟 Calculate real next pay day 🤟🤟🤟 */}
156-
{nextBlockPeriod !== null ? (
157-
<p className="text-ellipsis">{trunc(nextBlockPeriod / periodicity / 7200)}</p>
158-
) : (
159-
<div className="flex items-center w-full">
160-
<AiOutlineLoading className="animate-spin" />
161-
</div>
162-
)}
163-
</td>
164-
<td className="w-[80px]">
165-
{/* 🤟🤟🤟 Show network 🤟🤟🤟 */}
166-
<p>network</p>
167-
</td>
168-
<td className="w-[80px]">{state !== undefined && state ? <p>paused</p> : <p>running</p>}</td>
169-
<td className="w-[100px]">
170-
<Link href={`/contracts/${contract.address}`}>
171-
<Button type="text" text="view" icon="" />
172-
</Link>
173-
</td>
174-
<td className="w-[100px]">
175-
<IoIosAlert className="w-5 h-5 text-opdanger" />
176-
</td>
177-
</tr>
178-
</Link>
79+
80+
<tr
81+
className={
82+
i % 2 === 0
83+
? `flex gap-[50px] items-center px-3 text-[14px] font-normal text-black tracking-[0.25px] ${archivo.className}`
84+
: `flex gap-[50px] items-center px-3 text-[14px] bg-[#ECECEC] font-normal text-black tracking-[0.25px] ${archivo.className}`
85+
}
86+
>
87+
<td className="w-[150px]">
88+
<p>{contract.name}</p>
89+
</td>
90+
<td className="w-[100px]">
91+
{getAmountBeneficiaries ? (
92+
<p>{pickDecoded(getAmountBeneficiaries.result!)?.length}</p>
93+
) : (
94+
<div className="flex items-center w-full">
95+
<AiOutlineLoading className="animate-spin" />
96+
</div>
97+
)}
98+
</td>
99+
<td className="w-[80px]">
100+
{periodicity ? (
101+
<p>{getPeriodicity.result?.ok}</p>
102+
) : (
103+
<div className="flex items-center w-full">
104+
<AiOutlineLoading className="animate-spin" />
105+
</div>
106+
)}
107+
</td>
108+
<td className="w-[80px]">
109+
{contractBalance !== null ? (
110+
<p className="text-ellipsis overflow-hidden">
111+
{trunc(
112+
Math.pow(
113+
contractBalance * 10,
114+
// parseInt(chainInfo?.tokenDecimals[0])
115+
2, //TODO remove this
116+
),
117+
2,
118+
)}{' '}
119+
{chainInfo?.tokenSymbol?.toString()}
120+
</p>
121+
) : (
122+
<div className="flex items-center w-full">
123+
<AiOutlineLoading className="animate-spin" />
124+
</div>
125+
)}
126+
</td>
127+
<td className="w-[80px]">
128+
{fundsNeeded !== null && chainInfo !== undefined ? (
129+
<p className="text-ellipsis overflow-hidden">
130+
{trunc(Math.pow(parseInt(fundsNeeded) * 10, parseInt(chainInfo.tokenDecimals[0])), 2)}{' '}
131+
{chainInfo?.tokenSymbol?.toString()}
132+
</p>
133+
) : (
134+
<div className="flex items-center w-full">
135+
<AiOutlineLoading className="animate-spin" />
136+
</div>
137+
)}
138+
</td>
139+
<td className="w-[80px]">
140+
{/* 🤟🤟🤟 Calculate real next pay day 🤟🤟🤟 */}
141+
{nextBlockPeriod !== null ? (
142+
<p className="text-ellipsis overflow-hidden">{trunc(nextBlockPeriod / periodicity / 7200)}</p>
143+
) : (
144+
<div className="flex items-center w-full">
145+
<AiOutlineLoading className="animate-spin" />
146+
</div>
147+
)}
148+
</td>
149+
<td className="w-[80px]">
150+
{/* 🤟🤟🤟 Show network 🤟🤟🤟 */}
151+
<p>network</p>
152+
</td>
153+
<td className="w-[80px]">
154+
{/* 🤟🤟🤟 Show state 🤟🤟🤟 */}
155+
156+
<p>state</p>
157+
</td>
158+
<td className="w-[100px]">
159+
<Link href={`/contracts/${contract.address}`}>
160+
<Button type="text" text="view" icon="" />
161+
</Link>
162+
</td>
163+
<td className="w-[100px]">
164+
<IoIosAlert className="w-5 h-5 text-opdanger" />
165+
</td>
166+
</tr>
167+
179168
) : (
180169
<div className="flex items-center w-full">
181170
<AiOutlineLoading className="w-5 h-5 animate-spin mx-auto my-2" />

0 commit comments

Comments
 (0)