Sanchonet Integration Branch

apps/browser-extension-wallet/.env.defaults

@@ -61,22 +61,25 @@ PRODUCTION_MODE_TRACKING=false
 POSTHOG_DEV_TOKEN_MAINNET=phc_gH96Lx5lEVXTTWEyytSdTFPDk3Xsxwi4BqG88mKObd1
 POSTHOG_DEV_TOKEN_PREPROD=phc_Xlmldm6EYSfQVgB9Uxm3b2xC1noDlgFFXpF9AJ6SMfJ
 POSTHOG_DEV_TOKEN_PREVIEW=phc_e8SaOOWpXpNE59TnpLumeUjWm4iv024AWjhQqU406jr
+POSTHOG_DEV_TOKEN_SANCHONET=phc_OUu6sPucDu5S6skRmYbWN5Jn8TpggWTQu1Y1ETkm3xt
 
 # Cardano Services
 CARDANO_SERVICES_URL_MAINNET=https://dev-mainnet.lw.iog.io
 CARDANO_SERVICES_URL_PREPROD=https://dev-preprod.lw.iog.io
 CARDANO_SERVICES_URL_PREVIEW=https://dev-preview.lw.iog.io
+CARDANO_SERVICES_URL_SANCHONET=https://backend.dev-sanchonet.eks.lw.iog.io
 
 # Explorer URLs
 CEXPLORER_URL_MAINNET=https://cexplorer.io
 CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
-CEXPLORER_URL_SANCHONET=https://sanchonet.cexplorer.io
+CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # ADA Handle URLs
 ADA_HANDLE_URL_MAINNET=https://api.handle.me
 ADA_HANDLE_URL_PREVIEW=https://preview.api.handle.me
 ADA_HANDLE_URL_PREPROD=https://preprod.api.handle.me
+ADA_HANDLE_URL_SANCHONET=
 
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk

apps/browser-extension-wallet/.env.developerpreview

@@ -60,12 +60,13 @@ POSTHOG_DEV_TOKEN_PREVIEW=phc_e8SaOOWpXpNE59TnpLumeUjWm4iv024AWjhQqU406jr
 CARDANO_SERVICES_URL_MAINNET=https://dev-mainnet.lw.iog.io
 CARDANO_SERVICES_URL_PREPROD=https://dev-preprod.lw.iog.io
 CARDANO_SERVICES_URL_PREVIEW=https://dev-preview.lw.iog.io
+CARDANO_SERVICES_URL_SANCHONET=https://backend.dev-sanchonet.eks.lw.iog.io
 
 # Explorer URLs
 CEXPLORER_URL_MAINNET=https://cexplorer.io
 CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
-CEXPLORER_URL_SANCHONET=https://sanchonet.cexplorer.io
+CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # ADA Handle URLs
 ADA_HANDLE_URL_MAINNET=https://api.handle.me

apps/browser-extension-wallet/.env.example

@@ -59,22 +59,25 @@ POSTHOG_PRODUCTION_TOKEN_PREVIEW=production-preview-token
 POSTHOG_DEV_TOKEN_MAINNET=dev-mainnet-token
 POSTHOG_DEV_TOKEN_PREPROD=dev-preprod-token
 POSTHOG_DEV_TOKEN_PREVIEW=dev-preview-token
+POSTHOG_DEV_TOKEN_SANCHONET=dev-sanchonet-token
 
 # Cardano Services
 CARDANO_SERVICES_URL_MAINNET=https://backend.live-mainnet.eks.lw.iog.io
 CARDANO_SERVICES_URL_PREPROD=https://backend.live-preprod.eks.lw.iog.io
 CARDANO_SERVICES_URL_PREVIEW=https://backend.live-preview.eks.lw.iog.io
+CARDANO_SERVICES_URL_SANCHONET=https://backend.dev-sanchonet.eks.lw.iog.io
 
 # Explorer URLs
 CEXPLORER_URL_MAINNET=https://cexplorer.io
 CEXPLORER_URL_PREVIEW=https://preview.cexplorer.io
 CEXPLORER_URL_PREPROD=https://preprod.cexplorer.io
-CEXPLORER_URL_TESTNET=https://testnet.cexplorer.io
+CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # ADA Handle URLs
 ADA_HANDLE_URL_MAINNET=https://api.handle.me
 ADA_HANDLE_URL_PREVIEW=https://preview.api.handle.me
 ADA_HANDLE_URL_PREPROD=https://preprod.api.handle.me
+ADA_HANDLE_URL_SANCHONET=
 
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk

apps/browser-extension-wallet/src/config.ts

@@ -45,7 +45,7 @@ const envChecks = (chosenChain: Wallet.ChainName): void => {
     throw new Error('no available chains to connect to');
   }
 
