diff options
Diffstat (limited to 'packages/demobank-ui')
-rw-r--r-- | packages/demobank-ui/src/pages/ConversionConfig.tsx | 100 |
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"> |