Update tooling and clean

frontend/package.json

@@ -18,10 +18,10 @@
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@massalabs/eslint-config": "^0.0.11",
-    "@massalabs/massa-web3": "^4.0.1",
+    "@massalabs/massa-web3": "^5.1.1-dev",
     "@massalabs/prettier-config-as": "^0.0.2",
-    "@massalabs/react-ui-kit": "^0.0.5-dev",
-    "@massalabs/wallet-provider": "^2.0.1-dev",
+    "@massalabs/react-ui-kit": "../../../Tooling/ui-kit",
+    "@massalabs/wallet-provider": "../../../Tooling/wallet-provider",
     "axios": "^1.7.2",
     "dot-object": "^2.1.5",
     "eslint-plugin-html": "^8.1.1",
@@ -32,7 +32,7 @@
     "react-dom": "^18.2.0",
     "tw-colors": "^3.3.1",
     "vite-plugin-svgr": "^4.2.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.6"
   },
   "devDependencies": {
     "@types/dot-object": "^2.1.6",

frontend/src/App.tsx

@@ -1,51 +1,13 @@
-import { ConnectMassaWallet } from './lib/connectMassaWallets/components/ConnectMassaWallet';
 import { Card } from './components/Card';
-import { FAQ, FAQData } from './components/FAQ';
-import { Button, Toast } from '@massalabs/react-ui-kit';
+import { FAQ } from './components/FAQ';
+import { Button, ConnectMassaWallet, Toast } from '@massalabs/react-ui-kit';
 import { MNSManagement } from './components/MNSManagement';
 
-const faqData: FAQData[] = [
-  {
-    question: 'What is Massa Name Service ?',
-    answer:
-      'Massa Name Service is a decentralized naming service which allows users and smart contracts to be recognized on the Massa blockchain.',
-  },
-  {
-    question: 'How do I register a name ?',
-    answer:
-      'To register a name, you need to connect your Massa wallet and enter the name you want to register in the register section. If the name is available, you can register it by paying the registration fee.',
-  },
-  {
-    question: 'How much does it cost to register a name ?',
-    answer:
-      'The cost depends on the size of the name. 10000 coins for 2 characters, 1000 coins for 3 characters, 100 coins for 4 characters, 10 coins for 5 characters and 1 coin for 6 and more characters. An little additional amount is taken to cover storage fees. You can see the exact price while typing a domain in the register section.',
-  },
-  {
-    question: 'How do I transfer a name ?',
-    answer:
-      'Massa Names are NFTs and can be transferred like any other NFT. You can transfer them on purrfect universe using the icon at the top of the page.',
-  },
-  {
-    question: 'Can I change the address my name is targeting ?',
-    answer:
-      'Yes you can change the address your name is targeting by using the edit icon in the management section. It will change the target address but you will still be the owner of the name.',
-  },
-  {
-    question: 'For how long is a name registered ?',
-    answer: 'Forever.',
-  },
-  {
-    question: 'Can I free my name and get my coins back ?',
-    answer:
-      'Yes you can free your name using the trash icon in the management section. You will get half of the coins you paid for the registration back.',
-  },
-];
-
 function App() {
   return (
     <>
       <Toast />
-      <div className="sm:w-full md:max-w-4xl mx-auto">
+      <div className="sm:w-full md:max-w-4xl mx-auto mt-10">
         <div className="flex justify-between mb-2">
           <img
             src="/logo_massa.svg"
@@ -72,10 +34,10 @@ function App() {
           </section>
           <section className="mb-16">
             <Card customClass="flex items-center justify-center min-w-96 min-h-32">
-              <MNSManagement customClass="grow" />
+              <MNSManagement />
             </Card>
           </section>
-          <FAQ data={faqData} />
+          <FAQ />
         </div>
       </div>
     </>

frontend/src/components/FAQ.tsx

@@ -1,23 +1,18 @@
 import { Accordion } from '@massalabs/react-ui-kit';
+import { faqData } from '../const/faq';
 
 export interface FAQData {
   question: string;
   answer: string;
 }
 
-interface FAQProps {
-  data: FAQData[];
-}
-
-export function FAQ(props: FAQProps) {
-  const { data } = props;
-  if (!data) return null;
+export function FAQ() {
   return (
     <>
       <section className="mb-8">
         <p className="mas-title mb-2">FAQ</p>
       </section>
-      {data.map((item, idx) => (
+      {faqData.map((item, idx) => (
         <Accordion
           key={idx}
           customClass="bg-primary border-none rounded-xl p-1 mb-10"

frontend/src/components/MNSClaim.tsx

@@ -1,56 +1,24 @@
-import { Button, toast } from '@massalabs/react-ui-kit';
+import { Button, formatAmount } from '@massalabs/react-ui-kit';
 import { InputWithRightText } from './InputWithRightText';
-import { useState } from 'react';
-import { DnsAllocParams, DnsGetAllocCostResponse } from '../utils/write-mns-sc';
-import { useAccountStore } from '../lib/connectMassaWallets/store';
-import { toMAS } from '@massalabs/massa-web3';
+import { Mas, Provider } from '@massalabs/massa-web3';
+import { useMnsClaim } from '../hooks/useMnsClaim';
+import { useEffect } from 'react';
+import { useMnsStore } from '../store/mns';
 
-interface MNSClaimProps {
-  dnsAlloc: (data: DnsAllocParams) => void;
-  getAllocCost: (data: DnsAllocParams) => Promise<DnsGetAllocCostResponse>;
+interface MnsClaimProps {
+  provider: Provider;
 }
 
-export function MNSClaim(props: MNSClaimProps) {
-  const { dnsAlloc, getAllocCost } = props;
-  const [domain, setDomain] = useState<string>('');
-  const { connectedAccount } = useAccountStore();
-  const [allocCost, setAllocCost] = useState<DnsGetAllocCostResponse>({
-    price: 0n,
-  });
+export function MNSClaim({ provider }: MnsClaimProps) {
+  const { onDomainChange, claim, error, loadPrice, allocCost, domain } =
+    useMnsClaim(provider);
+  const { mnsContract } = useMnsStore();
 
-  function claim() {
-    if (!connectedAccount) {
-      toast.error('Please connect your wallet');
-      return;
-    }
-    if (!allocCost.price) {
-      toast.error('Invalid price');
-      return;
-    }
-    dnsAlloc({
-      domain,
-      targetAddress: connectedAccount.address(),
-      coins: allocCost.price,
-    });
-  }
+  useEffect(() => {
+    onDomainChange(domain);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [provider, mnsContract]);
 
-  function onDomainChange(domain: string) {
-    if (!connectedAccount) {
-      toast.error('Please connect your wallet');
-      return;
-    }
-    if (domain == '') {
-      setAllocCost({ price: 0n });
-      return;
-    }
-    setDomain(domain);
-    getAllocCost({
-      domain,
-      targetAddress: connectedAccount?.address() ?? '',
-    }).then((cost) => {
-      setAllocCost(cost);
-    });
-  }
   return (
     <div>
       <div className="grid grid-cols-4 gap-2">
@@ -63,16 +31,20 @@ export function MNSClaim(props: MNSClaimProps) {
               onDomainChange(e.target.value);
             }}
           />
-          {allocCost.price !== null ? (
+
+          {error ? (
+            <p className="mb-4 font-light text-s-error">{error}</p>
+          ) : loadPrice ? (
+            <p className="mb-4 font-light text-neutral">Loading price...</p>
+          ) : (
             <p className="mb-4 font-light text-neutral">
-              Price {toMAS(allocCost.price).toFixed(4)} MAS
+              {/* TODO: fix to get the same behavior than prod */}
+              Price {formatAmount(allocCost, Mas.NB_DECIMALS).preview} MAS
             </p>
-          ) : (
-            <p className="mb-4 font-light text-s-error">{allocCost.error}</p>
           )}
         </div>
         <Button
-          disabled={allocCost.price !== null ? false : true}
+          disabled={!!error || loadPrice || !allocCost}
           onClick={() => claim()}
         >
           Register