Merge pull request #189 from lc-labs/feature/zapper-expose-dust-amounts

Fix Zapper, expose Dust information to user, improve UX
reserve-protocol · Oct 5, 2023 · 53264df · 53264df
2 parents 71d9d21 + f6900d5
commit 53264df
Show file tree

Hide file tree

Showing 8 changed files with 11,293 additions and 5,957 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@popperjs/core": "^2.11.5",
     "@rainbow-me/rainbowkit": "1.0.11",
     "@react-spring/web": "^9.7.1",
-    "@reserve-protocol/token-zapper": "2.1.1-rc-1",
+    "@reserve-protocol/token-zapper": "2.5.0",
     "@uiw/react-md-editor": "^3.20.5",
     "@uniswap/permit2-sdk": "^1.2.0",
     "@viem/anvil": "^0.0.6",

diff --git a/src/views/issuance/components/zap/components/ZapInput.tsx b/src/views/issuance/components/zap/components/ZapInput.tsx
@@ -2,39 +2,124 @@ import { t, Trans } from '@lingui/macro'
 import TransactionInput, {
   TransactionInputProps,
 } from 'components/transaction-input'
-import { useAtomValue } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import { rTokenStateAtom } from 'state/atoms'
-import { Box, Flex, Text } from 'theme-ui'
-import { selectedZapTokenAtom, zapInputString } from '../state/atoms'
-import { ui } from '../state/ui-atoms'
+import { Box, Checkbox, Flex, Text } from 'theme-ui'
+import {
+  collectDust,
+  selectedZapTokenAtom,
+  zapInputString,
+} from '../state/atoms'
+import { ui, zapDust, zapDustValue } from '../state/ui-atoms'
+import { formatQty, FOUR_DIGITS, TWO_DIGITS } from '../state/formatTokenQuantity'
+import { zapperLoaded } from '../state/zapper'
+import { Suspense } from 'react'
 
