withdraw

components/common/input/Input.vue

@@ -0,0 +1,23 @@
+<template>
+  <input class="w-full px-4 py-2 rounded-[6px] border border-grey-dark border-opacity-[0.15]" v-bind="$attrs" v-on="inputListeners" />
+</template>
+
+<script>
+import { defineComponent, computed } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false,
+  setup(props, context) {
+    // Source: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
+    const inputListeners = computed(() =>
+      Object.assign({}, context.listeners, {
+        input(event) {
+          context.emit('input', event.target.value)
+        },
+      })
+    )
+
+    return { inputListeners }
+  },
+})
+</script>

components/sidebar/context/SidebarWithdraw.vue

@@ -0,0 +1,181 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Withdraw {{ symbol }}</template>
+
+    <SidebarSectionValueWithIcon label="Token Balance" center>
+      <template #icon
+        ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
+      /></template>
+      <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
+    </SidebarSectionValueWithIcon>
+
+    <div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 px-4 py-8">
+      <div>
+        <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+          Withdrawal Address
+        </h3>
+
+        <Input
+          v-model="accountAddress"
+          placeholder="Paste account address"
+          :error="errors.accountAddress.message"
+        ></Input>
+        <p class="text-sm text-center text-primary-gray mt-2">
+          You can only withdraw tokens to owner's address
+        </p>
+      </div>
+
+      <div class="mt-6">
+        <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+          Amount to withdraw
+        </h3>
+
+        <input-numeric
+          v-model="amount"
+          placeholder="Amount to withdraw"
+          :error="errors.amount.message"
+        >
+          <template v-if="!isMaxAmount" #suffix>
+            <div class="absolute mt-2 top-0 right-0 mr-4">
+              <button
+                type="button"
+                class="text-primary-blue-dark font-semibold text-sm hover:text-primary-blue-hover"
+                @click="toggle"
+              >
+                Max
+              </button>
+            </div>
+          </template>
+        </input-numeric>
+      </div>
+
+      <div class="flex flex-shrink-0 mt-16">
+        <ButtonCTA
+          class="w-full"
+          :disabled="!isValid || pending"
+          :loading="pending"
+          @click="cast"
+        >
+          Withdraw
+        </ButtonCTA>
+      </div>
+
+      <ValidationErrors :error-messages="errorMessages" class="mt-6" />
+    </div>
+  </SidebarContextRootContainer>
+</template>
+
+<script>
+import { computed, defineComponent, onMounted, ref } from '@nuxtjs/composition-api'
+import InputNumeric from '~/components/common/input/InputNumeric.vue'
+import Input from '~/components/common/input/Input.vue'
+import { useAaveV2Position } from '~/composables/useAaveV2Position'
+import { useBalances } from '~/composables/useBalances'
+import { useBigNumber } from '~/composables/useBigNumber'
+import { useFormatting } from '~/composables/useFormatting'
+import { useValidators } from '~/composables/useValidators'
+import { useValidation } from '~/composables/useValidation'
+import { useToken } from '~/composables/useToken'
+import { useParsing } from '~/composables/useParsing'
+import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
+import { useWeb3 } from '~/composables/useWeb3'
+import atokens from '~/constant/atokens'
+import ToggleButton from '~/components/common/input/ToggleButton.vue'
+import { useDSA } from '~/composables/useDSA'
+import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import { useNotification } from '~/composables/useNotification'
+import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
+
+export default defineComponent({
+  components: { InputNumeric, Input, ToggleButton, ButtonCTA, Button },
+  props: {
+    tokenKey: { type: String, required: true },
+  },
+  setup(props) {
+    const { close } = useSidebar()
+    const { networkName, account, web3 } = useWeb3()
+    const { dsa } = useDSA()
+    const { getTokenByKey, valInt } = useToken()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus, max, minus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction } = useNotification()
+    const { getBalanceByKey } = useBalances()
+
+
+    const accountAddress = ref(account.value)
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
+
+    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+    const address = computed(() => token.value?.address)
+    const balance = computed(() => getBalanceByKey(rootTokenKey.value))
+
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
+
+    const { validateAmount, validateIsLoggedIn } = useValidators()
+
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
+        accountAddress: { message: web3.value && !web3.value.utils.isAddress(accountAddress.value) ? 'Enter valid address!' : null, show: accountAddress.value.length > 0 },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = isMaxAmount.value ? dsa.value.maxValue : valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      spells.add({
+        connector: 'basic',
+        method: 'withdraw',
+        args: [address.value, amount, accountAddress.value, 0, 0],
+      })
+
+      const txHash = await dsa.value.cast({
+        spells,
+        from: account.value,
+      })
+
+      showPendingTransaction(txHash)
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      accountAddress,
+      pending,
+      cast,
+      errors,
+      amount,
+      rootTokenKey,
+      token,
+      symbol,
+      balance,
+      formatNumber,
+      formatUsdMax,
+      formatUsd,
+      toggle,
+      isMaxAmount,
+      errorMessages,
+      isValid
+    }
+  },
+})
+</script>

components/sidebar/context/components/CurrencyList.vue

@@ -10,6 +10,7 @@
       :symbol="token.symbol"
       :action-label="actionLabel"
       @deposit="$router.push({ hash: 'deposit-overview?tokenKey=' + token.key })"
+      @withdraw="$router.push({ hash: 'withdraw-token?tokenKey=' + token.key })"
     />
   </div>
   <div v-else>

components/sidebar/context/overview/CardCurrency.vue

@@ -24,7 +24,7 @@
       </button>
       <button
         class="h-[26px] w-24 text-xs flex-shrink-0  text-primary-blue-dark shadow border border-primary-blue-dark border-opacity-38 hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
-        @click="$emit('action')"
+        @click="$emit('withdraw')"
       >
         Withdraw
       </button>

composables/useSidebar.ts

@@ -17,15 +17,17 @@ import SidebarAaveV2Withdraw from '~/components/sidebar/context/aaveV2/SidebarAa
 import SidebarAaveV2Borrow from '~/components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue'
 //@ts-ignore
 import SidebarAaveV2Payback from '~/components/sidebar/context/aaveV2/SidebarAaveV2Payback.vue'
-
 //@ts-ignore
 import SidebarOverview from '~/components/sidebar/context/overview/SidebarOverview.vue'
 //@ts-ignore
 import SidebarDepositOverview from '~/components/sidebar/context/SidebarDepositOverview.vue'
+//@ts-ignore
+import SidebarWithdraw from '~/components/sidebar/context/SidebarWithdraw.vue'
 
 const sidebars = {
   "#overview" :  {component: SidebarOverview, back : false, close : true },
-  "#deposit-overview": {component: SidebarDepositOverview },
+  "#deposit-overview": {component: SidebarDepositOverview, back: { hash: 'overview' }  },
+  '#withdraw-token': { component: SidebarWithdraw, back: { hash: 'overview' } },
   "/polygon/aave-v2": { component: null },
   "/polygon/aave-v2#supply": { component: SidebarAaveV2Supply },
   "/polygon/aave-v2#borrow": { component: SidebarAaveV2Borrow },