-  if (!process.env.AVAILABLE_CHAINS.includes('Mainnet')) {
+  if (!process.env.AVAILABLE_CHAINS.includes('Mainnet') && process.env.DEFAULT_CHAIN !== 'Sanchonet') {
     throw new Error('mainnet chain not available in env');
   }
 
@@ -78,12 +78,14 @@ export const config = (): Config => {
     CARDANO_SERVICES_URLS: {
       Mainnet: process.env.CARDANO_SERVICES_URL_MAINNET,
       Preprod: process.env.CARDANO_SERVICES_URL_PREPROD,
-      Preview: process.env.CARDANO_SERVICES_URL_PREVIEW
+      Preview: process.env.CARDANO_SERVICES_URL_PREVIEW,
+      Sanchonet: process.env.CARDANO_SERVICES_URL_SANCHONET
     },
     CEXPLORER_BASE_URL: {
       Mainnet: `${process.env.CEXPLORER_URL_MAINNET}`,
       Preprod: `${process.env.CEXPLORER_URL_PREPROD}`,
-      Preview: `${process.env.CEXPLORER_URL_PREVIEW}`
+      Preview: `${process.env.CEXPLORER_URL_PREVIEW}`,
+      Sanchonet: `${process.env.CEXPLORER_URL_SANCHONET}`
     },
     CEXPLORER_URL_PATHS: {
       Tx: 'tx',

apps/browser-extension-wallet/src/dapp-connector.tsx

@@ -8,6 +8,7 @@ import { CurrencyStoreProvider } from '@providers/currency';
 import { DatabaseProvider, AxiosClientProvider, AppSettingsProvider, AnalyticsProvider } from '@providers';
 import { HashRouter } from 'react-router-dom';
 import { ThemeProvider } from '@providers/ThemeProvider';
+import { UIThemeProvider } from '@providers/UIThemeProvider';
 import { BackgroundServiceAPIProvider } from '@providers/BackgroundServiceAPI';
 import { APP_MODE_POPUP } from './utils/constants';
 import { PostHogClientProvider } from '@providers/PostHogClientProvider';
@@ -27,7 +28,9 @@ const App = (): React.ReactElement => (
                     <AnalyticsProvider>
                       <ThemeProvider>
                         <AddressesDiscoveryOverlay>
-                          <DappConnectorView />
+                          <UIThemeProvider>
+                            <DappConnectorView />
+                          </UIThemeProvider>
                         </AddressesDiscoveryOverlay>
                       </ThemeProvider>
                     </AnalyticsProvider>

apps/browser-extension-wallet/src/features/address-book/context/AddressBookProvider.tsx

@@ -18,7 +18,8 @@ export type AddressRecordParams = Pick<AddressBookSchema, 'address' | 'name' | '
 export const cardanoNetworkMap: { [key in Wallet.ChainName]: Wallet.Cardano.NetworkMagics } = {
   Mainnet: Wallet.Cardano.NetworkMagics.Mainnet,
   Preprod: Wallet.Cardano.NetworkMagics.Preprod,
-  Preview: Wallet.Cardano.NetworkMagics.Preview
+  Preview: Wallet.Cardano.NetworkMagics.Preview,
+  Sanchonet: Wallet.Cardano.NetworkMagics.Sanchonet
 };
 
 const handleRecordValidation = (list: AddressBookSchema[], record: AddressRecordParams) => {

apps/browser-extension-wallet/src/features/dapp/components/DappError.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode, useCallback } from 'react';
+import { Image } from 'antd';
+import { useTranslation } from 'react-i18next';
+import Empty from '../../../assets/icons/empty.svg';
+import styles from './Layout.module.scss';
+import { Button } from '@lace/common';
+
+type DappErrorProps = {
+  title: string;
+  description: ReactNode;
+  closeButtonLabel?: string;
+  onCloseClick?: () => void;
+  containerTestId: string;
+  imageTestId: string;
+  titleTestId: string;
+  descriptionTestId: string;
+  closeButtonTestId: string;
+};
+export const DappError = ({
+  title,
+  description,
+  closeButtonLabel,
+  onCloseClick,
+  containerTestId,
+  imageTestId,
+  titleTestId,
+  descriptionTestId,
+  closeButtonTestId
+}: DappErrorProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const handleClose = useCallback(() => {
+    onCloseClick?.();
+  }, [onCloseClick]);
+
+  return (
+    <div data-testid={containerTestId} className={styles.dappErrorContainer}>
+      <div className={styles.dappErrorContent}>
+        <Image data-testid={imageTestId} preview={false} width={112} src={Empty} />
+        <div className={styles.heading} data-testid={titleTestId}>
+          {title}
+        </div>
+        <div className={styles.description} data-testid={descriptionTestId}>
+          {description}
+        </div>
+      </div>
+      <div className={styles.footer}>
+        <Button data-testid={closeButtonTestId} className={styles.footerBtn} onClick={handleClose}>
+          {closeButtonLabel || t('dapp.dappErrorPage.closeButton')}
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/browser-extension-wallet/src/features/dapp/components/DappTransactionFail.tsx

@@ -24,8 +24,8 @@ export const DappTransactionFail = (): React.ReactElement => {
   }, [analytics]);
 
   return (
-    <div data-testid="dapp-sign-tx-fail" className={styles.noWalletContainer}>
-      <div className={styles.noWalletContent}>
+    <div data-testid="dapp-sign-tx-fail" className={styles.dappErrorContainer}>
+      <div className={styles.dappErrorContent}>
         <Image data-testid="dapp-sign-tx-fail-image" preview={false} width={112} src={Fail} />
         <div data-testid="dapp-sign-tx-fail-heading" className={styles.heading}>
           {t('dapp.sign.failure.title')}

apps/browser-extension-wallet/src/features/dapp/components/DappTransactionSuccess.tsx

@@ -25,8 +25,8 @@ export const DappTransactionSuccess = (): React.ReactElement => {
   }, [analytics]);
 
   return (
-    <div data-testid="dapp-sign-tx-success" className={styles.noWalletContainer}>
-      <div className={styles.noWalletContent}>
+    <div data-testid="dapp-sign-tx-success" className={styles.dappErrorContainer}>
+      <div className={styles.dappErrorContent}>
         <Image data-testid="dapp-sign-tx-success-image" preview={false} width={112} src={Success} />
         <div data-testid="dapp-sign-tx-success-heading" className={styles.heading}>
           {t('browserView.transaction.success.youCanSafelyCloseThisPanel')}

apps/browser-extension-wallet/src/features/dapp/components/Layout.module.scss

@@ -26,15 +26,15 @@
   padding-top: size_unit(4);
 }
 
-.noWalletContainer {
+.dappErrorContainer {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
   width: 100%;
 
-  .noWalletContent {
+  .dappErrorContent {
     padding: 0 size_unit(3);
     display: flex;
     flex: 1;
@@ -45,7 +45,7 @@
     .heading {
       color: var(--text-color-secondary);
       font-size: var(--bodyLarge);
-      font-weight: 800;
+      font-weight: 600;
       letter-spacing: 0.02em;
       line-height: size_unit(3);
       margin-top: size_unit(2);
@@ -55,6 +55,7 @@
     .description {
       color: var(--text-color-secondary);
       font-size: var(--bodySmall);
+      font-weight: 500;
       letter-spacing: 0.02em;
       line-height: size_unit(3);
       margin-top: size_unit(2);

apps/browser-extension-wallet/src/features/dapp/components/collateral/CreateCollateral.tsx

@@ -129,7 +129,10 @@ export const CreateCollateral = ({
               })}
               <div>
                 {renderAmountInfo(
-                  `${Wallet.util.lovelacesToAdaString(collateralTx.fee.toString())} ${cardanoCoin.symbol}`,
+                  Wallet.util.getFormattedAmount({
+                    amount: collateralTx.fee.toString(),
+                    cardanoCoin
+                  }),
                   `${Wallet.util.convertAdaToFiat({
                     ada: Wallet.util.lovelacesToAdaString(collateralTx.fee.toString()),
                     fiat: priceResult?.cardano?.price || 0

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmDRepRegistrationContainer.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfirmDRepRegistration } from '@lace/core';
+import { certificateInspectorFactory, depositPaidWithSymbol, drepIDasBech32FromHash } from './utils';
+import { Wallet } from '@lace/cardano';
+import { useWalletStore } from '@src/stores';
+import { useViewsFlowContext } from '@providers';
+import { Skeleton } from 'antd';
+
+const { CertificateType } = Wallet.Cardano;
+
+export const ConfirmDRepRegistrationContainer = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const {
+    walletUI: { cardanoCoin }
+  } = useWalletStore();
+  const {
+    signTxRequest: { request },
+    dappInfo
+  } = useViewsFlowContext();
+
+  const [certificate, setCertificate] = useState<Wallet.Cardano.RegisterDelegateRepresentativeCertificate>();
+
+  useEffect(() => {
+    const getCertificateData = async () => {
+      const txCertificate = await certificateInspectorFactory<Wallet.Cardano.RegisterDelegateRepresentativeCertificate>(
+        CertificateType.RegisterDelegateRepresentative
+      )(request?.transaction.toCore());
+      setCertificate(txCertificate);
+    };
+
+    getCertificateData();
+  }, [request]);
+
+  if (!certificate) {
+    return <Skeleton loading />;
+  }
+
+  const depositPaidWithCardanoSymbol = depositPaidWithSymbol(certificate.deposit, cardanoCoin);
+
+  // TODO: might be changed in scope of https://input-output.atlassian.net/browse/LW-9034
+  return (
+    <ConfirmDRepRegistration
+      dappInfo={dappInfo}
+      metadata={{
+        depositPaid: depositPaidWithCardanoSymbol,
+        drepId: drepIDasBech32FromHash(certificate.dRepCredential.hash),
+        hash: certificate.anchor?.dataHash,
+        url: certificate.anchor?.url
+      }}
+      translations={{
+        metadata: t('core.DRepRegistration.metadata'),
+        labels: {
+          depositPaid: t('core.DRepRegistration.depositPaid'),
+          drepId: t('core.DRepRegistration.drepId'),
+          hash: t('core.DRepRegistration.hash'),
+          url: t('core.DRepRegistration.url')
+        }
+      }}
+    />
+  );
+};