-const ZapOutput = () => (
-  <Flex ml={3} mt={2} sx={{ fontSize: 1 }}>
-    <Text variant="legend" mr={1}>
-      <Trans>Output</Trans>:
-    </Text>
-    <Text variant="strong">{useAtomValue(ui.output.textBox) || 'None'}</Text>
-  </Flex>
-)
+const ZapDust = () => {
+  const dustValue = useAtomValue(zapDustValue)
+  const dust = useAtomValue(zapDust)
+  const zapCollectDust = useAtomValue(collectDust)
+  if (dustValue == null) {
+    return null
+  }
+  const total = dustValue.total
+  let str = '+ ' + formatQty(total, TWO_DIGITS) + ' in dust'
+  if (total.amount < 10000n) {
+    str = '*'
+  }
 
-const ZapInput = (props: Partial<TransactionInputProps>) => {
+  return (
+    <span
+      title={
+        'Dust generated:\n' +
+        dust
+          .map((i) => formatQty(i, FOUR_DIGITS))
+          .join('\n') +
+        (zapCollectDust
+          ? '\n\nDust will be returned to your wallet'
+          : '\n\nDust will not be returned to your wallet')
+      }
+    >
+      ({str})
+    </span>
+  )
+}
+const ZapOutput = () => {
+  return (
+    <Flex ml={3} mt={2} sx={{ fontSize: 1 }}>
+      <Text variant="legend" mr={1}>
+        <Trans>Output</Trans>:
+      </Text>
+      <Text variant="strong">
+        {useAtomValue(ui.output.textBox) || 'None'} <ZapDust />
+      </Text>
+    </Flex>
+  )
+}
+
+const ZapTxInput = (props: Partial<TransactionInputProps>) => {
   const token = useAtomValue(selectedZapTokenAtom)
   const { issuancePaused, frozen } = useAtomValue(rTokenStateAtom)
   const zapSymbol = token?.symbol ?? 'ETH'
   const maxAmountString = useAtomValue(ui.input.maxAmount)
   const [loading, hasError] = useAtomValue(ui.zapState)
 
+  return (
+    <TransactionInput
+      placeholder={`${zapSymbol} ${t`Amount`}`}
+      amountAtom={zapInputString}
+      title={t`Mint with ${zapSymbol}`}
+      maxAmount={maxAmountString || '0'}
+      disabled={issuancePaused || frozen || loading || hasError}
+      {...props}
+    />
+  )
+}
+const ZapSymbol = () => {
+  const token = useAtomValue(selectedZapTokenAtom)
+  const zapSymbol = token?.symbol ?? 'ETH'
+  return <>{zapSymbol}</>
+}
+const ZapOutputLabel = () => {
+  const s = useAtomValue(zapperLoaded)
+  return !s ? (
+    <Flex ml={3} mt={2} sx={{ fontSize: 1 }}>
+      <Text variant="legend" mr={1}>
+        <Trans>Loading...</Trans>
+      </Text>
+    </Flex>
+  ) : (
+    <ZapOutput />
+  )
+}
+const ZapCollectDust = () => {
+  const [checked, setChecked] = useAtom(collectDust)
+  return (
+    <Flex
+      onClick={() => {
+        setChecked(!checked)
+      }}
+      ml={3}
+      mt={2}
+      sx={{ fontSize: 1, cursor: 'pointer' }}
+    >
+      <Text variant="legend" mr={1}>
+        Collect dust:
+      </Text>
+      <Checkbox
+        onChange={() => {
+          setChecked(!checked)
+        }}
+        checked={checked}
+      />
+    </Flex>
+  )
+}
+const ZapInput = (props: Partial<TransactionInputProps>) => {
   return (
     <>
       <Box sx={{ position: 'relative' }}>
-        <TransactionInput
-          placeholder={`${zapSymbol} ${t`Amount`}`}
-          amountAtom={zapInputString}
-          title={t`Mint with ${zapSymbol}`}
-          maxAmount={maxAmountString || '0'}
-          disabled={issuancePaused || frozen || loading || hasError}
-          {...props}
-        />
+        <ZapTxInput {...props} />
         <Text
           variant="legend"
           sx={{
@@ -45,10 +130,21 @@ const ZapInput = (props: Partial<TransactionInputProps>) => {
             color: 'lightText',
           }}
         >
-          {zapSymbol}
+          <ZapSymbol />
         </Text>
       </Box>
-      <ZapOutput />
+      <Suspense
+        fallback={
+          <Flex ml={3} mt={2} sx={{ fontSize: 1 }}>
+            <Text variant="legend" mr={1}>
+              <Trans>Loading...</Trans>
+            </Text>
+          </Flex>
+        }
+      >
+        <ZapOutputLabel />
+      </Suspense>
+      <ZapCollectDust />
     </>
   )
 }

diff --git a/src/views/issuance/components/zap/index.tsx b/src/views/issuance/components/zap/index.tsx
@@ -1,7 +1,7 @@
 import useRToken from 'hooks/useRToken'
 import { useAtomValue } from 'jotai'
 import mixpanel from 'mixpanel-browser'
-import { useEffect, useState } from 'react'
+import { Suspense, useEffect, useState } from 'react'
 import { blockAtom, gasFeeAtom } from 'state/atoms'
 import { Card } from 'theme-ui'
 import ConfirmZap from './components/ConfirmZap'
@@ -30,7 +30,6 @@ const Zap = () => {
   const [isZapping, setZapping] = useState(false)
   const rToken = useRToken()
   const selectedToken = useAtomValue(selectedZapTokenAtom)
-
   const handleClick = () => {
     setZapping(true)
     mixpanel.track('Clicked Zap', {
@@ -41,7 +40,9 @@ const Zap = () => {
 
   return (
     <>
-      <UpdateBlockAndGas />
+      <Suspense fallback={<></>}>
+        <UpdateBlockAndGas />
+      </Suspense>
       <Card p={4}>
         <ZapInput />
         <ZapButton onClick={handleClick} />