@rango-dev/widget-embedded 0.25.1-next.4 → 0.25.1-next.6

package/dist/store/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/store/quote.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/store/quote.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.25.1-next.4",
+  "version": "0.25.1-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/SwitchFromAndTo/SwitchFromAndTo.styles.ts

@@ -0,0 +1,48 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const ROTATE_ANIMATION_DURATION = 450;
+
+const rotateAnimation = keyframes({
+  '0%': {
+    transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
+  },
+  '33%': {
+    transform: 'rotateX(0deg) rotateZ(78deg) rotateY(66deg)',
+  },
+  '66%': {
+    transform: 'rotateX(0deg) rotateZ(163deg) rotateY(66deg)',
+  },
+  '100%': {
+    transform: 'rotateX(0deg) rotateZ(180deg) rotateY(0deg)',
+  },
+});
+
+export const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+  cursor: 'pointer',
+});
+
+export const StyledButton = styled('div', {
+  borderRadius: '$md',
+  border: '3px solid $background',
+  background: '$neutral100',
+  width: '$24',
+  height: '$24',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '$foreground',
+  '&.rotate': {
+    '& svg': {
+      animation: `${rotateAnimation} ${ROTATE_ANIMATION_DURATION}ms ease-in-out forwards`,
+    },
+  },
+  '&:hover': {
+    color: '$secondary500',
+    transform: 'translateY(1px) scale(1.04)',
+    boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.05)',
+  },
+});

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -0,0 +1,32 @@
+import { ReverseIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  ROTATE_ANIMATION_DURATION,
+  StyledButton,
+  SwitchButtonContainer,
+} from './SwitchFromAndTo.styles';
+
+export function SwitchFromAndToButton() {
+  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
+
+  return (
+    <SwitchButtonContainer>
+      <StyledButton
+        onClick={(event) => {
+          const button = event.currentTarget;
+
+          button.classList.add('rotate');
+
+          setTimeout(() => {
+            button.classList.remove('rotate');
+          }, ROTATE_ANIMATION_DURATION);
+          switchFromAndTo();
+        }}>
+        <ReverseIcon size={12} />
+      </StyledButton>
+    </SwitchButtonContainer>
+  );
+}

package/src/components/SwitchFromAndTo/index.ts

@@ -0,0 +1 @@
+export { SwitchFromAndToButton } from './SwitchFromAndTo';

package/src/components/TokenList/TokenList.tsx

@@ -110,7 +110,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list]);
+  }, [list.length]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {

package/src/store/quote.ts

@@ -247,10 +247,9 @@ export const useQuoteStore = createSelectors(
           toBlockchain: state.fromBlockchain,
           toToken: state.fromToken,
           inputAmount: state.outputAmount?.toString() || '',
-          inputUsdValue: getUsdValue(
-            state.toToken,
-            state.outputAmount?.toString() || ''
-          ),
+          inputUsdValue: state.toToken
+            ? getUsdValue(state.toToken, state.outputAmount?.toString() || '')
+            : new BigNumber(0),
         })),
       resetFromBlockchain: () =>
         set(() => ({

package/dist/components/SwitchFromAndTo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchFromAndTo.d.ts","sourceRoot":"","sources":["../../src/components/SwitchFromAndTo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,wBAAgB,qBAAqB,sBAapC"}

package/src/components/SwitchFromAndTo.tsx

@@ -1,42 +0,0 @@
-import { ReverseIcon, styled } from '@rango-dev/ui';
-import React from 'react';
-
-import { useQuoteStore } from '../store/quote';
-
-const SwitchButtonContainer = styled('div', {
-  position: 'absolute',
-  bottom: '-12px',
-  left: '50%',
-  transform: 'translate(-50%, 10%)',
-  cursor: 'pointer',
-});
-
-const StyledButton = styled('div', {
-  borderRadius: '$md',
-  border: '3px solid $background',
-  background: '$neutral100',
-  width: '$24',
-  height: '$24',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: '$foreground',
-  '&:hover': {
-    color: '$secondary500',
-  },
-});
-
-export function SwitchFromAndToButton() {
-  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
-
-  return (
-    <SwitchButtonContainer>
-      <StyledButton
-        onClick={() => {
-          switchFromAndTo();
-        }}>
-        <ReverseIcon size={12} />
-      </StyledButton>
-    </SwitchButtonContainer>
-  );
-}