Merge pull request #22 from dcSpark/paulccari/fixes-network-calls

Reduce network calls and custom theming support
dcSpark · Dec 17, 2023 · f9b12a6 · f9b12a6
2 parents 3849112 + 2bf5a83
commit f9b12a6
Show file tree

Hide file tree

Showing 35 changed files with 664 additions and 465 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/milkomeda-wsc-ui-next-example/pages/index.tsx b/packages/milkomeda-wsc-ui-next-example/pages/index.tsx
@@ -21,7 +21,7 @@ const Home: NextPage = () => {
     /* config for wrap token - 1 MADA */
     defaultWrapToken: {
       unit: "lovelace",
-      amount: "1000000000000000000",
+      amount: "1000000000000000000", // 1 MADA (18decimals)
     },
     /* config for evm action execution */
     evmContractRequest: {
@@ -33,13 +33,8 @@ const Home: NextPage = () => {
         value: ethers.BigNumber.from("1000000000000000000"),
       },
     },
-    /* config for erc20 token allowance */
+    /* config for erc20 token allowance & unwrapping */
     evmTokenAddress: evmTokenAddress,
-    /* config for unwrap token - 1 m3s6 */
-    defaultUnwrapToken: {
-      unit: evmTokenAddress,
-      amount: "10000000",
-    },
   };
 
   return (

diff --git a/packages/milkomeda-wsc-ui/CONTRIBUTING.md b/packages/milkomeda-wsc-ui/CONTRIBUTING.md
diff --git a/packages/milkomeda-wsc-ui/README.md b/packages/milkomeda-wsc-ui/README.md
@@ -1,7 +1,6 @@
 # Milkomeda WSC UI
 
-Milkomeda WSC UI is a powerful [React](https://reactjs.org/) component library for connecting WSC to your dApp. 
-
+Milkomeda WSC UI is a powerful [React](https://reactjs.org/) component library for connecting WSC to your dApp.
 
 ## Quick Start
 
@@ -19,7 +18,6 @@ $ npm install milkomeda-wsc-ui
 $ yarn add milkomeda-wsc-ui
 ```
 
-
 ## Documentation
 
 You can find the full Milkomeda WSC documentation in the Milkomeda docs [here](https://docs.milkomeda.com/cardano/wrapped-smart-contracts/developers/how_to_integrate).
@@ -30,15 +28,12 @@ You can find the full API Reference in the Milkomeda WSC docs [here](https://doc
 
 ## Examples
 
-There are various runnable examples included in this repository in the [example folder](../milkomeda-wsc-ui-next-example):
+There are various runnable examples included in this repository in the [example folder](https://github.com/dcSpark/wrapped-smartcontracts/tree/main/packages/milkomeda-wsc-ui-next-example):
 
-- [Next Example (TypeScript)](../milkomeda-wsc-ui-next-example)
+- [Next Example (TypeScript)](https://github.com/dcSpark/wrapped-smartcontracts/tree/main/packages/milkomeda-wsc-ui-next-example)
 
 You can play around with the Next Example [here](https://codesandbox.io/p/sandbox/milkomeda-wsc-demo-2ddjkv?file=%2FREADME.md%3A1%2C36).
 
-
 ## Twitter
 
 Follow [@milkomeda](https://twitter.com/Milkomeda_com) on Twitter for the latest updates on Milkomeda.
-
-
diff --git a/packages/milkomeda-wsc-ui/package.json b/packages/milkomeda-wsc-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "milkomeda-wsc-ui",
   "version": "0.0.1",
-  "author": "",
+  "author": "paulclindo",
   "homepage": "https://github.com/dcSpark/wrapped-smartcontracts#readme",
   "license": "ISC",
   "type": "module",
@@ -40,7 +40,7 @@
     "detect-browser": "^5.3.0",
     "framer-motion": "^6.3.11",
     "lucide-react": "^0.252.0",
-    "milkomeda-wsc": "0.2.8",
+    "milkomeda-wsc": "0.3.3",
     "qrcode": "^1.5.0",
     "react": "17.x || 18.x",
     "react-confetti": "^6.1.0",
@@ -54,6 +54,7 @@
     "rollup-plugin-typescript2": "^0.34.0",
     "rollup-plugin-visualizer": "^5.5.4",
     "styled-components": "^5.3.5",
+    "tiny-invariant": "^1.3.1",
     "tslib": "^2.5.3",
     "typescript-plugin-styled-components": "^2.0.0",
     "wagmi": "0.12.15"

diff --git a/packages/milkomeda-wsc-ui/src/components/Common/Button/styles.ts b/packages/milkomeda-wsc-ui/src/components/Common/Button/styles.ts
@@ -151,7 +151,7 @@ export const ButtonContainer = styled.button<{
   width: 100%;
   display:block;
   text-align: center;
-  height: 48px;
+  height: var(--wsc-button-height, 48px);
   margin: 12px 0 0;
   line-height: 48px;
   padding: 0 4px;

diff --git a/packages/milkomeda-wsc-ui/src/components/Common/Modal/styles.ts b/packages/milkomeda-wsc-ui/src/components/Common/Modal/styles.ts
@@ -594,7 +594,7 @@ export const Container = styled(motion.div)`
     }
     ${ControllerContainer} {
       width: 100%;
-      top: 4px;
+      top: 10px;
       border-bottom: 0;
     }
     ${CloseButton} {

diff --git a/packages/milkomeda-wsc-ui/src/components/Common/Stepper/index.tsx b/packages/milkomeda-wsc-ui/src/components/Common/Stepper/index.tsx
@@ -329,7 +329,7 @@ interface StepperStepConnectorProps extends React.HTMLAttributes<HTMLDivElement>
 
 const StepperStepConnector = React.memo(
   ({ isCompletedStep, children, isLastStep }: StepperStepConnectorProps) => {
-    const { isVertical } = useStepperContext();
+    const { isVertical, labelOrientation } = useStepperContext();
 
     if (isVertical) {
       return (
@@ -348,10 +348,7 @@ const StepperStepConnector = React.memo(
     }
 
     return (
-      <StepperSeparator
-        data-highlighted={isCompletedStep}
-        orientation={isVertical ? "vertical" : "horizontal"}
-      />
+      <StepperSeparator data-highlighted={isCompletedStep} $labelOrientation={labelOrientation} />
     );
   }
 );

diff --git a/packages/milkomeda-wsc-ui/src/components/Common/Stepper/styles.ts b/packages/milkomeda-wsc-ui/src/components/Common/Stepper/styles.ts
@@ -15,6 +15,9 @@ export const StepperStepLabelContainer = styled(motion.div)`
   &[aria-current="step"] {
     color: var(--wsc-body-color);
   }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    min-height: auto;
+  }
 `;
 export const StepperStepOptionalLabel = styled(motion.span)`
   font-size: 0.875rem;
@@ -37,6 +40,11 @@ export const StepperStepConnectorContainer = styled(motion.div)`
   flex: 1 1 0;
   align-self: stretch;
   border-left: 2px solid;
+
+  @media (max-width: ${defaultTheme.mobileWidth}px) {
+    min-height: auto;
+  }
+
   ${({ $isLastStep }) =>
     $isLastStep &&
     css`
@@ -47,11 +55,7 @@ export const StepperStepConnectorContainer = styled(motion.div)`
     $isCompletedStep &&
     css`
       border-color: rgb(14, 117, 55);
-    `};
-
-  @media only screen and(max-width: ${defaultTheme.mobileWidth}px) {
-    min-height: 10px;
-  }
+    `}
 `;
 
 export const StepperStepConnectorLast = styled(motion.div)`
@@ -68,6 +72,10 @@ export const StepperStepContainer = styled(motion.div)`
   gap: 18px;
   position: relative;
 
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    gap: 0;
+  }
+
   ${({ $isLastStep }) =>
     $isLastStep
       ? css`
@@ -114,8 +122,9 @@ export const StepperContainer = styled(motion.div)<{ $isVertical?: boolean }>`
   padding-left: 40px;
   padding-right: 40px;
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 2px;
+    padding-right: 2px;
+    // min-height: 500px;
   }
 `;
 export const StepperStepRow = styled(motion.div)<{ $isLabelVertical?: boolean }>`
@@ -137,8 +146,9 @@ export const StepperStepRow = styled(motion.div)<{ $isLabelVertical?: boolean }>
   }
 `;
 export const StepperStepButton = styled(motion.button)<{ $isCompletedStep?: boolean }>`
-  min-height: 40px;
-  min-width: 40px;
+  height: 40px;
+  width: 40px;
+  flex-shrink: 0;
   border-radius: 9999px;
   color: white;
   display: inline-flex;
@@ -179,11 +189,17 @@ export const StepperSeparator = styled(Separator.Root)`
   min-height: auto;
   align-self: auto;
   background-color: var(--wsc-stepper-separator);
-  //position: absolute;
+
+  ${({ $labelOrientation }) =>
+    $labelOrientation === "vertical" &&
+    css`
+      position: absolute;
+      top: 24px;
+      left: 36px;
+    `}
+  // ${({ $labelOrientation }) => $labelOrientation === "vertical" && css``}
 
   width: 100%;
-  top: 24px;
-  left: 45px;
   &[data-highlighted="true"] {
     background-color: var(--wsc-stepper-highlighted-background-circle, rgb(14, 117, 55));
   }