WA-238 Storybook showing spentToday and disabling withdrawn buttons is limit has been exceeded

src/routes/safe/component/Layout.stories.js

@@ -30,8 +30,20 @@ storiesOf('Routes /safe:address', module)
       fetchBalance={() => {}}
     />
   ))
-  .add('Safe with 2 owners', () => {
-    const safe = SafeFactory.twoOwnersSafe
+  .add('Safe with 2 owners and 10ETH as dailyLimit', () => {
+    const safe = SafeFactory.dailyLimitSafe(10, 1.345)
+
+    return (
+      <Component
+        safe={safe}
+        provider="METAMASK"
+        balance="2"
+        fetchBalance={() => {}}
+      />
+    )
+  })
+  .add('Safe with dailyLimit reached', () => {
+    const safe = SafeFactory.dailyLimitSafe(10, 10)
 
     return (
       <Component

src/routes/safe/component/Safe/DailyLimit.jsx

@@ -7,22 +7,24 @@ import Button from '~/components/layout/Button'
 import ListItemText from '~/components/List/ListItemText'
 
 type Props = {
-  dailyLimit: number,
+  dailyLimit: DailyLimit,
   onWithdrawn: () => void,
 }
 
 export const WITHDRAWN_BUTTON_TEXT = 'Withdrawn'
 
-const DailyLimit = ({ dailyLimit, onWithdrawn }: Props) => {
+const DailyLimitComponent = ({ dailyLimit, onWithdrawn }: Props) => {
   const limit = dailyLimit.get('value')
-  const disabled = dailyLimit.get('todaySpent') > limit
+  const spentToday = dailyLimit.get('spentToday')
+  const disabled = spentToday >= limit
+  const text = `${limit} ETH (spent today: ${spentToday} ETH)`
 
   return (
     <ListItem>
       <Avatar>
         <NotificationsPaused />
       </Avatar>
-      <ListItemText primary="Daily Limit" secondary={`${limit} ETH`} />
+      <ListItemText primary="Daily Limit" secondary={text} />
       <Button
         variant="raised"
         color="primary"
@@ -35,4 +37,4 @@ const DailyLimit = ({ dailyLimit, onWithdrawn }: Props) => {
   )
 }
 
-export default DailyLimit
+export default DailyLimitComponent

src/routes/safe/store/actions/addSafe.js

@@ -13,8 +13,8 @@ export const buildOwnersFrom = (names: string[], addresses: string[]) => {
   return List(owners)
 }
 
-export const buildDailyLimitFrom = (dailyLimit: number): DailyLimit =>
-  makeDailyLimit({ value: dailyLimit, spentToday: 0 })
+export const buildDailyLimitFrom = (dailyLimit: number, spentToday: number = 0): DailyLimit =>
+  makeDailyLimit({ value: dailyLimit, spentToday })
 
 const addSafe = createAction(
   ADD_SAFE,

src/routes/safe/store/test/builder/safe.builder.js

@@ -24,8 +24,8 @@ class SafeBuilder {
     return this
   }
 
-  withDailyLimit(limit: number) {
-    const dailyLimit = buildDailyLimitFrom(limit)
+  withDailyLimit(limit: number, spentToday: number = 0) {
+    const dailyLimit = buildDailyLimitFrom(limit, spentToday)
     this.safe = this.safe.set('dailyLimit', dailyLimit)
     return this
   }
@@ -60,7 +60,19 @@ export class SafeFactory {
       ['Adol Metamask', 'Tobias Metamask'],
       ['0x03db1a8b26d08df23337e9276a36b474510f0023', '0x03db1a8b26d08df23337e9276a36b474510f0024'],
     )
+    .withDailyLimit(10, 1.34)
     .get()
+
+    static dailyLimitSafe = (dailyLimit: number, spentToday: number) => aSafe()
+      .withAddress('0x03db1a8b26d08df23337e9276a36b474510f0026')
+      .withName('Adol & Tobias Safe')
+      .withConfirmations(2)
+      .withOwner(
+        ['Adol Metamask', 'Tobias Metamask'],
+        ['0x03db1a8b26d08df23337e9276a36b474510f0023', '0x03db1a8b26d08df23337e9276a36b474510f0024'],
+      )
+      .withDailyLimit(dailyLimit, spentToday)
+      .get()
 }
 
 export default aSafe