Updated SEP-6 deposit flow with SEP-38 quote (#362)

* Updated SEP-6 deposit flow * Withdraw flow * Cleanup
stellar · Sep 5, 2024 · ab94ab2 · ab94ab2
1 parent 37a6411
commit ab94ab2
Show file tree

Hide file tree

Showing 17 changed files with 1,529 additions and 610 deletions.
diff --git a/packages/demo-wallet-client/src/App.scss b/packages/demo-wallet-client/src/App.scss
@@ -488,3 +488,28 @@
     text-align: center;
   }
 }
+
+// SEP-6
+.Sep6Selection {
+  padding-left: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__label {
+    margin-top: 0.5rem;
+  }
+}
+
+.AnchorQuote {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__item {
+    &__value {
+      word-break: break-all;
+      line-height: 1.4;
+    }
+  }
+}
diff --git a/packages/demo-wallet-client/src/components/Assets.tsx b/packages/demo-wallet-client/src/components/Assets.tsx
@@ -69,8 +69,8 @@ export const Assets = ({
     allAssets,
     assetOverrides,
     claimAsset,
-    sep6DepositAsset,
-    sep6WithdrawAsset,
+    sep6Deposit,
+    sep6Withdraw,
     sep24DepositAsset,
     sep24WithdrawAsset,
     sep31Send,
@@ -83,8 +83,8 @@ export const Assets = ({
     "allAssets",
     "assetOverrides",
     "claimAsset",
-    "sep6DepositAsset",
-    "sep6WithdrawAsset",
+    "sep6Deposit",
+    "sep6Withdraw",
     "sep24DepositAsset",
     "sep24WithdrawAsset",
     "sep31Send",
@@ -287,50 +287,50 @@ export const Assets = ({
     }
   }, [untrustedAssets.status, dispatch]);
 
-  // SEP-6 Deposit asset
+  // SEP-6 Deposit
   useEffect(() => {
     if (
-      sep6DepositAsset.status === ActionStatus.SUCCESS &&
-      sep6DepositAsset.data.trustedAssetAdded
+      sep6Deposit.status === ActionStatus.SUCCESS &&
+      sep6Deposit.data.trustedAssetAdded
     ) {
-      handleRemoveUntrustedAsset(sep6DepositAsset.data.trustedAssetAdded);
+      handleRemoveUntrustedAsset(sep6Deposit.data.trustedAssetAdded);
     }
 
-    if (sep6DepositAsset.data.currentStatus === TransactionStatus.COMPLETED) {
+    if (sep6Deposit.data.currentStatus === TransactionStatus.COMPLETED) {
       handleRefreshAccount();
       handleFetchClaimableBalances();
     }
 
     setActiveAssetStatusAndToastMessage({
-      status: sep6DepositAsset.status,
+      status: sep6Deposit.status,
       message: "SEP-6 deposit in progress",
     });
   }, [
-    sep6DepositAsset.status,
-    sep6DepositAsset.data.currentStatus,
-    sep6DepositAsset.data.trustedAssetAdded,
+    sep6Deposit.status,
+    sep6Deposit.data.currentStatus,
+    sep6Deposit.data.trustedAssetAdded,
     handleRefreshAccount,
     handleFetchClaimableBalances,
     handleRemoveUntrustedAsset,
     setActiveAssetStatusAndToastMessage,
   ]);
 
-  // SEP-6 Withdraw asset
+  // SEP-6 Withdraw
   useEffect(() => {
     if (
-      sep6WithdrawAsset.status === ActionStatus.SUCCESS &&
-      sep6WithdrawAsset.data.currentStatus === TransactionStatus.COMPLETED
+      sep6Withdraw.status === ActionStatus.SUCCESS &&
+      sep6Withdraw.data.currentStatus === TransactionStatus.COMPLETED
     ) {
       handleRefreshAccount();
     }
 
     setActiveAssetStatusAndToastMessage({
-      status: sep6WithdrawAsset.status,
+      status: sep6Withdraw.status,
       message: "SEP-6 withdrawal in progress",
     });
   }, [
-    sep6WithdrawAsset.status,
-    sep6WithdrawAsset.data.currentStatus,
+    sep6Withdraw.status,
+    sep6Withdraw.data.currentStatus,
     handleRefreshAccount,
     setActiveAssetStatusAndToastMessage,
   ]);

diff --git a/packages/demo-wallet-client/src/components/Balance.tsx b/packages/demo-wallet-client/src/components/Balance.tsx
@@ -2,8 +2,8 @@ import { useDispatch } from "react-redux";
 import { TextLink } from "@stellar/design-system";
 
 import { BalanceRow } from "components/BalanceRow";
-import { initiateDepositAction as initiateSep6SendAction } from "ducks/sep6DepositAsset";
-import { initiateWithdrawAction as initiateSep6WithdrawAction } from "ducks/sep6WithdrawAsset";
+import { initiateDepositAction as initiateSep6SendAction } from "ducks/sep6Deposit";
+import { initiateWithdrawAction as initiateSep6WithdrawAction } from "ducks/sep6Withdraw";
 import { initiateSep8SendAction } from "ducks/sep8Send";
 import { depositAssetAction } from "ducks/sep24DepositAsset";
 import { initiateSendAction } from "ducks/sep31Send";