Add links to 'About' and 'How To Use' Client Smart Contract (#196)

Author: Filip-L

src/components/Countdown.tsx

@@ -54,13 +54,13 @@ const Countdown: React.FC = () => {
     <div className="px-6">
       <p
         className="cursor-default"
-        title="Using Client smart contract is available only for new applications. Select Contract as allocation type to start using it"
+        title="Using Client Smart Contract is available only for new applications. Select Contract as allocation type to start using it"
       >
         Direct allocation of DataCap will be deprecated in{' '}
         <span className="whitespace-nowrap">
           {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m
         </span>{' '}
-        (June 1). Start using the Client smart contract today.
+        (June 1). Start using the Client Smart Contract today.
       </p>
     </div>
   )

src/components/DatacapAmountModel.tsx

@@ -110,9 +110,11 @@ const DatacapAmountModal = ({
             ].includes(application?.Lifecycle?.State) && (
               <div className="flex justify-items-center justify-between content-center items-center	w-full">
                 <FormControl>
-                  <FormLabel id="demo-controlled-radio-buttons-group">
-                    Allocation type
-                  </FormLabel>
+                  <div className="flex justify-between items-center">
+                    <FormLabel id="demo-controlled-radio-buttons-group">
+                      Allocation type
+                    </FormLabel>
+                  </div>
                   <RadioGroup
                     aria-labelledby="demo-controlled-radio-buttons-group"
                     value={allocationConfig.allocationType}
@@ -124,11 +126,31 @@ const DatacapAmountModal = ({
                       })
                     }}
                   >
-                    <FormControlLabel
-                      value={'contract'}
-                      control={<Radio />}
-                      label={'Contract'}
-                    />
+                    <div className="flex items-center justify-between">
+                      <FormControlLabel
+                        value={'contract'}
+                        control={<Radio />}
+                        label={'Contract'}
+                      />
+                      <div className="flex gap-4">
+                        <a
+                          href="https://www.fidl.tech/news/improvements-to-datacap-management"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-500 hover:underline"
+                        >
+                          About
+                        </a>
+                        <a
+                          href="https://github.com/fidlabs/contract-metaallocator/blob/main/HowToUseClientSmartContract.md"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-500 hover:underline"
+                        >
+                          How To Use
+                        </a>
+                      </div>
+                    </div>
                     <FormControlLabel
                       value="directly"
                       control={<Radio />}