From 7d6357501dc1566df29d71dd17e91fc2d82a0366 Mon Sep 17 00:00:00 2001
From: PJColombo <paulo.colombo@pm.me>
Date: Mon, 19 Jul 2021 15:33:50 +0200
Subject: [PATCH] Onboarding: Create Issuance settings form

---
 .../Screens/Apps/IssuanceSettings.js          |  22 ----
 .../Screens/Apps/IssuanceSettings/index.js    | 108 ++++++++++++++++++
 src/providers/Onboarding.js                   |   2 +-
 3 files changed, 109 insertions(+), 23 deletions(-)
 delete mode 100644 src/components/Onboarding/Screens/Apps/IssuanceSettings.js
 create mode 100644 src/components/Onboarding/Screens/Apps/IssuanceSettings/index.js

diff --git a/src/components/Onboarding/Screens/Apps/IssuanceSettings.js b/src/components/Onboarding/Screens/Apps/IssuanceSettings.js
deleted file mode 100644
index e336ab652..000000000
--- a/src/components/Onboarding/Screens/Apps/IssuanceSettings.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { useOnboardingState } from '@providers/Onboarding'
-import Navigation from '../../Navigation'
-
-function IssuanceSettings({ title }) {
-  const { onBack, onNext, step, steps } = useOnboardingState()
-
-  return (
-    <div>
-      {title}
-      <Navigation
-        backEnabled
-        nextEnabled
-        nextLabel={`Next: ${steps[step + 1].title}`}
-        onBack={onBack}
-        onNext={onNext}
-      />
-    </div>
-  )
-}
-
-export default IssuanceSettings
diff --git a/src/components/Onboarding/Screens/Apps/IssuanceSettings/index.js b/src/components/Onboarding/Screens/Apps/IssuanceSettings/index.js
new file mode 100644
index 000000000..47ff4f2cd
--- /dev/null
+++ b/src/components/Onboarding/Screens/Apps/IssuanceSettings/index.js
@@ -0,0 +1,108 @@
+import React, { Fragment, useCallback, useReducer } from 'react'
+import { GU, Help } from '@1hive/1hive-ui'
+import { useOnboardingState } from '@providers/Onboarding'
+import { Header, PercentageField } from '@components/Onboarding/kit'
+import Navigation from '@components/Onboarding/Navigation'
+
+function reduceFields(fields, [field, value]) {
+  switch (field) {
+    case 'targetRatio':
+      return { ...fields, targetRatio: value }
+    case 'maxAdjustmentRatioPerYear':
+      return { ...fields, maxAdjustmentRatioPerYear: value }
+    default:
+      return fields
+  }
+}
+
+function IssuanceSettings() {
+  const {
+    config,
+    onBack,
+    onConfigChange,
+    onNext,
+    step,
+    steps,
+  } = useOnboardingState()
+  const [
+    { targetRatio, maxAdjustmentRatioPerYear },
+    updateField,
+  ] = useReducer(reduceFields, { ...config.issuance })
+
+  const handleTargetRatioChange = useCallback(
+    value => {
+      updateField(['targetRatio', value])
+    },
+    [updateField]
+  )
+
+  const handleMaxAdjustmentRatioPerYear = useCallback(
+    value => {
+      updateField(['maxAdjustmentRatioPerYear', value])
+    },
+    [updateField]
+  )
+
+  const handleNextClick = () => {
+    // TODO: Validate data if necessary
+    onConfigChange('issuance', { targetRatio, maxAdjustmentRatioPerYear })
+    onNext()
+  }
+
+  return (
+    <div>
+      <Header
+        title="Configure Issuance Parameters"
+        subtitle="Model and create your community's economy "
+      />
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          margin: 0 ${2 * GU}px;
+          margin-bottom: ${5 * GU}px;
+        `}
+      >
+        <PercentageField
+          label={
+            <Fragment>
+              Token Ratio
+              <Help hint="What is Token Ratio?">
+                <strong>Token Ratio</strong> is the ideal fraction of the total
+                supply that should be in the Common Pool. For example, a value
+                of 0.3 means that 30% of the total supply should ideally be in
+                the Common Pool.
+              </Help>
+            </Fragment>
+          }
+          value={targetRatio}
+          onChange={handleTargetRatioChange}
+        />
+        <PercentageField
+          label={
+            <Fragment>
+              Max. Adjustment Per Year
+              <Help hint="What is Max. Adjustment Per Year?">
+                <strong>Max. Adjustment Per Year</strong>
+                is the maximum issuance that can happen in a year. For example,
+                a value of 0.1 means there can never be more than 10% new
+                issuance per year.
+              </Help>
+            </Fragment>
+          }
+          value={maxAdjustmentRatioPerYear}
+          onChange={handleMaxAdjustmentRatioPerYear}
+        />
+      </div>
+      <Navigation
+        backEnabled
+        nextEnabled
+        nextLabel={`Next: ${steps[step + 1].title}`}
+        onBack={onBack}
+        onNext={handleNextClick}
+      />
+    </div>
+  )
+}
+
+export default IssuanceSettings
diff --git a/src/providers/Onboarding.js b/src/providers/Onboarding.js
index dc53ee1fb..91a5643e7 100644
--- a/src/providers/Onboarding.js
+++ b/src/providers/Onboarding.js
@@ -41,7 +41,7 @@ const DEFAULT_CONFIG = {
     weight: calculateWeight(2, 10),
   },
   issuance: {
-    maxAdjustmentRatioPerSecond: 0,
+    maxAdjustmentRatioPerYear: 0,
     targetRatio: 0,
   },
   liquidity: {