Release/v0.20.0 (#611)

* chore: merge from upstream develop (#26) * release: v0.19.0 (#607) * release: v0.19.0 * update package-lock * bump xverse core version to fix fee issue --------- Co-authored-by: Yukan <yukanliao@gmail.com> * Build analytics tracking for web-extension (#590) * Build analytics tracking for web-extension * Add `/privacy-preferences` screen * Build analytics tracking for web-extension * Update mixpanel tracking logic * Remove unused wallet action name * Add authorize data collection toggler and popup * Update tracking logic * Add translation keys * Update mixpanel tracking logic * Remove unused imports * Make some code changes after PR review, upgrade `xverse-core` package version * Upgrade `xverse-core` package version * Resolve git conflicts * Handling fees with thresholds (#601) * Handling fees with thresholds * Add margin under the high fees warning * Change the high fees warning position for Ordinals & Brc-20 txs * Show the warning if the initial fee from transaction is greater than the threshold * Add high fee warning for one-step brc20 transfer * update copy --------- Co-authored-by: Yukan <yukanliao@gmail.com> * Refactor ledger-related logic (#586) * Add STX support for Ledger accounts * Update the copy and ledger account import logic * Update the ledger account import logic for STX support * Add `/add-stx-address-ledger` route for adding stx account * Remove the old case handling when there is no `ordinalsAddress` * Add STX address verification with ledger device * Remove the `/send-stx-ledger` path and update `/send-stx` to handle ledger * Handle regular STX transactions * Remove unused `/review-ledger-stx-tx` path, add STX NFT handling * Remove `/review-ledger-ft-tx` and `/send-ft-ledger` routes, update `/send-ft` to support ledger * Enable STX auth requests for ledger accounts that have an STX address * Add link to the auth popup to add the STX Ledger account * Update screen UI for STX NFT sending * Update copy for STX incoming tx signing * Update STX message signing logic * Update STX-related logic for ledger accounts * Update error handling for STX message signing with ledger * Get rid of `findLedgerAccountId` ledger util, move more copy to locales * Fix cropped button container for tx signing popup * Update address index definition for adding stx address * Update address index definition for address verification and stx tx confirmation * Update address index definition for stx jwt auth * Refactor ledger-related logic * Refactor ledger account import * Fix ledger account import when both BTC and STX options are selected * Refactor ledger address verification screen * Refactor ledger tx confirmation screen * Refactor Add stx address screen * Fix `unsignedTx` type * Add `StacksRecipient` type and make some small code fixes * Add `icon` prop for the `ActionButton` component * Change the ledger steps in a callback * Add types for ledger tx state objects * Fix account index for stx account import, update ledger tx types and utils * Change the import path for `StacksRecipient` * Change the steps numeration for ledger account import * Get rid of unused step changing logic for ledger account import * Add more error handling * Update xverse-core version for testing purposes * Remove caret symbol in xverse-core package * Fix CI build * Make a couple of code fixes according to PR review comments * Add more transaltions * Add the `DEFAULT_TRANSITION_OPTIONS` constant * Make separate components for Steps and StepControls for the Ledger account import flow * Fix style imports * Upgrade the `xverse-core` package version * Upgrade `xverse-core` package version * Disable PSBT tx signing for ledger accounts * update xverse-core * package-lock --------- Co-authored-by: Yukan <yukanliao@gmail.com> --------- Co-authored-by: Yukan <yukanliao@gmail.com> Co-authored-by: Den <36603049+dhriaznov@users.noreply.github.com> * chore: allow ci build version to pass env vars to build (#27) * feat/eng 2904 implement frontend on web extension (#5) * Tim/eng 2933 implement dashboard display of rare sats bundles (#1) * chore: create a hook for rare sats with placeholder data * chore: add some inscription placeholder with image * feat/eng 2933 implement dashboard rare sats tab (#4) * chore: create a collectiblesTabs component with react-tabs * refactor: move nft dashboard logic into hook * feat: move rare sats into separate tab * fix: add tab state styling and move to common.styled * feat: style collectibles header * fix: restyle all grid item colors and add total items * fix: supply total nfts and total rare sats number and type the collectiblesTabs props * style: comments * feat/eng 2934 implement sats bundle UI screen (#6) * Abdulhaseeb/eng 2930 implement settings screen updates (#7) * feat: enable rare sats from settings * fix: disabled UI * fix: typos * Abdulhaseeb/eng 2931 implement info dialogs (#8) * feat: enable rare sats from settings * feat: notice alert and rarities screen * feat: new feature dialog * fix: styles * feat: add UI for rare sats bundle in collectible item details (#2) * fix: ordinal thumbnails were broken (#10) * Add no collectibles and error screens (#11) * feat: integrate rare sats form core (#9) * feat: add rare sats item detail screen (#3) * feat: add UI for rare sats bundle in collectible item details * feat: implement rare sats details screen --------- Co-authored-by: Tim Man <tim@secretkeylabs.com> * feat: implement rare sats send screen (#12) * chore: use getUtxoOrdinalBundle to know if a inscription belongs to a bundle (#14) * Abdulhaseeb/eng 2938 implement rare sats confirm screen (#15) * feat: confirm rare sat tx * feat: added warning callout * feat: implement UI for rare sats thumbnails (#16) * feat: add UI for rare sats bundle in collectible item details * feat: implement rare sats details screen * feat: add rare sats thumbnathumbnails * chore: add missing mock data for testing inscriptions belonging to a bundle * Tim/eng 2959 set up test mocks (#17) * fix: react console errors * fix: send rare sat heading and sub text * fix: eslint errors * chore: add mock test cases in hook * fix: back button sometimes has no history * fix: revert merge change * fix: should be no commoners in mock tests * feat: added thumbnail in confirm screen (#18) * fix: react console errors * fix: send rare sat heading and sub text * fix: eslint errors * chore: add mock test cases in hook * fix: back button sometimes has no history * fix: revert merge change * fix: should be no commoners in mock tests * feat: added thumbnail in confirm screen * fix: ui --------- Co-authored-by: Tim Man <tim@secretkeylabs.com> * fix: rarities screen UI (#19) * chore: fix some todos and issues in rare sats feature (#20) * chore: Unify assets and rarity label in rarityTile and rareSatIcon components * chore: create bundle asset and use it in RareSatsTabGridItem and confirm send screen * chore: add bundle asset component in send screen * chore: make glow optional and remove it from inscribed rare sats asset * chore: add assets to bundle gallery view * chore: remove unsupported media callout. add margin bottom and fix cannot send rare sat individually for gallery view * fix: styling on gallery view for dashboard and rare sats bundle grids (#22) * fix: styling on gallery view for dashboard and rare sats bundle grids * fix: add column layout for rare sats bundle gallery view * fix: rare sats bundle back should always fo to gallery * fix: header spacing rare sats bundle and load more button * feat: add isLoading state for rare sats tab * fix: remove is owned by active account check the user flow resets whenever account changes, so this check is no longer necessary * feat: save collectibles tab index in query params * fix: restore ledger open in new tab behaviour * fix: show info panel regardless of empty state (#23) * chore: fix UI issues (#24) * chore: fix issues with dont see your rare sat banner * chore: fix ui issues in rare sats details screen * Update src/app/screens/nftDashboard/notice.tsx * refactor: use library components and minor styling fixes * fix: rare sat bundle send button width * fix: add separator in gallery view rare sats bundle and styling fixes * fix: minor style fix --------- Co-authored-by: Tim Man <tim@secretkeylabs.com> * fix: branch merge errors * chore: remove mock data (#28) * chore: remove mock data * chore: add extenral links to scan tool and rare sats post * chore: move external link urls to constants file --------- Co-authored-by: Abdul Haseeb <haseeb4239@gmail.com> Co-authored-by: fede erbes <fedeerbes@gmail.com> Co-authored-by: Victor Kirov <victor.kirov@gmail.com> * release v0.20.0 * chore: bump to xverse-core 1.8.2 for bip322 signing fix * fix: collectibles dashboard should ignore invalid params errors (#33) * fix: put in a quick fix for more location.state serialization bugs (#34) * chore: add support for rare sats in tx confirmation screen (#35) * chore: add support for rare sats in tx confirmation screen * chore: remove logs and fix typo * chore: change unknown icon --------- Co-authored-by: Yukan <yukanliao@gmail.com> Co-authored-by: Den <36603049+dhriaznov@users.noreply.github.com> Co-authored-by: Abdul Haseeb <haseeb4239@gmail.com> Co-authored-by: fede erbes <fedeerbes@gmail.com> Co-authored-by: Victor Kirov <victor.kirov@gmail.com>
secretkeylabs · Oct 7, 2023 · 7d3df13 · 7d3df13
1 parent a1a4f7f
commit 7d3df13
Show file tree

Hide file tree

Showing 69 changed files with 3,827 additions and 518 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -22,6 +22,10 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
       - name: Build
+        env:
+          TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
+          MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
+          MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
         run: npm run build --if-present
       # - name: Test
       # run: npm test --passWithNoTests

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -22,6 +22,10 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
       - name: Build
+        env:
+          TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
+          MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
+          MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
         run: npm run build --if-present
       # - name: Test
       # run: npm test --passWithNoTests

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "1.8.0",
+    "@secretkeylabs/xverse-core": "1.8.2",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",
@@ -51,6 +51,7 @@
     "react-share": "^4.4.1",
     "react-spinners": "^0.13.7",
     "react-switch": "^7.0.0",
+    "react-tabs": "^6.0.2",
     "react-tooltip": "^5.4.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",

diff --git a/src/app/components/accountHeader/index.tsx b/src/app/components/accountHeader/index.tsx
@@ -11,14 +11,16 @@ import styled from 'styled-components';
 import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
 import useWalletSelector from '@hooks/useWalletSelector';
 
-const SelectedAccountContainer = styled.div((props) => ({
+const SelectedAccountContainer = styled.div<{ showBorderBottom?: boolean }>((props) => ({
   display: 'flex',
   flexDirection: 'row',
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: `${props.theme.spacing(10)}px ${props.theme.spacing(8)}px`,
-  borderBottom: `0.5px solid ${props.theme.colors.background.elevation3}`,
+  borderBottom: props.showBorderBottom
+    ? `0.5px solid ${props.theme.colors.background.elevation3}`
+    : 'none',
 }));
 
 const ResetWalletContainer = styled.div((props) => ({
@@ -70,11 +72,13 @@ const WarningButton = styled(ButtonRow)`
 interface AccountHeaderComponentProps {
   disableMenuOption?: boolean;
   disableAccountSwitch?: boolean;
+  showBorderBottom?: boolean;
 }
 
 function AccountHeaderComponent({
   disableMenuOption = false,
   disableAccountSwitch = false,
+  showBorderBottom = true,
 }: AccountHeaderComponentProps) {
   const navigate = useNavigate();
   const { selectedAccount } = useWalletSelector();
@@ -163,7 +167,7 @@ function AccountHeaderComponent({
           />
         </ResetWalletContainer>
       )}
-      <SelectedAccountContainer>
+      <SelectedAccountContainer showBorderBottom={showBorderBottom}>
         <AccountRow
           account={selectedAccount!}
           isSelected

diff --git a/src/app/components/accountRow/index.tsx b/src/app/components/accountRow/index.tsx
@@ -6,6 +6,7 @@ import ActionButton from '@components/button';
 import OptionsDialog, { OPTIONS_DIALOG_WIDTH } from '@components/optionsDialog/optionsDialog';
 import useWalletReducer from '@hooks/useWalletReducer';
 import useWalletSelector from '@hooks/useWalletSelector';
+import { CaretDown } from '@phosphor-icons/react';
 import { Account } from '@secretkeylabs/xverse-core';
 import { LoaderSize } from '@utils/constants';
 import { getAccountGradient } from '@utils/gradient';
@@ -22,8 +23,8 @@ interface GradientCircleProps {
   thirdGradient: string;
 }
 const GradientCircle = styled.div<GradientCircleProps>((props) => ({
-  width: 40,
-  height: 40,
+  width: 20,
+  height: 20,
   borderRadius: 25,
   background: `linear-gradient(to bottom,${props.firstGradient}, ${props.secondGradient},${props.thirdGradient} )`,
 }));
@@ -52,6 +53,7 @@ const CurrentAcountContainer = styled.div((props) => ({
 const CurrentAccountTextContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
   gap: props.theme.spacing(4),
 }));
 
@@ -238,6 +240,7 @@ function AccountRow({
                   <CurrentUnSelectedAccountText>{getName()}</CurrentUnSelectedAccountText>
                 )}
                 {isHardwareAccount(account) && <img src={LedgerBadge} alt="Ledger icon" />}
+                {isSelected && !disabledAccountSelect && <CaretDown weight="bold" size={16} />}
               </CurrentAccountTextContainer>
             </TransparentSpan>
           )}

diff --git a/src/app/components/bundleAsset/bundleAsset.tsx b/src/app/components/bundleAsset/bundleAsset.tsx
@@ -0,0 +1,42 @@
+import RareSatAsset from '@components/rareSatAsset/rareSatAsset';
+import { Bundle } from '@utils/rareSats';
+import styled from 'styled-components';
+
+import RareSatsCollage from './rareSatsCollage';
+
+const ImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: ${(props) => props.theme.radius(1)}px;
+`;
+
+const IndividualAssetContainer = styled.div`
+  display: flex;
+  width: 100%;
+  background: ${(props) => props.theme.colors.elevation1};
+`;
+
+interface Props {
+  bundle: Bundle;
+}
+
+function BundleAsset({ bundle }: Props) {
+  const isMoreThanOneItem = bundle.items?.length > 1;
+  return (
+    <ImageContainer>
+      {isMoreThanOneItem ? (
+        <RareSatsCollage items={bundle.items} />
+      ) : (
+        <IndividualAssetContainer>
+          <RareSatAsset item={bundle.items[0]} />
+        </IndividualAssetContainer>
+      )}
+    </ImageContainer>
+  );
+}
+
+export default BundleAsset;
diff --git a/src/app/components/bundleAsset/rareSatsCollage.tsx b/src/app/components/bundleAsset/rareSatsCollage.tsx
@@ -0,0 +1,61 @@
+import RareSatAsset from '@components/rareSatAsset/rareSatAsset';
+import { BundleItem } from '@utils/rareSats';
+import styled from 'styled-components';
+
+const CollageContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: calc(7%);
+  gap: calc(6%);
+  align-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  border: 1px solid ${(props) => props.theme.colors.white_800};
+  border-radius: ${(props) => props.theme.radius(1)}px;
+`;
+
+const CollageItem = styled.div`
+  width: calc(50% - 3%);
+  height: calc(50% - 3%);
+  overflow: hidden;
+`;
+
+const RemainingAmountOfAssets = styled.div((props) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  aspectRatio: 1,
+  overflow: 'hidden',
+  borderRadius: props.theme.radius(1),
+  background: props.theme.colors.elevation1,
+  p: {
+    ...props.theme.body_medium_m,
+    fontSize: 'calc(2vw + 2vh)',
+    color: props.theme.colors.white_0,
+  },
+}));
+
+function RareSatsCollage({ items }: { items: Array<BundleItem> }) {
+  const moreThanFourItems = items.length > 4;
+
+  return (
+    <CollageContainer>
+      {items.slice(0, 4).map((item, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <CollageItem key={index}>
+          {moreThanFourItems && index === 3 ? (
+            <RemainingAmountOfAssets>
+              <p>+{items.length - 4}</p>
+            </RemainingAmountOfAssets>
+          ) : (
+            <RareSatAsset item={item} isCollage />
+          )}
+        </CollageItem>
+      ))}
+    </CollageContainer>
+  );
+}
+
+export default RareSatsCollage;