Factory creation fixes

instances/treasury-factory.near/widget/components/create-treasury/AddMembersStep.jsx

@@ -159,13 +159,15 @@ return (
     <div className="d-flex gap-2">
       <Link
         className="btn w-100"
-        href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=2`}
+        href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=1`}
       >
         Back
       </Link>
       <Link
-        className="btn btn-primary w-100"
-        href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=4`}
+        className={`btn btn-primary w-100 ${
+          members.length > 0 ? "" : "disabled"
+        }`}
+        href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=3`}
       >
         Next
       </Link>

instances/treasury-factory.near/widget/components/create-treasury/CreateAppAccountStep.jsx

@@ -2,6 +2,30 @@ const { formFields, setFormFields } = props;
 
 const [alertMsg, setAlertMsg] = useState(null);
 
+const AccountDisplay = ({ label, prefix, tooltipInfo, noBorder }) => {
+  return (
+    <div className="d-flex flex-column">
+      <div className={!noBorder && "border-bottom"}>
+        <div className="py-2 d-flex gap-2 align-items-center justify-content-between px-3">
+          <div className="h6 mb-0">
+            {label}
+            <OverlayTrigger
+              placement="top"
+              overlay={<Tooltip id="tooltip">{tooltipInfo}</Tooltip>}
+            >
+              <i className="mx-1 bi bi-info-circle text-secondary" />
+            </OverlayTrigger>
+          </div>
+          <div className="h6 mb-0 d-flex align-items-center">
+            <div className="text-primary">{formFields.accountName}</div>
+            <div>{prefix}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 return (
   <>
     <div>
@@ -28,6 +52,20 @@ return (
       }}
     />
 
+    <div className="d-flex flex-column gap-1 border border-1 rounded-3">
+      <AccountDisplay
+        label={"NEAR"}
+        prefix=".near"
+        tooltipInfo="Treasury account"
+      />
+      <AccountDisplay
+        label={"Sputnik DAO"}
+        prefix=".sputnik-dao.near"
+        tooltipInfo="The funds for your treasury will be held there"
+        noBorder
+      />
+    </div>
+
     {(alertMsg[".near"] || alertMsg[".sputnik-dao.near"]) && (
       <Widget
         src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Info`}

instances/treasury-factory.near/widget/components/create-treasury/CreateSputnikAccountStep.jsx

@@ -14,11 +14,7 @@ return (
   <>
     <div>
       <h3>Add Sputnik DAO Display Name</h3>
-      <p>
-        Enter the display name for your treasury's Sputnik DAO account. The
-        funds for your treasury will be held in{" "}
-        <b>{formFields.accountName}.sputnik-dao.near</b>.
-      </p>
+      <p>Enter the display name for your treasury's Sputnik DAO account.</p>
     </div>
 
     <div className="d-flex flex-column gap-3">

instances/treasury-factory.near/widget/components/create-treasury/SummaryStep.jsx

@@ -84,10 +84,17 @@ const PERMISSIONS = {
 
 const storageAccountName = useMemo(() => Storage.privateGet("accountName"));
 
-useEffect(() => {
-  if (storageAccountName) {
-    setShowCongratsModal(true);
-  }
+const checkAccountCreation = async () => {
+  console.log(storageAccountName);
+  const web4 = Near.view(`${storageAccountName}.near`, "web4_get", {
+    request: { path: "/" },
+  });
+
+  if (web4) setShowCongratsModal(true);
+};
+
+useEffect(async () => {
+  if (storageAccountName) checkAccountCreation();
 }, [storageAccountName]);
 
 function filterMemberByPermission(permission) {
@@ -99,8 +106,8 @@ function filterMemberByPermission(permission) {
 function createDao() {
   const createDaoConfig = {
     config: {
-      name: `${formFields.sputnikAccountName}`,
-      purpose: `creating ${formFields.sputnikAccountName} treasury`,
+      name: `${formFields.accountName}`,
+      purpose: `creating ${formFields.accountName} treasury`,
       metadata: "",
     },
     policy: {
@@ -167,9 +174,7 @@ function createDao() {
     },
   ]);
 
-  setTimeout(() => {
-    Storage.privateSet("accountName", formFields.accountName);
-  }, 1000);
+  Storage.privateSet("accountName", formFields.accountName);
 }
 
 const CongratsItem = ({ title, link }) => (
@@ -277,31 +282,13 @@ return (
             </div>
           </div>
         </Section>
-
-        <Section>
-          <div className="d-flex justify-content-between align-items-center">
-            <div>
-              <label>Sputnik Account Display Name</label>
-              <div>
-                {formFields.sputnikAccountName
-                  ? `${formFields.sputnikAccountName}`
-                  : "-"}
-              </div>
-            </div>
-            <Link
-              href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=2`}
-            >
-              <i className="bi bi-pencil" />
-            </Link>
-          </div>
-        </Section>
       </div>
 
       <Section>
         <div className="d-flex justify-content-between align-items-center">
           <h4>Members and permissions</h4>
           <Link
-            href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=3`}
+            href={`/${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/app?page=create-treasury&step=2`}
           >
             <i className="bi bi-pencil" />
           </Link>
@@ -339,11 +326,7 @@ return (
       <button
         className="btn btn-primary w-100"
         onClick={createDao}
-        disabled={
-          !formFields.members ||
-          !formFields.sputnikAccountName ||
-          !formFields.accountName
-        }
+        disabled={!formFields.members || !formFields.accountName}
       >
         Confirm and Create
       </button>
@@ -377,10 +360,7 @@ return (
               </div>
             </div>
           ),
-          onClose: () => {
-            setShowCongratsModal(false);
-            Storage.privateSet("accountName", null);
-          },
+          onClose: () => setShowCongratsModal(false),
         }}
       />
     )}

instances/treasury-factory.near/widget/pages/treasury/Create.jsx

@@ -20,10 +20,6 @@ const STEPS = [
     src={`${widgetBasePath}.CreateAppAccountStep`}
     props={{ formFields, setFormFields }}
   />,
-  <Widget
-    src={`${widgetBasePath}.CreateSputnikAccountStep`}
-    props={{ formFields, setFormFields }}
-  />,
   <Widget
     src={`${widgetBasePath}.AddMembersStep`}
     props={{ formFields, setFormFields }}

instances/widgets.treasury-factory.near/widget/components/TokenAmount.jsx

@@ -33,9 +33,9 @@ return (
         })}
       </span>
       {isNEAR ? (
-        <NearToken width={17} height={17} />
+        <NearToken width={16} height={16} />
       ) : (
-        <img width="17px" height="17px" src={ftMetadata.icon} />
+        <img width="16" height="16" src={ftMetadata.icon} />
       )}
     </div>
     {/* TODO later */}

instances/widgets.treasury-factory.near/widget/components/TokenIcon.jsx

@@ -16,11 +16,11 @@ if (!isNEAR) {
 }
 
 return (
-  <div className="d-flex gap-1 align-items-center h6 mb-0 justify-content-center">
+  <div className="d-flex gap-1 align-items-center amount mb-0 justify-content-center">
     {isNEAR ? (
-      <NearToken width={18} height={18} />
+      <NearToken width={24} height={24} />
     ) : (
-      <img width="18px" height="18px" src={ftMetadata.icon} />
+      <img width="24" height="24" src={ftMetadata.icon} />
     )}
     {ftMetadata.symbol}
   </div>

instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx

@@ -289,7 +289,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
     .custom-truncate {
       display: -webkit-box;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -440,6 +440,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       border-color: var(--border-color) !important;
       color: var(--text-color) !important;
       margin-bottom: 20px;
+
+      .amount {
+        font-size: 14px;
+      }
     }
 
     .table td:first-child {

instances/widgets.treasury-factory.near/widget/pages/dashboard/Portfolio.jsx

@@ -184,7 +184,9 @@ const PortfolioCard = ({
           <div className="d-flex align-items-center gap-2">
             {Icon ? <Icon /> : <img src={src} height={30} width={30} />}
             <div>
-              <div className="h6 mb-0">{symbol}</div>
+              <div style={{ maxWidth: "240px" }} className="h6 mb-0 text-truncate">
+                {symbol}
+              </div>
               <div className="text-sm text-secondary">
                 ${Big(price ?? "0").toFixed(2)}
               </div>

instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx

@@ -66,6 +66,10 @@ const Container = styled.div`
     background: inherit;
   }
 
+  thead td {
+    text-wrap: nowrap;
+  }
+
   table {
     overflow-x: auto;
   }

instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx

@@ -92,6 +92,10 @@ const Container = styled.div`
 
   table {
     overflow-x: auto;
+
+    thead td {
+      text-wrap: nowrap;
+    }
   }
 
   .text-warning {

playwright-tests/tests/page.treasury-factory.near.spec.js

@@ -90,13 +90,6 @@ test.describe("admin connected", function () {
     await page.locator(".account-field input").fill(accName);
     await page.locator("a", { hasText: "Next" }).click();
 
-    // create sputnik dao account step
-    await expect(
-      await page.locator("h3", { hasText: "Create Sputnik DAO Account" })
-    ).toBeVisible();
-    await page.locator(".account-field input").fill(accName);
-    await page.locator("a", { hasText: "Next" }).click();
-
     // add members step
     await expect(
       await page.locator("h3", { hasText: "Add Members" })