Merge pull request #273 from secretkeylabs/feature/ordinals-transfers

Feat - ordinal transfers

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "dependencies": {
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "0.7.3",
+    "@secretkeylabs/xverse-core": "0.8.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",

src/app/components/AlertMessage/index.tsx

@@ -11,7 +11,7 @@ const Container = styled.div((props) => ({
   transform: 'translate(-50%, -50%)',
   width: 312,
   borderRadius: 12,
-  zIndex: 2000,
+  zIndex: 16000,
   background: props.theme.colors.background.elevation2,
   filter: 'drop-shadow(0px 16px 36px rgba(0, 0, 0, 0.5))',
 }));

src/app/components/infoContainer/index.tsx

@@ -1,15 +1,18 @@
 import styled from 'styled-components';
 import InfoIcon from '@assets/img/info.svg';
+import WarningIcon from '@assets/img/Warning.svg';
 
-const Container = styled.div((props) => ({
+const Container = styled.div<{ type: 'Info' | 'Warning' | undefined }>((props) => ({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: 12,
   alignItems: 'flex-start',
   backgroundColor: 'transparent',
   padding: props.theme.spacing(8),
   marginBottom: props.theme.spacing(6),
-  border: '1px solid rgba(255, 255, 255, 0.2)',
+  border: `1px solid ${
+    props.type === 'Warning' ? props.theme.colors.feedback.error_700 : 'rgba(255, 255, 255, 0.2)'
+  }`,
 }));
 
 const TextContainer = styled.div((props) => ({
@@ -38,20 +41,22 @@ const Text = styled.h1((props) => ({
 interface Props {
   titleText?: string;
   bodyText: string;
+  type?: 'Info' | 'Warning';
 }
 
-function InfoContainer({ titleText, bodyText }: Props) {
+function InfoContainer({ titleText, bodyText, type }: Props) {
   return (
-    <Container>
-      <img src={InfoIcon} alt="alert" />
+    <Container type={type}>
+      <img src={type === 'Warning' ? WarningIcon : InfoIcon} alt="alert" />
       <TextContainer>
         {titleText ? (
           <>
             <BoldText>{titleText}</BoldText>
             <SubText>{bodyText}</SubText>
           </>
-        )
-          : <Text>{bodyText}</Text>}
+        ) : (
+          <Text>{bodyText}</Text>
+        )}
       </TextContainer>
     </Container>
   );