Merge branch 'develop' into chore/create-release-pr-workflow

secretkeylabs · Dec 6, 2023 · 40b0cf7 · 40b0cf7
2 parents 254a41b + a9909bf
commit 40b0cf7
Show file tree

Hide file tree

Showing 107 changed files with 3,099 additions and 2,160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.23.2",
+  "version": "0.25.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "3.1.1",
+    "@secretkeylabs/xverse-core": "5.0.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
@@ -61,7 +61,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-state-sync": "^3.1.4",
-    "sats-connect": "1.1.2",
+    "sats-connect": "1.3.0",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",

diff --git a/src/app/components/assetModal/index.tsx b/src/app/components/assetModal/index.tsx
@@ -0,0 +1,88 @@
+import Cross from '@assets/img/dashboard/X.svg';
+import { animated, useSpring } from '@react-spring/web';
+import OrdinalImage from '@screens/ordinals/ordinalImage';
+import { CondensedInscription, SatRangeInscription } from '@secretkeylabs/xverse-core';
+import styled from 'styled-components';
+
+const TransparentButton = styled.button({
+  background: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: 10,
+});
+
+const CrossContainer = styled.div({
+  display: 'flex',
+  marginTop: 10,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+});
+
+const OrdinalOuterImageContainer = styled.div({
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+const OrdinalImageContainer = styled.div({
+  width: '50%',
+});
+
+const OrdinalBackgroundContainer = styled(animated.div)({
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  position: 'fixed',
+  zIndex: 10,
+  background: 'rgba(18, 21, 30, 0.8)',
+  backdropFilter: 'blur(16px)',
+  padding: 16,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+interface Props {
+  inscription: SatRangeInscription;
+  onClose: () => void;
+}
+
+function AssetModal({ inscription, onClose }: Props) {
+  const consdensedInscription: CondensedInscription = {
+    ...inscription,
+    number: inscription.inscription_number,
+  };
+  const styles = useSpring({
+    from: {
+      opacity: 0,
+      y: 24,
+    },
+    to: {
+      y: 0,
+      opacity: 1,
+    },
+    delay: 100,
+  });
+
+  return (
+    <OrdinalBackgroundContainer style={styles}>
+      <CrossContainer onClick={onClose}>
+        <TransparentButton>
+          <img src={Cross} alt="cross" />
+        </TransparentButton>
+      </CrossContainer>
+      <OrdinalOuterImageContainer>
+        <OrdinalImageContainer>
+          <OrdinalImage ordinal={consdensedInscription} />
+        </OrdinalImageContainer>
+      </OrdinalOuterImageContainer>
+    </OrdinalBackgroundContainer>
+  );
+}
+
+export default AssetModal;
diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx
@@ -8,41 +8,44 @@ const BottomModalHeaderText = styled.h1((props) => ({
   flex: 1,
 }));
 
-const RowContainer = styled.div({
+const RowContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'space-between',
-  margin: '24px 24px 20px 24px',
-});
+  margin: props.theme.spacing(12),
+  marginBottom: props.theme.spacing(10),
+}));
 
 const ButtonImage = styled.button({
   backgroundColor: 'transparent',
 });
 
+const CustomisedModal = styled(Modal)`
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  position: absolute;
+`;
+
 interface Props {
   header: string;
   visible: boolean;
   children: React.ReactNode;
   onClose: () => void;
   overlayStylesOverriding?: {};
   contentStylesOverriding?: {};
+  className?: string;
 }
 
-const CustomisedModal = styled(Modal)`
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  position: absolute;
-`;
-
 function BottomModal({
   header,
   children,
   visible,
   onClose,
   overlayStylesOverriding,
   contentStylesOverriding,
+  className,
 }: Props) {
   const theme = useTheme();
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
@@ -79,6 +82,7 @@ function BottomModal({
       ariaHideApp={false}
       style={customStyles}
       contentLabel="Example Modal"
+      className={className}
     >
       <RowContainer>
         <BottomModalHeaderText>{header}</BottomModalHeaderText>

diff --git a/src/app/components/bundleAsset/bundleAsset.tsx b/src/app/components/bundleAsset/bundleAsset.tsx
diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
@@ -18,6 +18,7 @@ const Button = styled.button<ButtonProps>((props) => ({
   width: '100%',
   height: 44,
   transition: 'all 0.1s ease',
+  columnGap: props.theme.spacing(3),
   ':disabled': {
     opacity: 0.4,
     cursor: 'not-allowed',
@@ -63,23 +64,22 @@ const AnimatedButtonText = styled.div((props) => ({
   textAlign: 'center',
 }));
 
-const ButtonImage = styled.img((props) => ({
-  marginRight: props.theme.spacing(3),
+const ButtonImage = styled.img({
   alignSelf: 'center',
   transform: 'all',
-}));
+});
 
-const ButtonIconContainer = styled.div((props) => ({
+const ButtonIconContainer = styled.div({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  marginRight: props.theme.spacing(3),
-}));
+});
 
 interface Props {
   className?: string;
   src?: string;
   icon?: JSX.Element;
+  iconPosition?: 'left' | 'right';
   text: string;
   onPress: () => void;
   processing?: boolean;
@@ -93,6 +93,7 @@ function ActionButton({
   className,
   src,
   icon,
+  iconPosition = 'left',
   text,
   onPress,
   processing = false,
@@ -120,8 +121,9 @@ function ActionButton({
         ) : (
           <>
             {src && <ButtonImage src={src} />}
-            {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
+            {icon && iconPosition === 'left' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
             <AnimatedButtonText>{text}</AnimatedButtonText>
+            {icon && iconPosition === 'right' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
           </>
         )}
       </TransparentButton>
@@ -140,8 +142,9 @@ function ActionButton({
       ) : (
         <>
           {src && <ButtonImage src={src} />}
-          {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
+          {icon && iconPosition === 'left' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
           <ButtonText warning={warning}>{text}</ButtonText>
+          {icon && iconPosition === 'right' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
         </>
       )}
     </Button>