Skip to content

Commit 5462c0f

Browse files
juliancwirkojuliancwirko
committed
move utils operations
1 parent 5705cdb commit 5462c0f

29 files changed

Lines changed: 632 additions & 1308 deletions

File tree

components/operations/general/herotag.tsx renamed to app/(operations)/general-operations/herotag/components/herotag.tsx

Lines changed: 44 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import keccak from 'keccak';
24
import {
35
SmartContract,
@@ -11,26 +13,26 @@ import * as z from 'zod';
1113
import { useForm } from 'react-hook-form';
1214
import { zodResolver } from '@hookform/resolvers/zod';
1315
import { Form } from '@/components/ui/form';
14-
import {
15-
DialogDescription,
16-
DialogFooter,
17-
DialogHeader,
18-
DialogTitle,
19-
} from '@/components/ui/dialog';
2016
import { OperationsInputField } from '@/components/operations/operations-input-field';
2117
import { OperationsSubmitButton } from '@/components/operations/operations-submit-button';
22-
import { OperationContentProps } from '@/components/operations/operations-common-types';
18+
import { useTxStatus } from '@/hooks/use-tx-status';
19+
import { OperationInfoBox } from '@/components/operation-info-box';
20+
import { useTransaction } from '@useelven/core';
2321

2422
const dnsScAddressForHerotag = (herotag: string) => {
2523
const hashedHerotag = keccak('keccak256').update(herotag).digest();
2624

2725
const initialAddress = Buffer.from(Array(32).fill(1));
28-
const initialAddressSlice = initialAddress.slice(0, 30);
29-
const scId = hashedHerotag.slice(31);
26+
const initialAddressSlice = Uint8Array.prototype.slice.call(
27+
initialAddress,
28+
0,
29+
30
30+
);
31+
const scId = Uint8Array.prototype.slice.call(hashedHerotag, 31);
3032

3133
const deployer_pubkey = Buffer.concat([
3234
initialAddressSlice,
33-
Buffer.from([0, scId.readUIntBE(0, 1)]),
35+
Buffer.from([0, Buffer.from(scId).readUIntBE(0, 1)]),
3436
]);
3537

3638
const scAddress = SmartContract.computeAddress(
@@ -52,23 +54,31 @@ const formSchema = z.object({
5254
}, 'Length between 3 and 25 characters and Lowercase alphanumeric characters only.'),
5355
});
5456

55-
export const Herotag = ({ triggerTx, close }: OperationContentProps) => {
57+
export const Herotag = () => {
58+
const { triggerTx, error, txResult, transaction, pending } = useTransaction();
59+
5660
const form = useForm<z.infer<typeof formSchema>>({
5761
resolver: zodResolver(formSchema),
5862
defaultValues: {
5963
herotag: '',
6064
},
6165
});
6266

67+
useTxStatus({
68+
successHash: txResult?.hash,
69+
pendingHash: transaction?.getHash()?.toString(),
70+
error,
71+
pending,
72+
});
73+
6374
const onSubmit = async ({ herotag }: z.infer<typeof formSchema>) => {
64-
const dnsScAddress = dnsScAddressForHerotag(`${herotag.trim()}.elrond`);
75+
const dnsScAddress = dnsScAddressForHerotag(`${herotag.trim()}`);
6576

66-
const args: TypedValue[] = [
67-
BytesValue.fromUTF8(`${herotag.trim()}.elrond`),
68-
];
77+
const args: TypedValue[] = [BytesValue.fromUTF8(`${herotag.trim()}`)];
6978

79+
// TODO: use modern tools for contract calls
7080
const data = new ContractCallPayloadBuilder()
71-
.setFunction(new ContractFunction('register'))
81+
.setFunction(new ContractFunction('SetUserName'))
7282
.setArgs(args)
7383
.build();
7484

@@ -85,35 +95,24 @@ export const Herotag = ({ triggerTx, close }: OperationContentProps) => {
8595

8696
return (
8797
<>
88-
<DialogHeader className="p-8 pb-0">
89-
<DialogTitle>Assign a herotag to your wallet address</DialogTitle>
90-
<DialogDescription>
91-
The herotag is a unique username you can assign to your wallet
92-
address. Just to let you know, in this case, transaction fees will be
93-
applied.
94-
</DialogDescription>
95-
</DialogHeader>
96-
<div className="overflow-y-auto px-8 py-0">
97-
<Form {...form}>
98-
<form
99-
id="herotag-form"
100-
onSubmit={form.handleSubmit(onSubmit)}
101-
className="space-y-8"
102-
>
103-
<div className="flex-1 overflow-auto p-1">
104-
<OperationsInputField
105-
name="herotag"
106-
label="Herotag username"
107-
placeholder="Example: mycoolusername"
108-
description="Please provide the herotag name"
109-
/>
110-
</div>
111-
</form>
112-
</Form>
113-
</div>
114-
<DialogFooter className="px-8 py-4">
115-
<OperationsSubmitButton formId="herotag-form" />
116-
</DialogFooter>
98+
<OperationInfoBox error={error} txHash={txResult?.hash} />
99+
<Form {...form}>
100+
<form
101+
id="herotag-form"
102+
onSubmit={form.handleSubmit(onSubmit)}
103+
className="space-y-8"
104+
>
105+
<div className="flex-1 overflow-auto p-1">
106+
<OperationsInputField
107+
name="herotag"
108+
label="Herotag username"
109+
placeholder="Example: mycoolusername"
110+
description="Please provide the herotag name"
111+
/>
112+
</div>
113+
<OperationsSubmitButton />
114+
</form>
115+
</Form>
117116
</>
118117
);
119118
};

‎app/(operations)/general-operations/herotag/page.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type { NextPage } from 'next';
2+
import { Herotag } from './components/herotag';
3+
import { Separator } from '@/components/ui/separator';
4+
5+
const HerotagPage: NextPage = () => {
6+
return (
7+
<div>
8+
<div className="mb-6 flex flex-col">
9+
<h1 className="mb-3 scroll-m-20 text-2xl font-semibold leading-none tracking-tight">
10+
Assign a herotag to your wallet address
11+
</h1>
12+
<p className="text-sm text-muted-foreground">
13+
The herotag is a unique username you can assign to your wallet
14+
address. Just to let you know, in this case, transaction fees will be
15+
applied.
16+
</p>
17+
</div>
18+
<Herotag />
19+
<Separator className="my-12" />
20+
<div className="text-xs">
21+
<p className="mb-3"></p>
22+
<p>
23+
The herotag is a distinctive and customizable username that you can
24+
allocate to your digital wallet address, enhancing the ease of
25+
identification and transactions. It&apos;s important to be aware that
26+
assigning a herotag to your wallet does incur transaction fees. This
27+
feature is particularly useful for simplifying the process of sending
28+
and receiving digital currencies, as it replaces the need for sharing
29+
lengthy and complex wallet addresses. By using a herotag, users can
30+
ensure more streamlined and user-friendly transactions. This function
31+
not only adds a personal touch to your digital wallet but also
32+
increases the functionality, making digital transactions more
33+
accessible to everyday users.
34+
</p>
35+
</div>
36+
</div>
37+
);
38+
};
39+
40+
export default HerotagPage;

‎app/(operations)/general-operations/inscriptions/components/sign.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ export const Sign = ({
7676

7777
await signMessage({
7878
message: shaString,
79-
options: { callbackUrl: '/general-operations/inscriptions' },
8079
});
8180

8281
const payload = {

components/operations/utils-operations/check-address-data.tsx renamed to app/(operations)/utilities/address-data/components/address-data.tsx

Lines changed: 31 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1+
'use client';
2+
13
import * as z from 'zod';
24
import { useForm } from 'react-hook-form';
35
import { zodResolver } from '@hookform/resolvers/zod';
46
import { Form } from '@/components/ui/form';
5-
import {
6-
DialogDescription,
7-
DialogFooter,
8-
DialogHeader,
9-
DialogTitle,
10-
} from '@/components/ui/dialog';
117
import { OperationsInputField } from '@/components/operations/operations-input-field';
128
import { OperationsSubmitButton } from '@/components/operations/operations-submit-button';
139
import { useState } from 'react';
@@ -20,7 +16,7 @@ const formSchema = z.object({
2016
addressOrHerotag: z.string().min(1, 'The field is required'),
2117
});
2218

23-
export const CheckAddressData = () => {
19+
export const AddressData = () => {
2420
const [result, setResult] = useState<string>();
2521
const [pending, setPending] = useState(false);
2622
const { apiAddress } = useConfig();
@@ -60,50 +56,34 @@ export const CheckAddressData = () => {
6056

6157
return (
6258
<>
63-
<DialogHeader className="p-8 pb-0">
64-
<DialogTitle>Check address data</DialogTitle>
65-
<DialogDescription>
66-
Check basic address data (also using a herotag). It can also be a
67-
smart contract address. Useful because Explorer API has agressive
68-
cache in some cases.
69-
</DialogDescription>
70-
</DialogHeader>
71-
<div className="overflow-y-auto px-8 py-0">
72-
<Form {...form}>
73-
<form
74-
id="check-address-data-form"
75-
onSubmit={form.handleSubmit(onSubmit)}
76-
className="space-y-8"
77-
>
78-
<div className="flex-1 overflow-auto p-1">
79-
<OperationsInputField
80-
name="addressOrHerotag"
81-
label="Wallet address or herotag"
82-
placeholder="Example: erd1.... or <herotag_name>"
83-
description="Please provide a wallet address to check. You can also use a herotag or you can check a smart contract address."
84-
/>
85-
</div>
86-
</form>
87-
</Form>
88-
{result && (
89-
<Alert className="w-full overflow-y-auto">
90-
<AlertCircle className="h-4 w-4" />
91-
<AlertTitle>The address data:</AlertTitle>
92-
<AlertDescription className="mt-3 w-full">
93-
<pre>
94-
<code>{result}</code>
95-
</pre>
96-
</AlertDescription>
97-
</Alert>
98-
)}
99-
</div>
100-
<DialogFooter className="px-8 py-4">
101-
<OperationsSubmitButton
102-
formId="check-address-data-form"
103-
pending={pending}
104-
isPublic
105-
/>
106-
</DialogFooter>
59+
<Form {...form}>
60+
<form
61+
id="check-address-data-form"
62+
onSubmit={form.handleSubmit(onSubmit)}
63+
className="space-y-8"
64+
>
65+
<div className="flex-1 overflow-auto p-1">
66+
<OperationsInputField
67+
name="addressOrHerotag"
68+
label="Wallet address or herotag"
69+
placeholder="Example: erd1.... or <herotag_name>"
70+
description="Please provide a wallet address to check. You can also use a herotag or you can check a smart contract address."
71+
/>
72+
</div>
73+
<OperationsSubmitButton pending={pending} isPublic />
74+
</form>
75+
</Form>
76+
{result && (
77+
<Alert className="mt-6 w-full overflow-y-auto">
78+
<AlertCircle className="h-4 w-4" />
79+
<AlertTitle>The address data:</AlertTitle>
80+
<AlertDescription className="mt-3 w-full">
81+
<pre>
82+
<code>{result}</code>
83+
</pre>
84+
</AlertDescription>
85+
</Alert>
86+
)}
10787
</>
10888
);
10989
};

‎app/(operations)/utilities/address-data/page.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { NextPage } from 'next';
2+
import { AddressData } from './components/address-data';
3+
import { Separator } from '@/components/ui/separator';
4+
5+
const AddressDataPage: NextPage = () => {
6+
return (
7+
<div>
8+
<div className="mb-6 flex flex-col">
9+
<h1 className="mb-3 scroll-m-20 text-2xl font-semibold leading-none tracking-tight">
10+
Check address data
11+
</h1>
12+
<p className="text-sm text-muted-foreground">
13+
Check basic address data (also using a herotag). It can also be a
14+
smart contract address. Useful because Explorer API has agressive
15+
cache in some cases.
16+
</p>
17+
</div>
18+
<AddressData />
19+
<Separator className="my-12" />
20+
<div className="text-xs">
21+
<p className="mb-3">
22+
Access essential information about blockchain addresses through our
23+
Explorer API, which supports both standard and smart contract
24+
addresses. Additionally, our system allows the use of
25+
&apos;herotags&apos; for more intuitive queries. This capability is
26+
particularly valuable because the Explorer API utilizes aggressive
27+
caching strategies in certain situations, which can expedite data
28+
retrieval but might also delay updates. By using our service,
29+
developers and analysts can efficiently check basic address data,
30+
monitor smart contract interactions, and retrieve up-to-date
31+
information crucial for real-time decision making. Whether you are
32+
tracking transactions, verifying smart contracts, or conducting
33+
security audits, our API provides the necessary tools to ensure you
34+
have the most current and relevant data at your disposal.
35+
</p>
36+
</div>
37+
</div>
38+
);
39+
};
40+
41+
export default AddressDataPage;

0 commit comments

Comments
 (0)