feat: stacking page

feat: add stacking page feat: annotate builds in PR merge with action commit feat: create stacking page refactor: create <Screen/> component feat: refactor wallettype type
leather-io · Oct 26, 2020 · 778e3e5 · 778e3e5
1 parent 726f08c
commit 778e3e5
Show file tree

Hide file tree

Showing 48 changed files with 1,179 additions and 277 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
   root: true,
   extends: ['@blockstack/eslint-config', 'plugin:react-hooks/recommended'],
+  plugins: ['react'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,
@@ -17,6 +18,13 @@ module.exports = {
     '@typescript-eslint/unbound-method': 0,
     'no-warning-comments': ['warn', { terms: ['SECURITY'], location: 'anywhere' }],
 
+    'react/self-closing-comp': [
+      'error',
+      {
+        component: true,
+        html: true,
+      },
+    ],
     'import/no-unresolved': 0,
     'import/no-mutable-exports': ['error'],
     'import/no-useless-path-segments': ['error'],

diff --git a/.github/workflows/build-release.yml b/.github/workflows/build-release.yml
@@ -53,6 +53,12 @@ jobs:
 
       - run: echo ${{ matrix.NPM_COMMAND }}
 
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: matrix.os == 'ubuntu-latest'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build releases
         run: ./node_modules/.bin/cross-env DEBUG_PROD=true yarn package-${{ matrix.NPM_COMMAND }}
         env:
@@ -84,3 +90,8 @@ jobs:
           path: |
             release/**/*.deb
             release/**/*.rpm
+
+      - uses: lucasmotta/pull-request-sticky-header@1.0.0
+        with:
+          header: '> [Download the latest builds](https://github.com/blockstack/stacks-wallet/actions/runs/${{ github.run_id }})'
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/app/components/external-link.tsx b/app/components/external-link.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { Box, Text, BoxProps } from '@blockstack/ui';
+import { openExternalLink } from '@utils/external-links';
+
+interface ExternalLinkProps extends BoxProps {
+  href: string;
+}
+
+export const ExternalLink: FC<ExternalLinkProps> = ({ href, children, ...props }) => {
+  const openUrl = () => openExternalLink(href);
+  return (
+    <Text
+      onClick={openUrl}
+      as="button"
+      cursor="pointer"
+      display="block"
+      color="blue"
+      textStyle="body.large.medium"
+      outline={0}
+      _hover={{ textDecoration: 'underline' }}
+      _focus={{ textDecoration: 'underline' }}
+      {...props}
+    >
+      {children}
+      <Box display="inline-block" ml="extra-tight" mb="1px">
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M8 5.90118V0.745999C8 0.300626 7.71031 0 7.25348 0L2.08914 0.0111343C1.66017 0.0111343 1.35933 0.334029 1.35933 0.707029C1.35933 1.09116 1.68802 1.38622 2.07799 1.38622H3.7883L5.7883 1.30828L4.8468 2.14335L0.233983 6.75296C0.0779944 6.90884 0 7.09812 0 7.27627C0 7.64927 0.339833 8 0.718663 8C0.902507 8 1.08635 7.92206 1.24234 7.76618L5.86072 3.15101L6.69638 2.21016L6.61838 4.13083V5.91788C6.61838 6.31315 6.91922 6.63605 7.29805 6.63605C7.68245 6.63605 8 6.31872 8 5.90118Z"
+            fill="#3700FF"
+          />
+        </svg>
+      </Box>
+    </Text>
+  );
+};
diff --git a/app/components/home/balance-card.tsx b/app/components/home/balance-card.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
-import { Box, Button, Text, ArrowIcon } from '@blockstack/ui';
+import { Box, Button, Text, ArrowIcon, EncryptionIcon, Flex } from '@blockstack/ui';
 
+import { features } from '@constants/index';
 import { toHumanReadableStx } from '@utils/unit-convert';
 import { safeAwait } from '@utils/safe-await';
 import { delay } from '@utils/delay';
@@ -9,11 +10,13 @@ interface BalanceCardProps {
   balance: string | null;
   onSelectSend(): void;
   onSelectReceive(): void;
+  onSelectStacking(): void;
   onRequestTestnetStx(): Promise<any>;
 }
 
 export const BalanceCard: FC<BalanceCardProps> = props => {
-  const { balance, onSelectReceive, onSelectSend, onRequestTestnetStx } = props;
+  const { balance, onSelectReceive, onSelectSend, onRequestTestnetStx, onSelectStacking } = props;
+
   const [requestingTestnetStx, setRequestingTestnetStx] = useState(false);
   const requestTestnetStacks = async () => {
     setRequestingTestnetStx(true);
@@ -28,6 +31,18 @@ export const BalanceCard: FC<BalanceCardProps> = props => {
       <Text fontSize="40px" lineHeight="56px" fontWeight="bold" letterSpacing="-0.01em">
         {balance === null ? '–' : toHumanReadableStx(balance)}
       </Text>
+
+      {features.stackingEnabled && (
+        <Flex alignItems="center" mt="tight" color="ink.600" fontSize={['14px', '16px']}>
+          <EncryptionIcon size="16px" color="#409EF3" display={['none', 'block']} mr="tight" />
+          <Text onClick={onSelectStacking} cursor="pointer" borderBottom="1px dotted #677282">
+            320,000.00 STX locked
+          </Text>
+          <Text children="·" mx="base-tight" />
+          <Text>40,000.00 STX available</Text>
+        </Flex>
+      )}
+
       <Box mt="loose">
         <Button size="md" onClick={onSelectSend} isDisabled={balance === '0' || balance === null}>
           <ArrowIcon direction="up" mr="base-tight" />
@@ -38,7 +53,13 @@ export const BalanceCard: FC<BalanceCardProps> = props => {
           Receive
         </Button>
         <Button mode="secondary" size="md" ml="tight" onClick={requestTestnetStacks}>
-          <Box mr="extra-tight" fontSize="18px" left="-4px" position="relative">
+          <Box
+            mr="extra-tight"
+            fontSize="18px"
+            left="-4px"
+            position="relative"
+            display={['none', 'none', 'block']}
+          >
             🚰
           </Box>
           {requestingTestnetStx ? 'Requesting faucet' : 'Get testnet STX'}

diff --git a/app/components/home/index.ts b/app/components/home/index.ts
@@ -2,4 +2,5 @@ export * from './transaction-list/transaction-list';
 export * from './transaction-list/transaction-list-item';
 export * from './balance-card';
 export * from './stacking-promo-card';
+export * from './stacking-participation-card';
 export * from './stacking-rewards-card';
diff --git a/app/components/home/stacking-participation-card.tsx b/app/components/home/stacking-participation-card.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Box, Flex, Text, Button } from '@blockstack/ui';
+
+import routes from '@constants/routes.json';
+import btcPodium from '../../assets/images/btc-podium.svg';
+
+export const StackingParticipationCard = () => {
+  const history = useHistory();
+  return (
+    <Box
+      mt="extra-loose"
+      borderRadius="8px"
+      boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+      border="1px solid #F0F0F5"
+    >
+      <Flex flexDirection="column" mt="40px" mb="extra-loose">
+        <img src={btcPodium} />
+        <Text display="block" textAlign="center" textStyle="display.small" mt="loose">
+          Earn Bitcoin rewards
+        </Text>
+        <Text display="block" mt="tight" textAlign="center" maxWidth="320px" mx="auto">
+          When you lock your STX, you’ll earn Bitcoin every week
+        </Text>
+        <Button
+          size="md"
+          mt="base"
+          mx="auto"
+          width="272px"
+          mode="secondary"
+          onClick={() => history.push(routes.STACKING)}
+        >
+          Get started
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/app/components/home/stacking-promo-card.tsx b/app/components/home/stacking-promo-card.tsx
@@ -5,32 +5,30 @@ import btcPodium from '../../assets/images/btc-podium.svg';
 import { openExternalLink } from '@utils/external-links';
 import { BUY_STX_URL } from '@constants/index';
 
-export const StackingPromoCard = () => {
-  return (
-    <Box
-      mt="extra-loose"
-      borderRadius="8px"
-      boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
-      border="1px solid #F0F0F5"
-    >
-      <Flex flexDirection="column" mt="40px" mb="extra-loose">
-        <img src={btcPodium} />
-        <Text display="block" textAlign="center" textStyle="display.small" mt="loose">
-          Earn Bitcoin rewards
-        </Text>
-        <Text display="block" mt="tight" textAlign="center" maxWidth="320px" mx="auto">
-          You’ll earn Bitcoin when you temporarily lock 100,000 STX or more
-        </Text>
-        <Button
-          size="md"
-          mt="base"
-          mx="auto"
-          width="272px"
-          onClick={() => openExternalLink(BUY_STX_URL)}
-        >
-          Buy STX
-        </Button>
-      </Flex>
-    </Box>
-  );
-};
+export const StackingPromoCard = () => (
+  <Box
+    mt="extra-loose"
+    borderRadius="8px"
+    boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+    border="1px solid #F0F0F5"
+  >
+    <Flex flexDirection="column" mt="40px" mb="extra-loose">
+      <img src={btcPodium} />
+      <Text display="block" textAlign="center" textStyle="display.small" mt="loose">
+        Earn Bitcoin rewards
+      </Text>
+      <Text display="block" mt="tight" textAlign="center" maxWidth="320px" mx="auto">
+        You’ll earn Bitcoin when you temporarily lock 100,000 STX or more
+      </Text>
+      <Button
+        size="md"
+        mt="base"
+        mx="auto"
+        width="272px"
+        onClick={() => openExternalLink(BUY_STX_URL)}
+      >
+        Buy STX
+      </Button>
+    </Flex>
+  </Box>
+);
diff --git a/app/components/home/transaction-list/transaction-list-item.tsx b/app/components/home/transaction-list/transaction-list-item.tsx
@@ -42,9 +42,10 @@ export const TransactionListItem: FC<TransactionListItemProps> = props => {
   const sumPrefix = direction === 'sent' ? '−' : '';
   const memo =
     tx.tx_type === 'token_transfer' &&
-    Buffer.from(tx.token_transfer.memo.replace('0x', '').replace(/0+$/g, ''), 'hex').toString(
-      'utf8'
-    );
+    Buffer.from(
+      tx.token_transfer.memo.replace('0x', '').replace(/^(0{2})+|(0{2})+$/g, ''),
+      'hex'
+    ).toString('utf8');
   const txDate = new Date(tx.burn_block_time_iso);
   const txDateFormatted = new Intl.DateTimeFormat('en-US', dateOptions).format(txDate);
   const txDateShort = txDate.toLocaleString();

diff --git a/app/components/icons/calendar-circle.tsx b/app/components/icons/calendar-circle.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box, Flex, FlexProps } from '@blockstack/ui';
+
+type CalendarIconProps = FlexProps;
+
+export const CalendarIcon: React.FC<CalendarIconProps> = props => (
+  <Flex
+    position="relative"
+    width="40px"
+    height="40px"
+    justifyContent="center"
+    alignItems="center"
+    {...props}
+  >
+    <Box position="absolute" display="grid" margin="auto" zIndex={1}>
+      <svg
+        width="22"
+        height="20"
+        viewBox="0 0 22 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.97656 19.334H17.6191C19.8652 19.334 21.1055 18.0938 21.1055 15.8672V4.06055C21.1055 1.82422 19.8652 0.59375 17.6191 0.59375H3.97656C1.73047 0.59375 0.490234 1.82422 0.490234 4.06055V15.8672C0.490234 18.1035 1.73047 19.334 3.97656 19.334ZM4.20117 16.7168C3.47852 16.7168 3.10742 16.375 3.10742 15.6133V7C3.10742 6.23828 3.47852 5.89648 4.20117 5.89648H17.3945C18.1074 5.89648 18.4883 6.23828 18.4883 7V15.6133C18.4883 16.375 18.1074 16.7168 17.3945 16.7168H4.20117ZM8.9668 9.02148H9.54297C9.89453 9.02148 10.0215 8.91406 10.0215 8.55273V7.97656C10.0215 7.625 9.89453 7.50781 9.54297 7.50781H8.9668C8.60547 7.50781 8.47852 7.625 8.47852 7.97656V8.55273C8.47852 8.91406 8.60547 9.02148 8.9668 9.02148ZM12.0527 9.02148H12.6289C12.9902 9.02148 13.1172 8.91406 13.1172 8.55273V7.97656C13.1172 7.625 12.9902 7.50781 12.6289 7.50781H12.0527C11.7012 7.50781 11.5742 7.625 11.5742 7.97656V8.55273C11.5742 8.91406 11.7012 9.02148 12.0527 9.02148ZM15.1484 9.02148H15.7246C16.0762 9.02148 16.2031 8.91406 16.2031 8.55273V7.97656C16.2031 7.625 16.0762 7.50781 15.7246 7.50781H15.1484C14.7871 7.50781 14.6602 7.625 14.6602 7.97656V8.55273C14.6602 8.91406 14.7871 9.02148 15.1484 9.02148ZM5.88086 12.0684H6.44727C6.80859 12.0684 6.93555 11.9512 6.93555 11.5898V11.0234C6.93555 10.6621 6.80859 10.5449 6.44727 10.5449H5.88086C5.51953 10.5449 5.39258 10.6621 5.39258 11.0234V11.5898C5.39258 11.9512 5.51953 12.0684 5.88086 12.0684ZM8.9668 12.0684H9.54297C9.89453 12.0684 10.0215 11.9512 10.0215 11.5898V11.0234C10.0215 10.6621 9.89453 10.5449 9.54297 10.5449H8.9668C8.60547 10.5449 8.47852 10.6621 8.47852 11.0234V11.5898C8.47852 11.9512 8.60547 12.0684 8.9668 12.0684ZM12.0527 12.0684H12.6289C12.9902 12.0684 13.1172 11.9512 13.1172 11.5898V11.0234C13.1172 10.6621 12.9902 10.5449 12.6289 10.5449H12.0527C11.7012 10.5449 11.5742 10.6621 11.5742 11.0234V11.5898C11.5742 11.9512 11.7012 12.0684 12.0527 12.0684ZM15.1484 12.0684H15.7246C16.0762 12.0684 16.2031 11.9512 16.2031 11.5898V11.0234C16.2031 10.6621 16.0762 10.5449 15.7246 10.5449H15.1484C14.7871 10.5449 14.6602 10.6621 14.6602 11.0234V11.5898C14.6602 11.9512 14.7871 12.0684 15.1484 12.0684ZM5.88086 15.1055H6.44727C6.80859 15.1055 6.93555 14.9883 6.93555 14.6367V14.0605C6.93555 13.6992 6.80859 13.5918 6.44727 13.5918H5.88086C5.51953 13.5918 5.39258 13.6992 5.39258 14.0605V14.6367C5.39258 14.9883 5.51953 15.1055 5.88086 15.1055ZM8.9668 15.1055H9.54297C9.89453 15.1055 10.0215 14.9883 10.0215 14.6367V14.0605C10.0215 13.6992 9.89453 13.5918 9.54297 13.5918H8.9668C8.60547 13.5918 8.47852 13.6992 8.47852 14.0605V14.6367C8.47852 14.9883 8.60547 15.1055 8.9668 15.1055ZM12.0527 15.1055H12.6289C12.9902 15.1055 13.1172 14.9883 13.1172 14.6367V14.0605C13.1172 13.6992 12.9902 13.5918 12.6289 13.5918H12.0527C11.7012 13.5918 11.5742 13.6992 11.5742 14.0605V14.6367C11.5742 14.9883 11.7012 15.1055 12.0527 15.1055Z"
+          fill="#409EF3"
+        />
+      </svg>
+    </Box>
+    <Box
+      position="absolute"
+      minWidth="40px"
+      minHeight="40px"
+      backgroundColor="#F0F7FE"
+      borderRadius="50%"
+    />
+  </Flex>
+);
diff --git a/app/components/icons/decrement.tsx b/app/components/icons/decrement.tsx
@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+
+export const DecrementIcon: FC = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.00378 16C12.3907 16 16 12.3983 16 8.00378C16 3.60925 12.3907 0 7.99622 0C3.6017 0 0 3.60925 0 8.00378C0 12.3983 3.60925 16 8.00378 16ZM8.00378 13.9462C4.70411 13.9462 2.06135 11.2959 2.06135 8.00378C2.06135 4.71166 4.70411 2.0538 7.99622 2.0538C11.2883 2.0538 13.9462 4.71166 13.9462 8.00378C13.9538 11.2959 11.2959 13.9462 8.00378 13.9462ZM5.08919 8.86456H10.9108C11.4167 8.86456 11.7867 8.51723 11.7867 8.01888C11.7867 7.50543 11.4243 7.15809 10.9108 7.15809H5.08919C4.57574 7.15809 4.21331 7.50543 4.21331 8.01888C4.21331 8.51723 4.58329 8.86456 5.08919 8.86456Z"
+      fill="#3700FF"
+    />
+  </svg>
+);
diff --git a/app/components/icons/exclamation-mark.tsx b/app/components/icons/exclamation-mark.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 
-export const ExclamationMark: React.FC = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
-      <circle cx="6" cy="6" r="6" fill="#DE0014"></circle>
-      <path
-        fill="#fff"
-        d="M6.62 3.64a.622.622 0 10-1.244 0l.083 2.983a.54.54 0 001.081 0l.08-2.984zM6 9c.368 0 .687-.31.69-.694A.7.7 0 006 7.617.69.69 0 006 9z"
-      ></path>
-    </svg>
-  );
-};
+export const ExclamationMark: React.FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+    <circle cx="6" cy="6" r="6" fill="#DE0014" />
+    <path
+      fill="#fff"
+      d="M6.62 3.64a.622.622 0 10-1.244 0l.083 2.983a.54.54 0 001.081 0l.08-2.984zM6 9c.368 0 .687-.31.69-.694A.7.7 0 006 7.617.69.69 0 006 9z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/explainer.tsx b/app/components/icons/explainer.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Box, BoxProps } from '@blockstack/ui';
+
+export const Explainer = React.forwardRef((props: BoxProps, ref) => (
+  <Box ref={ref as any} {...props}>
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.9971 12C9.28565 12 12 9.28565 12 6.0029C12 2.71435 9.27985 0 5.9913 0C2.70855 0 0 2.71435 0 6.0029C0 9.28565 2.71435 12 5.9971 12ZM5.9971 10.7994C3.33494 10.7994 1.20638 8.65926 1.20638 6.0029C1.20638 3.34074 3.33494 1.20058 5.9913 1.20058C8.65346 1.20058 10.7936 3.34074 10.7994 6.0029C10.8052 8.65926 8.65926 10.7994 5.9971 10.7994ZM5.8695 7.14548C6.1885 7.14548 6.39149 6.96568 6.40889 6.72789C6.40889 6.70469 6.41469 6.67569 6.41469 6.65829C6.43209 6.35669 6.64089 6.1595 7.01208 5.9159C7.58627 5.53891 7.95167 5.20251 7.95167 4.53552C7.95167 3.57274 7.08168 3.01595 6.0493 3.01595C5.05752 3.01595 4.38473 3.46834 4.19913 4.01353C4.16433 4.11213 4.14693 4.21653 4.14693 4.32093C4.14693 4.59932 4.36153 4.77332 4.63412 4.77332C4.97052 4.77332 5.05172 4.59932 5.22571 4.40213C5.41131 4.11213 5.66071 3.94393 5.9971 3.94393C6.46109 3.94393 6.75689 4.20493 6.75689 4.59352C6.75689 4.94732 6.51329 5.13871 6.0203 5.48091C5.60851 5.7651 5.31271 6.0609 5.31271 6.58289V6.64669C5.31271 6.97728 5.50991 7.14548 5.8695 7.14548ZM5.8579 8.93185C6.2349 8.93185 6.54229 8.65926 6.54229 8.28806C6.54229 7.92267 6.2407 7.65007 5.8579 7.65007C5.48091 7.65007 5.17351 7.92267 5.17351 8.28806C5.17351 8.65346 5.48671 8.93185 5.8579 8.93185Z"
+        fill="#A1A7B3"
+      />
+    </svg>
+  </Box>
+));
diff --git a/app/components/icons/increment.tsx b/app/components/icons/increment.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const IncrementIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.00378 16C12.3907 16 16 12.3983 16 8.00378C16 3.60925 12.3907 0 7.99622 0C3.6017 0 0 3.60925 0 8.00378C0 12.3983 3.60925 16 8.00378 16ZM8.00378 13.9462C4.70411 13.9462 2.06135 11.2959 2.06135 8.00378C2.06135 4.71166 4.70411 2.0538 7.99622 2.0538C11.2883 2.0538 13.9462 4.71166 13.9462 8.00378C13.9538 11.2959 11.2959 13.9462 8.00378 13.9462ZM7.99622 11.5602C8.50212 11.5602 8.84946 11.1977 8.84946 10.6843V8.86456H10.79C11.2959 8.86456 11.6659 8.51723 11.6659 8.01133C11.6659 7.50543 11.3034 7.15054 10.79 7.15054H8.84946V5.26286C8.84946 4.74941 8.50212 4.38697 7.99622 4.38697C7.49033 4.38697 7.14299 4.75696 7.14299 5.26286V7.15054H5.21C4.69655 7.15054 4.33412 7.50543 4.33412 8.01133C4.33412 8.51723 4.70411 8.86456 5.21 8.86456H7.14299V10.6843C7.14299 11.1902 7.49033 11.5602 7.99622 11.5602Z"
+      fill="#3700FF"
+    />
+  </svg>
+);
diff --git a/app/components/icons/large-checkmark.tsx b/app/components/icons/large-checkmark.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { Box, BoxProps } from '@blockstack/ui';
+
+type LargeCheckmarkProps = BoxProps;
+
+export const LargeCheckmark: FC<LargeCheckmarkProps> = props => (
+  <Box {...props}>
+    <svg
+      width="104"
+      height="104"
+      viewBox="0 0 104 104"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="52" cy="52" r="49" stroke="#C5CCFF" strokeWidth="6" />
+      <path
+        d="M28 50.7692L44.8 68L76 36"
+        stroke="#3700FF"
+        strokeWidth="6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  </Box>
+);
diff --git a/app/components/icons/success-checkmark.tsx b/app/components/icons/success-checkmark.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 export const SuccessCheckmark: React.FC = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
-    <circle cx="10" cy="10" r="8" fill="#00A73E"></circle>
+    <circle cx="10" cy="10" r="8" fill="#00A73E" />
     <path
       stroke="#fff"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth="1.5"
       d="M7.667 10.667l2 1.333 2.666-4"
-    ></path>
+    />
   </svg>
 );