pollum-io · lucasgabrielgsp · May 24, 2023
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -10,10 +10,10 @@ import { FourthRow } from './Rows/FourthRow';
 export const Body = () => (
   <div className="grid md:gap-y-3 text-center w-full h-max">
     <FirstRow />
-    <SecondRow />
+    {/* <SecondRow /> */}
 
-    <ThirdRow />
-    <FourthRow />
+    {/* <ThirdRow /> */}
+    {/* <FourthRow /> */}
 
     <div className="flex flex-row items-center justify-center w-full py-4">
       <img src={logo} alt="" className="w-32 md:w-40" />

diff --git a/src/components/Buttons/Button.tsx b/src/components/Buttons/Button.tsx
@@ -33,12 +33,18 @@ export const PrimaryButton: React.FC<IButton> = ({
 interface IInput {
   placeholder: string;
   disabled?: boolean;
+  onChange?: (e: any) => void;
 }
 
-export const Input: React.FC<IInput> = ({ disabled = false, placeholder }) => (
+export const Input: React.FC<IInput> = ({
+  disabled = false,
+  placeholder,
+  onChange,
+}) => (
   <input
     className="border border-bkg-4 bg-bkg-6 font-poppins text-left px-4 py-1 rounded-full h-max hover:border-fields-input-borderfocus focus:border-fields-input-borderfocus outline-none"
     disabled={disabled}
     placeholder={placeholder}
+    onChange={onChange}
   />
 );
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -6,7 +6,9 @@ import { useProviderContext } from '../contexts/provider';
 
 export const Header = () => {
   const { setPrefix, prefix } = useProviderContext();
-  const { state: { account, network } } = usePaliMethods();
+  const {
+    state: { account, network },
+  } = usePaliMethods();
 
   const options = {
     sys: {
@@ -16,13 +18,13 @@ export const Header = () => {
     eth: {
       label: 'Provider - Ethereum',
       value: 'eth',
-    }
+    },
   };
 
-  const stored = window.localStorage.getItem('pali_provider');
+  const storedPrefix = window.localStorage.getItem('pali_prefix');
 
   useEffect(() => {
-    if (stored !== options[prefix]) setPrefix(stored);
+    if (storedPrefix !== options[prefix]) setPrefix(storedPrefix);
   }, []);
 
   return (
@@ -42,9 +44,19 @@ export const Header = () => {
           Chain ID: {network.chainId || ''}
         </div>
 
-        <select name="provider" onChange={(event) => setPrefix(event.target.value)} className="cursor-pointer w-64 bg-alert-darkwarning px-4 py-1 rounded-full text-sm font-poppins flex items-center">
+        <select
+          name="provider"
+          onChange={(event) => setPrefix(event.target.value)}
+          className="cursor-pointer w-64 bg-alert-darkwarning px-4 py-1 rounded-full text-sm font-poppins flex items-center"
+        >
           {Object.values(options).map((option) => (
-            <option key={option.value} defaultValue={prefix} value={option.value}>{option.label}</option>
+            <option
+              key={option.value}
+              defaultValue={prefix}
+              value={option.value}
+            >
+              {option.label}
+            </option>
           ))}
         </select>
       </div>

diff --git a/src/components/Rows/FirstRow.tsx b/src/components/Rows/FirstRow.tsx
@@ -8,9 +8,7 @@ import { useProviderContext } from '../../contexts/provider';
 import { usePaliMethods } from '../../contexts/requests';
 
 export const FirstRow = () => {
-  const { 
-    request,
-   } = usePaliMethods();
+  const { request } = usePaliMethods();
   const { prefix } = useProviderContext();
 
   const [output, setOutput] = useState('');
@@ -29,14 +27,14 @@ export const FirstRow = () => {
     <div className="bg-bkg-3 md:rounded-md grid lg:grid-cols-3 gap-y-4 lg:gap-y-0 md:gap-x-4 py-5 justify-center align-center w-full h-max">
       <BasicActionsCard />
 
-      <Card title="SIGN ACTIONS">
+      {/* <Card title="SIGN ACTIONS">
         <div className="grid grid-rows-3 gap-y-3 rounded-full">
           <PrimaryButton
             onClick={() => onSubmit('signAndSend')}
             text="Sign PSBT"
             type="button"
           />
-          <PrimaryButton 
+          <PrimaryButton
             onClick={() => onSubmit('getSignedPsbt')}
             text="Get signed PSBT"
             type="button"
@@ -49,23 +47,22 @@ export const FirstRow = () => {
 
           <Output output={output || ' '} />
         </div>
-      </Card>
+      </Card> */}
     </div>
   );
 };
 
 const BasicActionsCard = () => {
-  const {
-    changeAccount,
-    connect,
-    disconnect,
-    getAccount,
-  } = usePaliMethods();
+  const { changeAccount, connect, disconnect, getAccount } = usePaliMethods();
   const [output, setOutput] = useState('');
 
   const handleExecution = async (fn: () => any) => {
-    const data = await fn();
-    setOutput(JSON.stringify(data));
+    try {
+      const data = await fn();
+      setOutput(JSON.stringify(data));
+    } catch (err) {
+      setOutput(JSON.stringify(err));
+    }
   };
 
   return (
@@ -95,4 +92,4 @@ const BasicActionsCard = () => {
       </div>
     </Card>
   );
-};
+};
diff --git a/src/components/Rows/SecondRow.tsx b/src/components/Rows/SecondRow.tsx
@@ -14,13 +14,17 @@ export const SecondRow = () => {
   const [output, setOutput] = useState('');
 
   const onSubmit = (type: string) => {
-    const tx = data[type];
+    try {
+      const tx = data[type];
 
-    const method = `${prefix}_${type}`;
+      const method = `${prefix}_${type}`;
 
-    request(method, [tx]).then((response) =>
-      setOutput(JSON.stringify(response))
-    );
+      request(method, [tx]).then((response) =>
+        setOutput(JSON.stringify(response))
+      );
+    } catch (err) {
+      setOutput(JSON.stringify(err));
+    }
   };
 
   return (

diff --git a/src/components/Rows/ThirdRow.tsx b/src/components/Rows/ThirdRow.tsx
@@ -1,34 +1,92 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Card } from '../Card';
 import { Output } from '../Output';
 import { PrimaryButton, Input } from '../Buttons/Button';
+// import {
+//   isValidEthereumAddress,
+//   isValidSYSAddress,
+// } from '@pollum-io/sysweb3-utils';
+// import { validateEthRpc, validateSysRpc } from '@pollum-io/sysweb3-network';
 
-export const ThirdRow = () => (
-  <div className="bg-bkg-4 md:rounded-md grid lg:grid-cols-3 gap-y-4 py-5 justify-center align-center w-full h-max">
-    <Card title="SYSWEB3 - VALIDATE ADDRESS">
-      <div className="grid grid-rows-3 gap-y-3 rounded-full">
-        <Input placeholder="Validate Address" />
-        <PrimaryButton text="Validate" type="button" />
-        <Output output="true" />
-      </div>
-    </Card>
+export const ThirdRow = () => {
+  const [currentInputValue, setCurrentInputValue] = useState<string>('');
+  const [output, setOutput] = useState<string>('');
 
-    <Card title="SYSWEB3 - GET TOKEN">
-      <div className="flex flex-col gap-y-3 rounded-full">
-        <Input placeholder="Token ID:" />
-        <PrimaryButton text="Get token data" type="button" />
-        <Output output="{}" />
-      </div>
-    </Card>
+  const handleMethods = (method: string) => {
+    switch (method) {
+      // case 'validateEthAddress':
+      //   const isValidEthAddress = isValidEthereumAddress(currentInputValue);
+      //   setOutput(JSON.stringify({ isValidEthAddress }));
+      //   break;
+      // case 'validateSysAddress':
+      //   const isValidSysAddress = isValidSYSAddress(currentInputValue, 57);
+      //   setOutput(JSON.stringify({ isValidSysAddress }));
+      //   break;
+      // case 'validateSysRpc':
+      //   const isValidSysRpc = validateSysRpc(currentInputValue);
+      //   setOutput(JSON.stringify({ isValidSysRpc }));
+      //   break;
+      // case 'validateEthRpc':
+      //   const isValidEthRpc = validateEthRpc(currentInputValue);
+      //   setOutput(JSON.stringify({ isValidEthRpc }));
+      //   break;
+    }
+  };
+  return (
+    <div className="bg-bkg-4 md:rounded-md grid lg:grid-cols-3 gap-y-4 py-5 justify-center align-center w-full h-max">
+      <Card title="SYSWEB3 - VALIDATE ETH ADDRESS">
+        <div className="grid grid-rows-3 gap-y-3 rounded-full">
+          <Input
+            placeholder="Validate Address"
+            onChange={(e) => setCurrentInputValue(e.target.value)}
+          />
+          <PrimaryButton
+            text="Validate"
+            type="button"
+            onClick={() => handleMethods('validateEthAddress')}
+          />
+          <Output output="true" />
+        </div>
+      </Card>
 
-    <Card title="SYSWEB3 - VALIDATE RPC URL">
-      <div className="flex flex-col gap-y-3 rounded-full">
-        <Input placeholder="URL:" />
-        <PrimaryButton text="Validate" type="button" />
+      <Card title="SYSWEB3 - VALIDATE SYS ADDRESS">
+        <div className="grid grid-rows-3 gap-y-3 rounded-full">
+          <Input
+            placeholder="Validate Address"
+            onChange={(e) => setCurrentInputValue(e.target.value)}
+          />
+          <PrimaryButton
+            text="Validate"
+            type="button"
+            onClick={() => handleMethods('validateSysAddress')}
+          />
+          <Output output="true" />
+        </div>
+      </Card>
 
-        <Output output="true" />
-      </div>
-    </Card>
-  </div>
-);
+      <Card title="SYSWEB3 - VALIDATE SYS RPC URL">
+        <div className="flex flex-col gap-y-3 rounded-full">
+          <Input
+            placeholder="URL:"
+            onChange={(e) => setCurrentInputValue(e.target.value)}
+          />
+          <PrimaryButton text="Validate" type="button" />
+
+          <Output output="true" />
+        </div>
+      </Card>
+      <Card title="SYSWEB3 - VALIDATE ETH RPC URL">
+        <div className="flex flex-col gap-y-3 rounded-full">
+          <Input
+            placeholder="URL:"
+            onChange={(e) => setCurrentInputValue(e.target.value)}
+          />
+          <PrimaryButton text="Validate" type="button" />
+
+          <Output output="true" />
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/src/components/SendForm.tsx b/src/components/SendForm.tsx
@@ -16,16 +16,6 @@ export const SendForm = () => {
 
   const [form] = Form.useForm();
 
-  useEffect(() => {
-    const estimateFee = async () => {
-      const fee_ = await request('wallet_estimateFee');
-
-      form.setFieldsValue({ fee: fee_ });
-    };
-
-    estimateFee();
-  }, []);
-
   const onSubmit = (data: any) => {
     const tx = {
       amount: Number(data.amount),

diff --git a/src/contexts/provider.tsx b/src/contexts/provider.tsx
@@ -1,27 +1,31 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-const storedPrefix = window.localStorage && window.localStorage.getItem('pali_provider');
-
-const defaultValue = { provider: window.pali ?? undefined, setProvider: ((state: any) => (state)) as any, setPrefix: ((state: any) => (state)) as any, prefix: storedPrefix || 'sys' };
+const storedPrefix =
+  window.localStorage && window.localStorage.getItem('pali_prefix');
+
+const defaultValue = {
+  provider: window.pali ?? undefined,
+  setProvider: ((state: any) => state) as any,
+  setPrefix: ((state: any) => state) as any,
+  prefix: storedPrefix || 'sys',
+};
 
 const ProviderContext = createContext(defaultValue);
 
-export const PaliWalletProvider = ({ children }: { children: any; }) => {
+export const PaliWalletProvider = ({ children }: { children: any }) => {
   const { pali } = window;
-  
+
   const [prefix, setPrefix] = useState('sys');
   const [provider, setProvider] = useState(pali ?? undefined);
   const [hydrated, setHydrated] = useState(false);
 
-  const network = provider.request({ method: 'wallet_getNetwork', args: [] });
-
   useEffect(() => {
     const _provider = prefix === 'sys' ? window.pali : window.ethereum;
 
     setProvider(_provider);
 
-    window.localStorage.setItem('pali_provider', prefix);
-  }, [prefix, network]);
+    window.localStorage.setItem('pali_prefix', prefix);
+  }, [prefix]);
 
   useEffect(() => {
     setPrefix(storedPrefix);
@@ -34,7 +38,9 @@ export const PaliWalletProvider = ({ children }: { children: any; }) => {
   }
 
   return (
-    <ProviderContext.Provider value={{ provider, setProvider, setPrefix, prefix }}>
+    <ProviderContext.Provider
+      value={{ provider, setProvider, setPrefix, prefix }}
+    >
       {children}
     </ProviderContext.Provider>
   );