docs/architecture-overview.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1532px" height="1382px" viewBox="-0.5 -0.5 1532 1382" content="&lt;mxfile&gt;&lt;diagram id=&quot;1NdA2VXjf2__Mh5l2y2V&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
    <defs/>
    <g>
        <rect x="851" y="10" width="350" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 348px; height: 1px; padding-top: 25px; margin-left: 853px;">
                        <div data-drawio-colors="color: #052b65; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 43, 101); line-height: 1.2; pointer-events: all; text-decoration: underline; white-space: normal; overflow-wrap: normal;">
                                <font style="" size="1">
                                    <b style="">
                                        <span style="font-size: 28px;">
                                            Modules OVERVIEW
                                        </span>
                                    </b>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="853" y="29" fill="#052b65" font-family="Helvetica" font-size="12px" text-decoration="underline">
                    Modules OVERVIEW
                </text>
            </switch>
        </g>
        <rect x="671" y="0" width="160" height="70" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 158px; height: 1px; padding-top: 7px; margin-left: 673px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 131 42" height="42" width="131">
                                    <path fill="#052B65" d="M32.827 3.134c2.49-.457 11.8-2.167 12.214.747.425 2.983-3.412 7.098-7.426 8.947a3.64 3.64 0 0 0-.588.367 4.428 4.428 0 0 1-.483.314c-.632.338-1.008 1.182-.916 1.944v10.66c-3.165-2.19-7.818-3.553-13.091-3.553-5.274 0-9.926 1.363-13.092 3.553v-10.66c.093-.761-.284-1.606-.916-1.944a4.429 4.429 0 0 1-.482-.314c-.189-.135-.377-.27-.589-.367C3.444 10.98-.392 6.864.032 3.881.447.967 9.76 2.677 12.247 3.134c.198.036.353.065.456.082.072.012.14-.048.125-.119-.143-.704-.247-2.61 1.126-3.023.877-.264 1.456.223 1.8.715.153.22.613 1.173.899 1.835.154.357.513.88.907.87a16.933 16.933 0 0 1 4.977-.76c1.661 0 3.322.253 4.976.76.394.01.753-.513.907-.87.286-.662.746-1.615.9-1.835.343-.492.922-.979 1.8-.715 1.372.413 1.268 2.319 1.125 3.023-.014.07.053.131.125.12l.457-.083ZM20.56 14.936c.046-.27-.395-.954-1.772-1.883a11.476 11.476 0 0 0-3.158-1.464 2.584 2.584 0 0 0-.81-.117c-.5.019-.98.187-1.4.484-.561.383-.95.895-1.067 1.556-.12.661.068 1.273.461 1.822.292.42.684.74 1.147.925.255.102.53.147.803.164 1.166.07 2.344-.034 3.476-.314 1.617-.41 2.27-.905 2.32-1.173Zm10.552 1.323a2.54 2.54 0 0 0 1.147-.925c.394-.55.581-1.16.461-1.821-.117-.662-.505-1.174-1.066-1.557-.42-.297-.9-.466-1.4-.484a2.59 2.59 0 0 0-.811.117c-1.12.325-2.19.82-3.157 1.464-1.377.929-1.818 1.613-1.773 1.883.051.268.703.763 2.32 1.173 1.133.28 2.311.385 3.476.314.274-.017.549-.062.803-.164Z" clip-rule="evenodd" fill-rule="evenodd"/>
                                    <path fill="#052B65" d="M6.94 33.167c0-4.879 6.983-8.833 15.597-8.833 8.613 0 15.596 3.954 15.596 8.833 0 4.878-6.983 8.833-15.596 8.833-8.614 0-15.596-3.955-15.596-8.833Zm5.4-.55c.238 1.453 1.48 2.093 2.815 1.453a3.834 3.834 0 0 0 2.233-3.275c-.006-.749-.409-.461-.907-.106-.665.474-1.5 1.07-1.78-.53-.49-2.797-2.623.902-2.362 2.458Zm17.578 1.453c1.335.64 2.577 0 2.816-1.453.26-1.556-1.871-5.255-2.362-2.458-.28 1.6-1.115 1.004-1.78.53-.498-.355-.9-.643-.906.106a3.833 3.833 0 0 0 2.232 3.275Z" clip-rule="evenodd" fill-rule="evenodd"/>
                                    <path fill="#052B65" d="M54.985 9.267c.504-.429 1.367-.644 2.59-.644h10.626c1.224 0 2.217-.99 2.217-2.211A2.215 2.215 0 0 0 68.2 4.2H57.758c-5.806 0-8.71 2.353-8.71 7.058v.16c0 2.306.71 4.045 2.128 5.218 1.418 1.173 3.612 1.76 6.582 1.76h10.444c1.224 0 2.217-.99 2.217-2.212a2.215 2.215 0 0 0-2.218-2.212H57.577c-1.21 0-2.07-.214-2.58-.643-.512-.43-.767-1.073-.767-1.93v-.162c0-.884.252-1.54.756-1.97ZM89.981 4.26l-2.526 4.364h1.268c1.223 0 2.087.214 2.591.643.504.43.756 1.086.756 1.97v.162c0 .858-.255 1.5-.766 1.93-.511.429-1.37.643-2.58.643h-4.365l-2.56 4.424h6.743c2.97 0 5.164-.587 6.582-1.76 1.418-1.173 2.127-2.912 2.127-5.217v-.161c0-4.297-2.428-6.625-7.27-6.998Zm-4.515 4.363L88.028 4.2h-6.52c-5.806 0-8.71 2.353-8.71 7.058v.16c0 2.306.71 4.045 2.128 5.218 1.139.942 2.787 1.5 4.928 1.684l2.517-4.348h-1.044c-1.21 0-2.07-.214-2.58-.643-.512-.43-.767-1.073-.767-1.93v-.162c0-.884.252-1.54.756-1.97.504-.429 1.368-.644 2.59-.644M128.399 4.2c-.846 0-1.638.42-2.11 1.12l-2.507 3.713a2.549 2.549 0 0 1-4.089.179l-2.676-3.3a2.548 2.548 0 0 0-3.956 0l-2.676 3.3a2.549 2.549 0 0 1-4.089-.179L103.79 5.32a2.547 2.547 0 0 0-2.111-1.12c-2.046 0-3.255 2.287-2.1 3.971l6.262 9.12a2.549 2.549 0 0 0 4.084.155l3.13-3.89a2.549 2.549 0 0 1 3.969 0l3.13 3.89a2.549 2.549 0 0 0 4.084-.155l6.261-9.12c1.156-1.684-.053-3.971-2.1-3.971ZM53.977 37.925c2.402 0 4.65-1.36 4.65-3.924 0-2.603-1.97-3.254-4.306-4.163-1.742-.67-2.986-1.14-2.976-2.48.01-1.3 1.177-2.018 2.469-2.018 1.053 0 2.278.45 3.388 1.359l1.024-1.321c-1.32-1.053-2.862-1.637-4.403-1.627-2.383.01-4.249 1.598-4.249 3.684 0 2.403 2.096 3.293 4.154 4.058 1.856.699 3.12 1.12 3.12 2.69 0 1.33-1.149 2.124-2.852 2.124a5.046 5.046 0 0 1-3.867-1.847l-1.081 1.311a6.697 6.697 0 0 0 4.929 2.154Zm18.135-9.657-2.43 7.13h-.039l-2.201-7.13h-1.378l-2.173 7.12h-.038l-2.43-7.12h-1.618l3.311 9.532h1.465l2.153-6.948h.038l2.144 6.948h1.502l3.312-9.532h-1.618Zm10.48 0v1.407h-.038c-.795-.995-1.972-1.522-3.273-1.522-2.7 0-4.67 2.125-4.67 4.939 0 2.928 2.047 4.833 4.679 4.833 1.407 0 2.574-.613 3.35-1.637h.019V37.8h1.521v-9.54l-1.588.01Zm-3.149 8.202c-1.943 0-3.215-1.445-3.215-3.369 0-2.124 1.416-3.503 3.234-3.503 1.828 0 3.187 1.541 3.187 3.503 0 2.02-1.493 3.369-3.206 3.369ZM92 28.153c-1.293 0-2.45.527-3.245 1.522h-.038v-1.407h-1.589v13.408h1.58v-5.283h.038c.765.967 1.894 1.541 3.244 1.541 2.632 0 4.68-1.914 4.68-4.833 0-2.823-1.972-4.948-4.67-4.948Zm-.163 8.326c-1.685 0-3.178-1.349-3.178-3.368 0-1.962 1.36-3.503 3.159-3.503 1.808 0 3.225 1.378 3.225 3.503 0 1.923-1.273 3.368-3.216 3.368h.01Z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="673" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px"></text>
            </switch>
        </g>
        <rect x="1159.75" y="210" width="200" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 235px; margin-left: 1161px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    mainMenu
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1260" y="239" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    mainMenu
                </text>
            </switch>
        </g>
        <rect x="671" y="85" width="20" height="20" rx="3" ry="3" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 95px; margin-left: 672px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="681" y="99" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold"></text>
            </switch>
        </g>
        <rect x="671" y="115" width="20" height="20" rx="3" ry="3" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 125px; margin-left: 672px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="681" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold"></text>
            </switch>
        </g>
        <rect x="671" y="145" width="20" height="20" rx="3" ry="3" fill="#f8cecc" stroke="#b85450" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 155px; margin-left: 672px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="681" y="159" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold"></text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 95px; margin-left: 703px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
                                Current module
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="703" y="99" fill="#000000" font-family="Helvetica" font-size="12px">
                    Current module
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 125px; margin-left: 703px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
                                Suggested to add
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="703" y="129" fill="#000000" font-family="Helvetica" font-size="12px">
                    Suggested to add
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 155px; margin-left: 703px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
                                Suggested to remove
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="703" y="159" fill="#000000" font-family="Helvetica" font-size="12px">
                    Suggested to remove
                </text>
            </switch>
        </g>
        <path d="M 1 700 L 281 700 L 281 790 L 161 790 L 281 820 L 141 790 L 1 790 Z" fill="#fff2cc" stroke="#d6b656" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 745px; margin-left: 2px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    <b>
                                        misc
                                    </b>
                                    (renamed common) contains some general utils that don't fit any other package. Periodically we can review if it's too big, and if we can group things inside to a new package.
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="141" y="749" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    misc (renamed common) contains some general ut...
                </text>
            </switch>
        </g>
        <rect x="1159.75" y="80" width="205" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 203px; height: 1px; padding-top: 105px; margin-left: 1161px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    application
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1262" y="109" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    application
                </text>
            </switch>
        </g>
        <rect x="316" y="430" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 460px; margin-left: 317px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    components
                                    <br/>
                                    <span style="font-weight: 400;">
                                        Exposes some reusable layout components or reusable components like Page, Buttons, Widget, Tabs, ..
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="421" y="464" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    components...
                </text>
            </switch>
        </g>
        <rect x="316" y="514" width="210" height="62" rx="9.3" ry="9.3" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 545px; margin-left: 317px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    form
                                    <br/>
                                    <span style="font-weight: normal;">
                                        Reusable form comonents
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="421" y="549" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    form...
                </text>
            </switch>
        </g>
        <rect x="296" y="410" width="260" height="190" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 395px; margin-left: 421px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Basic components (UI building blocks)
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="421" y="399" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Basic components (UI building blocks)
                </text>
            </switch>
        </g>
        <rect x="1201" y="583.5" width="280" height="350" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <rect x="1231" y="603.5" width="210" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 634px; margin-left: 1232px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    wallet
                                    <br/>
                                    <span style="font-weight: normal;">
                                        connect, connect widget, ...
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1336" y="637" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    wallet...
                </text>
            </switch>
        </g>
        <rect x="1231" y="691.5" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 722px; margin-left: 1232px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    transactions
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handles transactions, its state and presentation
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1336" y="725" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    transactions...
                </text>
            </switch>
        </g>
        <rect x="1231" y="848.5" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 879px; margin-left: 1232px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    prices
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handle presentaion, state and retrieval of token/ prices, usd prices, and quotes
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1336" y="882" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    prices...
                </text>
            </switch>
        </g>
        <rect x="1231" y="771.5" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 802px; margin-left: 1232px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    gas
                                    <br/>
                                    <span style="font-weight: 400;">
                                        Handle gas estimations, presentation of gas prices
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1336" y="805" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    gas...
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 565px; margin-left: 1346px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Core modules
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1346" y="569" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Core modules
                </text>
            </switch>
        </g>
        <rect x="316" y="780" width="210" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 810px; margin-left: 317px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    misc
                                    <br/>
                                    <span style="font-weight: normal;">
                                        General utils and components
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="421" y="814" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    misc...
                </text>
            </switch>
        </g>
        <rect x="291" y="750" width="260" height="110" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 735px; margin-left: 416px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Other
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="416" y="739" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Other
                </text>
            </switch>
        </g>
        <rect x="756" y="1050" width="310" height="260" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <rect x="806" y="1230" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1260px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    utm
                                    <br/>
                                    <span style="font-weight: normal;">
                                        Handle UTM codes
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="1264" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    utm...
                </text>
            </switch>
        </g>
        <rect x="806" y="1070" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1100px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    appData
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handles the meta-data associated with the order
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="1104" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    appData...
                </text>
            </switch>
        </g>
        <rect x="806" y="1150" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1180px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    affiliate
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handle state and presentation of affiliate program
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="1184" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    affiliate...
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1035px; margin-left: 911px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    appData
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="1039" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    appData
                </text>
            </switch>
        </g>
        <rect x="1211" y="1030" width="320" height="350" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <rect x="1261" y="1048" width="210" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1078px; margin-left: 1262px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    tokens
                                    <br/>
                                    <span style="font-weight: normal;">
                                        ERC20 balances, approvals, and presentations
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1366" y="1082" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    tokens...
                </text>
            </switch>
        </g>
        <rect x="1261" y="1128" width="210" height="55" rx="8.25" ry="8.25" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1156px; margin-left: 1262px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    tokenLists
                                    <br/>
                                    <span style="font-weight: 400;">
                                        Handles the token lists
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1366" y="1159" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    tokenLists...
                </text>
            </switch>
        </g>
        <rect x="1261" y="1205" width="210" height="55" rx="8.25" ry="8.25" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1233px; margin-left: 1262px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    tokenImages
                                    <br/>
                                    <span style="font-weight: 400;">
                                        present token images
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1366" y="1236" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    tokenImages...
                </text>
            </switch>
        </g>
        <rect x="1261" y="1280" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1310px; margin-left: 1262px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    cowToken
                                    <br/>
                                    <span style="font-weight: 400;">
                                        Handle claimings of cow tokens, and other $COW logics
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1366" y="1314" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    cowToken...
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1015px; margin-left: 1371px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Token modules
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1371" y="1019" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Token modules
                </text>
            </switch>
        </g>
        <rect x="751" y="590" width="320" height="350" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <rect x="806" y="680.5" width="210" height="62" rx="9.3" ry="9.3" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 712px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    swap
                                    <span style="font-weight: normal;">
                                        <br/>
                                        Handles the swap widget and flows
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="715" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    swap...
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 575px; margin-left: 921px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Trading modules
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="921" y="579" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Trading modules
                </text>
            </switch>
        </g>
        <rect x="806" y="604" width="210" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 634px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    trade
                                    <br/>
                                    <span style="font-weight: 400;">
                                        Abstract all trading widgets, shared logic
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="638" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    trade...
                </text>
            </switch>
        </g>
        <rect x="806" y="760" width="210" height="62" rx="9.3" ry="9.3" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 791px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    limitOrder
                                    <span style="font-weight: normal;">
                                        <br/>
                                        Handles the limit order widget and flows
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="795" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    limitOrder...
                </text>
            </switch>
        </g>
        <rect x="806" y="836" width="210" height="62" rx="9.3" ry="9.3" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 867px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    twap
                                    <span style="font-weight: normal;">
                                        <br/>
                                        Handles the twap order widget and flows
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="871" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    twap...
                </text>
            </switch>
        </g>
        <rect x="806" y="305" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 335px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    cancelOrder
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handles, and present order cancelations
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="339" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    cancelOrder...
                </text>
            </switch>
        </g>
        <rect x="751" y="290" width="320" height="180" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <rect x="806" y="380.5" width="210" height="62" rx="9.3" ry="9.3" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 412px; margin-left: 807px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    wrapNative
                                    <span style="font-weight: normal;">
                                        <br/>
                                        Handle WETH logics, like wrap, unwrap and its presentation
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="911" y="415" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    wrapNative...
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 275px; margin-left: 921px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <font style="font-size: 16px;">
                                    Helper Trading modules
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="921" y="279" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Helper Trading modules
                </text>
            </switch>
        </g>
        <path d="M 921 560 L 921 476.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 921 471.12 L 924.5 478.12 L 921 476.37 L 917.5 478.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 1071 761.41 L 1194.63 758.64" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 1199.88 758.53 L 1192.96 762.18 L 1194.63 758.64 L 1192.81 755.18 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 911 940 L 911 1063.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 911 1068.88 L 907.5 1061.88 L 911 1063.63 L 914.5 1061.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="341" y="1012.5" width="210" height="60" rx="9" ry="9" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1043px; margin-left: 342px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    account
                                    <br/>
                                    <span style="font-weight: normal;">
                                        Account details
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="446" y="1046" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    account...
                </text>
            </switch>
        </g>
        <rect x="341" y="1172.5" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1203px; margin-left: 342px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    activity
                                    <br/>
                                    <span style="font-weight: normal;">
                                        present the recent actitiby
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="446" y="1206" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    activity...
                </text>
            </switch>
        </g>
        <rect x="341" y="1092.5" width="210" height="60" rx="9" ry="9" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 1123px; margin-left: 342px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    notifications
                                    <br/>
                                    <span style="font-weight: normal;">
                                        handles toasts, and other notifications
                                    </span>
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="446" y="1126" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    notifications...
                </text>
            </switch>
        </g>
        <rect x="291" y="1002.5" width="310" height="260" fill="none" stroke="#000000" stroke-width="2" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 985px; margin-left: 446px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap;">
                                <span style="font-size: 16px;">
                                    UI modules
                                </span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="446" y="989" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    UI modules
                </text>
            </switch>
        </g>
        <path d="M 751 778.06 L 557.35 793.87" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 552.11 794.3 L 558.81 790.24 L 557.35 793.87 L 559.38 797.22 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 751 647.82 L 561.14 508.76" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 556.9 505.66 L 564.62 506.97 L 561.14 508.76 L 560.48 512.62 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 751 891.45 L 606 1006.05" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 601.88 1009.31 L 605.2 1002.22 L 606 1006.05 L 609.54 1007.71 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 1071 918.04 L 1206.4 1047.55" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 1210.19 1051.18 L 1202.71 1048.87 L 1206.4 1047.55 L 1207.55 1043.82 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="1159.75" y="145" width="201.25" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 199px; height: 1px; padding-top: 170px; margin-left: 1161px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                <font color="#000000">
                                    governance
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1260" y="174" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    governance
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>