Merge pull request #1163 from interlay/tom/release/interlay/2.30.2

[release] Interlay 2.30.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.30.1",
+  "version": "2.30.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",

src/component-library/TokenInput/TokenInput.tsx

@@ -37,7 +37,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       balanceLabel,
       isDisabled,
       label,
-      ticker,
+      ticker: tickerProp,
       style,
       hidden,
       className,
@@ -53,7 +53,9 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
   ): JSX.Element => {
     const inputRef = useDOMRef(ref);
 
-    const [selectValue, setSelectValue] = useState((selectProps?.defaultValue as string) || '');
+    const [ticker, setTicker] = useState<string>(
+      (selectProps?.defaultValue as string) || (typeof tickerProp === 'string' ? tickerProp : tickerProp?.text) || ''
+    );
 
     const { labelProps, fieldProps } = useLabel({ label, ...props });
 
@@ -62,7 +64,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     useEffect(() => {
       if (selectProps?.value === undefined) return;
 
-      setSelectValue(selectProps.value as string);
+      setTicker(selectProps.value as string);
     }, [selectProps?.value]);
 
     const handleClickBalance = () => {
@@ -74,7 +76,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
 
     const handleTokenChange = (ticker: Key) => {
       onChangeTicker?.(ticker as string);
-      setSelectValue(ticker as string);
+      setTicker(ticker as string);
     };
 
     // Prioritise Number Input description and error message
@@ -85,7 +87,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     const endAdornment = selectProps ? (
       <TokenSelect
         {...restSelectProps}
-        value={selectValue}
+        value={ticker}
         onSelectionChange={chain(onSelectionChange, handleTokenChange)}
         label={label}
         aria-label={fieldProps['aria-label']}
@@ -103,10 +105,10 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       <Flex direction='column' gap='spacing0' className={className} style={style} hidden={hidden}>
         {hasLabel && (
           <TokenInputLabel
-            ticker={selectValue}
+            ticker={ticker}
             balance={humanBalance || balance}
             balanceLabel={balanceLabel}
-            isDisabled={isDisabled || !selectValue}
+            isDisabled={isDisabled || !ticker}
             onClickBalance={handleClickBalance}
             {...labelProps}
           >

src/components/PoolsTable/PoolsTable.tsx

@@ -48,12 +48,13 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS
   const commonColumns = [
     { name: t('amm.pools.pool_name'), uid: PoolsTableColumns.POOL_NAME },
     { name: t('apr'), uid: PoolsTableColumns.APR },
-    { name: t('total_liquidity'), uid: PoolsTableColumns.TOTAL_LIQUIDITY }
+    { name: t('total_liquidity'), uid: PoolsTableColumns.TOTAL_LIQUIDITY },
+    { name: t('7_day_volume'), uid: PoolsTableColumns.SEVEN_DAY_VOLUME }
   ];
 
   const borrowAssetsColumns = isAccountPools
     ? [...commonColumns, { name: t('my_liquidity'), uid: PoolsTableColumns.ACCOUNT_LIQUIDITY }]
-    : [...commonColumns, { name: t('7_day_volume'), uid: PoolsTableColumns.SEVEN_DAY_VOLUME }];
+    : commonColumns;
 
   const rows: PoolsTableRow[] = useMemo(
     () =>
@@ -73,7 +74,7 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS
 
         const total7DayVolumeUSD = getDexTotalVolumeUSD(pooledCurrencies.map((pooled) => pooled.currency.ticker));
         const total7DayVolumeLabel = formatUSD(total7DayVolumeUSD, { compact: true });
-        const sevenDayVolume = isAccountPools ? null : (
+        const sevenDayVolume = (
           <Cell label={total7DayVolumeLabel} alignItems={isAccountPools ? 'flex-start' : 'flex-end'} />
         );
 

src/pages/Staking/index.tsx

@@ -322,10 +322,10 @@ const Staking = (): JSX.Element => {
   React.useEffect(() => {
     if (!lockTime) return;
     if (!currentBlockNumber) return;
-    if (!stakedAmountAndEndBlock) return;
 
     const lockTimeValue = Number(lockTime);
-    const extensionTime = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(lockTimeValue);
+    const extensionTime =
+      (stakedAmountAndEndBlock?.endBlock || currentBlockNumber) + convertWeeksToBlockNumbers(lockTimeValue);
 
     setBlockLockTimeExtension(extensionTime);
   }, [currentBlockNumber, lockTime, stakedAmountAndEndBlock]);