explain ratio and rounding

1 files changed, 97 insertions, 3 deletions

diff --git a/packages/demobank-ui/src/pages/ConversionConfig.tsx b/packages/demobank-ui/src/pages/ConversionConfig.tsx
index d9cd46783..37dd580c2 100644
--- a/packages/demobank-ui/src/pages/ConversionConfig.tsx
+++ b/packages/demobank-ui/src/pages/ConversionConfig.tsx
@@ -377,7 +377,7 @@ function useComponentState({
 
 
             {section == "cashout" && <Fragment>
-            <ConversionForm id="cashout"
+              <ConversionForm id="cashout"
                 inputCurrency={info.regional_currency}
                 outputCurrency={info.fiat_currency}
                 fee={form?.conv?.cashout_fee}
@@ -730,13 +730,19 @@ function ConversionForm({ id, inputCurrency, outputCurrency, fee, minimum, ratio
       </p>
     </div>
 
+    <div class="px-6 pt-4">
+      <Attention title={i18n.str`Example conversion`}>
+        <i18n.Translate>1 {inputCurrency} will be converted into {ratio?.value} {outputCurrency}</i18n.Translate>
+      </Attention>
+    </div>
+
     <div class="px-6 pt-6">
       <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
         <div class="sm:col-span-5">
           <label
             for="cashin_tiny_amount"
             class="block text-sm font-medium leading-6 text-gray-900"
-          >{i18n.str`Minimum difference`}</label>
+          >{i18n.str`Rounding value`}</label>
           <InputAmount
             name="cashin_tiny_amount"
             left
@@ -755,7 +761,6 @@ function ConversionForm({ id, inputCurrency, outputCurrency, fee, minimum, ratio
       </div>
     </div>
 
-
     <div class="px-6 pt-6">
       <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
         <div class="sm:col-span-5">
@@ -891,6 +896,95 @@ function ConversionForm({ id, inputCurrency, outputCurrency, fee, minimum, ratio
       </div>
     </div>
 
+    <div class="px-6 pt-4">
+      <Attention title={i18n.str`Examples`}>
+        <section class="grid grid-cols-1 gap-y-3  text-gray-600">
+          <details class="group  text-sm">
+            <summary class="flex cursor-pointer flex-row items-center justify-between  ">
+              Rounding an amount of 1.24 with rounding value 0.1
+              <svg class="h-6 w-6 rotate-0 transform  group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </summary>
+            <p class="text-gray-900 my-4">
+              Given the rounding value of 0.1 the possible values closest to 1.24 are: 1.1, 1.2, 1.3, 1.4.
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "zero" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "nearest" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 mt-4">
+              With the "up" mode the value will be rounded to 1.3
+            </p>
+          </details>
+          <details class="group ">
+            <summary class="flex cursor-pointer flex-row items-center justify-between  ">
+              Rounding an amount of 1.26 with rounding value 0.1
+              <svg class="h-6 w-6 rotate-0 transform  group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </summary>
+            <p class="text-gray-900 my-4">
+              Given the rounding value of 0.1 the possible values closest to 1.24 are: 1.1, 1.2, 1.3, 1.4.
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "zero" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "nearest" mode the value will be rounded to 1.3
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "up" mode the value will be rounded to 1.3
+            </p>
+          </details>
+          <details class="group ">
+            <summary class="flex cursor-pointer flex-row items-center justify-between  ">
+              Rounding an amount of 1.24 with rounding value 0.3
+              <svg class="h-6 w-6 rotate-0 transform  group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </summary>
+            <p class="text-gray-900 my-4">
+              Given the rounding value of 0.3 the possible values closest to 1.24 are: 0.9, 1.2, 1.5, 1.8.
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "zero" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "nearest" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "up" mode the value will be rounded to 1.5
+            </p>
+          </details>
+          <details class="group ">
+            <summary class="flex cursor-pointer flex-row items-center justify-between  ">
+              Rounding an amount of 1.26 with rounding value 0.3
+              <svg class="h-6 w-6 rotate-0 transform  group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </summary>
+            <p class="text-gray-900 my-4">
+              Given the rounding value of 0.3 the possible values closest to 1.24 are: 0.9, 1.2, 1.5, 1.8.
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "zero" mode the value will be rounded to 1.2
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "nearest" mode the value will be rounded to 1.3
+            </p>
+            <p class="text-gray-900 my-4">
+              With the "up" mode the value will be rounded to 1.3
+            </p>
+          </details>
+        </section>
+      </Attention>
+    </div>
+
+
+
     <div class="px-6 pt-6">
       <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
         <div class="sm:col-span-5">