feat(packages): energy packages

package.json

@@ -35,6 +35,7 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "^7.21.0",
+    "@chain-registry/osmosis": "^1.63.9",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@graphql-codegen/cli": "^5.0.2",
@@ -43,6 +44,8 @@
     "@graphql-codegen/typescript-react-apollo": "^4.3.0",
     "@keplr-wallet/types": "^0.11.52",
     "@milkdown/kit": "^7.5.0",
+    "@osmonauts/math": "^1.7.0",
+    "@osmonauts/utils": "^1.17.0",
     "@octokit/types": "^13.6.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@rjsf/core": "^3.2.1",
@@ -69,6 +72,7 @@
     "babel-loader": "9.1.2",
     "babel-plugin-root-import": "^6.6.0",
     "browserify-zlib": "^0.2.0",
+    "chain-registry": "^1.67.0",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^6.1.1",
     "constants-browserify": "^1.0.0",
@@ -99,6 +103,7 @@
     "mini-css-extract-plugin": "^2.6.1",
     "ncp": "^2.0.0",
     "os-browserify": "^0.3.0",
+    "osmojs": "^16.14.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^7.0.2",
     "postcss-media-minmax": "^5.0.0",

src/components/AvailableAmount/AvailableAmount.module.scss

@@ -5,7 +5,10 @@
 .containerValue {
   padding: 0 13px;
   font-size: 1.25rem;
-  color: var(--grayscale-dark);
+
+  // color: var(--grayscale-dark);
+
+  color: #fff;
   height: 42px;
   display: flex;
   align-items: center;

src/components/AvailableAmount/AvailableAmount.tsx

@@ -3,17 +3,33 @@ import styles from './AvailableAmount.module.scss';
 import LinearGradientContainer, {
   Color,
 } from '../LinearGradientContainer/LinearGradientContainer';
+import DenomArr from '../denom/denomArr';
 
 type Props = {
   amountToken: number | string;
   title?: string;
+  denom?: string;
+  color?: Color;
 };
 
-function AvailableAmount({ amountToken, title = 'available amount' }: Props) {
+function AvailableAmount({
+  amountToken,
+  title = 'available amount',
+  denom,
+  color = Color.Black,
+}: Props) {
   return (
     <div className={styles.containerAvailableAmount}>
-      <LinearGradientContainer color={Color.Black} title={title}>
-        <div className={styles.containerValue}>{formatNumber(amountToken)}</div>
+      <LinearGradientContainer color={color} title={title}>
+        <div
+          className={styles.containerValue}
+          style={{ gap: denom ? '5px' : 0 }}
+        >
+          {formatNumber(amountToken)}
+          {denom && (
+            <DenomArr denomValue={denom} onlyImg tooltipStatusImg={false} />
+          )}
+        </div>
       </LinearGradientContainer>
     </div>
   );

src/components/LinearGradientContainer/LinearGradientContainer.module.scss

@@ -91,6 +91,12 @@ $box-shadow-green: rgba(54, 214, 174, 0.53);
       }
     }
 
+    &.blue {
+      .textboxBottomLine {
+        box-shadow: 0px 0px 6px 2px $box-shadow-blue;
+      }
+    }
+
     &.yellow {
       .textboxBottomLine {
         box-shadow: 0px 0px 6px 2px $box-shadow-yellow;
@@ -122,6 +128,12 @@ $box-shadow-green: rgba(54, 214, 174, 0.53);
     }
   }
 
+  &.blue {
+    .textboxFace {
+      background: $linear-gradient-blue;
+    }
+  }
+
   &.yellow {
     .textboxFace {
       background: $linear-gradient-yellow;

src/components/LinearGradientContainer/LinearGradientContainer.tsx

@@ -7,6 +7,7 @@ export const enum Color {
   Red = 'red',
   Black = 'black',
   Green = 'green',
+  Blue = 'blue',
 }
 
 export type Props = {

src/components/Select/Select.module.scss

@@ -93,7 +93,9 @@
     }
 
     .dropDownHeader {
-      color: gray;
+      // color: gray;
+
+      color: #fff;
     }
   }
 }

src/components/btnGrd/Button.module.scss

@@ -1,10 +1,9 @@
 $color-text: #36d6ae;
-
 @mixin linear-gradient-green($route) {
   background: linear-gradient(
     $route,
     rgba(0, 237, 235, 0) 0%,
-    rgba(0, 237, 235, 6) 100%
+    var(--color-gradient) 100%
   );
 }
 
@@ -16,8 +15,8 @@ $color-text: #36d6ae;
   box-sizing: border-box;
   top: 0;
   bottom: 0;
-  box-shadow: 0px 0px 4px 1px rgba(54, 214, 174, 0.5),
-    0px 0px 15px 1px rgba(54, 214, 174, 0.5);
+  box-shadow: 0px 0px 4px 1px var(--color-shadow),
+    0px 0px 15px 1px var(--color-shadow);
 }
 
 @mixin styleGradientPseudoEl {
@@ -46,6 +45,14 @@ $color-text: #36d6ae;
   height: 52px;
   min-width: 217px;
   font-size: 18px;
+  --color-shadow: rgba(54, 214, 174, 0.5);
+  --color-gradient: rgba(0, 237, 235, 6);
+
+  &.pending {
+    color: #FFCA42 !important;
+    --color-shadow: #FFCA42;
+    --color-gradient: #FFCA42;
+  }
 
   &:hover {
     color: #40ecc1;
@@ -108,6 +115,24 @@ a.containerBtnGrd {
   align-items: center;
   justify-content: center;
   padding: 0 10px;
+
+  &.yellow {
+    &::before {
+      @include styleGradientPseudoEl;
+      @include linear-gradient-green(-90deg);
+      left: 3px;
+      transform-origin: left;
+      transform: perspective(100px) rotateY(55deg);
+    }
+
+    &::after {
+      @include styleGradientPseudoEl;
+      @include linear-gradient-green(90deg);
+      right: 3px;
+      transform-origin: right;
+      transform: perspective(100px) rotateY(-55deg);
+    }
+  }
 }
 
 .containerBtnGrd:not(:disabled) {

src/components/btnGrd/index.tsx

@@ -8,8 +8,18 @@ import styles from './Button.module.scss';
 const audioBtn = require('../../sounds/main-button.mp3');
 // const audioBtnHover = require('../../sounds/main-button-hover.mp3');
 
-function GradientContainer({ children }: { children: React.ReactNode }) {
-  return <div className={styles.GradientContainer}>{children}</div>;
+function GradientContainer({
+  children,
+  color,
+}: {
+  children: React.ReactNode;
+  color?: 'yellow';
+}) {
+  return (
+    <div className={cx(styles.GradientContainer, styles[color])}>
+      {children}
+    </div>
+  );
 }
 
 const audioBtnObg = new Audio(audioBtn);
@@ -114,12 +124,13 @@ function Button({
       onClick={handleClick}
       className={cx(styles.containerBtnGrd, className, {
         [styles.smallBtn]: small,
+        [styles.pending]: pending,
       })}
       disabled={disabled || pending}
       {...props}
       {...componentProps}
     >
-      <GradientContainer>
+      <GradientContainer color={pending ? 'yellow' : undefined}>
         {pending ? (
           <>
             {pendingText || 'pending'}

src/features/ibc-history/historyContext.tsx

@@ -34,6 +34,7 @@ type HistoryContext = {
   ) => void;
   useGetHistoriesItems: () => Option<PromiseExtended<HistoriesItem[]>>;
   updateStatusByTxHash: (txHash: string, status: StatusTx) => void;
+  getItemByTxHash: (txHash: string) => Promise<HistoriesItem[]>;
   traceHistoryStatus: (item: HistoriesItem) => Promise<StatusTx>;
 };
 
@@ -45,6 +46,7 @@ const valueContext = {
   useGetHistoriesItems: () => {},
   updateStatusByTxHash: () => {},
   traceHistoryStatus: () => {},
+  getItemByTxHash: () => {},
 };
 
 export const HistoryContext = React.createContext<HistoryContext>(valueContext);
@@ -55,15 +57,6 @@ export const useIbcHistory = () => {
   return context;
 };
 
-const historiesItemsByAddress = (addressActive: AccountValue | null) => {
-  if (addressActive) {
-    return dbIbcHistory.historiesItems
-      .where({ address: addressActive.bech32 })
-      .toArray();
-  }
-  return [];
-};
-
 type UncommitedTx = {
   txHash: string;
   address: string;
@@ -82,7 +75,7 @@ function HistoryContextProvider({ children }: { children: React.ReactNode }) {
     useState<Option<HistoriesItem[]>>(undefined);
   const { defaultAccount } = useAppSelector((state: RootState) => state.pocket);
   const [update, setUpdate] = useState(0);
-   const addressActive = defaultAccount.account?.cyber || undefined; 
+  const addressActive = defaultAccount.account?.cyber || undefined;
 
   function getBlockSubscriber(chainId: string): PollingStatusSubscription {
     if (!blockSubscriberMap.has(chainId)) {
@@ -198,7 +191,7 @@ function HistoryContextProvider({ children }: { children: React.ReactNode }) {
       timeoutUnsubscriber();
     }
 
-     txTracer.close();
+    txTracer.close();
 
     if (result) {
       return StatusTx.COMPLETE;
@@ -234,15 +227,22 @@ function HistoryContextProvider({ children }: { children: React.ReactNode }) {
     getItem();
   }, [addressActive, update]);
 
+  const getItemByTxHash = async (txHash: string) => {
+    return dbIbcHistory.historiesItems
+      .where({
+        txHash,
+      })
+      .toArray();
+  };
+
   const pingTxsIbc = async (
     cliet: SigningStargateClient | SigningCyberClient,
     uncommitedTx: UncommitedTx
   ) => {
     const ping = async () => {
       const response = await cliet.getTx(uncommitedTx.txHash);
-      if (response) {
-        const result = parseRawLog(response.rawLog);
-        const dataFromEvent = parseEvents(result);
+      if (response && response.events) {
+        const dataFromEvent = parseEvents(response.events);
         if (dataFromEvent) {
           const itemHistories = { ...uncommitedTx, ...dataFromEvent };
           addHistoriesItem({
@@ -285,6 +285,7 @@ function HistoryContextProvider({ children }: { children: React.ReactNode }) {
         useGetHistoriesItems,
         updateStatusByTxHash,
         traceHistoryStatus,
+        getItemByTxHash,
       }}
     >
       {children}

src/features/ibc-history/useGetStatus.tsx

@@ -6,10 +6,12 @@ function* toGenerator<R>(p: Promise<R>) {
   return (yield p) as R;
 }
 
-function useGetStatus(item: HistoriesItem) {
+function useGetStatus(item?: HistoriesItem) {
   const { traceHistoryStatus, updateStatusByTxHash } = useIbcHistory();
 
-  const [status, setStatus] = useState(item.status);
+  const [status, setStatus] = useState<StatusTx>(
+    item ? item.status : StatusTx.PENDING
+  );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   function* tryUpdateHistoryStatus(item: HistoriesItem) {
@@ -27,6 +29,9 @@ function useGetStatus(item: HistoriesItem) {
   }
 
   useEffect(() => {
+    if (!item) {
+      return;
+    }
     const getValue = async () => {
       const gen = await helper(tryUpdateHistoryStatus(item));